Architectural Patterns for React Data Grids: material-table vs rc-table vs react-table

Building a data grid is one of the most common yet complex tasks in frontend development. You need sorting, filtering, pagination, and responsive layouts, but every project has different design requirements. The ecosystem offers three main paths: a ready-made UI component (material-table), a raw rendering engine (rc-table), and a logic-first hook system (react-table). Let's break down how they actually work in production.

🏗️ Architecture: Complete Widget vs Raw Engine vs Headless Hooks

The fundamental difference lies in what each package gives you out of the box.

material-table is a "batteries-included" component. It wraps Material-UI components to give you a working table instantly. You pass data and configuration, and it renders everything.

// material-table: Complete UI component
import MaterialTable from 'material-table';

function UsersTable() {
  return (
    <MaterialTable
      title="User List"
      columns={[
        { title: 'Name', field: 'name' },
        { title: 'Surname', field: 'surname' }
      ]}
      data={[
        { name: 'John', surname: 'Doe' },
        { name: 'Jane', surname: 'Smith' }
      ]}
      options={{ paging: true, sorting: true }}
    />
  );
}

rc-table is a low-level rendering engine. It handles the <table> tag, rows, and cells, but it doesn't give you a search bar, pagination controls, or even default styling. You must build the UI around it.

// rc-table: Raw rendering engine
import Table from 'rc-table';
import 'rc-table/assets/index.css'; // Basic structural CSS only

function UsersTable() {
  const columns = [
    { title: 'Name', dataIndex: 'name', key: 'name' },
    { title: 'Surname', dataIndex: 'surname', key: 'surname' }
  ];

  const data = [
    { key: 1, name: 'John', surname: 'Doe' },
    { key: 2, name: 'Jane', surname: 'Smith' }
  ];

  // You must build your own pagination and toolbar
  return (
    <div>
      <h3>User List</h3>
      <Table columns={columns} data={data} />
    </div>
  );
}

react-table provides logic via hooks. It doesn't render any HTML. You use its state and functions to build your own table markup, giving you 100% control over the DOM.

// react-table: Headless logic hooks
import {
  useReactTable,
  getCoreRowModel,
  flexRender,
} from '@tanstack/react-table';

