A summary of notable changes per release. For the full commit history see the repository on GitHub.
- Fixed column resizing under RTL. The handle now sits on the column's end (left) edge and dragging it away from the column widens it, mirroring LTR. Applies to both
direction={Direction.RTL}and an inheriteddir="rtl". → Resizable columns - Fixed column and group-header separators rendering at the wrong boundaries under RTL. Small header/cell chrome (filter-indicator dot, inline-edit select arrow, rows-per-page chevron) now mirrors to the correct side as well. → RTL support
- Fixed row and table backgrounds ending at the initial container width when the table scrolls horizontally, which left scrolled-into columns unpainted (default, striped, hover, and selected backgrounds all cut off).
tableWrappercustom styles now paint across the scrolled width as well. - Fixed
fixedHeaderwithresponsive={false}rendering a height-capped box without a scroll container, letting rows spill over content below the table.fixedHeadernow always creates the scroll container. - Fixed the pinned-columns scrollbar not appearing (or going stale) when the table's content width changed without a container resize — e.g. rows loading asynchronously or columns being resized, shown, or hidden. Since the native scrollbar is hidden when columns are pinned, mouse users previously had no way to scroll in that state.
- Fixed the native scrollbar being hidden when columns are pinned but
responsive={false}, where the custom pinned scrollbar never renders. - Fixed open column-filter panels floating detached from their column when the table or page scrolls; the panel now closes on scroll and window resize.
- Replaced the blurred pin-band edge shadow with a crisp boundary line that no longer washes out adjacent column separators. The line color follows the theme divider and can be overridden with
--rdt-color-pin-border; the--rdt-color-pin-shadowvariable is gone. The redundant column separator at the pin boundary is suppressed. → Column pinning - Fixed missing separators around the right pin band when columns leave slack space: the last unpinned column now closes with its own separator line, and row dividers no longer break across the gap in front of right-pinned columns.
- Fixed right-pinned columns being nearly impossible to resize: a leftover clip on the pin band cut the resize handle's hit area down to a 3px sliver. Left-pinned and unpinned columns were unaffected.
- Fixed the last column's resize handle hanging half outside the scroll container, which clipped its hit area; it now sits fully inside the column edge.
- Fixed column pinning under RTL: pinned columns now stick to logical edges (
pinned: 'left'pins to the inline-start edge, which is the right side in RTL), and the pin-band shadows mirror accordingly. → Column pinning - Fixed the pinned-columns horizontal scrollbar under RTL: thumb position, drag, track clicks, and the End key now account for RTL scroll coordinates, and the track insets follow the mirrored pin bands.
- Keyboard cell navigation — new
cellNavigationprop turns the table into a WAI-ARIA grid (role="grid"/"gridcell", single Tab stop, roving tabindex). Arrow keys move between cells, including the header row, selection checkboxes, and expander buttons;Home/EndandCtrl+Home/Ctrl+Endjump to row and grid edges;Enter/F2open a cell's editor andEscapecancels it;Enter/Spacesort from a header. → Keyboard navigation (#1332) - More headless hooks —
useCellNavigation(the same logic behindcellNavigation, usable on your own markup) anduseColumnResize(drag-to-resize) are now exported. Column pinning gets three new pure-function exports —getPinnedOffsets,getPinnedTotalWidths,getPinnedCellMeta— since pinning has no state to own beyondcolumn.pinnedon your own columns. → Headless hooks
- Fixed inline-edit refocus resolving by DOM id, which could steal focus into a different
DataTableinstance on the same page when two tables shared column ids and row keys.
- Fixed a table-level
sortFunctionnot being called when a column's sort was cycled to the "not sorted" state, which broke patterns like pinning rows to the top regardless of sort. → Row pinning
- The expandable-row toggle button's hover/focus highlight is now sized to the icon instead of filling the entire cell.
- Fixed
selectableRowsComponentPropsresolving only the last entry when multiple function-valued props were passed — all function props now resolve correctly. → Row selection
- Fixed a crash (
Cannot read properties of null (reading 'columnId')) that tore down the table at the end of nearly every column resize drag under React 18. (#1326)
- Removable sorting — clicking a sorted header now cycles asc → desc → unsorted, so a sort can be cleared without reloading the page. → Sorting docs
- Multi-column sorting — new
sortMultiprop. Ctrl/⌘-click headers to build a sort stack; priority follows click order and a numbered badge marks each sorted column. → Sorting docs (#1325) SortColumn<T>type exported — represents a single entry in the sort stack ({ column, sortDirection }).onSortgains a fourthsortColumns: SortColumn<T>[]argument with the full sort config. Existing three-argument handlers are unaffected.
- A third click on a sorted header now removes the sort (previously it stayed on descending). Server-side
onSorthandlers should treat an emptysortColumnsarray as "no sort" and drop theirORDER BY.
- Localization — new
localizationprop replaces the three separate option props (columnFilterOptions,expandableRowsOptions, and pagination aria-label fields onpaginationComponentOptions). Pass a single object to translate every string and aria-label in the table — filter panel, pagination navigation, and expand/collapse buttons. → Localization docs - Built-in locales — import pre-built translations from the
react-data-table-component/localessubpath. Ships with: English (en), French (fr), Spanish (es), German (de), Brazilian Portuguese (ptBR), Arabic — Modern Standard (ar), Egyptian (arEG), Levantine (arLV), Hebrew (he), Chinese Simplified (zhCN), Chinese Traditional (zhTW), Japanese (ja), Korean (ko), Ukrainian (uk). Each locale is individually tree-shakeable. - New utility exports:
emptyFilterState(type)andisFilterActive(filter). → Filtering docs - Removable sorting — clicking a sortable header now cycles ascending → descending → unsorted, so a sort can be cleared directly from the header. → Sorting docs
- Multi-column sorting — new
sortMultiprop. Ctrl/⌘-click a header to add it to the existing sort; priority follows click order and a numbered badge marks each sorted column.onSortgains a fourthsortColumnsargument with the full sort config, and the newSortColumn<T>type is exported. → Sorting docs
- A third click on a sorted header now removes the sort (previously it stayed descending). When the sort is cleared,
onSortfires with an empty primary column and an emptysortColumnsarray — server-side handlers should treat this as "no sort" and drop theirORDER BY. The existing three-argumentonSortusage is unaffected; the fourth argument is additive.
The following will continue to work in 8.x but will be removed in v9. TypeScript will show a deprecation hint.
columnFilterOptionsprop — uselocalizationwith afilterkey instead.expandableRowsOptionsprop — uselocalizationwith anexpandablekey instead.- Pagination aria-label fields on
paginationComponentOptions(navigationAriaLabel,firstPageAriaLabel,previousPageAriaLabel,nextPageAriaLabel,lastPageAriaLabel) — uselocalizationwith apaginationkey instead. ColumnFilterOptionsandExpandableRowsOptionstypes — useLocalization['filter']andLocalization['expandable']instead.
paginationPosition— controls where the pagination bar renders. Accepts'bottom'(default),'top', or'both'. → Pagination docspaginationPage— controlled active-page prop. Set it to navigate programmatically (e.g. reset to page 1 after a filter change). Use withonChangePageto keep in sync. → API reference- Built-in footer row for totals, averages, and other summary cells. Declare per-column with the new
footerfield (ReactNodeor(rows) => ReactNode) or replace the whole row withfooterComponent. Footer cells respect column widths, alignment, and pinning automatically. → Footer docs - Pagination button aria-labels — "First Page", "Previous Page", "Next Page", and "Last Page" are now configurable via
paginationComponentOptions, enabling proper i18n for screen readers. ref.clearSort()— newDataTableHandlemethod to programmatically reset sort back to its default state, or unsorted if no defaults are set. → Sorting docs- Sortable column indicator — sortable columns now show a faint sort icon at reduced opacity so users can discover which columns are sortable before clicking. The inactive opacity is themable via
--rdt-sort-icon-inactive-opacity(default0.3). onScroll— new prop that fires whenever the table's scroll wrapper scrolls. Receives the nativeReact.UIEvent<HTMLDivElement>.
- Fixed column reordering bypassing
reorder={false}when a cell's text was selected via double-click and then dragged.
- Inline editing now supports
number,date,checkbox, andcustomeditor types. New column-levelvalidatehook gates the edit beforeonCellEditfires. → Inline editing - Shift-click range selection on row checkboxes. Enabled by default — opt out with
selectableRowsRange={false}. NewselectedRowsprop drives controlled selection. → Row selection - New headless export hook
useTableExport: build CSV/JSON, trigger a download, or copy to clipboard. → Export
- Expandable row open/close animation now works correctly. Switched from a
max-heighttween to the CSS gridgrid-template-rows: 0fr → 1frtrick. Close animation added — the row stays mounted while animating out, then unmounts. Both directions respectanimateRowsandprefers-reduced-motion. - Fixed
useLayoutEffectSSR warning in Next.js App Router and Astro SSR modes. - Inline editing: added CSS for
checkboxandcustomeditor types, and validation error tooltip styles (.rdt_cellEditError,.rdt_editErrorTip).
v8 is a full rewrite around a headless hook architecture. Every major feature is composable and usable independently of <DataTable>. See the migration guide for breaking changes from v7.
- Column pinning (
pinned: 'left' | 'right') with cascading sticky offsets, custom pinned scrollbar, and full compatibility with resize/reorder/fixed-header. - Inline cell editing (
editable+onCellEdit). - Per-column filtering with structured operators (
filterable,filterType, controlledfilterValues). - Column groups (
columnGroups): span labels across adjacent columns. Drag-to-reorder entire groups as a unit. - Drag-to-reorder columns and column groups (
reorder: true,onColumnOrderChange). - Column visibility hook (
useColumnVisibility) for show/hide pickers. - Resizable columns (
resizable): handle straddles the column boundary, 6 px hit area, 40 px hard floor. - Column separators:
columnSeparatorandheaderSeparatorwith"subtle"/"full"variants. - Row animations (
animateRows): staggered entrance + sort transitions, respectsprefers-reduced-motion. - Improved loading state: skeleton on first load, dimmed overlay + spinner on refetch.
- Imperative ref API:
ref.current?.clearSelectedRows(). TheclearSelectedRowsprop is deprecated. - New row events:
onRowMiddleClicked,onRowMouseEnter,onRowMouseLeave. - Dark mode support via
colorMode("light", "dark", "auto"). - Headless hooks exported:
useColumns,useTableState,useTableData,useColumnFilter,useColumnVisibility. - New theme:
crisp. Refactored theme system around CSS variables (createTheme).
- Replaced styled-components with CSS variables and a single stylesheet. No more runtime CS -in-JS. Smaller bundle, faster first render.
- All visual defaults live in
DataTable.cssas--rdt-*custom properties. - Row separators are drawn at the cell level (
.rdt_cellBase) instead of the row container. Fixes a long-standing issue where the separator scrolled with content past pinned columns. - System column width (checkbox/expander) is now controlled by
--rdt-system-col-width. Themes can override it and pinning offsets stay aligned.
- v8 ships its own CSS. No
import 'react-data-table-component/dist/index.css'required, and styled-components overrides will not apply. Use the new theme system orcustomStyles. clearSelectedRowsprop deprecated in favor ofref.current.clearSelectedRows().- Several renamed props and removed legacy options. See migration guide.
v7 is no longer actively developed. Docs remain at v7.reactdatatable.com.
If you're upgrading, the migration guide covers the breaking changes and rename mappings.