Material-Datatable is a data tables component built on Material-UI V1. It comes with features like filtering, resizable + view/hide columns, search, export to CSV download, printing, selectable rows, pagination, and sorting. On top of the ability to customize styling on most views, there are two responsive modes "stacked" and "scroll" for mobile/tablet devices.

npm install material-datatable --save

Typescript definition included

For a simple table:

import MaterialDatatable from "material-datatable";

const columns = [
    {   
        name: 'Name', 
        field: 'name',
        options: {
            width: 70,
        },
    },
    {
        name: 'Title', 
        field: 'title'
    },
    {
        name: 'Location', 
        field: 'location',
        options: {
            width: 100,
        },
    },
    {
        name: 'Age', 
        field: 'age'
    },
    {
        name: 'Salary', 
        field: 'salary'
    },
    {
        name: 'Veeeeery loooooooooong naaaaaaaaaaame title', 
        field: 'salary',
        options: {
            headerNoWrap: true,
            customBodyRender: (value, tableMeta, updateValue) => {
                return `${value.name} (${value.title})`; 
            }
        },
    }
];
 const data = [
    {name: "Veeeeery loooooooooong naaaaaaaaaaame", title: "Title 1", location: "Location 1", age: 30, salary: 10},
    {name: "Name 2", title: "Title 2", location: "Location 2", age: 31, salary: 11},
];

const options = {
    filterType: 'checkbox',
};

<MaterialDatatable
    title={"Employee List"}
    data={data}
    columns={columns}
    options={options}
/>

Or customize columns:

import MaterialDatatable from "material-datatable";

const columns = [
 {
  name: "Name",
  field: "name",
  options: {
   filter: true,
   sort: true,
  }
 },
 {
  name: "Company",
  field: "company",
  options: {
   filter: true,
   sort: false,
  }
 },
 {
  name: "City",
  field: "city",
  options: {
   filter: true,
   sort: false,
  }
 },
 {
  name: "State",
  field: "state",
  options: {
   filter: true,
   sort: false,
  }
 },
];

const data = [
    {name: "Name 1", title: "Title 1", location: "Location 1", age: 30, salary: 10},
    {name: "Name 2", title: "Title 2", location: "Location 2", age: 31, salary: 11},
];

const options = {
  filterType: 'checkbox',
};

<MaterialDatatable
  title={"Employee List"}
  data={data}
  columns={columns}
  options={options}
/>

Warnings like:

Warning: Material-UI: You are using the typography variant body2 which will be restyled in the next major release.

Can be turned off with follow code:

const theme = createMuiTheme({
    typography: {
        useNextVariants: true
    },
});

