material-table React: Complete tutorial, examples, and CRUD setup

material-table React: Complete tutorial, examples, and CRUD setup

Short answer: material-table is a feature-rich React table component built on Material-UI (MUI) that provides sorting, filtering, pagination, inline editing, and customizable rendering out of the box. Use it when you need an interactive React data table with minimal boilerplate.

This article walks through installation, a minimal setup, editable rows (CRUD), pagination and filtering patterns, plus performance and styling tips. Code samples are concise and production-minded so you can paste, adapt, and ship.

If you want a companion walk-through and deeper examples, check the hands-on tutorial: material-table React tutorial.

Installation and initial setup for material-table in React

To get started with material-table you need React and Material-UI (MUI). The project typically depends on @mui/material (or the v4 @material-ui/core in legacy stacks). Install with npm or yarn and confirm peer dependency versions before you proceed.

Basic install commands (MUI v5):

npm install material-table @mui/material @emotion/react @emotion/styled
# or
yarn add material-table @mui/material @emotion/react @emotion/styled

After installation, ensure your app is wrapped with MUI’s theme context if you override defaults. If you prefer the legacy Material-UI v4, adapt package names accordingly. For a full step-by-step setup and examples, see the linked tutorial above.

• Step 1: Install dependencies
• Step 2: Import MaterialTable and MUI theme (if needed)
• Step 3: Render table with columns and data

Basic material-table example and configuration

The simplest material-table example uses columns and data props. Columns define headers and field accessors; data can be a static array or a function for async/server-side queries. Rendering a quick table takes minutes and yields sorting, pagination and built-in localization.

Example: a minimal React table component using material-table:

import MaterialTable from "material-table";

const columns = [
  { title: "Name", field: "name" },
  { title: "Email", field: "email" },
  { title: "Role", field: "role" }
];

const data = [
  { name: "Alice", email: "alice@example.com", role: "Admin" },
  { name: "Bob", email: "bob@example.com", role: "User" }
];

function UsersTable() {
  return <MaterialTable title="Users" columns={columns} data={data} />;
}

This example already gives you pagination, column sorting, and a responsive layout. For more control, material-table exposes props such as options (pageSize, filtering, exportButton), detailPanel, and actions to add buttons per row.

To use the table as a React data table Material-UI component within larger apps, combine it with context, theming, and error boundaries for robust UX.

Editing, CRUD and row-level operations

material-table supports inline editing with the editable prop. Implement onRowAdd, onRowUpdate and onRowDelete to connect the UI to your persistence layer. You can operate optimistically (update UI immediately) or wait for server responses before committing changes.

Example: editable table callbacks (synchronous mock):

<MaterialTable
  title="Editable Users"
  columns={columns}
  data={data}
  editable={{
    onRowAdd: newData => new Promise(resolve => {
      // call API to add, then resolve
      resolve();
    }),
    onRowUpdate: (newData, oldData) => new Promise(resolve => { resolve(); }),
    onRowDelete: oldData => new Promise(resolve => { resolve(); })
  }}
/>

When integrating with a backend, return a promise that resolves after your API call. For optimistic updates, update local state first and rollback if the server returns an error. For critical data, prefer waiting for server confirmation to avoid inconsistency.

A common pattern is to centralize CRUD calls in a service layer and provide optimistic UI updates with toasts for success/failure. This improves perceived performance and keeps the data flow maintainable.

Filtering, sorting, pagination, and server-side data

material-table can operate client-side with a static data array or server-side using the data prop as an async function. For large datasets, server-side pagination and filtering are essential to keep the UI snappy and bandwidth low.

Server-side usage (query-based):

<MaterialTable
  title="Server data"
  columns={columns}
  data={query => fetch(`/api/users?search=${query.search}&page=${query.page}&pageSize=${query.pageSize}`)
    .then(response => response.json())
    .then(result => ({
      data: result.items,
      page: result.page,
      totalCount: result.total
    }))
  }
/>

In this pattern material-table sends paging, sorting and filtering parameters in the query object. Your backend should accept those parameters and return an object with data, page and totalCount. This enables precise server-side filtering, sorting and pagination integration for large data grids.

Use server-side filtering and debouncing for text inputs to prevent excessive API calls. For advanced requirements, implement column-level filters, custom filter components, and remote multi-column search on the backend.

Performance, styling, and production best practices

For performance, avoid re-creating columns and data on every render—memoize them with useMemo. If you render thousands of rows, consider virtualization libraries (react-window/react-virtualized) or switch to a dedicated data grid like MUI DataGrid for heavy workloads.

Styling and customization: material-table exposes components and options for overriding cell rendering, row styles, and action buttons. Use the components prop to swap internal parts, or pass style functions to options.rowStyle to apply conditional styling.

Best practices checklist:
– Use useMemo for columns and data transformations.
– Implement server-side pagination for large datasets.
– Add accessibility attributes and keyboard navigation tests.
– Keep business logic out of the component and call an API service for CRUD.

Semantic core (expanded keywords and clusters)

Quick integration links and recommended reading

For practical, step-by-step examples and extended feature demos see this hands-on guide: material-table React tutorial. For MUI core docs and theming: React Material-UI table docs.

FAQ

How do I install material-table in a React project?

Install via npm or yarn and include required MUI packages. Example: npm i material-table @mui/material @emotion/react @emotion/styled. Then import MaterialTable and, if applicable, wrap your app in MUI ThemeProvider to apply custom themes.

Can material-table handle server-side pagination and filtering?

Yes. Use the data prop as an async function that receives query (page, pageSize, search, orderBy, orderDirection) and return an object with data, page and totalCount. Implement the corresponding query handling on the server to enable remote pagination and filters.

How do I enable row editing and CRUD with material-table?

Use the editable prop with onRowAdd, onRowUpdate and onRowDelete callbacks. Each should return a Promise; resolve after your API call completes. Choose optimistic updates for faster UX or wait for server confirmation for stronger consistency.

If you want an extended example or a customized snippet (remote editing, file export, or virtualized rows), tell me which feature to prioritize and I’ll produce a ready-to-drop-in code sample tailored to your stack.

Related resources:
material-table React tutorial |
React data table Material-UI docs