# react-data-table-component

> A fast, accessible React data table component with sorting, pagination, row selection, expandable rows, column filtering, and theming built in. Zero runtime dependencies, Apache-2.0 licensed, free with no paid tier. A working table takes about 10 lines of code.

Install: `npm install react-data-table-component`

Minimal usage:

```tsx
import DataTable from 'react-data-table-component';

const columns = [
  { name: 'Name', selector: row => row.name, sortable: true },
  { name: 'Role', selector: row => row.role },
];

<DataTable columns={columns} data={data} pagination />
```

## Introduction

- [Getting Started](https://reactdatatable.com/docs/getting-started): install and render a first table
- [Installation](https://reactdatatable.com/docs/installation): package managers, CSS import, framework setup
- [Comparisons](https://reactdatatable.com/docs/comparisons): how this compares to TanStack Table, AG Grid, MUI X Data Grid, and the plain MUI Table
- [Changelog](https://reactdatatable.com/docs/changelog): release history

## Reference

- [API Reference](https://reactdatatable.com/docs/api): all props and types
- [Migration Guide](https://reactdatatable.com/docs/migration): upgrading from v7 to v8

## Columns

- [Overview](https://reactdatatable.com/docs/columns): defining columns, selectors, formatting
- [Cell Rendering](https://reactdatatable.com/docs/cells): custom cell components
- [Column Groups](https://reactdatatable.com/docs/column-groups): spanning headers across columns
- [Column Visibility](https://reactdatatable.com/docs/column-visibility): show and hide columns
- [Column Reordering](https://reactdatatable.com/docs/column-reorder): drag to reorder, mouse or touch (press-and-hold on touch)
- [Column Resizing](https://reactdatatable.com/docs/resizable): drag column edges by mouse or touch, persist widths
- [Column Pinning](https://reactdatatable.com/docs/column-pinning): pin columns left or right
- [Column Separators](https://reactdatatable.com/docs/column-separators): vertical divider lines between header and body columns
- [Column Filtering](https://reactdatatable.com/docs/filtering): per-column text, number, date, datetime, and time-of-day filters with operator selection and two-condition AND/OR logic, plus set filters that pick from a checklist of a column's distinct values or a supplied list, optionally splitting cells that hold several values, and a filterServer option for backend filtering
- [Sorting](https://reactdatatable.com/docs/sorting): client-side and server-side sorting

## Editing

- [Inline Editing](https://reactdatatable.com/docs/inline-editing): edit cells in place with built-in editor types, per-column validation, and optimistic server-save patterns

## Rows

- [Row Interactions](https://reactdatatable.com/docs/row-interactions): click, double-click, hover handlers
- [Row Selection](https://reactdatatable.com/docs/selection): checkbox multi-select, select all, controlled selection
- [Row Pinning](https://reactdatatable.com/docs/row-pinning): pin rows to top
- [Expandable Rows](https://reactdatatable.com/docs/expandable): detail panels with any component
- [Conditional Styles](https://reactdatatable.com/docs/conditional-styles): style rows and cells by data
- [Fixed Header](https://reactdatatable.com/docs/fixed-header): sticky header with scrollable body; when to disable the responsive scroll container
- [Pagination](https://reactdatatable.com/docs/pagination): built-in and custom pagination, server-side
- [Footer](https://reactdatatable.com/docs/footer): summary and pagination footers
- [Loading State](https://reactdatatable.com/docs/loading): progress and skeleton states

## Interactivity

- [Animations](https://reactdatatable.com/docs/animations): row animations
- [Accessibility](https://reactdatatable.com/docs/accessibility): ARIA roles and screen reader support
- [Keyboard Navigation](https://reactdatatable.com/docs/keyboard-navigation): cellNavigation prop for spreadsheet-style ARIA grid keyboard navigation
- [Context Menu](https://reactdatatable.com/docs/context-menu): right-click or menu-button menu with built-in header actions (sort, pin, hide, reset) and custom row actions
- [Localization](https://reactdatatable.com/docs/localization): translated labels and locales
- [RTL Support](https://reactdatatable.com/docs/rtl): right-to-left layouts
- [Mobile](https://reactdatatable.com/docs/mobile): responsive columns and layouts

## Styling

- [Themes](https://reactdatatable.com/docs/themes): 5 built-in themes with dark mode, createTheme()
- [Custom Styles](https://reactdatatable.com/docs/custom-styles): style every table region

## Import / Export

- [Export (CSV / JSON)](https://reactdatatable.com/docs/export): CSV and JSON export

## Advanced

- [Headless Hooks](https://reactdatatable.com/docs/headless): use the logic without the UI
- [TypeScript](https://reactdatatable.com/docs/typescript): generic column and row typing
- [SSR](https://reactdatatable.com/docs/ssr): Next.js App Router, Remix, Astro
- [Performance](https://reactdatatable.com/docs/performance): large datasets, memoization

## Recipes

- [Approval workflow](https://reactdatatable.com/docs/recipes/approval-workflow): Bulk-approve or reject requests. Toolbar buttons adapt to the selected rows' status. Already-resolved rows are excluded automatically.
- [Server-side sort & filter](https://reactdatatable.com/docs/recipes/server-side): Wire sorting, pagination, and column filters to your own API in a single useEffect.
- [URL-synced table state](https://reactdatatable.com/docs/recipes/url-synced-state): Sync sort, filters, and pagination to the URL: shareable links, reload-safe, back button works.
- [Dashboard drill-down](https://reactdatatable.com/docs/recipes/dashboard-drilldown): Department overview with expandable rows, health-status row tinting, and inline budget-spend bars.
- [Audit log viewer](https://reactdatatable.com/docs/recipes/audit-log): Fixed header, severity row tinting, and multi-field live search, all wired together.
- [Persist column widths](https://reactdatatable.com/docs/recipes/persist-column-widths): Save and restore resizable column widths to localStorage or a back-end API.
- [Inline row actions](https://reactdatatable.com/docs/recipes/inline-row-actions): Per-row ⋮ menu with edit, duplicate, and delete, with confirmation modals included.
- [Live-updating grid](https://reactdatatable.com/docs/recipes/live-updates): Flash-on-change rows for a real-time price grid, using conditionalRowStyles and keyField.
- [Editable inventory grid](https://reactdatatable.com/docs/recipes/inventory-editor): Spreadsheet-style inline editing with a derived total column and a running grand total.
- [Grouped rows with aggregates](https://reactdatatable.com/docs/recipes/row-groups): Per-group totals and drill-down built from a plain array reduce, no groupBy API needed.
- [CSV import](https://reactdatatable.com/docs/recipes/csv-import): Load a user-uploaded CSV file into the table with FileReader and a small parser.

## Optional

- [Support & Sponsorship](https://reactdatatable.com/support): sponsor tiers, direct consulting and enterprise support
- [GitHub repository](https://github.com/jbetancur/react-data-table-component)
- [npm package](https://www.npmjs.com/package/react-data-table-component)