Changelog

A summary of notable changes per release. For the full commit history, see the repository on GitHub.

8.2.0

New features

  • paginationPosition — controls where the pagination bar renders relative to the table. Accepts 'bottom' (default), 'top', or 'both'. → Pagination docs
  • paginationPage — controlled active-page prop. Set it to navigate the table programmatically (e.g. reset to page 1 after a filter change). Use together with onChangePage to keep them in sync. → API reference
  • Built-in footer row for totals, averages, and other summary cells. Declare per-column with the new footer field (ReactNode or (rows) => ReactNode) or replace the whole row with the footerComponent prop. 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() — new DataTableHandle method to programmatically reset sort back to its default state (defaultSortFieldId / defaultSortAsc), 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 the --rdt-sort-icon-inactive-opacity CSS custom property (default 0.3).
  • onScroll — new prop that fires whenever the table's scroll wrapper scrolls. Receives the native React.UIEvent<HTMLDivElement>.

Bug fixes

  • Fixed column reordering bypassing reorder={false} when a cell's text was selected via double-click and then dragged. The cell now correctly gates all drag handlers on column.reorder.

8.1.0

Additive feature release. No breaking changes. See what's new for narrative coverage.

New features

  • Inline editing now supports number, date, checkbox, and custom editor types. New column-level validate hook gates the edit before onCellEdit fires. → Inline editing
  • Shift-click range selection on row checkboxes. Enabled by default — opt out with selectableRowsRange={false}. New selectedRows prop drives controlled selection. → Row selection
  • New headless export hook useTableExport: build CSV/JSON, trigger a download, or copy to clipboard. Import directly from the package: import { useTableExport } from 'react-data-table-component'. → Export

Bug fixes & polish

  • Expandable row open/close animation now works correctly. Switched from a max-height tween (which appeared instant at realistic content heights) to the CSS grid grid-template-rows: 0fr → 1fr trick, giving a true height transition. Close animation added — the row stays mounted while animating out, then unmounts. Both directions respect animateRows and prefers-reduced-motion.
  • Fixed useLayoutEffect SSR warning in Next.js App Router and Astro SSR modes. The effect now falls back to useEffect on the server. → SSR
  • Inline editing: added CSS for checkbox and custom editor types, and validation error tooltip styles (.rdt_cellEditError, .rdt_editErrorTip).

v8

v8 is a full rewrite around a headless hook architecture. Every major feature is composable and usable independently of <DataTable>. See what's new in v8 for narrative coverage and the migration guide for breaking changes from v7.

Headline features

  • 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, controlled filterValues).
  • 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: columnSeparator and headerSeparator with "subtle" / "full" variants.
  • Row animations (animateRows): staggered entrance + sort transitions, respects prefers-reduced-motion.
  • Improved loading state: skeleton on first load, dimmed overlay + spinner on refetch.
  • Imperative ref API: ref.current?.clearSelectedRows(). The clearSelectedRows prop 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).

Architecture changes

  • Replaced styled-components with CSS variables and a single stylesheet. No more runtime CSS-in-JS. Smaller bundle, faster first render.
  • All visual defaults live in DataTable.css as --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.
  • Pinned cell metadata centralized in getPinnedCellMeta so the header (TableCol) and body (TableCell) compute pin styles from a single source.
  • System column width (checkbox/expander) is now controlled by --rdt-system-col-width. Themes can override it and pinning offsets stay aligned.

Quality of life

  • Horizontal overscroll bounce is contained to DataTable. No more whole-page rubber-band at scroll edges.
  • Resize handle visual indicator is a 2 px center line that aligns with the separator instead of a translucent block offset to one side.
  • Pinning silently strips when used with columnGroups and warns once in dev. No more confusing layout glitches.
  • 426 tests in CI, including pin-meta edge cases and grid template column rendering.

Breaking changes from v7

  • v8 ships its own CSS. No import 'react-data-table-component/dist/index.css' required, and your existing styled-components overrides will not apply. Use the new theme system or customStyles.
  • clearSelectedRows prop deprecated in favor of ref.current.clearSelectedRows().
  • Several renamed props and removed legacy options. See migration guide.

v7 (legacy)

v7 is no longer actively developed. Docs remain at v7.reactdatatable.com. The major v7 milestones, for context:

  • Built on styled-components.
  • Class-component themes.
  • No column pinning, no column groups, no inline editing, no column filtering API.

If you're upgrading, the migration guide covers the breaking changes and rename mappings.