Repository navigation
New features
react-data-table-component/headlessentry — the hooks, pinning helpers, and their types on their own. It contains no component and injects no stylesheet (about 10 kB gzipped, against about 40 kB for the main entry, which loads<DataTable>and its CSS even when you only import a hook). The main entry still exports the same hooks. → Headless hooks- Hook options are optional —
useTableState({ data })anduseColumns(columns)now work. Every other option has a default matching<DataTable>(keyField: 'id', page 1, 10 rows per page).useTableDataneeds onlydataand the sort and page fields fromtableState, anduseCellNavigationneeds onlycellNavigation: true,effectiveColumns, andfilteredTableRowCount. Existing calls that pass everything are unaffected. useColumnsoptions object —useColumns(columns, { defaultSortFieldId, defaultSortAsc, onColumnOrderChange, columnGroups, onColumnGroupOrderChange }). The six-argument positional form still works.- Hook types exported —
UseTableStateProps,UseTableStateReturn,UseTableDataProps,UseTableDataReturn,UseColumnsOptions,UseColumnsResult,ColumnDragSlice,UseColumnFilterOptions,UseColumnFilterResult,TableState,SortAction,SingleRowAction,AllRowsAction,RangeRowAction. → TypeScript - Headless docs section — headless now has its own docs group: an overview, a hook reference, and a Tailwind example with sort, filter, row selection, and pagination on your own
<table>.
Bug fixes
- Headless docs — the example and live demo filtered a single page, because they ran
filteredDataon rows that were already paginated. They now filter the sorted set and slice the page afterwards, as<DataTable>does. If you copied that example, filtersortedDatainstead oftableRows. → Headless hooks - Headless docs — the
useColumnsreference listedhandleDragStartand four other handlers that do not exist. The drag handlers are on the returnedcolumnDragobject. TheuseColumnResizereference now shows the pointer-event signature it has.
Full changelog: https://reactdatatable.com/docs/changelog