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.
Try it live: switch themes, toggle features
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.
Animate rows
Staggered row entrance and sort-pulse animations. Respects prefers-reduced-motion.
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.
Zero peer deps
styled-components removed in v8. CSS custom properties handle all theming at zero runtime cost.
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
This library is maintained by one person. If your team ships products with it, consider sponsoring. It funds bug fixes and keeps pace with the React ecosystem.