v1.1.1

Patch Changes

• Fixed: rows that appear while none leave (grouping turned on, a filter or search cleared) fade in with the other rows' glide, instead of after a delay that left blank gaps.

v1.1.0

Minor Changes

• New: positionToolbarAlertBanner: "head-overlay" shows the selection banner over the header row (as in Material React Table), so selecting rows doesn't move the table.
• New: createDataTableColumnHelper<TData>(), TanStack's column helper with the table's features filled in: accessor infers each column's value type, and meta takes the table's column options.
• New: layoutMode ("semantic", "grid", "grid-no-grow") and per-column meta.grow: in grid mode columns keep their size and the spare width goes to the growing columns, by weight (as in Material React Table).
• New: rows can be dragged (enableRowOrdering, enableRowDragging) with row virtualization on: the dragged row stays rendered while it is dragged past the rendered window.

Patch Changes

• Changed: on phone-sized screens the rows-per-page control is the native picker, easier to use by touch than a popover.

v1.0.0

The first stable release. The API below is what 1.x keeps; see the
updating guide
for every rename.

Breaking changes

• Changed (breaking): the table's methods are on table
  (table.setDensity, table.beginRowEdit, table.autoSizeColumn…), its UI
  state is in table.getState(), and its resolved options and refs are on
  table.dataTable (type DataTableOptionsResolved). table.tableInstance
  and the DataTableConfig type are gone.
• Changed (breaking): UI state is set and controlled only through
  initialState / state (with the on…Change callbacks). Removed:
  density, isFullscreen, showColumnFilters, advancedFilter,
  globalFilterMode, defaultDensity, defaultShowColumnFilters,
  defaultGlobalFilterMode, defaultAdvancedFilter.
• Changed (breaking): renamed onEditCellSave → onEditingCellSave,
  onSaveRow → onEditingRowSave, onCreateRow → onCreatingRowSave,
  renderToolbarActions → renderTopToolbarCustomActions.
• Changed (breaking): column meta renamed variant → filterVariant,
  options → filterSelectOptions, disableHighlight: true →
  enableFilterMatchHighlighting: false, disableColumnActions: true →
  enableColumnActions: false.
• Changed (breaking): pageSizeOptions is a useDataTable option, no
  longer a <DataTable> prop.
• Changed (breaking): renderColumnActionsMenuItems,
  renderRowActionMenuItems and renderCellActionMenuItems receive
  internalMenuItems and closeMenu, and their return value is the whole
  menu: include internalMenuItems to keep the built-in items. The column
  menu no longer appends your items after a separator, and with a row menu the
  row's Edit action moves into it.
• Changed (breaking): <DataTable surfaceClassName> is replaced by
  slotProps: { surface: { className } }.
• Removed: the deprecated localization keys advancedFiltersMatchLabel
  and advancedFiltersOf.
• Breaking — TanStack Table v9: the engine now runs on
  @tanstack/react-table v9 (native useTable with every built-in feature,
  row model, and sort/filter/aggregation function registered, so behaviour
  matches 0.4.x). Re-add the block to pick up the new dependencies. See the
  upgrade guide.
• Removed options: getCoreRowModel and the other get*RowModel options;
  the table wires every row model itself.
• Instance APIs follow TanStack v9: column.pin("start" | "end"),
  column.getIsPinned() returns "start" | "end", and
  getPrePaginationRowModel() is now getPrePaginatedRowModel() and
  getPaginationRowModel() is now getPaginatedRowModel(). getLeft* /
  getRight* are getStart* / getEnd* (leaf columns, visible cells, header
  groups, total size), and column.getStart("left") / column.getAfter("right")
  take "start" / "end". Custom aggregation functions use
  constructAggregationFn({ aggregate }).
• Renamed options reach you too: the column option sortingFn is now
  sortFn, and state.columnSizingInfo, initialState.columnSizingInfo and
  onColumnSizingInfoChange are now columnResizing and
  onColumnResizingChange.
