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 has been actively maintained since 2018 and is downloaded ~215k 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 ~215k 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 + listed in the Backers section on reactdatatable.com |
| 🥉 Bronze | $100 | Priority issue triage + small logo in README + docs site footer |
| 🥈 Silver | $200 | Priority issue triage + medium logo in README + docs site sidebar |
| 🥇 Gold | $500 | Priority issue triage + direct maintainer line + large logo in README + hero spot on reactdatatable.com. Limited to 3. |
Available as part of the Tidelift Subscription.
The maintainer of react-data-table-component and thousands of other packages are working with Tidelift to deliver commercial support and maintenance for the open source dependencies you use to build your applications. Save time, reduce risk, and improve code health, while paying the maintainers of the exact dependencies you use. Learn more.
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