A working data table
in 10 lines of React
Sorting, pagination, row selection, theming, and expandable rows, all included. No boilerplate. No CSS file. No paid tier.
Working table in 10 lines
No imports, no config, no CSS file. Just data and columns.
import DataTable from 'react-data-table-component';
const columns = [
{ name: 'Name', selector: row => row.name, sortable: true },
{ name: 'Role', selector: row => row.role },
{ name: 'Salary', selector: row => row.salary, right: true },
];
export default function App() {
return <DataTable columns={columns} data={data} pagination />;
}Everything included, nothing to configure
Fully typed
Generic column types inferred from your data. All props exported for easy import.
5 built-in themes
Default, Material, Rounded, Catppuccin, AG Grid, all with full dark mode. Bring your own via createTheme().
Sort & paginate
Client-side and server-side sorting. Configurable pagination or custom pagination components.
Row selection
Multi-select with checkboxes. Select all, per-page, persistent across pages. Controlled via ref.
Expandable rows
Render any component inside an expandable detail panel. Animate open/close with a single prop.
Column filtering
Per-column filter inputs for text, number, and select. Client-side or hook into your own server search.
Column groups
Span headers across multiple columns. Useful for financial and analytical tables.
Resizable columns
Drag column edges to resize. Widths preserved in state, serializable for persistence.
SSR & Next.js ready
Works in Next.js App Router, Remix, and Astro. No useLayoutEffect warnings. Ships "use client" automatically.
How it compares
All four are solid choices. The difference is how much you assemble yourself. This library optimizes for a styled, working table with the least code, not for the largest feature surface.
| TanStack Table | AG Grid Community | MUI X Data Grid | This library | |
|---|---|---|---|---|
| Approach | Headless | Full data grid | Full data grid | Full component |
| Styled table out of the box | You build the UI | ✓ | ✓ | ✓ |
| Sorting, pagination & selection UI | State only | ✓ | ✓ | ✓ |
| Expandable row panels | State only | Enterprise tier | Pro tier | ✓ |
| Dark mode & themes | Bring your own | ✓ built-in | Via MUI theme | 5 built-in, incl. Material |
| Requires a UI framework | No | No | @mui/material + Emotion | No |
| Size (min+gzip) | ~15 KB | ~338 KB | ~117 KB + MUI | ~35 KB |
| Paid tiers | None | Enterprise | Pro & Premium | None |
They're all great at what they do. This one's for when you want a styled, sortable, paginated table working today, with nothing to configure and no tier to upgrade to.
Sizes are min+gzip via Bundlephobia, July 2026 (TanStack v8.21, AG Grid v36, MUI X v9.8).
Sponsors
Actively maintained since 2018. If your team ships products with it, consider sponsoring. It funds bug fixes and keeps pace with the React ecosystem.