React Data Table Component

July 12, 2026 · View on GitHub

Netlify Status npm version codecov License

React Data Table Component

GitHub release npm downloads GitHub stars GitHub commit activity Dependents

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

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 />;
}

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

Supporting React Data Table Component

React Data Table Component has been actively maintained since 2018 and is downloaded weekly downloads 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 the weekly downloads developers who use it every 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.

TierPrice/monthPerk
☕ Supporter$5Your name in the README supporters list
🎗 Backer$20Name + link in README + listed in the Backers section on reactdatatable.com
🥉 Bronze$100Visibility: small logo in README + docs site footer, and sponsor credit in every release's notes
🥈 Silver$200Everything in Bronze + medium logo in the docs sidebar + priority issue queue: sponsor issues go to the front of the backlog, first response within 2 business days
🥇 Gold$500Everything in Silver + hero logo on reactdatatable.com + top README placement + written support commitments: 12-month patch window for the previous major, security advisories before public disclosure, one compliance questionnaire per year, direct email channel (async, business hours). Limited to 3.

These are honest, written commitments from a solo maintainer: async and business hours. No fake 24/7 SLA.

Sponsor on GitHub Sponsors Sponsor on OpenCollective

Enterprise support

Need commercial support, an SLA, or help with a major version upgrade? I offer direct consulting and priority support arrangements for teams that depend on react-data-table-component in production. Reach out via the support page.

Need help?

Open a GitHub issue. Priority support is available for teams that sponsor the project.

Sponsors

Become a Gold Sponsor and your logo goes here.

Backers

Thank you to our recurring backers:

  • Rich Tillman

Contributors

Contributors