Material-Table React: setup, CRUD, filtering and practical examples

A compact, opinionated guide for developers who want a fast, editable Material-UI table in React without writing 200 lines of boilerplate. Includes install, example code, filtering/pagination tips and SEO-friendly pointers.

What is material-table and when to pick it

material-table is a React component wrapper that combines Material-UI design with a rich set of table features: sorting, filtering, pagination, inline editing, custom actions, and easy column definitions. It lets you move from an empty page to a usable, interactive table in minutes — which is why it’s popular for admin tools and internal dashboards.

It’s opinionated: columns are defined declaratively, and many features are available out of the box through props. That’s great for speed but can become restrictive if you need extreme customization or super-high performance with thousands of rows.

For references and the canonical source code, check the project repository on GitHub and the Material-UI docs:

• material-table GitHub
• Material-UI (MUI) docs
• Practical tutorial on building feature-rich tables

Installation and minimal setup (getting started)

Start by installing the package and its peer dependencies. Depending on the material-table fork and the MUI version you target, commands differ — here’s a broadly compatible approach for current MUI v5 and common forks:

npm install material-table @mui/material @mui/icons-material
# or
yarn add material-table @mui/material @mui/icons-material

Basic usage is straightforward: import MaterialTable and pass columns + data. The component will render a table with default actions like sorting and paging.

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

export default function MyTable() {
  const columns = [{ title: 'Name', field: 'name' }, { title: 'Age', field: 'age', type: 'numeric' }];
  const data = [{ name: 'Alice', age: 30 }, { name: 'Bob', age: 25 }];

  return <MaterialTable title="Users" columns={columns} data={data} />;
}

Tip: when you see styling quirks, ensure you import MUI’s baseline CSS / ThemeProvider properly. Mixing MUI v4 and v5 packages is a common source of frustration; stick to compatible pairs.

CRUD, editable rows and integrating APIs

material-table exposes editable callbacks (onRowAdd, onRowUpdate, onRowDelete) that expect Promises. This makes integrating async API calls trivial and keeps the UI responsive while you wait for the server.

Example: inline create/update/delete hooked to a REST API. Use optimistic updates for snappy UX, or wait for the server if you need guaranteed consistency.

// simplified example
<MaterialTable
  title="Contacts"
  columns={columns}
  data={data}
  editable={{
    onRowAdd: newData => fetch('/api/contacts', { method:'POST', body:JSON.stringify(newData) }).then(...),
    onRowUpdate: (newData, oldData) => fetch(`/api/contacts/${oldData.id}`, { method:'PUT', body:JSON.stringify(newData) }),
    onRowDelete: oldData => fetch(`/api/contacts/${oldData.id}`, { method:'DELETE' })
  }}
/>

Make sure to handle server validation errors and show clear messages. Because material-table uses Promises, it’s easy to integrate with async/await or modern fetch wrappers (axios, ky).

Filtering, sorting, pagination and performance notes

Filtering and sorting are available client-side by default. For small to medium datasets (a few thousand rows) client-side behaviour is fine, but for large or paginated APIs you should implement server-side filtering and paging.

Enable server-side mode by controlling the data prop: request slices of data from the server when the page, pageSize or filters change. Use the table’s onChangePage / onChangeRowsPerPage / onSearchChange callbacks or the newer query-based data prop (depending on your material-table fork).

const queryData = (query) => new Promise((resolve, reject) => {
  fetch(`/api/items?page=${query.page}&pageSize=${query.pageSize}&search=${query.search}`)
    .then(response => response.json())
    .then(result => resolve({ data: result.items, page: result.page, totalCount: result.total }));
});
...
<MaterialTable data={queryData} />

For extreme scale, consider virtualization + pagination (MUI DataGrid X offers built-in virtualization). material-table is great for developer velocity; for millions of rows, choose a grid built for performance.

Customization, actions and appearance

