mui-datatables

Install the mui-datatables package using npm:

npm install mui-datatables --save

If your project does not already have Material UI (MUI) v5 and its icon pack installed, you must also install them:

npm --save install @mui/material @emotion/react @emotion/styled @mui/icons-material

Expandable rows allow users to view additional details for a specific row. Enable this via the options object.

Key Options

• expandableRows (boolean): Enables the feature.
• expandableRowsHeader (boolean): Shows/hides the 'expand all/collapse all' header (default: true).
• expandableRowsOnClick (boolean): If true, clicking the row itself triggers expansion. If false, only the expand icon works.
• isRowExpandable (function): A custom function to determine if a specific row can be expanded. (dataIndex, expandedRows) => boolean.
• renderExpandableRow (function): The component used to render the expanded content. (rowData, rowMeta) => React Component.
• rowsExpanded (array): A user-provided array of dataIndex values representing currently expanded rows.

To handle large datasets where pagination, filtering, and sorting are performed on a remote server, set serverSide: true in your options and use the onTableChange callback to trigger API requests.

onTableChange provides the action and tableState to help you construct the correct request to your backend.

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

The responsive option no longer controls table height. Height is now managed via tableBodyHeight and tableBodyMaxHeight. The responsive option now accepts the following modes:

• vertical: Replaces "stacked" mode. Handles long text strings and alignment correctly.
• standard: Replaces "scrollMaxHeight" mode.
• simple: A new design mode.

Note: Legacy inputs like stacked or scrollMaxHeight still work but are being phased out.

The selectToolbarPlacement option controls where the selection toolbar appears when rows are selected. Options include:

• none: No select toolbar (equivalent to disableToolbarSelect: true).
• replace (default): Replaces the normal toolbar.
• above: Renders the select toolbar above the normal toolbar.

The table includes a built-in download feature for CSV files. You can control its visibility and the output format via the options object.

Visibility

• download (boolean | string):
  • true: Button is visible and clickable.
  • false: Button is not visible.
  • 'disabled': Button is visible, but not clickable.

Output Configuration

• downloadOptions (object):
  • filename (string): Name of the exported file.
  • separator (string): Character used to separate values.
  • filterOptions (object):
    • useDisplayedColumnsOnly (boolean)
    • useDisplayedRowsOnly (boolean)

Nested data access (e.g., using dots in column names like phone.cell) is now disabled by default. To enable it, provide a non-empty string to the enableNestedDataAccess option.

Example: enableNestedDataAccess: '.' allows a column named phone.cell to access data from { phone: { cell: "555-5555" } }.

To render a basic table, provide an array of strings for columns and a 2D array for data. You can pass an options object to configure features like filterType.

import MUIDataTable from "mui-datatables";

const columns = ["Name", "Company", "City", "State"];

const data = [
 [
  "Joe James",
  "Test Corp",
  "Yonkers",
  "NY"
 ],
 [
  "John Walsh",
  "Test Corp",
  "Hartford",
  "CT"
 ],
 [
  "Bob Herm",
  "Test Corp",
  "Tampa",
  "FL"
 ],
 [
  "James Houston",
  "Test Corp",
  "Dallas",
  "TX"
 ],
];

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

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