function UsersTable({ data }) {
  const columns = [
    { accessorKey: 'name', header: 'Name' },
    { accessorKey: 'surname', header: 'Surname' }
  ];

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  return (
    <table>
      <thead>
        {table.getHeaderGroups().map(headerGroup => (
          <tr key={headerGroup.id}>
            {headerGroup.headers.map(header => (
              <th key={header.id}>
                {flexRender(header.column.columnDef.header, header.getContext())}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody>
        {table.getRowModel().rows.map(row => (
          <tr key={row.id}>
            {row.getVisibleCells().map(cell => (
              <td key={cell.id}>
                {flexRender(cell.column.columnDef.cell, cell.getContext())}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

⚙️ Feature Implementation: Sorting and Filtering

How you add features like sorting reveals the trade-off between convenience and control.

material-table enables sorting via a simple flag. The logic is internal and hidden.

// material-table: Config-driven features
<MaterialTable
  columns={[
    { title: 'Name', field: 'name', sortable: true },
    { title: 'Age', field: 'age', sortable: true }
  ]}
  data={data}
  options={{ sorting: true }} // Global toggle
/>

rc-table requires you to handle the sort state and function yourself, then pass the sorted data back in. It does not manage sort state internally by default.

// rc-table: Manual state management
function SortableTable() {
  const [sortedData, setSortedData] = useState(data);

  const handleSort = (sorter) => {
    const { field, order } = sorter;
    const sorted = [...data].sort((a, b) => {
      if (a[field] < b[field]) return order === 'asc' ? -1 : 1;
      if (a[field] > b[field]) return order === 'asc' ? 1 : -1;
      return 0;
    });
    setSortedData(sorted);
  };

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      sorter: (a, b) => a.name.localeCompare(b.name),
      // You must wire up the onClick to trigger handleSort
    }
  ];

  return <Table columns={columns} data={sortedData} onChange={(pagination, filters, sorter) => handleSort(sorter)} />;
}

react-table uses a plugin system. You import the sorting plugin, add it to the table instance, and then wire up the UI elements to the provided state handlers.

// react-table: Plugin-based logic
import {
  useReactTable,
  getCoreRowModel,
  getSortedRowModel,
  flexRender,
} from '@tanstack/react-table';

function SortableTable({ data }) {
  const columns = [
    {
      accessorKey: 'name',
      header: ({ column }) => (
        <button onClick={() => column.toggleSorting()}>
          Name {column.getIsSorted() ? (column.getIsSorted() === 'asc' ? '🔼' : '🔽') : ''}
        </button>
      ),
    },
  ];

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(), // Enable sorting logic
    state: {
      sorting: [{ id: 'name', desc: false }],
    },
  });

  // Render logic similar to previous example, now with sorted rows
  return <table>...</table>;
}

🎨 Styling and Customization

Your ability to change the look and feel depends on how much of the DOM the library owns.

material-table is tightly coupled to Material-UI. Changing the look often means overriding MUI theme values or using deep CSS selectors, which can break during upgrades.

// material-table: Theme overrides
<MaterialTable
  components={{
    Container: props => <div {...props} style={{ boxShadow: 'none', border: '1px solid #ddd' }} />
  }}
  options={{
    headerStyle: { backgroundColor: '#f5f5f5', fontWeight: 'bold' }
  }}
  data={data}
  columns={columns}
/>

rc-table gives you standard class names (.rc-table-cell, .rc-table-row), but you are responsible for all CSS. It works with any preprocessor or CSS-in-JS solution.

// rc-table: Custom CSS classes
<Table
  columns={columns}
  data={data}
  rowClassName={(record, index) => (index % 2 === 0 ? 'table-row-light' : 'table-row-dark')}
/>

/* Your custom stylesheet */
.table-row-light { background-color: #fff; }
.table-row-dark { background-color: #fafafa; }
.rc-table-cell { padding: 16px; border-bottom: 1px solid #eee; }

react-table allows you to write semantic HTML with any classes you want. There are no library-specific class names to override.

// react-table: Pure semantic HTML
<tr className="custom-row-highlight" style={{ backgroundColor: 'lightblue' }}>
  {row.getVisibleCells().map(cell => (
    <td className="custom-cell-padding" key={cell.id}>
      {flexRender(cell.column.columnDef.cell, cell.getContext())}
    </td>
  ))}
</tr>

⚠️ Maintenance and Ecosystem Reality

A critical architectural decision involves the long-term health of the dependency.

material-table has faced significant maintenance challenges. While widely used, it has struggled to keep pace with major releases of Material-UI (MUI v5+). Developers often encounter peer dependency warnings or broken features when upgrading MUI. For new greenfield projects, relying on a community-maintained wrapper that hasn't seen consistent updates recently poses a risk. If you need a MUI-based grid, the official @mui/x-data-grid is the supported alternative.

rc-table is maintained by the Ant Design team. It is extremely stable because it powers one of the world's most popular UI kits. It rarely breaks, but it also rarely adds high-level features. It is a safe bet for stability but requires more engineering effort.

react-table (now under the TanStack brand) is actively maintained and follows modern React patterns. It is framework-agnostic, meaning the same logic patterns apply if you ever move to Vue or Solid. It is the safest choice for long-term architectural flexibility.

📊 Summary: Key Differences

💡 The Big Picture

material-table is the fast track 🚀. Use it when you need a table working today and your app already uses Material-UI. Just keep an eye on its maintenance status and have a migration plan ready.

rc-table is the foundation 🧱. Use it when you are building your own component library or need a table that looks nothing like standard Bootstrap or Material designs. It gives you the raw blocks without the opinions.

react-table is the engineer's choice 🛠️. Use it when the table is a core part of your application's value proposition. If you need complex interactions, server-side data handling, or a unique design that must be pixel-perfect, the extra code you write for react-table pays off in maintainability and control.

Final Thought: Don't choose a table library based on features alone. Choose based on how much control you need over the HTML and how much time you can spend building UI versus wiring up logic.