@nexub/react 5.2.0 → 5.4.0

package/accessibility.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.2.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 RowData } 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' */
@@ -8,6 +8,19 @@ 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`). */
@@ -17,8 +30,44 @@ export interface DataTableProps<TData> extends React.HTMLAttributes<HTMLDivEleme
     data: TData[];
     enableSorting?: boolean;
     enableRowSelection?: boolean;
+    /**
+     * With `enableRowSelection`: a checkbox column with select-page in its
+     * header, and "Select all N" across pages. On by default from 6.0.
+     */
+    selectionColumn?: boolean;
+    /** Controlled selection, keyed by row id (see `getRowId`). */
+    rowSelection?: RowSelectionState;
+    onRowSelectionChange?: (selection: RowSelectionState) => void;
+    /** Stable row ids for selection; defaults to the row index. */
+    getRowId?: (row: TData, index: number) => string;
+    /** A floating bar while rows are selected: render your actions for the selected rows. */
+    bulkActions?: (rows: TData[], clear: () => void) => React.ReactNode;
+    density?: DataTableDensity;
+    defaultDensity?: DataTableDensity;
+    onDensityChange?: (density: DataTableDensity) => void;
+    columnVisibility?: VisibilityState;
+    onColumnVisibilityChange?: (visibility: VisibilityState) => void;
+    /** A "View" menu above the table: density and which columns show. */
+    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, 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

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import {
   useReactTable,
@@ -9,11 +9,17 @@ import {
   getPaginationRowModel,
   flexRender
 } from "@tanstack/react-table";
-import { ArrowUp, ArrowDown, ChevronsUpDown } from "@nexub/icons";
+import { ArrowUp, ArrowDown, ChevronsUpDown, SlidersHorizontal, X } from "@nexub/icons";
 import { cn } from "../../utils/cn.js";
 import { disabledContainer, pressable } from "../../utils/control.js";
-import { useNexubMessages } from "../NexubProvider/NexubProvider.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";
+import { Button } from "../Button/Button.js";
+import { DropdownMenu } from "../DropdownMenu/DropdownMenu.js";
 const alignText = {
   start: "text-start",
   end: "text-end",
@@ -47,7 +53,7 @@ const TableRow = React.forwardRef(
     {
       ref,
       className: cn(
-        "border-b border-[var(--color-outline-variant)] transition-colors hover:bg-[color-mix(in_srgb,var(--color-on-surface)_8%,transparent)] data-[state=selected]:bg-[var(--color-surface-container-low)]",
+        "border-b border-[var(--color-outline-variant)] transition-colors hover:bg-[color-mix(in_srgb,var(--color-on-surface)_8%,transparent)] data-[state=selected]:bg-[color-mix(in_srgb,var(--color-primary)_10%,transparent)]",
         className
       ),
       ...props
@@ -79,11 +85,52 @@ 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({
   columns,
   data,
   enableSorting = false,
   enableRowSelection = false,
+  selectionColumn = false,
+  rowSelection: rowSelectionProp,
+  onRowSelectionChange,
+  getRowId,
+  bulkActions,
+  density: densityProp,
+  defaultDensity = "comfortable",
+  onDensityChange,
+  columnVisibility: columnVisibilityProp,
+  onColumnVisibilityChange,
+  viewOptions = false,
+  toolbar,
+  enableColumnResizing = false,
+  columnSizing: columnSizingProp,
+  onColumnSizingChange,
+  enableColumnReordering = false,
+  columnOrder: columnOrderProp,
+  onColumnOrderChange,
+  columnPinning: columnPinningProp,
+  onColumnPinningChange,
+  maxHeight,
+  rowWindow,
   pagination,
   caption,
   captionHidden = false,
@@ -93,26 +140,115 @@ function DataTable({
   ...props
 }) {
   const messages = useNexubMessages();
+  const { locale, dir } = useLocale();
   const [sorting, setSorting] = React.useState([]);
-  const [rowSelection, setRowSelection] = React.useState({});
+  const [rowSelection = {}, setRowSelection] = useControllableState({
+    value: rowSelectionProp,
+    defaultValue: {},
+    onChange: onRowSelectionChange
+  });
+  const [density = "comfortable", setDensity] = useControllableState({
+    value: densityProp,
+    defaultValue: defaultDensity,
+    onChange: onDensityChange
+  });
+  const [columnVisibility = {}, setColumnVisibility] = useControllableState({
+    value: columnVisibilityProp,
+    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 ? [
+      {
+        id: "__select",
+        enableSorting: false,
+        enableHiding: false,
+        header: ({ table: table2 }) => /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            "aria-label": messages.selectAllOnPage,
+            checked: table2.getIsAllPageRowsSelected() ? true : table2.getIsSomePageRowsSelected() ? "indeterminate" : false,
+            onCheckedChange: (v) => table2.toggleAllPageRowsSelected(v === true)
+          }
+        ),
+        cell: ({ row }) => /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            "aria-label": messages.selectRow,
+            checked: row.getIsSelected(),
+            disabled: !row.getCanSelect(),
+            onCheckedChange: (v) => row.toggleSelected(v === true)
+          }
+        )
+      },
+      ...columns
+    ] : columns,
+    [withSelectColumn, columns, messages.selectAllOnPage, messages.selectRow]
+  );
   const tableState = React.useMemo(
     () => ({
       sorting: enableSorting ? sorting : void 0,
       rowSelection: enableRowSelection ? rowSelection : void 0,
-      pagination: pagination ? paginationState : void 0
+      pagination: pagination ? paginationState : void 0,
+      columnVisibility,
+      columnSizing,
+      columnOrder,
+      columnPinning
     }),
-    [enableSorting, sorting, enableRowSelection, rowSelection, pagination, paginationState]
+    [
+      enableSorting,
+      sorting,
+      enableRowSelection,
+      rowSelection,
+      pagination,
+      paginationState,
+      columnVisibility,
+      columnSizing,
+      columnOrder,
+      columnPinning
+    ]
   );
   const table = useReactTable({
     data,
-    columns,
+    columns: allColumns,
     state: tableState,
+    getRowId,
     onSortingChange: enableSorting ? setSorting : void 0,
-    onRowSelectionChange: enableRowSelection ? setRowSelection : 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,
@@ -121,58 +257,238 @@ function DataTable({
     enableRowSelection,
     manualPagination: false
   });
-  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), ...props, children: [
-    /* @__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: alignText[align],
-            "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",
+  const compact = density === "compact";
+  const selectedRows = enableRowSelection ? table.getSelectedRowModel().rows : [];
+  const totalRows = table.getCoreRowModel().rows.length;
+  const fmt = (n) => new Intl.NumberFormat(locale).format(n);
+  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,
+      viewOptions && /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
+        /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "ms-auto", children: [
+          /* @__PURE__ */ jsx(SlidersHorizontal, { size: "sm", "aria-hidden": "true" }),
+          messages.view
+        ] }) }),
+        /* @__PURE__ */ jsxs(DropdownMenu.Content, { align: "end", children: [
+          /* @__PURE__ */ jsx(DropdownMenu.Label, { children: messages.density }),
+          /* @__PURE__ */ jsxs(DropdownMenu.RadioGroup, { value: density, onValueChange: (v) => setDensity(v), children: [
+            /* @__PURE__ */ jsx(DropdownMenu.RadioItem, { value: "comfortable", children: messages.comfortable }),
+            /* @__PURE__ */ jsx(DropdownMenu.RadioItem, { value: "compact", children: messages.compact })
+          ] }),
+          /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
+          /* @__PURE__ */ jsx(DropdownMenu.Label, { children: messages.columns }),
+          table.getAllLeafColumns().filter((c) => c.getCanHide()).map((c) => /* @__PURE__ */ jsx(
+            DropdownMenu.CheckboxItem,
+            {
+              checked: c.getIsVisible(),
+              onCheckedChange: (v) => c.toggleVisibility(v === true),
+              onSelect: (e) => e.preventDefault(),
+              children: columnLabel(c)
+            },
+            c.id
+          ))
+        ] })
+      ] })
+    ] }),
+    offerAll && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2 rounded-shape-container bg-[var(--color-surface-container-low)] px-4 py-2 text-body-sm", children: table.getIsAllRowsSelected() ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { children: messages.selectedCount(fmt(totalRows)) }),
+      /* @__PURE__ */ jsx(Button, { variant: "link", size: "sm", onClick: clear, children: messages.clearSelection })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__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__ */ 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()),
-                  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: alignText[cell.column.columnDef.meta?.align ?? "start"],
-              children: flexRender(cell.column.columnDef.cell, cell.getContext())
-            },
-            cell.id
-          ))
-        },
-        row.id
-      )) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
-        TableCell,
-        {
-          colSpan: columns.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: [
@@ -197,7 +513,27 @@ function DataTable({
           }
         )
       ] })
-    ] })
+    ] }),
+    bulkActions && selectedRows.length > 0 && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "region",
+        "aria-label": messages.selectedCount(fmt(selectedRows.length)),
+        className: cn(
+          floatingSurface,
+          "nx-motion sticky bottom-4 z-10 mx-auto flex w-fit max-w-full flex-wrap items-center gap-3 px-4 py-2"
+        ),
+        "data-state": "open",
+        children: [
+          /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "text-label-lg tabular-nums", children: messages.selectedCount(fmt(selectedRows.length)) }),
+          bulkActions(
+            selectedRows.map((r) => r.original),
+            clear
+          ),
+          /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: clear, "aria-label": messages.clearSelection, children: /* @__PURE__ */ jsx(X, { size: "sm", "aria-hidden": "true" }) })
+        ]
+      }
+    )
   ] });
 }
 export {

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;
+}