Changelog

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

v8 (current)

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.