• Renamed: the sortingFns option is now sortFns (TanStack v9's name);
  filterFns and aggregationFns keep their names. Functions can also go
  inline on the column (filterFn, sortFn, aggregationFn); type inline
  filter functions with the exported DataTableFilterFn<TData>.
• Row type must satisfy RowData: TanStack v9 requires
  Record<string, any> | Array<any>, so unknown is no longer accepted.
  DataTableInstance<unknown> and useDataTable<unknown> need a concrete row
  type; DataTableInstance with no type argument now defaults to RowData.
• table.options is now the options object the table was created with on
  each render (TanStack v9's React adapter behaviour), not TanStack's
  internally merged options with feature defaults.
• Type registration: the block's types register a small TanStack feature
  (dataTableInstanceFeature) through TanStack's Plugins /
  Table_FeatureMap interfaces, scoped to tables built with the block's
  feature set. Other TanStack tables in your app are unaffected, except ones
  typed Table<any, …>.
• Changed (breaking): the component that calls useDataTable no longer
  re-renders when the table's state changes; <DataTable> subscribes to what
  it shows. Code that reads the state during that component's render (a
  "3 selected" label) needs stateSelector: (state) => state.rowSelection, or
  table.Subscribe around the part that shows it. Event handlers, effects and
  the table's render props are unaffected.

New

• New: a custom cell renderer gets renderedCellValue: the cell's
  value with its matches to the global search or a column filter marked (as
  in Material React Table), so custom cells keep the match highlighting.
• New: drag rows between tables and onto drop zones:
  DataTableDndProvider, enableRowDragging, onRowDragEnd({ row, table, over }) and useDataTableDropZone(id), with keyboard support, a floating
  preview and a data-drop-target attribute on the hovered table.
• New: columns resize from the keyboard: the resize handle is a focusable
  separator (arrow keys ±10px, Shift ±50px, Home/End to the limits, Enter to
  fit) that reports its width to screen readers.
• New: a column with several aggregations (aggregationFn: ["sum", "mean"]) shows each labelled, formatted result in grouped rows; labels come
  from the new optional localization.aggregationFns.
• New: when filters or the search hide every row, the empty table says
  "No results found" (new localization key noResultsFound, in every locale)
  instead of "No records to display".
• New: the global search box's open state is table state,
  showGlobalFilter (initialState, state, onShowGlobalFilterChange,
  table.setShowGlobalFilter).
• New slotProps option: extra props (classes, styles, data-*,
  handlers, refs) for every part of the table — surface, rows, cells,
  toolbars, search box, edit fields, dialog, checkboxes — as objects or
  functions of the part's context. Columns can target their own cells with
  meta.slotProps. Props merge with the table's own instead of replacing them.
• New: enableTableHead / enableTableFooter hide the header or footer
  rows, enableExpandAll hides the expand-all toggle, and column
  meta.visibleInShowHideMenu: false leaves a column out of the show / hide
  menu.
• New editing options: onEditingRowCancel / onCreatingRowCancel,
  renderEditRowDialogContent / renderCreateRowDialogContent (with
  internalEditComponents, save, cancel), positionCreatingRow
  ("top", "bottom" or a row index), and
  column editSelectOptions as a per-row function.
• New filter variants: autocomplete (text with suggestions),
  datetime / datetime-range (compared to the minute) and time /
  time-range (compared by time of day), also in the advanced filter panel.
• New: shift-click range selection (enableBatchRowSelection, on by
  default); single-row selection (enableMultiRowSelection: false) shows
  radio buttons.
• New: composition — useDataTableInstance() reads the table from
  anywhere inside it, DataTableProvider wraps your own layout, and the
  toolbar, pagination, search, view-options, filter and menu parts are
  exported. DataTableSlots and SlotProp types are exported too.
• New: displayColumnDefOptions (by column id, e.g. "cn-select") and
  defaultDisplayColumn override the columns the table adds itself. New
  DisplayColumnId type.
• New: enableCellActions turns on a built-in cell menu (Copy, Edit), and
  enableClickToCopy (table and column) also takes "context-menu" or a
  per-cell function. New copy icon slot.
• New: enableEditing (table option and column meta) takes a
  (row) => boolean function to allow editing row by row;
  table.dataTable.getCanEditRow(row) reads the table-level answer.
• New custom functions: filterFns, sortFns and aggregationFns
  options register your own functions by name. Columns use them with
  filterFn / sortFn / aggregationFn: "name"; custom filter functions can
  also be a column's meta.filterMode and appear in the mode menus when listed
  in columnFilterModeOptions (column or new table-wide option) or the new
  globalFilterModeOptions. FilterMode / GlobalFilterMode accept any name.
• New DataTableColumnDef<TData> type (plus DataTableRow,
  DataTableColumn, DataTableCell, DataTableHeader, DataTableState,
  DataTableColumnPinningState, DataTableFeatures). Type your columns with
  DataTableColumnDef instead of TanStack's ColumnDef, which now needs a
  feature-set parameter.
• Added: stateSelector option: re-render the component holding the table
  when the selected part of the state changes.
• Added: the table's UI state is TanStack table state: density,
  isFullscreen, showColumnFilters, columnFilterModes,
  globalFilterMode, advancedFilter, showAdvancedFilterPanel,
  editingCell, editingRowId, isCreating, rowDraft and direction are
  in table.getState(), take initialState and controlled state, and reset
  with table.reset(). New callbacks onColumnFilterModesChange,
  onShowAdvancedFilterPanelChange, onEditingCellChange,
  onEditingRowIdChange, onIsCreatingChange and onRowDraftChange.
• Added: 37 locales (38 languages with English), each its own registry
  item: data-table-locale-<lang>. Translations are adapted from Material
  React Table; lines marked "needs review" await a native speaker.
• Added: localization keys language, true, false, dragStart,
  dragOver,...

v0.4.2

• Changed default (surface color): the table surface, header and body
  cells now use the shadcn card color (bg-card) instead of the page
  background, so the table matches a <Card> out of the box. No visible change
  in the default light theme; in dark mode the table reads as a raised card.
  Restore the old look for one table with
  surfaceClassName="[--card:var(--background)]".
• Fix (row hover and state highlights): body cells are opaque (so pinned
  columns cover scrolled content), which hid the row's hover, open-menu and
  dragging highlights. Rows now publish their tint as --row-tint and cells
  paint it over the card, so hover, open-menu, selected and dragging states all
  show — including on rows with onRowClick.
• Fix (pinned columns on selected rows): selected-row cells no longer turn
  transparent, so content scrolled under a pinned column stays hidden. The
  selected accent bar now sits on the row's first cell.

v0.4.1

• Fix (infinite scroll): the load trigger now fires when the table is
  scrolled horizontally. The bottom sentinel is pinned to the horizontal
  viewport (position: sticky; left: 0) so a wide, horizontally-scrolled table
  still registers the intersection and requests the next chunk.
• Changed default: enableStickyFooter now defaults to false (was true).
  enableStickyHeader still defaults to true; opt into a pinned footer
  explicitly when you have an aggregation/footer row.

v0.4.0

• Infinite row loading (enableInfiniteScroll): append the next chunk of
  rows as the user scrolls near the bottom, driven by controlled
  onLoadMore / hasNextPage / isFetchingNextPage props (maps directly onto
  TanStack Query's useInfiniteQuery). A bottom sentinel + IntersectionObserver
  triggers the load; infiniteScrollThreshold (px, default 200) sets the
  prefetch distance. Enabling it hides the pager and renders one growing page.
  Works with or without row virtualization. New loadingMore localization
  string. See the infinite scroll guide.
• Row height control (rowHeight, getRowHeight): set a flat pixel height
  for every row, or a per-row height via getRowHeight(row) => number | "auto" | null. "auto" wraps and grows the row to fit its content — even with column
  resizing on (which otherwise clips cells to one line); a number pins the row
  and clips overflow. Per-row heights feed the virtualizer estimate, and "auto"
  rows are measured after render so variable heights virtualize accurately. See
  the row height guide.

v0.3.0

• While enableStickyHeader is on (the default), the scroll surface now gets
  a default viewport-bound max-height
  (clamp(350px, calc(100dvh - 200px), 9999px)), so tall content (long
  groups, trees, detail panels) scrolls internally under the pinned header
  instead of stretching the page — matching MRT's sticky-implies-bounded
  behavior. Override the bound with any max-h-* via surfaceClassName, or
  remove it (and the pinning) with enableStickyHeader: false.

v0.2.0

The registry block at /r/data-table.json now carries this version in meta.version. See the updating guide for how to pull it into your project.

Breaking

• Removed the built-in export feature (#13, #17): enableExport, exportFileName, exportToCsv / exportToExcel, DataTableExportMenu, the export / exportCsv / exportExcel localization strings, and the export / fileCsv / fileExcel icons, along with the papaparse and xlsx dependencies. The export guide now documents a bring-your-own recipe built on the table state model.

Fixed

• usePageResetOnFilterChange no longer resets the page on mount under React StrictMode, which wiped URL-persisted / controlled pagination in dev (#11, #15).

Added

• Selected rows now get a themeable primary-tinted background across the full row in addition to the accent bar, shared by all row paths via the new SELECTED_ROW_CLASS constant (#12, #16).

Full history: CHANGELOG.md