material-react-table

What is material-react-table?

The material-react-table npm package is a powerful and flexible data table component for React applications, built with Material-UI. It provides a wide range of features for displaying, sorting, filtering, and editing tabular data.

Basic Table

This code demonstrates how to create a basic table using the material-react-table package. It defines a set of columns and data, and then renders the table with these configurations.

import React from 'react';
import MaterialReactTable from 'material-react-table';

const data = [
  { id: 1, name: 'John Doe', age: 28 },
  { id: 2, name: 'Jane Smith', age: 34 },
];

const columns = [
  { title: 'ID', field: 'id' },
  { title: 'Name', field: 'name' },
  { title: 'Age', field: 'age' },
];

const BasicTable = () => (
  <MaterialReactTable
    columns={columns}
    data={data}
  />
);

export default BasicTable;

Sorting

This code demonstrates how to enable sorting on columns in the material-react-table. By setting the 'sorting' property to true in the column definitions, users can sort the table data by clicking on the column headers.

import React from 'react';
import MaterialReactTable from 'material-react-table';

const data = [
  { id: 1, name: 'John Doe', age: 28 },
  { id: 2, name: 'Jane Smith', age: 34 },
];

const columns = [
  { title: 'ID', field: 'id', sorting: true },
  { title: 'Name', field: 'name', sorting: true },
  { title: 'Age', field: 'age', sorting: true },
];

const SortableTable = () => (
  <MaterialReactTable
    columns={columns}
    data={data}
    options={{ sorting: true }}
  />
);

export default SortableTable;

Filtering

This code demonstrates how to enable filtering on columns in the material-react-table. By setting the 'filtering' property to true in the column definitions, users can filter the table data using input fields in the column headers.

import React from 'react';
import MaterialReactTable from 'material-react-table';

const data = [
  { id: 1, name: 'John Doe', age: 28 },
  { id: 2, name: 'Jane Smith', age: 34 },
];

const columns = [
  { title: 'ID', field: 'id', filtering: true },
  { title: 'Name', field: 'name', filtering: true },
  { title: 'Age', field: 'age', filtering: true },
];

const FilterableTable = () => (
  <MaterialReactTable
    columns={columns}
    data={data}
    options={{ filtering: true }}
  />
);

export default FilterableTable;

Editable Table

This code demonstrates how to create an editable table using the material-react-table package. By setting the 'editable' property in the column definitions, users can edit the table data directly in the table cells.

import React from 'react';
import MaterialReactTable from 'material-react-table';

const data = [
  { id: 1, name: 'John Doe', age: 28 },
  { id: 2, name: 'Jane Smith', age: 34 },
];

const columns = [
  { title: 'ID', field: 'id', editable: 'never' },
  { title: 'Name', field: 'name', editable: 'onUpdate' },
  { title: 'Age', field: 'age', editable: 'onUpdate' },
];

const EditableTable = () => (
  <MaterialReactTable
    columns={columns}
    data={data}
    editable={{
      onRowUpdate: (newData, oldData, resolve) => {
        // Update logic here
        resolve();
      },
    }}
  />
);

export default EditableTable;

What is material-react-table?

What are material-react-table's main functionalities?

Other packages similar to material-react-table