Data Table

Basic example to Material Data Table with pagination. In this example we populated same data which you can replace with actual data. react-md used which is a set of React components and sass files for implementing Google's Material Design.

Prepare Project for Data Table

To create the example project for this example, open command prompt, navigate to a convenient location, and run the command as shown below :

create-react-app example19

import React, { Component } from 'react';
import './App.sass';
import DataTableDemo from './DataTableDemo';

class App extends Component {
  render() {
    return (
      <div className="App">
        <DataTableDemo />

export default App;

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import {
  } from 'react-md';

const headers = Array.from(Array(6)).map((_, i) => `Column ${i + 1}`);
const data = Array.from(Array(350)).map((_, i) => ({
  key: i,
  cell1: "Test"+i+" Test Test1",
  cell2: "Test Test Test2",
  cell3: "Test Test Test3",
  cell4: "Test Test Test4",
  cell5: "Test Test Test5",
  cell6: "Test Test Test6",
const rows = data.length;

class DataTableDemo extends PureComponent {
  static propTypes = {
    mobile: PropTypes.bool.isRequired,

  state = { slicedData: data.slice(0, 10) };

  handlePagination = (start, rowsPerPage) => {
    this.setState({ slicedData: data.slice(start, start + rowsPerPage) });

  render() {
    const { slicedData } = this.state;
    const rowsPerPageLabel = ? 'Rows' : 'Rows per page';
    return (
      <DataTable baseId="simple-pagination">
          <TableRow selectable={false}>
            { => <TableColumn key={header}>{header}</TableColumn>)}
          {{ key, cell1, cell2, cell3, cell4, cell5, cell6 }) => (
            <TableRow key={key} selectable={false}>
        <TablePagination rows={rows} rowsPerPageLabel={rowsPerPageLabel} onPagination={this.handlePagination} />
export default DataTableDemo;

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import WebFontLoader from 'webfontloader';

  google: {
    families: ['Roboto:300,400,500,700', 'Material Icons'],

ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers:

@import '~react-md/src/scss/react-md';

$md-primary-color: $md-teal-500;
$md-secondary-color: $md-lime-a-400;

@include react-md-everything;

Most Helpful This Week