A simple but flexible React data table. Working table in 10 lines. Sorting, selection, pagination, expandable rows, and theming are opt-in props. No atomic HTML table knowledge required.
react-data-table-component sits between "render everything yourself" headless toolkits and full "configure-the-grid" frameworks. It's for cases where the table is a means, not the product: admin panels, dashboards, internal tools, MVPs. If you need an Excel clone or a 100k-row analytics grid, there are better-suited libraries for that.
import DataTable from 'react-data-table-component';
const columns = [
{ name: 'Title', selector: row => row.title, sortable: true },
{ name: 'Year', selector: row => row.year, sortable: true },
{ name: 'Director', selector: row => row.director },
];
export default function Movies() {
return <DataTable columns={columns} data={data} pagination />;
}- Sorting, row selection, expandable rows, and pagination (all opt-in props)
- Themeable via CSS variables; deeply customizable via
customStyles - Accessible (
role,aria-sort,aria-selected, keyboard navigation) - Responsive (x-scroll / flex)
- TypeScript types bundled
- SSR-safe; ships
"use client"for Next.js App Router (import directly into a Server Component file) - Headless hooks exported for full markup/style control when you outgrow the defaults
The documentation contains information about installation, usage and contributions.
React Data Table Component is maintained by one person and downloaded ~200k times a week. If your team ships products with it, your support keeps it maintained, bug-free, and moving forward.
Sponsoring puts your company logo in front of ~200k developers a week: in the README, the docs site, and every release. It's the right move if your team depends on this library and you want it to keep improving.
| Tier | Price/month | Perk |
|---|---|---|
| ☕ Supporter | $5 | Your name in the README supporters list |
| 🎗 Backer | $20 | Name + link in README |
| 🥉 Bronze | $100 | Small logo in README + docs site footer |
| 🥈 Silver | $200 | Medium logo in README + docs site sidebar |
| 🥇 Gold | $500 | Large logo in README + hero spot on reactdatatable.com. Limited to 3. |
Open a GitHub issue. Priority support is available for teams that sponsor the project.
Become a Gold Sponsor and your logo goes here.
Thank you to our recurring backers:
- Rich Tillman
