# react-data-table-component

> A fast, feature-rich React data table. Working table in 10 lines.

Latest version **8.12.0** (published 2026-10-11) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install react-data-table-component
pnpm add react-data-table-component
yarn add react-data-table-component
bun add react-data-table-component
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 8.12.0 |
| Published | 2026-10-11 |
| First published | 2018-03-20 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 1.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| Author | jbetancur |
| Maintainers | jbetancur |
| Keywords | react, data, table, react-table, react-data-table-component, pagination, sorting, expandable-rows, row-selection, typescript, accessible, themeable, nextjs, dashboard, admin |

## Links

- npm: https://www.npmjs.com/package/react-data-table-component
- Repository: https://github.com/jbetancur/react-data-table-component
- Homepage: https://reactdatatable.com
- Issues: https://github.com/jbetancur/react-data-table-component/issues
- Funding: https://github.com/sponsors/jbetancur
- npm.io page: https://npm.io/package/react-data-table-component

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 8.12.0 (latest) — 2026-10-11
- 8.11.0 — 2026-09-29
- 8.10.0 — 2026-09-06
- 8.9.1 — 2026-09-06
- 8.9.0 — 2026-09-04
- 8.8.2 — 2026-08-29
- 8.8.1 — 2026-08-19
- 8.8.0 — 2026-07-22
- 8.7.1 — 2026-07-21
- 8.7.0 — 2026-07-18
- 8.6.2 — 2026-07-14
- 8.6.1 — 2026-07-12
- 8.6.0 — 2026-07-12
- 8.5.2 — 2026-07-11
- 8.5.1 — 2026-07-10
- … 195 more at https://npm.io/package/react-data-table-component/versions

## README

[![Netlify Status](https://api.netlify.com/api/v1/badges/26e0d16d-a986-46b1-9097-1a76c10d7cad/deploy-status)](https://app.netlify.com/sites/react-data-table-component/deploys) [![npm version](https://badge.fury.io/js/react-data-table-component.svg)](https://badge.fury.io/js/react-data-table-component) [![codecov](https://codecov.io/gh/jbetancur/react-data-table-component/branch/master/graph/badge.svg)](https://codecov.io/gh/jbetancur/react-data-table-component) [![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)

# React Data Table Component

[![GitHub release](https://img.shields.io/github/release/jbetancur/react-data-table-component.svg)](https://GitHub.com/jbetancur/react-data-table-component/releases/) [![npm downloads](https://img.shields.io/npm/dm/react-data-table-component.svg)](https://www.npmjs.com/package/react-data-table-component) [![GitHub stars](https://img.shields.io/github/stars/jbetancur/react-data-table-component.svg)](https://github.com/jbetancur/react-data-table-component/stargazers) [![GitHub commit activity](https://img.shields.io/github/commit-activity/m/jbetancur/react-data-table-component.svg)](https://github.com/jbetancur/react-data-table-component/commits/master) [![Dependents](https://img.shields.io/librariesio/dependent-repos/npm/react-data-table-component.svg)](https://github.com/jbetancur/react-data-table-component/network/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

```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 <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](https://reactdatatable.com)

# Supporting React Data Table Component

React Data Table Component has been actively maintained since 2018 and is downloaded ![weekly downloads](https://img.shields.io/npm/dw/react-data-table-component.svg?label=%20&color=blue&style=flat-square) 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 the ![weekly downloads](https://img.shields.io/npm/dw/react-data-table-component.svg?label=%20&color=blue&style=flat-square) 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.

| 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 | Visibility: small logo in README + docs site footer, and sponsor credit in every release's notes |
| 🥈 Silver | $200 | Everything 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 | $500 | Everything 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](https://img.shields.io/badge/Sponsor-GitHub%20Sponsors-ea4aaa?logo=github)](https://github.com/sponsors/jbetancur)
[![Sponsor on OpenCollective](https://img.shields.io/badge/Sponsor-OpenCollective-blue?logo=opencollective)](https://opencollective.com/react-data-table-component)

## 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](https://reactdatatable.com/support).

## 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
- [Simon Schick](https://github.com/SimonSchick)

# Contributors

[![Contributors](https://contrib.rocks/image?repo=jbetancur/react-data-table-component)](https://github.com/jbetancur/react-data-table-component/graphs/contributors)

---
_Source: https://npm.io/package/react-data-table-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._