You’ll quickly want custom row actions, cell renderers, conditional styling, or complex filtering UI. material-table supports custom renderers per column (render), toolbar components, and action buttons for rows and selected rows.

Example custom cell renderer and an action button that opens a drawer or modal. You can pass any React node and wire state or router navigation as needed.

columns = [
  { title: 'Status', field: 'status', render: row => <StatusChip status={row.status}/> }
];
actions = [
  { icon: 'edit', tooltip: 'Edit', onClick: (evt, rowData) => openDialog(rowData) }
];

Remember accessibility: add aria labels to custom buttons and keep focus management for modals to stay keyboard-friendly.

Alternatives and when to switch

If your priority is speed of development and rich features with minimal setup, material-table is a good fit. If you need enterprise features, virtualization and advanced state control for huge datasets, evaluate MUI DataGrid (XGrid) or react-table + custom UI.

Other considerations: long-term maintenance (some forks of material-table vary in activity), compatibility with the latest MUI versions, and the need for server-side rendering. Test the exact fork and version against your environment.

Quick rule of thumb: prototype with material-table; if you hit performance or compatibility walls, migrate to a data-grid optimized for scale.

Practical checklist before production

Before shipping, verify these points: peer dependency versions, accessibility, test coverage for editing flows, server-side pagination and filtering correctness, and graceful error handling for failed CRUD ops.

• Pin exact package versions and test on your target browser matrix.
• Implement server-side pagination/filtering for large datasets.
• Hook up analytics for table actions if the business requires tracking.

Quick example: a fully working small table (copy-paste)

import React, { useState } from 'react';
import MaterialTable from 'material-table';

export default function ExampleTable() {
  const [data, setData] = useState([
    { id: 1, name: 'Alice', role: 'Admin' },
    { id: 2, name: 'Bob', role: 'Editor' }
  ]);
  const columns = [
    { title: 'Name', field: 'name' },
    { title: 'Role', field: 'role' }
  ];

  return (
    <MaterialTable
      title="Team"
      columns={columns}
      data={data}
      editable={{
        onRowAdd: newData => new Promise(resolve => {
          setTimeout(() => {
            setData(prev => [...prev, { id: Date.now(), ...newData }]);
            resolve();
          }, 500);
        }),
        onRowUpdate: (newData, oldData) => new Promise(resolve => {
          setTimeout(() => {
            setData(prev => prev.map(r => (r.id === oldData.id ? newData : r)));
            resolve();
          }, 500);
        }),
        onRowDelete: oldData => new Promise(resolve => {
          setTimeout(() => {
            setData(prev => prev.filter(r => r.id !== oldData.id));
            resolve();
          }, 500);
        })
      }}
    />
  );
}

SEO and voice-search optimization tips for docs and blog posts

To capture feature snippets and voice queries, include short, direct answers to common questions near the top (e.g., “How to install material-table in React? Answer: npm install …”). Use structured data (FAQ schema) — this page includes it — and concise headings that reflect user intent: “Installation”, “CRUD”, “Server-side pagination”.

Use LSI terms naturally (MUI table, editable React table, data grid, inline editing) and write short sentences for voice-readability. Queries like “how to add pagination to material-table” map well to small code snippets ready for copy-paste.

Finally, link to authoritative sources with descriptive anchors: for example, link the anchor “material-table GitHub” to the project repo and “MUI DataGrid” to the official docs (these backlinks help both users and SEO).

Conclusion — TL;DR

material-table provides rapid development of Material-UI-styled tables with built-in editing, filtering and pagination. Ideal for admin UIs and dashboards when you want features fast. For massive datasets or strict performance requirements, evaluate MUI DataGrid or virtualization-first solutions.

Start small: install, render columns/data, add editable callbacks, then switch to server queries when the dataset grows. Keep accessibility and version compatibility in check.

If you want a jumpstart, use the example above and consult the material-table GitHub and the MUI docs for theming and icons.