repository·master·Indexed 24 days ago
https://github.com/jbetancur/react-data-table-componentA fast, feature-rich React data table component (v8.8.0) providing built-in support for sorting, pagination, selection, and expandable rows. It includes multiple themes, including a Material UI-compatible theme, and is designed to be lightweight (~35 KB) without requiring heavy external dependencies like @mui/material or Emotion.
The @mui/material Table component provides atomic, styled primitives (TableHead, TableBody, etc.) but lacks built-in logic.
Use Material UI Table if:
react-data-table-component is a production-ready, full component that balances features and ease of use without external dependencies.
Use react-data-table-component if:
material theme) without adding @mui/material or Emotion as dependencies.Sortable column headers are focusable via tabIndex={0}. You can toggle the sort direction by pressing Enter or Space. The component uses aria-sort to communicate the state to screen readers:
"none": Not sorted"ascending": Sorted A → Z / low → high"descending": Sorted Z → A / high → lowNon-sortable headers are removed from the tab order.
The expand toggle is a <button> with aria-label="Expand Row" or "Collapse Row".
Keyboard interactions:
expandOnRowClicked is enabled, pressing Enter on the row itself also toggles the expansion.cellNavigation enabled, the expander button is reachable via arrow keys.TanStack Table is a headless library. It manages the logic (sorting, pagination, selection, expansion) but provides no markup or CSS. You are responsible for building the entire UI layer.
Use TanStack Table if:
Filterable columns use a toggle button and a popup dialog (role="dialog").
aria-label: Set to "Filter active" when a filter is applied, or "Filter column" otherwise.aria-pressed: Indicates if the popup is open (true) or closed (false).<select>) when opened.<select>: aria-label="Filter operator"<input>: aria-label="Filter value"<input> (Between): aria-label="Filter second value"aria-pressed reflects active state.aria-label="Add a second filter condition"aria-label="Remove condition"MUI X Data Grid is a specialized grid component designed for the Material UI ecosystem.
Use MUI X Data Grid if:
@mui/material).When selectableRows is enabled:
aria-selected={true|false} to announce selection state.aria-label="Select all rows".aria-label="Select row {id}", where {id} is the row's key field value.indeterminate DOM property.cellNavigation is enabled, checkboxes are reachable via arrow keys and toggled with Space.The component renders div elements with explicit ARIA roles to provide a full table structure. By default, it acts as a static table where only sortable headers are focusable. If you pass the cellNavigation prop, it transforms into an interactive grid (WAI-ARIA grid pattern) where every cell becomes focusable via a single roving tab stop and arrow keys.
| Element | Role / attribute |
| --- | --- |
| Table wrapper | `role="table"` (or `role="grid"` with `cellNavigation` — see below), `aria-label` (from `ariaLabel` prop), `aria-busy` during load |
| Header section | `role="rowgroup"` |
| Body section | `role="rowgroup"` |
| Header row | `role="row"` |
| Data row | `role="row"`, `aria-selected` (when `selectableRows` is enabled) |
| Data cell | `role="cell"` (or `role="gridcell"` with `cellNavigation`) |
| Column header | `role="columnheader"` |The component manages state visibility for assistive technology:
aria-busy="true". Skeleton rows are marked aria-hidden="true" so they are not read aloud.aria-hidden="true" and the wrapper's aria-busy state is updated.role="status" to ensure the "no records" message is announced.AG Grid is a heavyweight, full-featured data grid designed for complex data manipulation.
Use AG Grid if:
The Filter API in v8 has been replaced with a structured FilterState that supports multiple operators, two conditions per column, and explicit Apply semantics.
filterValues and onFilterChange now use FilterState instead of string:
filterValues?: Record<string | number, FilterState>onFilterChange?: (columnId: string | number, filter: FilterState) => voidSet filterType on a column to define the available operators and input widget. Supported values are 'text' (default), 'number', and 'date'. The filterFunction now receives FilterState as its second argument.
type FilterState = {
condition1: { operator: FilterOperator; value?: string; value2?: string };
condition2?: { operator: FilterOperator; value?: string; value2?: string };
logic?: 'AND' | 'OR'; // defaults to 'AND'
};Filters no longer apply on every keystroke. Users must click an Apply button to trigger onFilterChange. The clear action still clears immediately.
emptyFilterState(type: 'text' | 'number' | 'date'): Creates a default empty state.isFilterActive(state: FilterState): Returns true if the filter has an active condition.import type { FilterState } from 'react-data-table-component';
// TableColumn configuration
const columns: TableColumn<Row>[] = [
{
id: 'age',
name: 'Age',
selector: r => r.age,
filterable: true,
filterType: 'number'
},
];
// filterFunction implementation
{
filterable: true,
filterType: 'text',
filterFunction: (row, filter) => {
const v = filter.condition1.value ?? '';
return row.name.toLowerCase().startsWith(v.toLowerCase());
},
}