ReactDOM.hydrate(
    <MuiThemeProvider theme={theme}>
        <App/>
    </MuiThemeProvider>,
    document.getElementById('react-app')
        

mui/material-ui#12741 (comment)

The component accepts the following props:

On each column object, you have the ability to customize columns to your liking with the 'options' property. Example:

const columns = [
    {
        name: "Name",
        field: "name",
        options: {
            width: 150,
            headerNoWrap: true,
            filter: true,
            sort: false
        }
    },
    ...
];

customHeadRender is called with these arguments:

function(columnMeta: {
  display: enum('true', 'false', 'excluded'),
  filter: bool,
  sort: bool,
  sortDirection: bool,
}, updateDirection: function)

customBodyRender is called with these arguments:

function(value: any, tableMeta: {
  rowIndex: number,
  columnIndex: number,
  columnData: array, // Columns Options object
  rowData: array, // Full row data
  tableData: array, Full table data
  tableState: {
    announceText: null|string,
    page: number,
    rowsPerPage: number,
    filterList: array,
    selectedRows: {
      data: array,
      lookup: object,
    },
    showResponsive: boolean,
    searchText: null|string,
  },
}, updateValue: function)

Using Material-UI theme overrides will allow you to customize styling to your liking. First, determine which component you would want to target and then lookup the override classname. Let's start with a simple example where we will change the background color of a body cell to be red:

import React from "react";
import MaterialDatatable from "material-datatable";
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';

class BodyCellExample extends React.Component {

  getMuiTheme = () => createMuiTheme({
    overrides: {
      MaterialDatatableBodyCell: {
        root: {
          backgroundColor: "#FF0000"
        }
      }
    }
  })

  render() {

    return (
      <MuiThemeProvider theme={this.getMuiTheme()}>
        <MaterialDatatable title={"ACME Employee list"} data={data} columns={columns} options={options} />
      </MuiThemeProvider>
    );

  }
}

If you are looking to work with remote data sets or handle pagination, filtering, and sorting on a remote server you can do that with the following options:

const options = {
  serverSide: true,
  onTableChange: (action, tableState) => {
    this.xhrRequest('my.api.com/tableData', result => {
      this.setState({ data: result });
    });
  }
};

This package decided that the cost of bringing in another library to perform localizations would be too expensive. Instead the ability to override all text labels (which aren't many) is offered through the options property textLabels. The available strings:

const options = {
  ...
  textLabels: {
    body: {
      noMatch: "Sorry, no matching records found",
      toolTip: "Sort",
    },
    pagination: {
      next: "Next Page",
      previous: "Previous Page",
      rowsPerPage: "Rows per page:",
      displayRows: "of",
    },
    toolbar: {
      search: "Search",
      downloadCsv: "Download CSV",
      print: "Print",
      viewColumns: "View Columns",
      filterTable: "Filter Table",
    },
    filter: {
      all: "All",
      title: "FILTERS",
      reset: "RESET",
    },
    viewColumns: {
      title: "Show Columns",
      titleAria: "Show/Hide Table Columns",
    },
    selectedRows: {
      text: "rows(s) selected",
      delete: "Delete",
      deleteAria: "Delete Selected Rows",
    },
  }
  ...
}

The files included in this repository are licensed under the MIT license.

0.2.5 (2018-12-24)

• Avoid crash when changing rows per page

0.2.4 (2018-12-22)

• Fixed bug when multiselect filter crash when filter item is null

0.2.3 (2018-21-21)

• Updated Readme and link to an example

0.2.2 (2018-21-21)

• Added new option for column which can be used just with customBodyRender - "customValue(value)"". For example you added some Link into the column, but still wants to use that column for filtering by some value.
• Added new option for column "customSortValue(value)"". For example you added some data like Date string "Fed 10, 2016" into the column, but still wants to use that column for correct sorting by date.

0.2.1 (2018-11-17)

• Fixed exception when customBodyRender return null

0.1.9 (2018-11-08)

• customBodyRender doesn't require anymore rear field name
• Added warning message in case if column field doesn't exist in DTO

0.1.8 (2018-10-14)

• Fixed readme instructions How to turn off Material UI Typography warnings

0.1.7 (2018-10-14)

• Updated readme with instructions How to turn off Material UI Typography warnings

0.1.6 (2018-10-14)

• Downgrade to "@material-ui/core": "^3.0.2",

0.1.5 (2018-10-14)

• Updated material-ui to the latest version 3.2.1

0.1.4 (2018-10-14)

• Updated material-ui to the latest version 3.0.2
• Removed Deprecated variants for Typography: title => h6,subheading => subtitle1

0.1.3 (2018-10-14)

• Fixed bugs with filter and search by sub level data
• Fixed bugs with download and print

0.1.2 (2018-10-13)

• Added width and headerNoWrap options for columns (table header cell and table body cell)
• Reduced table body cell padding to "4px 8px 4px 8px"

0.1.1 (2018-10-13)

• Updated readme for new link on sandbox

0.1.0 (2018-10-13)

• CustomRenderBody receive full object, not just one field

0.0.9 (2018-10-13)

• updated TS definition for new option usePaperPlaceholder

0.0.8 (2018-10-13)

• added new option usePaperPlaceholder. By default it is true. Can be turned off if you don't need paper placeholder
• moved back to original styles. Need to fix it in future