A data table that just
works out of the box
Sorting, pagination, row selection, theming, expandable rows, all included. No boilerplate. No styling work. No $999 license.
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
| TanStack Table | AG Grid Community | This library | |
|---|---|---|---|
| Setup effort | High (headless) | Medium | Low |
| Styling required | Yes | No | No |
| Built-in pagination | DIY | ✓ | ✓ |
| Built-in sorting | DIY | ✓ | ✓ |
| Row selection | DIY | ✓ | ✓ |
| Expandable rows | DIY | ✗ | ✓ |
| Zero peer deps | ✓ | ✗ | ✓ |
| Price | Free | Free | Free |
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.