@nexub/react 5.3.0 → 5.4.0

package/accessibility.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.3.0",
+  "version": "5.4.0",
   "standard": "WCAG 2.2 Level AA",
   "method": {
     "automated": "axe-core rules tagged wcag2a, wcag2aa, wcag21a, wcag21aa and wcag22aa, run on every Storybook story in light and dark on every pull request; a new violation fails the build.",

package/dist/components/DataTable/DataTable.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type ColumnDef, type RowSelectionState, type RowData, type VisibilityState } from '@tanstack/react-table';
+import { type ColumnDef, type RowSelectionState, type RowData, type VisibilityState, type ColumnSizingState, type ColumnOrderState, type ColumnPinningState } from '@tanstack/react-table';
 declare module '@tanstack/react-table' {
     interface ColumnMeta<TData extends RowData, TValue> {
         /** Horizontal alignment of the header and cells. Use 'end' for numbers. @default 'start' */
@@ -9,6 +9,18 @@ declare module '@tanstack/react-table' {
 /** A DataTable column: TanStack's `ColumnDef`, with `meta.align` for numeric columns. */
 export type DataTableColumn<TData> = ColumnDef<TData, unknown>;
 export type DataTableDensity = 'comfortable' | 'compact';
+/** Which rows to render, and the space to leave above and below them. */
+export interface DataTableRowWindow {
+    indexes: number[];
+    before: number;
+    after: number;
+    /** Ref for each rendered row, to measure its real height. */
+    measure?: (el: HTMLElement | null) => void;
+    /** True when rows are windowed: rows get aria-rowindex, the table aria-rowcount. */
+    virtual?: boolean;
+}
+/** A hook choosing the rendered rows. DataTableVirtual passes one; the default renders all. */
+export type DataTableRowWindowHook = (count: number, getScrollElement: () => HTMLElement | null) => DataTableRowWindow;
 export interface DataTableProps<TData> extends React.HTMLAttributes<HTMLDivElement> {
     columns: DataTableColumn<TData>[];
     /** Names the table for assistive tech (and is shown below it unless `captionHidden`). */
@@ -39,8 +51,23 @@ export interface DataTableProps<TData> extends React.HTMLAttributes<HTMLDivEleme
     viewOptions?: boolean;
     /** Content at the start of the row above the table (filters, a title). */
     toolbar?: React.ReactNode;
+    /** Drag a header's edge, or focus it and press Arrow keys, to resize columns. */
+    enableColumnResizing?: boolean;
+    columnSizing?: ColumnSizingState;
+    onColumnSizingChange?: (sizing: ColumnSizingState) => void;
+    /** Drag headers to reorder columns, or press Alt+Arrow on a focused header. */
+    enableColumnReordering?: boolean;
+    columnOrder?: ColumnOrderState;
+    onColumnOrderChange?: (order: ColumnOrderState) => void;
+    /** Columns that stay in view while the rest scroll sideways: `{ left: ['name'], right: ['actions'] }`. */
+    columnPinning?: ColumnPinningState;
+    onColumnPinningChange?: (pinning: ColumnPinningState) => void;
+    /** Cap the table's height. Rows scroll and the header stays in view. */
+    maxHeight?: number | string;
+    /** Rows to render; set by DataTableVirtual. */
+    rowWindow?: DataTableRowWindowHook;
     pagination?: {
         pageSize?: number;
     };
 }
-export declare function DataTable<TData>({ columns, data, enableSorting, enableRowSelection, selectionColumn, rowSelection: rowSelectionProp, onRowSelectionChange, getRowId, bulkActions, density: densityProp, defaultDensity, onDensityChange, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, viewOptions, toolbar, pagination, caption, captionHidden, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: DataTableProps<TData>): React.JSX.Element;
+export declare function DataTable<TData>({ columns, data, enableSorting, enableRowSelection, selectionColumn, rowSelection: rowSelectionProp, onRowSelectionChange, getRowId, bulkActions, density: densityProp, defaultDensity, onDensityChange, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, viewOptions, toolbar, enableColumnResizing, columnSizing: columnSizingProp, onColumnSizingChange, enableColumnReordering, columnOrder: columnOrderProp, onColumnOrderChange, columnPinning: columnPinningProp, onColumnPinningChange, maxHeight, rowWindow, pagination, caption, captionHidden, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: DataTableProps<TData>): React.JSX.Element;

package/dist/components/DataTable/DataTable.js

@@ -14,6 +14,7 @@ import { cn } from "../../utils/cn.js";
 import { disabledContainer, pressable } from "../../utils/control.js";
 import { floatingSurface } from "../../utils/surface.js";
 import { useControllableState } from "../../hooks/useControllableState.js";
+import { useIsomorphicLayoutEffect } from "../../hooks/useIsomorphicLayoutEffect.js";
 import { useLocale, useNexubMessages } from "../NexubProvider/NexubProvider.js";
 import { Table } from "../Table/Table.js";
 import { Checkbox } from "../Checkbox/Checkbox.js";
@@ -84,6 +85,23 @@ const TableCell = React.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableCell.displayName = "DataTable.TableCell";
+function Spacer({ height }) {
+  return /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", className: "border-0", children: /* @__PURE__ */ jsx(
+    "td",
+    {
+      ref: (el) => {
+        if (el) el.style.height = px(height);
+      },
+      className: "p-0"
+    }
+  ) });
+}
+const useAllRows = (count) => ({
+  indexes: Array.from({ length: count }, (_, i) => i),
+  before: 0,
+  after: 0
+});
+const px = (n) => typeof n === "number" ? `${n}px` : n;
 const apply = (u, prev) => typeof u === "function" ? u(prev) : u;
 const columnLabel = (c) => typeof c.columnDef.header === "string" ? c.columnDef.header : c.id;
 function DataTable({
@@ -103,6 +121,16 @@ function DataTable({
   onColumnVisibilityChange,
   viewOptions = false,
   toolbar,
+  enableColumnResizing = false,
+  columnSizing: columnSizingProp,
+  onColumnSizingChange,
+  enableColumnReordering = false,
+  columnOrder: columnOrderProp,
+  onColumnOrderChange,
+  columnPinning: columnPinningProp,
+  onColumnPinningChange,
+  maxHeight,
+  rowWindow,
   pagination,
   caption,
   captionHidden = false,
@@ -112,7 +140,7 @@ function DataTable({
   ...props
 }) {
   const messages = useNexubMessages();
-  const { locale } = useLocale();
+  const { locale, dir } = useLocale();
   const [sorting, setSorting] = React.useState([]);
   const [rowSelection = {}, setRowSelection] = useControllableState({
     value: rowSelectionProp,
@@ -129,11 +157,33 @@ function DataTable({
     defaultValue: {},
     onChange: onColumnVisibilityChange
   });
+  const [columnSizing = {}, setColumnSizing] = useControllableState({
+    value: columnSizingProp,
+    defaultValue: {},
+    onChange: onColumnSizingChange
+  });
+  const [columnOrder = [], setColumnOrder] = useControllableState({
+    value: columnOrderProp,
+    defaultValue: [],
+    onChange: onColumnOrderChange
+  });
+  const [pinningIn = {}, setColumnPinning] = useControllableState({
+    value: columnPinningProp,
+    defaultValue: {},
+    onChange: onColumnPinningChange
+  });
+  const [announcement, setAnnouncement] = React.useState("");
+  const tableRef = React.useRef(null);
+  const dragged = React.useRef(null);
   const [paginationState, setPaginationState] = React.useState({
     pageIndex: 0,
     pageSize: pagination?.pageSize ?? 20
   });
   const withSelectColumn = enableRowSelection && selectionColumn;
+  const columnPinning = React.useMemo(
+    () => withSelectColumn && pinningIn.left?.length && !pinningIn.left.includes("__select") ? { ...pinningIn, left: ["__select", ...pinningIn.left] } : pinningIn,
+    [withSelectColumn, pinningIn]
+  );
   const allColumns = React.useMemo(
     () => withSelectColumn ? [
       {
@@ -167,9 +217,23 @@ function DataTable({
       sorting: enableSorting ? sorting : void 0,
       rowSelection: enableRowSelection ? rowSelection : void 0,
       pagination: pagination ? paginationState : void 0,
-      columnVisibility
+      columnVisibility,
+      columnSizing,
+      columnOrder,
+      columnPinning
     }),
-    [enableSorting, sorting, enableRowSelection, rowSelection, pagination, paginationState, columnVisibility]
+    [
+      enableSorting,
+      sorting,
+      enableRowSelection,
+      rowSelection,
+      pagination,
+      paginationState,
+      columnVisibility,
+      columnSizing,
+      columnOrder,
+      columnPinning
+    ]
   );
   const table = useReactTable({
     data,
@@ -179,6 +243,12 @@ function DataTable({
     onSortingChange: enableSorting ? setSorting : void 0,
     onRowSelectionChange: enableRowSelection ? (u) => setRowSelection(apply(u, rowSelection)) : void 0,
     onColumnVisibilityChange: (u) => setColumnVisibility(apply(u, columnVisibility)),
+    onColumnSizingChange: (u) => setColumnSizing(apply(u, columnSizing)),
+    onColumnOrderChange: (u) => setColumnOrder(apply(u, columnOrder)),
+    onColumnPinningChange: (u) => setColumnPinning(apply(u, columnPinning)),
+    enableColumnResizing,
+    columnResizeMode: "onChange",
+    columnResizeDirection: dir,
     onPaginationChange: pagination ? setPaginationState : void 0,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: enableSorting ? getSortedRowModel() : void 0,
@@ -194,6 +264,50 @@ function DataTable({
   const multiSort = sorting.length > 1;
   const offerAll = withSelectColumn && !!pagination && table.getIsAllPageRowsSelected() && totalRows > table.getRowModel().rows.length;
   const clear = () => table.resetRowSelection(true);
+  const rows = table.getRowModel().rows;
+  const useRowWindow = rowWindow ?? useAllRows;
+  const rowWin = useRowWindow(rows.length, () => tableRef.current?.parentElement ?? null);
+  const pinned = (columnPinning.left?.length ?? 0) + (columnPinning.right?.length ?? 0) > 0;
+  useIsomorphicLayoutEffect(() => {
+    const t = tableRef.current;
+    if (!t) return;
+    t.style.width = enableColumnResizing ? px(table.getTotalSize()) : "";
+    const scroller = t.parentElement;
+    if (scroller) scroller.style.maxHeight = maxHeight == null ? "" : px(maxHeight);
+  });
+  const placeCell = (column) => (el) => {
+    if (!el) return;
+    el.style.width = enableColumnResizing ? px(column.getSize()) : "";
+    const side = column.getIsPinned();
+    el.style.insetInlineStart = side === "left" ? px(column.getStart("left")) : "";
+    el.style.insetInlineEnd = side === "right" ? px(column.getAfter("right")) : "";
+  };
+  const pinClass = (column) => {
+    const side = column.getIsPinned();
+    if (!side) return void 0;
+    return cn(
+      "sticky z-[1] bg-[var(--color-surface)]",
+      "[tr:hover>&]:bg-[color-mix(in_srgb,var(--color-on-surface)_8%,var(--color-surface))]",
+      "[tr[data-state=selected]>&]:bg-[color-mix(in_srgb,var(--color-primary)_10%,var(--color-surface))]",
+      side === "left" && column.getIsLastColumn("left") && "border-e border-[var(--color-outline-variant)]",
+      side === "right" && column.getIsFirstColumn("right") && "border-s border-[var(--color-outline-variant)]"
+    );
+  };
+  const moveColumn = (id, to) => {
+    const ids = table.getAllLeafColumns().map((c) => c.id);
+    const order = (columnOrder.length ? columnOrder : ids).filter((c) => c !== "__select" && ids.includes(c));
+    for (const c of ids) if (c !== "__select" && !order.includes(c)) order.push(c);
+    const from = order.indexOf(id);
+    const target = typeof to === "number" ? from + to : order.indexOf(to);
+    if (from < 0 || target < 0 || target >= order.length || target === from) return;
+    order.splice(from, 1);
+    order.splice(target, 0, id);
+    setColumnOrder(withSelectColumn ? ["__select", ...order] : order);
+    if (typeof to === "number") {
+      const col = table.getColumn(id);
+      setAnnouncement(messages.columnMoved(col ? columnLabel(col) : id, target + 1, order.length));
+    }
+  };
   return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), "data-density": density, ...props, children: [
     (toolbar != null || viewOptions) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
       toolbar,
@@ -230,61 +344,151 @@ function DataTable({
       /* @__PURE__ */ jsx("span", { children: messages.selectedCount(fmt(selectedRows.length)) }),
       /* @__PURE__ */ jsx(Button, { variant: "link", size: "sm", onClick: () => table.toggleAllRowsSelected(true), children: messages.selectAllRows(fmt(totalRows)) })
     ] }) }),
-    /* @__PURE__ */ jsxs(TableRoot, { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children: [
-      caption != null && /* @__PURE__ */ jsx(Table.Caption, { className: cn(captionHidden && "sr-only"), children: caption }),
-      /* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: headerGroup.headers.map((header) => {
-        const align = header.column.columnDef.meta?.align ?? "start";
-        return /* @__PURE__ */ jsx(
-          TableHead,
-          {
-            className: cn(alignText[align], compact && "h-8", header.column.id === "__select" && "w-10"),
-            "aria-sort": enableSorting && header.column.getCanSort() ? header.column.getIsSorted() === "asc" ? "ascending" : header.column.getIsSorted() === "desc" ? "descending" : "none" : void 0,
-            children: header.isPlaceholder ? null : enableSorting && header.column.getCanSort() ? /* @__PURE__ */ jsxs(
-              "button",
+    /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", children: announcement }),
+    /* @__PURE__ */ jsxs(
+      TableRoot,
+      {
+        ref: tableRef,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-rowcount": rowWin.virtual ? rows.length + 1 : void 0,
+        className: cn(enableColumnResizing && "table-fixed"),
+        children: [
+          caption != null && /* @__PURE__ */ jsx(Table.Caption, { className: cn(captionHidden && "sr-only"), children: caption }),
+          /* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: headerGroup.headers.map((header) => {
+            const align = header.column.columnDef.meta?.align ?? "start";
+            const col = header.column;
+            const reorderable = enableColumnReordering && col.id !== "__select" && !col.getIsPinned();
+            const sortable = enableSorting && col.getCanSort();
+            return /* @__PURE__ */ jsxs(
+              TableHead,
               {
-                type: "button",
-                onClick: header.column.getToggleSortingHandler(),
+                ref: placeCell(col),
                 className: cn(
-                  "flex w-full items-center gap-1 hover:text-[var(--color-on-surface)]",
-                  alignJustify[align]
+                  alignText[align],
+                  compact && "h-8",
+                  col.id === "__select" && "w-10",
+                  // Anchors the resize handle; sticky (below) wins when set and anchors it too.
+                  (enableColumnResizing || reorderable) && "relative",
+                  maxHeight != null && "sticky top-0 z-[2] bg-[var(--color-surface)]",
+                  pinClass(col),
+                  maxHeight != null && col.getIsPinned() && "z-[3] [tr:hover>&]:bg-[var(--color-surface)]",
+                  reorderable && "cursor-grab"
                 ),
+                tabIndex: reorderable && !sortable ? 0 : void 0,
+                draggable: reorderable || void 0,
+                onDragStart: reorderable ? () => dragged.current = col.id : void 0,
+                onDragOver: reorderable ? (e) => e.preventDefault() : void 0,
+                onDrop: reorderable ? (e) => {
+                  e.preventDefault();
+                  if (dragged.current) moveColumn(dragged.current, col.id);
+                  dragged.current = null;
+                } : void 0,
+                onKeyDown: reorderable ? (e) => {
+                  if (!e.altKey || e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+                  e.preventDefault();
+                  const forward = e.key === "ArrowRight" === (dir !== "rtl");
+                  moveColumn(col.id, forward ? 1 : -1);
+                } : void 0,
+                "aria-sort": enableSorting && header.column.getCanSort() ? header.column.getIsSorted() === "asc" ? "ascending" : header.column.getIsSorted() === "desc" ? "descending" : "none" : void 0,
                 children: [
-                  flexRender(header.column.columnDef.header, header.getContext()),
-                  multiSort && header.column.getIsSorted() && /* @__PURE__ */ jsxs("span", { className: "text-[10px] tabular-nums leading-none", children: [
-                    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: header.column.getSortIndex() + 1 }),
-                    /* @__PURE__ */ jsx("span", { className: "sr-only", children: messages.sortOrder(header.column.getSortIndex() + 1) })
-                  ] }),
-                  header.column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { size: "xs", "aria-hidden": "true" }) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { size: "xs", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronsUpDown, { size: "xs", className: "opacity-40", "aria-hidden": "true" })
+                  header.isPlaceholder ? null : enableSorting && header.column.getCanSort() ? /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: header.column.getToggleSortingHandler(),
+                      className: cn(
+                        "flex w-full items-center gap-1 hover:text-[var(--color-on-surface)]",
+                        alignJustify[align]
+                      ),
+                      children: [
+                        flexRender(header.column.columnDef.header, header.getContext()),
+                        multiSort && header.column.getIsSorted() && /* @__PURE__ */ jsxs("span", { className: "text-[10px] tabular-nums leading-none", children: [
+                          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: header.column.getSortIndex() + 1 }),
+                          /* @__PURE__ */ jsx("span", { className: "sr-only", children: messages.sortOrder(header.column.getSortIndex() + 1) })
+                        ] }),
+                        header.column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { size: "xs", "aria-hidden": "true" }) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { size: "xs", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronsUpDown, { size: "xs", className: "opacity-40", "aria-hidden": "true" })
+                      ]
+                    }
+                  ) : flexRender(header.column.columnDef.header, header.getContext()),
+                  enableColumnResizing && col.getCanResize() && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      role: "separator",
+                      "aria-orientation": "vertical",
+                      "aria-label": messages.resizeColumn(columnLabel(col)),
+                      "aria-valuenow": header.getSize(),
+                      "aria-valuemin": col.columnDef.minSize ?? 20,
+                      "aria-valuemax": col.columnDef.maxSize ?? 1e3,
+                      tabIndex: 0,
+                      draggable: false,
+                      onMouseDown: header.getResizeHandler(),
+                      onTouchStart: header.getResizeHandler(),
+                      onDoubleClick: () => col.resetSize(),
+                      onKeyDown: (e) => {
+                        if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+                        e.preventDefault();
+                        e.stopPropagation();
+                        const grow = e.key === "ArrowRight" === (dir !== "rtl");
+                        const min = col.columnDef.minSize ?? 20;
+                        const max = col.columnDef.maxSize ?? 1e3;
+                        const size = Math.min(max, Math.max(min, header.getSize() + (grow ? 16 : -16)));
+                        table.setColumnSizing((s) => ({ ...s, [col.id]: size }));
+                      },
+                      className: cn(
+                        "absolute inset-y-0 end-0 z-[1] w-2 cursor-col-resize touch-none select-none outline-none",
+                        "after:absolute after:inset-y-2 after:end-0 after:w-px after:bg-[var(--color-outline-variant)]",
+                        "hover:after:w-0.5 hover:after:bg-[var(--color-primary)] focus-visible:after:w-0.5 focus-visible:after:bg-[var(--color-primary)]",
+                        col.getIsResizing() && "after:w-0.5 after:bg-[var(--color-primary)]"
+                      )
+                    }
+                  )
                 ]
-              }
-            ) : flexRender(header.column.columnDef.header, header.getContext())
-          },
-          header.id
-        );
-      }) }, headerGroup.id)) }),
-      /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(
-        TableRow,
-        {
-          "data-state": enableRowSelection && row.getIsSelected() ? "selected" : void 0,
-          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(
+              },
+              header.id
+            );
+          }) }, headerGroup.id)) }),
+          /* @__PURE__ */ jsx(TableBody, { children: rows.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            rowWin.before > 0 && /* @__PURE__ */ jsx(Spacer, { height: rowWin.before }),
+            rowWin.indexes.map((i) => {
+              const row = rows[i];
+              return /* @__PURE__ */ jsx(
+                TableRow,
+                {
+                  ref: rowWin.measure,
+                  "data-index": i,
+                  "aria-rowindex": rowWin.virtual ? i + 2 : void 0,
+                  "data-state": enableRowSelection && row.getIsSelected() ? "selected" : void 0,
+                  children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(
+                    TableCell,
+                    {
+                      ref: pinned || enableColumnResizing ? placeCell(cell.column) : void 0,
+                      className: cn(
+                        alignText[cell.column.columnDef.meta?.align ?? "start"],
+                        compact && "py-1.5",
+                        pinClass(cell.column),
+                        enableColumnResizing && "truncate"
+                      ),
+                      children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                    },
+                    cell.id
+                  ))
+                },
+                row.id
+              );
+            }),
+            rowWin.after > 0 && /* @__PURE__ */ jsx(Spacer, { height: rowWin.after })
+          ] }) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
             TableCell,
             {
-              className: cn(alignText[cell.column.columnDef.meta?.align ?? "start"], compact && "py-1.5"),
-              children: flexRender(cell.column.columnDef.cell, cell.getContext())
-            },
-            cell.id
-          ))
-        },
-        row.id
-      )) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
-        TableCell,
-        {
-          colSpan: table.getVisibleLeafColumns().length,
-          className: "h-24 text-center text-[var(--color-on-surface-muted)]",
-          children: messages.noResults
-        }
-      ) }) })
-    ] }),
+              colSpan: table.getVisibleLeafColumns().length,
+              className: "h-24 text-center text-[var(--color-on-surface-muted)]",
+              children: messages.noResults
+            }
+          ) }) })
+        ]
+      }
+    ),
     pagination && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 text-sm text-[var(--color-on-surface-muted)]", children: [
       /* @__PURE__ */ jsx("span", { children: messages.pageOf(table.getState().pagination.pageIndex + 1, table.getPageCount()) }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [

package/dist/components/DataTable/index.d.ts

@@ -1,2 +1,2 @@
 export { DataTable } from './DataTable.js';
-export type { DataTableProps, DataTableColumn } from './DataTable.js';
+export type { DataTableProps, DataTableColumn, DataTableDensity, DataTableRowWindow, DataTableRowWindowHook } from './DataTable.js';

package/dist/components/DataTableVirtual/DataTableVirtual.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { type DataTableProps } from '../DataTable/DataTable.js';
+export interface DataTableVirtualProps<TData> extends Omit<DataTableProps<TData>, 'pagination' | 'rowWindow'> {
+    /** Height of the scrolling area. Required: rows are windowed within it. */
+    maxHeight: number | string;
+    /** Row height before measuring, in px. Default 49, or 37 when compact. */
+    estimateRowHeight?: number;
+    /** Rows rendered beyond the visible ones, each way. Default 8. */
+    overscan?: number;
+}
+/**
+ * DataTable for thousands of rows: only the rows in view (plus `overscan`)
+ * are in the DOM. Rows carry aria-rowindex and the table aria-rowcount, so
+ * screen readers still report the full size. Needs `@tanstack/react-virtual`.
+ */
+export declare function DataTableVirtual<TData>({ estimateRowHeight, overscan, ...props }: DataTableVirtualProps<TData>): React.JSX.Element;
+export declare namespace DataTableVirtual {
+    var displayName: string;
+}

package/dist/components/DataTableVirtual/DataTableVirtual.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { DataTable } from "../DataTable/DataTable.js";
+const Options = React.createContext({ estimate: 49, overscan: 8, height: 600 });
+const useVirtualRows = (count, getScrollElement) => {
+  const { estimate, overscan, height } = React.useContext(Options);
+  const virtualizer = useVirtualizer({
+    count,
+    getScrollElement,
+    estimateSize: () => estimate,
+    overscan,
+    // First render (and the server) assumes the full height, so rows show before measuring.
+    initialRect: { width: 0, height }
+  });
+  const items = virtualizer.getVirtualItems();
+  const last = items[items.length - 1];
+  return {
+    indexes: items.map((i) => i.index),
+    before: items[0]?.start ?? 0,
+    after: last ? virtualizer.getTotalSize() - last.end : 0,
+    measure: virtualizer.measureElement,
+    virtual: true
+  };
+};
+function DataTableVirtual({ estimateRowHeight, overscan = 8, ...props }) {
+  const compact = (props.density ?? props.defaultDensity) === "compact";
+  const estimate = estimateRowHeight ?? (compact ? 37 : 49);
+  const height = typeof props.maxHeight === "number" ? props.maxHeight : 600;
+  const options = React.useMemo(() => ({ estimate, overscan, height }), [estimate, overscan, height]);
+  return /* @__PURE__ */ jsx(Options.Provider, { value: options, children: /* @__PURE__ */ jsx(DataTable, { ...props, rowWindow: useVirtualRows }) });
+}
+DataTableVirtual.displayName = "DataTableVirtual";
+export {
+  DataTableVirtual
+};

package/dist/components/DataTableVirtual/index.d.ts

@@ -0,0 +1,2 @@
+export { DataTableVirtual } from './DataTableVirtual.js';
+export type { DataTableVirtualProps } from './DataTableVirtual.js';

package/dist/components/DataTableVirtual/index.js

@@ -0,0 +1,4 @@
+import { DataTableVirtual } from "./DataTableVirtual.js";
+export {
+  DataTableVirtual
+};

package/dist/index.d.ts

@@ -200,7 +200,7 @@ export { CommandPalette } from './components/CommandPalette/index.js';
 export type { CommandPaletteRootProps } from './components/CommandPalette/index.js';
 export { Table } from './components/Table/index.js';
 export { DataTable } from './components/DataTable/index.js';
-export type { DataTableProps } from './components/DataTable/index.js';
+export type { DataTableProps, DataTableDensity } from './components/DataTable/index.js';
 export { EmptyState } from './components/EmptyState/index.js';
 export { ErrorState } from './components/ErrorState/index.js';
 export type { ErrorStateProps } from './components/ErrorState/index.js';