https://github.com/jbetancur/react-data-table-component
A responsive table library with built-in sorting, pagination, selection, expandable rows, and customizable styling.
https://github.com/jbetancur/react-data-table-component
react react-components reactjs table
Last synced: about 2 months ago
JSON representation
A responsive table library with built-in sorting, pagination, selection, expandable rows, and customizable styling.
- Host: GitHub
- URL: https://github.com/jbetancur/react-data-table-component
- Owner: jbetancur
- License: apache-2.0
- Created: 2018-03-16T04:31:39.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2025-03-28T22:21:29.000Z (over 1 year ago)
- Last Synced: 2025-05-11T11:09:38.083Z (about 1 year ago)
- Topics: react, react-components, reactjs, table
- Language: TypeScript
- Homepage: https://reactdatatable.com
- Size: 20.1 MB
- Stars: 2,129
- Watchers: 32
- Forks: 419
- Open Issues: 87
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE-OF-CONDUCT.md
Awesome Lists containing this project
- best-of-react - GitHub - 6% open · ⏱️ 09.03.2024): (Data Tables & Grids)
- awesome-react-components - react-data-table - [demo/docs](https://jbetancur.github.io/react-data-table-component/?) - accessible, responsive, themable, declaratively configurable table with sorting, selectable rows, expandable rows, pagination (UI Components / Table)
- awesome-react - react-data-table - Accessible, responsive, themable, declaratively configurable table with sorting, selectable rows, expandable rows, pagination.  (UI Components / Table)
- awesome-react-components - react-data-table - [demo/docs](https://jbetancur.github.io/react-data-table-component/?) - accessible, responsive, themable, declaratively configurable table with sorting, selectable rows, expandable rows, pagination (UI Components / Table)
- awesome-react-components - react-data-table - [demo/docs](https://jbetancur.github.io/react-data-table-component/?) - accessible, responsive, themable, declaratively configurable table with sorting, selectable rows, expandable rows, pagination (UI Components / Table)
- fucking-awesome-react-components - react-data-table - 🌎 [demo/docs](jbetancur.github.io/react-data-table-component/?) - accessible, responsive, themable, declaratively configurable table with sorting, selectable rows, expandable rows, pagination (UI Components / Table)
- stars - react-data-table-component - in sorting, pagination, selection, expandable rows, and customizable styling. | jbetancur | 2211 | (TypeScript)
- awesome-react-components - react-data-table - [demo/docs](https://jbetancur.github.io/react-data-table-component/?) - accessible, responsive, themable, declaratively configurable table with sorting, selectable rows, expandable rows, pagination (UI Components / Table)
- best-of-react - GitHub - 6% open · ⏱️ 09.03.2024): (Data Tables & Grids)
README
[](https://app.netlify.com/sites/react-data-table-component/deploys) [](https://badge.fury.io/js/react-data-table-component) [](https://codecov.io/gh/jbetancur/react-data-table-component) [](https://opensource.org/licenses/Apache-2.0)
# React Data Table Component
[](https://GitHub.com/jbetancur/react-data-table-component/releases/)
**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.
## Quick start
```tsx
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 ;
}
```
# Key Features
- 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
# Documentation Website
The documentation contains information about installation, usage and contributions.
[reactdatatable.com](https://reactdatatable.com)
# Supporting React Data Table Component
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.
## Sponsor the project
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. |
[](https://github.com/sponsors/jbetancur)
[](https://opencollective.com/react-data-table-component)
## Need help?
Open a [GitHub issue](https://github.com/jbetancur/react-data-table-component/issues). Priority support is available for teams that [sponsor the project](https://github.com/sponsors/jbetancur).
## Sponsors
_Become a [Gold Sponsor](https://github.com/sponsors/jbetancur) and your logo goes here._
## Backers
Thank you to our recurring backers:
- Rich Tillman
# Contributors
[](https://github.com/jbetancur/react-data-table-component/graphs/contributors)