cortena-ui 1.7.0 → 1.8.0

package/CHANGELOG.md

@@ -3,6 +3,52 @@
 Notable changes per release. Versions before 1.6.0 are recorded in the git log
 and in `../../CONSUMING.md`; this file starts where the changelog does.
 
+## 1.8.0
+
+### Added
+
+- **A `DataTable` column can take the width the others leave** (DESIGN-77).
+  The grid is `table-fixed`, so a column that declared no `size` sat at
+  TanStack's 150 px default: on a list of one wide column and a few narrow
+  ones, the column people came to read was clipped while empty space sat to
+  its right. See "Column widths" in `README.md`.
+  - `meta: { fill: true }` marks that column. It is the one column drawn with
+    no fixed width, so the remainder lands on it instead of on the filler
+    cell; every other column keeps its `size`. One per table — the first
+    visible one wins, and a pinned column is not eligible: a pinned column is
+    placed at an offset measured off its neighbours' widths, so one with no
+    width of its own would misplace every pinned column beside it. Its own
+    `size` stays as a floor, since the table's `min-width` still counts it,
+    and it is not itself resizable: a column with no width of its own has no
+    edge to drag.
+  - A table with a fill column defaults `enableColumnResizing` to `true`. The
+    drag now has somewhere to go — the dragged column takes the width and the
+    fill column gives it up. An explicit `false` still wins. The default
+    commits the new width on release (`columnResizeMode: "onEnd"`), because a
+    table that did not ask to be resizable should not re-render every row on
+    every mouse move; setting `enableColumnResizing` yourself keeps the live
+    `"onChange"` drag.
+  - Cells carry their full text in the native `title`, so text the row
+    truncates is still reachable — on every row, independent of anything else
+    on it. A column that renders its own value gets it from that value; a
+    column with its own `cell` renderer draws a node the table will not guess
+    at, and says what the hover text is with
+    `meta: { hoverText: (row) => string | undefined }`. Headers get a title
+    only from `meta: { label }`; repeating a one-word header in a tooltip on
+    every `<th>` is noise, and the select and expand columns have no sentence
+    to repeat.
+  - In dev, a table with an unsized column and no fill column warns once,
+    naming the column.
+
+### Fixed
+
+- **The expander and the selection checkbox no longer fire the row's own
+  click** (DESIGN-79). On a table with both `onRowClick` and
+  `renderSubComponent`, opening a row's detail panel also navigated away from
+  it, and ticking the checkbox selected the row and then left the page. Both
+  controls now stop the event, by pointer and by keyboard, so a consumer no
+  longer has to recognise the click target itself.
+
 ## 1.7.0
 
 ### Added

package/README.md

@@ -354,6 +354,74 @@ names the session (the key is still written, so one window stays on one
 session), `listSessions: false` for a host with its own session list, and
 `mintSessionKey` for a host that binds sessions some other way.
 
+## Column widths
+
+`DataTable` lays the grid out `table-fixed`: every column is drawn at its
+`size`, and a column that never declared one sits at TanStack's 150 px
+default. A list of one wide column and a few narrow ones — a title beside an
+id, a status, an assignee — then clips the column people came to read while
+empty space sits to its right. Three rules keep a list readable.
+
+**One fill column: the column people scan the list by.** Mark it
+`meta: { fill: true }` and give every other column a `size`. The fill column
+is the one drawn with no fixed width, so the remainder lands on it. Its own
+`size` stays as a floor — the table's `min-width` still counts it, so a narrow
+window scrolls rather than squeezing the column to nothing — and it is not
+itself resizable, because a column with no width has no edge to drag. **A fill
+column cannot be pinned**: a pinned column is placed at an offset measured off
+the widths of the columns beside it, so one with no width of its own would put
+every pinned neighbour in the wrong place. Pin it and the table skips it and
+falls back to the filler cell.
+
+A table with a fill column turns `enableColumnResizing` on by default:
+dragging any other column's edge now has somewhere to go, and the fill column
+absorbs the difference. That default resizes on release (`onEnd`), since a
+table that never asked to be resizable should not re-render every row on every
+mouse move; set `enableColumnResizing` yourself and the drag is live
+(`onChange`). Pass `enableColumnResizing={false}` to turn it off.
+
+```tsx
+const columns = helper.columns([
+  helper.accessor("id", { header: "ID", size: 110 }),
+  helper.accessor("title", { header: "Title", size: 240, meta: { fill: true } }),
+  helper.accessor("status", { header: "Status", size: 130, meta: { filter: "faceted" } }),
+  helper.accessor("assignee", { header: "Assignee", size: 200 }),
+]);
+```
+
+In dev, a table with an unsized column and no fill column warns once, naming
+the column. It is the one layout mistake that produces no error and no
+warning from anything else — just clipped text.
+
+**Cells truncate, never wrap, and carry their full text on hover.** Rows keep
+one height: a list whose rows grow to fit their longest cell is no longer
+scannable, and there is no wrapping option. Truncated text has to stay
+reachable, so a column that renders its own value puts that value in the
+cell's `title` automatically — every row of it, whatever else is or is not on
+that row. A column with its own `cell` renderer draws a node the table cannot
+read; say what the hover text is with
+`meta: { hoverText: (row) => row.title }`, or leave it with none. It is the
+native `title`, not a tooltip component — a tooltip on every cell of a
+hundred-row grid is a hundred listeners and a lot of noise.
+
+Headers are not cells and get no automatic title: a header is one short phrase
+the consumer chose, and repeating it in a tooltip on every `<th>` is noise. A
+column that wants one sets `meta: { label: "…" }`, which is the same label the
+view menu and the exports use.
+
+**Long text belongs in an expandable row.** A description, an error body, a
+payload: none of them fit on a row, and widening the column does not make them
+fit. Pass `renderSubComponent` and the table adds an expander column; the
+detail panel opens beneath the row, full width.
+
+```tsx
+<DataTable
+  columns={columns}
+  dataSource={{ kind: "client", rows }}
+  renderSubComponent={(row) => <Markdown>{row.original.description}</Markdown>}
+/>
+```
+
 ## Charts in tests
 
 Both chart engines size themselves from the parent box, and under jsdom every

package/dist/components/badge.d.ts

@@ -3,7 +3,7 @@ import { VariantProps } from "class-variance-authority";
 import * as React from "react";
 //#region src/components/badge.d.ts
 declare const badgeVariants: (props?: ({
-  variant?: "default" | "success" | "warning" | "warn" | "destructive" | "danger" | "info" | "neutral" | "secondary" | "outline" | null | undefined;
+  variant?: "default" | "success" | "warn" | "destructive" | "danger" | "info" | "warning" | "neutral" | "secondary" | "outline" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface BadgeProps extends React.ComponentProps<"span">, VariantProps<typeof badgeVariants> {}
 declare function Badge({ className, variant, ...props }: BadgeProps): React.JSX.Element;

package/dist/components/data-table/data-table.js

@@ -109,6 +109,23 @@ const alignClass = {
 	center: "text-center",
 	end: "text-right"
 };
+/**
+* Full text for a cell's `title`, or undefined for no title.
+*
+* Cells truncate and never wrap, so the only way back to the full text is the
+* pointer. A column that renders its own value can be read straight off the
+* value; a column with a `cell` renderer draws a node the table cannot turn
+* into a sentence, and guessing produces titles like "[object Object]" on a
+* row of buttons. Such a column says what its hover text is with
+* `meta.hoverText`, or has none.
+*/
+function hoverTextFor(cell) {
+	const meta = cell.column.columnDef.meta;
+	if (meta?.hoverText) return meta.hoverText(cell.row.original) || void 0;
+	if (!meta?.plainCell) return void 0;
+	const value = cell.getValue();
+	return typeof value === "string" || typeof value === "number" ? String(value) || void 0 : void 0;
+}
 function EditableCell({ cell, instance, onDone }) {
 	const editable = cell.column.columnDef.meta?.editable;
 	const config = typeof editable === "object" ? editable : {};
@@ -155,6 +172,9 @@ function DataTableView({ instance, className, maxHeight, virtualize, rowHeight =
 	const { table, paginationMode } = instance;
 	const rows = table.getRowModel().rows;
 	const leafColumns = table.getVisibleLeafColumns();
+	const fillColumnId = leafColumns.find((column) => column.columnDef.meta?.fill && !column.getIsPinned())?.id;
+	const widthFor = (column, size) => column.id === fillColumnId ? void 0 : size;
+	const fillerStyle = fillColumnId ? { width: 0 } : void 0;
 	const colCount = leafColumns.length;
 	const headerGroups = table.getHeaderGroups();
 	const isVirtual = virtualize ?? rows.length > VIRTUALIZE_ABOVE;
@@ -372,8 +392,9 @@ function DataTableView({ instance, className, maxHeight, virtualize, rowHeight =
 				"data-editing": isEditing ? "" : void 0,
 				"aria-colindex": c + 1,
 				tabIndex: tabIndexFor(index, c),
+				title: isEditing ? void 0 : hoverTextFor(cell),
 				style: {
-					width: column.getSize(),
+					width: widthFor(column, column.getSize()),
 					...pin.style
 				},
 				onDoubleClick: canEdit && !isEditing ? () => instance.editing.start({
@@ -410,6 +431,7 @@ function DataTableView({ instance, className, maxHeight, virtualize, rowHeight =
 				/* @__PURE__ */ jsx("td", {
 					"aria-hidden": true,
 					"data-slot": "data-table-filler",
+					style: fillerStyle,
 					className: "p-0"
 				}),
 				cells.slice(splitAt).map((cell, i) => renderCell(cell, splitAt + i))
@@ -432,9 +454,12 @@ function DataTableView({ instance, className, maxHeight, virtualize, rowHeight =
 		className: "border-b border-[var(--ds-border-subtle)]",
 		children: [leafColumns.map((column) => /* @__PURE__ */ jsx("td", {
 			className: cellPadding,
-			style: { width: column.getSize() },
+			style: { width: widthFor(column, column.getSize()) },
 			children: /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-3/4" })
-		}, column.id)), /* @__PURE__ */ jsx("td", { className: "p-0" })]
+		}, column.id)), /* @__PURE__ */ jsx("td", {
+			style: fillerStyle,
+			className: "p-0"
+		})]
 	}, `skeleton-${i}`));
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "data-table",
@@ -496,8 +521,9 @@ function DataTableView({ instance, className, maxHeight, virtualize, rowHeight =
 									"aria-sort": sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : column.getCanSort() ? "none" : void 0,
 									colSpan: header.colSpan,
 									tabIndex: tabIndexFor(-1, c),
+									title: meta?.label,
 									style: {
-										width: header.getSize(),
+										width: widthFor(column, header.getSize()),
 										...pin.style
 									},
 									className: cn("group/head relative h-10 align-middle font-medium outline-none", headPadding, "bg-[var(--ds-muted)] text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-muted-foreground)]", "border-b border-[var(--ds-border)]", alignClass[meta?.align ?? "start"], "focus-visible:ring-[2px] focus-visible:ring-inset focus-visible:ring-[var(--ds-ring)]", pin.pinned && "z-[3]", pin.pinned === "start" && pin.edge && "shadow-[inset_-1px_0_0_var(--ds-border)]", pin.pinned === "end" && pin.edge && "shadow-[inset_1px_0_0_var(--ds-border)]", meta?.headerClassName),
@@ -521,6 +547,8 @@ function DataTableView({ instance, className, maxHeight, virtualize, rowHeight =
 									group.headers.slice(0, splitAt).map((header, c) => renderHead(header, c)),
 									/* @__PURE__ */ jsx("th", {
 										"aria-hidden": true,
+										"data-slot": "data-table-filler-head",
+										style: fillerStyle,
 										className: "border-b border-[var(--ds-border)] bg-[var(--ds-muted)] p-0"
 									}),
 									group.headers.slice(splitAt).map((header, i) => renderHead(header, splitAt + i))

package/dist/components/data-table/data-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.js","names":[],"sources":["../../../src/components/data-table/data-table.tsx"],"sourcesContent":["\"use client\";\n\nimport type { RowData } from \"@tanstack/react-table\";\nimport { useVirtualizer } from \"@tanstack/react-virtual\";\nimport { Inbox } from \"lucide-react\";\nimport * as React from \"react\";\nimport { ErrorBanner } from \"@/components/error-banner\";\nimport { Input } from \"@/components/input\";\nimport { Skeleton } from \"@/components/skeleton\";\nimport { Spinner } from \"@/components/spinner\";\nimport { cn } from \"@/lib/cn\";\nimport { DataTableColumnHeader, DataTablePagination, DataTableToolbar } from \"./parts\";\nimport type {\n  DataTableCell,\n  DataTableColumn,\n  DataTableInstance,\n  DataTableRow,\n  DataTableTable,\n  UseDataTableOptions,\n} from \"./types\";\nimport { useDataTable } from \"./use-data-table\";\n\n/**\n * DataTable — the composite from cortenaUI&Design/04-data-tables.md.\n *\n * `<DataTable columns={columns} dataSource={{ kind: \"client\", rows }} />`\n * renders a complete table: toolbar with search, faceted filters, view and\n * export menus; sortable, pinnable, hideable, resizable columns; sticky\n * header; pager; and, past 100 rows, virtualised rows. A server source\n * changes nothing in the markup and everything in the data flow.\n *\n * Markup is a real `<table>` with `role=\"grid\"` so screen readers get rows\n * and columns, and keyboard users get one tab stop with arrow-key movement\n * between cells (roving tabindex), Enter to edit an editable cell, Escape to\n * cancel, Space to toggle selection.\n *\n * Virtualised bodies keep the table element: rows outside the viewport are\n * replaced by two spacer rows sized from the virtualizer, which keeps column\n * widths, sticky headers and pinned columns working without absolute\n * positioning.\n */\n\nconst VIRTUALIZE_ABOVE = 100;\nconst DEFAULT_VIRTUAL_HEIGHT = 600;\nconst INFINITE_THRESHOLD_PX = 240;\n\n/** What a `ref` on `DataTable` hands back. */\nexport interface DataTableHandle<Row extends RowData> {\n  /**\n   * Refetch the page on screen through the same query the auto-refresh\n   * interval drives — never a second fetch path. A table subscribed to a\n   * notification stream calls this from the stream and leaves the interval as\n   * the fallback for when the stream is unavailable.\n   */\n  refresh: () => void;\n  /** Everything else the table knows, for a caller that needs more than a refresh. */\n  instance: DataTableInstance<Row>;\n}\n\nexport interface DataTableViewProps<Row extends RowData> {\n  className?: string;\n  /** Imperative handle: `ref.current.refresh()`. */\n  ref?: React.Ref<DataTableHandle<Row>>;\n  /** Height of the scrolling body. Required for virtualisation to mean anything; defaults to 600px when virtualised. */\n  maxHeight?: number | string;\n  /** Force virtualisation on or off; undefined virtualises above 100 rows. */\n  virtualize?: boolean;\n  /** Estimated row height in px for the virtualizer. @default 40 */\n  rowHeight?: number;\n  /** @default true */\n  stickyHeader?: boolean;\n  /** @default \"default\" */\n  density?: \"default\" | \"compact\";\n  /** Detail panel under an expanded row; enables the expander column. */\n  renderSubComponent?: (row: DataTableRow<Row>) => React.ReactNode;\n  /** `false` hides the toolbar; a function replaces it. */\n  toolbar?: boolean | ((ctx: { instance: DataTableInstance<Row> }) => React.ReactNode);\n  /** Rendered in the toolbar while rows are selected. */\n  bulkActions?: (ctx: { rows: Row[]; table: DataTableTable<Row> }) => React.ReactNode;\n  /** Extra toolbar controls (right side). */\n  toolbarActions?: React.ReactNode;\n  searchPlaceholder?: string;\n  emptyState?: React.ReactNode;\n  /** @default \"No results\" */\n  emptyMessage?: string;\n  pageSizeOptions?: number[];\n  /** @default true */\n  enableExport?: boolean;\n  /** @default \"export\" */\n  exportFileName?: string;\n  /** Show the loading skeleton regardless of the source's own state. */\n  loading?: boolean;\n  /** Error to show above the table, in addition to the server source's. */\n  error?: string | Error | null;\n  onRowClick?: (row: Row, event: React.MouseEvent<HTMLTableRowElement>) => void;\n  /**\n   * The row a detail pane is currently showing, matched against the row id\n   * (`getRowId`, the row index when that is not set). It gets `data-active`\n   * and the `--ds-primary-soft` tint, independent of checkbox selection — a\n   * master/detail list highlights one row without selecting it, and a table\n   * with both can show a selected set and one open row at once.\n   */\n  activeRowId?: string | null;\n  /** Extra classes per row, e.g. to dim rows the app considers stale. */\n  rowClassName?: (row: Row) => string | undefined;\n}\n\nexport type DataTableProps<Row extends RowData> = DataTableViewProps<Row> &\n  ({ instance: DataTableInstance<Row> } | UseDataTableOptions<Row>);\n\nfunction DataTable<Row extends RowData>(props: DataTableProps<Row>) {\n  if (\"instance\" in props) {\n    const { instance, ...view } = props;\n    return <DataTableView instance={instance} {...view} />;\n  }\n  return <DataTableOwned {...props} />;\n}\n\nfunction DataTableOwned<Row extends RowData>(props: DataTableViewProps<Row> & UseDataTableOptions<Row>) {\n  const {\n    className,\n    maxHeight,\n    virtualize,\n    rowHeight,\n    stickyHeader,\n    density,\n    renderSubComponent,\n    toolbar,\n    bulkActions,\n    toolbarActions,\n    searchPlaceholder,\n    emptyState,\n    emptyMessage,\n    pageSizeOptions,\n    enableExport,\n    exportFileName,\n    loading,\n    error,\n    onRowClick,\n    activeRowId,\n    rowClassName,\n    ref,\n    ...options\n  } = props;\n  const instance = useDataTable<Row>({\n    ...options,\n    enableExpanding: options.enableExpanding ?? Boolean(renderSubComponent),\n  });\n  return (\n    <DataTableView\n      instance={instance}\n      className={className}\n      maxHeight={maxHeight}\n      virtualize={virtualize}\n      rowHeight={rowHeight}\n      stickyHeader={stickyHeader}\n      density={density}\n      renderSubComponent={renderSubComponent}\n      toolbar={toolbar}\n      bulkActions={bulkActions}\n      toolbarActions={toolbarActions}\n      searchPlaceholder={searchPlaceholder}\n      emptyState={emptyState}\n      emptyMessage={emptyMessage}\n      pageSizeOptions={pageSizeOptions}\n      enableExport={enableExport}\n      exportFileName={exportFileName}\n      loading={loading}\n      error={error}\n      onRowClick={onRowClick}\n      activeRowId={activeRowId}\n      rowClassName={rowClassName}\n      ref={ref}\n    />\n  );\n}\n\n/* ------------------------------------------------------------------------ */\n/* Pinning                                                                   */\n/* ------------------------------------------------------------------------ */\n\nfunction pinAttrs<Row extends RowData>(\n  column: DataTableColumn<Row, any>,\n  table: DataTableTable<Row>,\n): { style: React.CSSProperties; pinned: \"start\" | \"end\" | undefined; edge: boolean } {\n  const pinned = column.getIsPinned();\n  if (!pinned) return { style: {}, pinned: undefined, edge: false };\n  if (pinned === \"start\") {\n    const last = table.getStartVisibleLeafColumns().at(-1);\n    return {\n      style: { position: \"sticky\", left: column.getStart(\"start\") },\n      pinned,\n      edge: last?.id === column.id,\n    };\n  }\n  const first = table.getEndVisibleLeafColumns()[0];\n  return {\n    style: { position: \"sticky\", right: column.getAfter(\"end\") },\n    pinned,\n    edge: first?.id === column.id,\n  };\n}\n\nconst alignClass = { start: \"text-left\", center: \"text-center\", end: \"text-right\" } as const;\n\n/* ------------------------------------------------------------------------ */\n/* Editable cell                                                             */\n/* ------------------------------------------------------------------------ */\n\nfunction EditableCell<Row extends RowData>({\n  cell,\n  instance,\n  onDone,\n}: {\n  cell: DataTableCell<Row, any>;\n  instance: DataTableInstance<Row>;\n  onDone: () => void;\n}) {\n  const editable = cell.column.columnDef.meta?.editable;\n  const config = typeof editable === \"object\" ? editable : {};\n  const initial = cell.getValue();\n  const [draft, setDraft] = React.useState(initial == null ? \"\" : String(initial));\n  const done = React.useRef(false);\n\n  const finish = () => {\n    done.current = true;\n    instance.editing.stop();\n    onDone();\n  };\n  const commit = () => {\n    if (done.current) return;\n    const value = config.parse ? config.parse(draft) : config.type === \"number\" ? Number(draft) : draft;\n    void instance.editing.commit(cell.row, cell.column.id, value);\n    finish();\n  };\n  const cancel = () => {\n    if (done.current) return;\n    finish();\n  };\n\n  return (\n    <Input\n      data-slot=\"data-table-editor\"\n      autoFocus\n      type={config.type === \"number\" ? \"number\" : \"text\"}\n      value={draft}\n      onChange={(e) => setDraft(e.target.value)}\n      onFocus={(e) => e.target.select()}\n      onBlur={commit}\n      onKeyDown={(e) => {\n        // The editor owns its keys; the grid must not move the focus cell.\n        e.stopPropagation();\n        if (e.key === \"Enter\") {\n          e.preventDefault();\n          commit();\n        } else if (e.key === \"Escape\") {\n          e.preventDefault();\n          cancel();\n        }\n      }}\n      className=\"h-7 px-2 py-0 text-[length:var(--ds-text-body-sm)]\"\n    />\n  );\n}\n\n/* ------------------------------------------------------------------------ */\n/* View                                                                      */\n/* ------------------------------------------------------------------------ */\n\ntype CellCoord = { r: number; c: number };\n\nfunction DataTableView<Row extends RowData>({\n  instance,\n  className,\n  maxHeight,\n  virtualize,\n  rowHeight = 40,\n  stickyHeader = true,\n  density = \"default\",\n  renderSubComponent,\n  toolbar = true,\n  bulkActions,\n  toolbarActions,\n  searchPlaceholder,\n  emptyState,\n  emptyMessage = \"No results\",\n  pageSizeOptions,\n  enableExport = true,\n  exportFileName = \"export\",\n  loading,\n  error,\n  onRowClick,\n  activeRowId,\n  rowClassName,\n  ref,\n}: DataTableViewProps<Row> & { instance: DataTableInstance<Row> }) {\n  const { table, paginationMode } = instance;\n  const rows = table.getRowModel().rows;\n  const leafColumns = table.getVisibleLeafColumns();\n  const colCount = leafColumns.length;\n  const headerGroups = table.getHeaderGroups();\n  const isVirtual = virtualize ?? rows.length > VIRTUALIZE_ABOVE;\n  const isLoading = loading || instance.isLoading;\n  const showSkeleton = isLoading && rows.length === 0;\n  const showEmpty = !isLoading && rows.length === 0;\n  const resolvedHeight = maxHeight ?? (isVirtual ? DEFAULT_VIRTUAL_HEIGHT : undefined);\n  const errorMessage = error instanceof Error ? error.message : (error ?? instance.error?.message ?? \"\");\n\n  const scrollRef = React.useRef<HTMLDivElement>(null);\n  const tableRef = React.useRef<HTMLTableElement>(null);\n\n  const refresh = instance.refetch;\n  React.useImperativeHandle(ref, () => ({ refresh, instance }), [refresh, instance]);\n\n  // Mandatory on every server-backed table (P-39): a Refresh button beside the\n  // search box and a stamp saying which moment these rows are. The switch only\n  // appears where the table asked for `autoRefresh`.\n  const refreshProps =\n    instance.dataSource.kind === \"server\"\n      ? {\n          onRefresh: refresh,\n          isFetching: instance.isFetching,\n          lastUpdatedAt: instance.lastUpdatedAt,\n          lastErrorAt: instance.lastErrorAt,\n          autoRefresh: instance.autoRefresh,\n        }\n      : undefined;\n\n  /* Virtualisation ------------------------------------------------------ */\n\n  const virtualizer = useVirtualizer<HTMLDivElement, HTMLTableRowElement>({\n    count: rows.length,\n    enabled: isVirtual,\n    getScrollElement: () => scrollRef.current,\n    estimateSize: () => rowHeight,\n    overscan: 8,\n    getItemKey: (index) => rows[index]?.id ?? index,\n    // An expanded row and its detail row are one virtual item.\n    measureElement: (element) => {\n      let height = element.getBoundingClientRect().height;\n      const next = element.nextElementSibling as HTMLElement | null;\n      if (next?.dataset.slot === \"data-table-subrow\") height += next.getBoundingClientRect().height;\n      return height;\n    },\n  });\n  const virtualItems = isVirtual ? virtualizer.getVirtualItems() : null;\n  const paddingTop = virtualItems?.length ? virtualItems[0]!.start : 0;\n  const paddingBottom = virtualItems?.length\n    ? virtualizer.getTotalSize() - virtualItems[virtualItems.length - 1]!.end\n    : 0;\n\n  /* Infinite scroll ----------------------------------------------------- */\n\n  const onScroll = React.useCallback(\n    (event: React.UIEvent<HTMLDivElement>) => {\n      if (paginationMode !== \"infinite\" || !instance.hasNextPage || instance.isFetching) return;\n      const el = event.currentTarget;\n      if (el.scrollHeight - el.scrollTop - el.clientHeight < INFINITE_THRESHOLD_PX) instance.fetchNextPage();\n    },\n    [paginationMode, instance],\n  );\n\n  /* Keyboard navigation ------------------------------------------------- */\n\n  const [focused, setFocused] = React.useState<CellCoord>({ r: -1, c: 0 });\n  const pendingFocus = React.useRef<CellCoord | null>(null);\n\n  const cellElement = (coord: CellCoord) =>\n    tableRef.current?.querySelector<HTMLElement>(\n      `[data-row-index=\"${coord.r}\"][data-col-index=\"${coord.c}\"]`,\n    ) ?? null;\n\n  const focusCell = React.useCallback(\n    (coord: CellCoord) => {\n      const el = cellElement(coord);\n      if (el) {\n        setFocused(coord);\n        el.focus();\n        return;\n      }\n      if (isVirtual && coord.r >= 0) {\n        pendingFocus.current = coord;\n        setFocused(coord);\n        virtualizer.scrollToIndex(coord.r, { align: \"auto\" });\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [isVirtual, virtualizer],\n  );\n\n  React.useEffect(() => {\n    const coord = pendingFocus.current;\n    if (!coord) return;\n    const el = cellElement(coord);\n    if (el) {\n      pendingFocus.current = null;\n      el.focus();\n    }\n  });\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLTableElement>) => {\n    const target = event.target as HTMLElement;\n    // Portaled menus bubble through React but live outside the table element.\n    if (!tableRef.current?.contains(target)) return;\n    if (instance.editing.cell) return;\n    const cell = target.closest<HTMLElement>(\"[data-row-index][data-col-index]\");\n    if (!cell) return;\n    const r = Number(cell.dataset.rowIndex);\n    const c = Number(cell.dataset.colIndex);\n    const lastRow = rows.length - 1;\n    const lastCol = colCount - 1;\n    const onCellItself = target === cell;\n\n    switch (event.key) {\n      case \"ArrowDown\":\n        event.preventDefault();\n        focusCell({ r: Math.min(lastRow, r + 1), c });\n        return;\n      case \"ArrowUp\":\n        event.preventDefault();\n        focusCell({ r: Math.max(-1, r - 1), c });\n        return;\n      case \"ArrowRight\":\n        event.preventDefault();\n        focusCell({ r, c: Math.min(lastCol, c + 1) });\n        return;\n      case \"ArrowLeft\":\n        event.preventDefault();\n        focusCell({ r, c: Math.max(0, c - 1) });\n        return;\n      case \"Home\":\n        event.preventDefault();\n        focusCell(event.ctrlKey ? { r: -1, c: 0 } : { r, c: 0 });\n        return;\n      case \"End\":\n        event.preventDefault();\n        focusCell(event.ctrlKey ? { r: lastRow, c: lastCol } : { r, c: lastCol });\n        return;\n      case \"PageDown\":\n        event.preventDefault();\n        focusCell({ r: Math.min(lastRow, r + 10), c });\n        return;\n      case \"PageUp\":\n        event.preventDefault();\n        focusCell({ r: Math.max(-1, r - 10), c });\n        return;\n      case \"Enter\": {\n        if (!onCellItself) return;\n        if (r === -1) {\n          const column = leafColumns[c];\n          if (column?.getCanSort()) {\n            event.preventDefault();\n            column.toggleSorting(undefined, event.shiftKey);\n          }\n          return;\n        }\n        const row = rows[r];\n        const column = leafColumns[c];\n        if (row && column && column.columnDef.meta?.editable) {\n          event.preventDefault();\n          instance.editing.start({ rowId: row.id, columnId: column.id });\n        }\n        return;\n      }\n      case \" \": {\n        if (!onCellItself || r === -1) return;\n        const row = rows[r];\n        if (row?.getCanSelect()) {\n          event.preventDefault();\n          row.toggleSelected();\n        }\n        return;\n      }\n      default:\n        return;\n    }\n  };\n\n  const onFocus = (event: React.FocusEvent<HTMLTableElement>) => {\n    const cell = (event.target as HTMLElement).closest<HTMLElement>(\"[data-row-index][data-col-index]\");\n    if (!cell || !tableRef.current?.contains(cell)) return;\n    const r = Number(cell.dataset.rowIndex);\n    const c = Number(cell.dataset.colIndex);\n    setFocused((f) => (f.r === r && f.c === c ? f : { r, c }));\n  };\n\n  const tabIndexFor = (r: number, c: number) => (focused.r === r && focused.c === c ? 0 : -1);\n\n  /* Rendering ----------------------------------------------------------- */\n\n  const cellPadding = density === \"compact\" ? \"px-3 py-1.5\" : \"px-3 py-2.5\";\n  const headPadding = density === \"compact\" ? \"px-3 py-1.5\" : \"px-3 py-2\";\n  const editingCell = instance.editing.cell;\n\n  const renderRow = (row: DataTableRow<Row>, index: number, virtualIndex?: number) => {\n    const cells = row.getVisibleCells();\n    const endStart = cells.findIndex((cell) => cell.column.getIsPinned() === \"end\");\n    const splitAt = endStart === -1 ? cells.length : endStart;\n    const selected = row.getIsSelected();\n    const active = activeRowId != null && row.id === activeRowId;\n    const expanded = renderSubComponent && row.getIsExpanded();\n\n    const renderCell = (cell: DataTableCell<Row, any>, c: number) => {\n      const column = cell.column;\n      const meta = column.columnDef.meta;\n      const pin = pinAttrs(column, table);\n      const isEditing = editingCell?.rowId === row.id && editingCell.columnId === column.id;\n      const canEdit = Boolean(meta?.editable);\n      return (\n        <td\n          key={cell.id}\n          role=\"gridcell\"\n          data-slot=\"data-table-cell\"\n          data-row-index={index}\n          data-col-index={c}\n          data-pinned={pin.pinned}\n          data-pinned-edge={pin.edge ? \"\" : undefined}\n          data-editable={canEdit ? \"\" : undefined}\n          data-editing={isEditing ? \"\" : undefined}\n          aria-colindex={c + 1}\n          tabIndex={tabIndexFor(index, c)}\n          style={{ width: column.getSize(), ...pin.style }}\n          onDoubleClick={\n            canEdit && !isEditing\n              ? () => instance.editing.start({ rowId: row.id, columnId: column.id })\n              : undefined\n          }\n          className={cn(\n            \"relative align-middle outline-none\",\n            isEditing ? \"px-1.5 py-1\" : cellPadding,\n            alignClass[meta?.align ?? \"start\"],\n            \"focus-visible:ring-[2px] focus-visible:ring-inset focus-visible:ring-[var(--ds-ring)]\",\n            // Pinned cells cover what scrolls under them, so their background is\n            // opaque card with the translucent hover / selected tint layered on.\n            pin.pinned &&\n              \"z-[1] bg-[var(--ds-card)] group-hover/row:bg-[linear-gradient(var(--ds-hover),var(--ds-hover))] group-data-[selected]/row:bg-[linear-gradient(var(--ds-primary-soft),var(--ds-primary-soft))] group-data-[active]/row:bg-[linear-gradient(var(--ds-primary-soft),var(--ds-primary-soft))]\",\n            pin.pinned === \"start\" && pin.edge && \"shadow-[inset_-1px_0_0_var(--ds-border)]\",\n            pin.pinned === \"end\" && pin.edge && \"shadow-[inset_1px_0_0_var(--ds-border)]\",\n            !isEditing && \"truncate\",\n            meta?.cellClassName,\n          )}\n        >\n          {isEditing ? (\n            <EditableCell\n              cell={cell}\n              instance={instance}\n              onDone={() => {\n                pendingFocus.current = { r: index, c };\n              }}\n            />\n          ) : (\n            <table.FlexRender cell={cell} />\n          )}\n        </td>\n      );\n    };\n\n    return (\n      <React.Fragment key={row.id}>\n        <tr\n          role=\"row\"\n          data-slot=\"data-table-row\"\n          data-index={virtualIndex}\n          data-selected={selected ? \"\" : undefined}\n          data-active={active ? \"\" : undefined}\n          data-expanded={expanded ? \"\" : undefined}\n          aria-rowindex={index + 2}\n          aria-selected={table.options.enableRowSelection ? selected : undefined}\n          ref={isVirtual ? virtualizer.measureElement : undefined}\n          onClick={onRowClick ? (e) => onRowClick(row.original, e) : undefined}\n          className={cn(\n            \"group/row border-b border-[var(--ds-border-subtle)] transition-colors duration-[var(--ds-duration-fast)]\",\n            \"hover:bg-[var(--ds-hover)] data-[selected]:bg-[var(--ds-primary-soft)]\",\n            // Independent of selection: a detail pane highlights one row\n            // without ticking its checkbox.\n            \"data-[active]:bg-[var(--ds-primary-soft)]\",\n            onRowClick && \"cursor-pointer\",\n            rowClassName?.(row.original),\n          )}\n        >\n          {cells.slice(0, splitAt).map((cell, c) => renderCell(cell, c))}\n          <td aria-hidden data-slot=\"data-table-filler\" className=\"p-0\" />\n          {cells.slice(splitAt).map((cell, i) => renderCell(cell, splitAt + i))}\n        </tr>\n        {expanded ? (\n          <tr role=\"row\" data-slot=\"data-table-subrow\" className=\"border-b border-[var(--ds-border-subtle)]\">\n            <td\n              role=\"gridcell\"\n              colSpan={colCount + 1}\n              className=\"bg-[var(--ds-muted)] px-4 py-3 text-[length:var(--ds-text-body-sm)]\"\n            >\n              {renderSubComponent(row)}\n            </td>\n          </tr>\n        ) : null}\n      </React.Fragment>\n    );\n  };\n\n  const skeletonRows = Array.from({ length: Math.min(8, table.state.pagination.pageSize) }, (_, i) => (\n    <tr key={`skeleton-${i}`} aria-hidden data-slot=\"data-table-skeleton-row\" className=\"border-b border-[var(--ds-border-subtle)]\">\n      {leafColumns.map((column) => (\n        <td key={column.id} className={cellPadding} style={{ width: column.getSize() }}>\n          <Skeleton className=\"h-3.5 w-3/4\" />\n        </td>\n      ))}\n      <td className=\"p-0\" />\n    </tr>\n  ));\n\n  return (\n    <div data-slot=\"data-table\" className={cn(\"flex min-w-0 flex-col gap-3\", className)}>\n      {errorMessage ? (\n        <ErrorBanner message={errorMessage} onRetry={instance.error ? instance.refetch : undefined} />\n      ) : null}\n      {toolbar === false ? null : typeof toolbar === \"function\" ? (\n        toolbar({ instance })\n      ) : (\n        <DataTableToolbar\n          table={table}\n          bulkActions={bulkActions}\n          searchPlaceholder={searchPlaceholder}\n          enableExport={enableExport}\n          exportFileName={exportFileName}\n          refresh={refreshProps}\n        >\n          {toolbarActions}\n        </DataTableToolbar>\n      )}\n      <div\n        ref={scrollRef}\n        data-slot=\"data-table-container\"\n        onScroll={onScroll}\n        style={{ maxHeight: resolvedHeight }}\n        className={cn(\n          \"relative w-full overflow-auto rounded-[var(--ds-radius-md)] border border-[var(--ds-border)] bg-[var(--ds-card)]\",\n        )}\n      >\n        <table\n          ref={tableRef}\n          role=\"grid\"\n          data-slot=\"data-table-grid\"\n          data-virtualized={isVirtual ? \"\" : undefined}\n          aria-rowcount={rows.length + 1}\n          aria-colcount={colCount}\n          aria-busy={instance.isFetching || undefined}\n          aria-multiselectable={table.options.enableRowSelection ? true : undefined}\n          onKeyDown={onKeyDown}\n          onFocus={onFocus}\n          style={{ minWidth: table.getTotalSize() }}\n          className={cn(\n            \"w-full table-fixed border-collapse caption-bottom\",\n            \"text-[length:var(--ds-text-body-sm)] leading-[var(--ds-text-body-sm--line-height)] text-[color:var(--ds-foreground)]\",\n          )}\n        >\n          <thead data-slot=\"data-table-header\" className={cn(stickyHeader && \"sticky top-0 z-[2]\")}>\n            {headerGroups.map((group) => {\n              const endStart = group.headers.findIndex((h) => h.column.getIsPinned() === \"end\");\n              const splitAt = endStart === -1 ? group.headers.length : endStart;\n              const renderHead = (header: (typeof group.headers)[number], c: number) => {\n                const column = header.column;\n                const meta = column.columnDef.meta;\n                const pin = pinAttrs(column, table);\n                const sorted = column.getIsSorted();\n                const def = column.columnDef;\n                return (\n                  <th\n                    key={header.id}\n                    role=\"columnheader\"\n                    scope=\"col\"\n                    data-slot=\"data-table-head\"\n                    data-row-index={-1}\n                    data-col-index={c}\n                    data-pinned={pin.pinned}\n                    data-pinned-edge={pin.edge ? \"\" : undefined}\n                    aria-colindex={c + 1}\n                    aria-sort={\n                      sorted === \"asc\"\n                        ? \"ascending\"\n                        : sorted === \"desc\"\n                          ? \"descending\"\n                          : column.getCanSort()\n                            ? \"none\"\n                            : undefined\n                    }\n                    colSpan={header.colSpan}\n                    tabIndex={tabIndexFor(-1, c)}\n                    style={{ width: header.getSize(), ...pin.style }}\n                    className={cn(\n                      \"group/head relative h-10 align-middle font-medium outline-none\",\n                      headPadding,\n                      \"bg-[var(--ds-muted)] text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-muted-foreground)]\",\n                      \"border-b border-[var(--ds-border)]\",\n                      alignClass[meta?.align ?? \"start\"],\n                      \"focus-visible:ring-[2px] focus-visible:ring-inset focus-visible:ring-[var(--ds-ring)]\",\n                      pin.pinned && \"z-[3]\",\n                      pin.pinned === \"start\" && pin.edge && \"shadow-[inset_-1px_0_0_var(--ds-border)]\",\n                      pin.pinned === \"end\" && pin.edge && \"shadow-[inset_1px_0_0_var(--ds-border)]\",\n                      meta?.headerClassName,\n                    )}\n                  >\n                    {header.isPlaceholder ? null : typeof def.header === \"string\" ? (\n                      <DataTableColumnHeader column={column} title={def.header} />\n                    ) : (\n                      <table.FlexRender header={header} />\n                    )}\n                    {column.getCanResize() ? (\n                      <div\n                        data-slot=\"data-table-resizer\"\n                        data-resizing={column.getIsResizing() ? \"\" : undefined}\n                        onMouseDown={header.getResizeHandler()}\n                        onTouchStart={header.getResizeHandler()}\n                        onDoubleClick={() => column.resetSize()}\n                        className={cn(\n                          \"absolute right-0 top-0 h-full w-1 cursor-col-resize touch-none select-none\",\n                          \"opacity-0 transition-opacity duration-[var(--ds-duration-fast)] hover:opacity-100 data-[resizing]:opacity-100\",\n                          \"bg-[var(--ds-ring)]\",\n                        )}\n                      />\n                    ) : null}\n                  </th>\n                );\n              };\n              return (\n                <tr key={group.id} role=\"row\" aria-rowindex={1}>\n                  {group.headers.slice(0, splitAt).map((header, c) => renderHead(header, c))}\n                  <th aria-hidden className=\"border-b border-[var(--ds-border)] bg-[var(--ds-muted)] p-0\" />\n                  {group.headers.slice(splitAt).map((header, i) => renderHead(header, splitAt + i))}\n                </tr>\n              );\n            })}\n          </thead>\n          <tbody data-slot=\"data-table-body\">\n            {showSkeleton ? skeletonRows : null}\n            {showEmpty ? (\n              <tr role=\"row\" data-slot=\"data-table-empty\">\n                <td role=\"gridcell\" colSpan={colCount + 1} className=\"p-0\">\n                  {emptyState ?? (\n                    <div className=\"flex flex-col items-center justify-center gap-2 px-4 py-12 text-center text-[color:var(--ds-muted-foreground)]\">\n                      <Inbox aria-hidden className=\"size-6 text-[color:var(--ds-text-tertiary)]\" />\n                      <p className=\"text-[length:var(--ds-text-body-sm)]\">{emptyMessage}</p>\n                    </div>\n                  )}\n                </td>\n              </tr>\n            ) : null}\n            {virtualItems ? (\n              <>\n                {paddingTop > 0 ? (\n                  <tr aria-hidden data-slot=\"data-table-spacer\" style={{ height: paddingTop }}>\n                    <td colSpan={colCount + 1} className=\"p-0\" />\n                  </tr>\n                ) : null}\n                {virtualItems.map((item) => {\n                  const row = rows[item.index];\n                  return row ? renderRow(row, item.index, item.index) : null;\n                })}\n                {paddingBottom > 0 ? (\n                  <tr aria-hidden data-slot=\"data-table-spacer\" style={{ height: paddingBottom }}>\n                    <td colSpan={colCount + 1} className=\"p-0\" />\n                  </tr>\n                ) : null}\n              </>\n            ) : (\n              rows.map((row, index) => renderRow(row, index))\n            )}\n          </tbody>\n        </table>\n        {paginationMode === \"infinite\" && instance.isFetching && rows.length > 0 ? (\n          <div\n            data-slot=\"data-table-loading-more\"\n            className=\"flex items-center justify-center gap-2 border-t border-[var(--ds-border-subtle)] py-2 text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-muted-foreground)]\"\n          >\n            <Spinner size={14} /> Loading more\n          </div>\n        ) : null}\n      </div>\n      {paginationMode === \"pages\" ? (\n        <DataTablePagination table={table} pageSizeOptions={pageSizeOptions} />\n      ) : paginationMode === \"infinite\" ? (\n        <div className=\"text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-muted-foreground)]\">\n          {rows.length} of {instance.total}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nexport { DataTable, DataTableView };\n"],"mappings":"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"}
+{"version":3,"file":"data-table.js","names":[],"sources":["../../../src/components/data-table/data-table.tsx"],"sourcesContent":["\"use client\";\n\nimport type { RowData } from \"@tanstack/react-table\";\nimport { useVirtualizer } from \"@tanstack/react-virtual\";\nimport { Inbox } from \"lucide-react\";\nimport * as React from \"react\";\nimport { ErrorBanner } from \"@/components/error-banner\";\nimport { Input } from \"@/components/input\";\nimport { Skeleton } from \"@/components/skeleton\";\nimport { Spinner } from \"@/components/spinner\";\nimport { cn } from \"@/lib/cn\";\nimport { DataTableColumnHeader, DataTablePagination, DataTableToolbar } from \"./parts\";\nimport type {\n  DataTableCell,\n  DataTableColumn,\n  DataTableInstance,\n  DataTableRow,\n  DataTableTable,\n  UseDataTableOptions,\n} from \"./types\";\nimport { useDataTable } from \"./use-data-table\";\n\n/**\n * DataTable — the composite from cortenaUI&Design/04-data-tables.md.\n *\n * `<DataTable columns={columns} dataSource={{ kind: \"client\", rows }} />`\n * renders a complete table: toolbar with search, faceted filters, view and\n * export menus; sortable, pinnable, hideable, resizable columns; sticky\n * header; pager; and, past 100 rows, virtualised rows. A server source\n * changes nothing in the markup and everything in the data flow.\n *\n * Markup is a real `<table>` with `role=\"grid\"` so screen readers get rows\n * and columns, and keyboard users get one tab stop with arrow-key movement\n * between cells (roving tabindex), Enter to edit an editable cell, Escape to\n * cancel, Space to toggle selection.\n *\n * Virtualised bodies keep the table element: rows outside the viewport are\n * replaced by two spacer rows sized from the virtualizer, which keeps column\n * widths, sticky headers and pinned columns working without absolute\n * positioning.\n */\n\nconst VIRTUALIZE_ABOVE = 100;\nconst DEFAULT_VIRTUAL_HEIGHT = 600;\nconst INFINITE_THRESHOLD_PX = 240;\n\n/** What a `ref` on `DataTable` hands back. */\nexport interface DataTableHandle<Row extends RowData> {\n  /**\n   * Refetch the page on screen through the same query the auto-refresh\n   * interval drives — never a second fetch path. A table subscribed to a\n   * notification stream calls this from the stream and leaves the interval as\n   * the fallback for when the stream is unavailable.\n   */\n  refresh: () => void;\n  /** Everything else the table knows, for a caller that needs more than a refresh. */\n  instance: DataTableInstance<Row>;\n}\n\nexport interface DataTableViewProps<Row extends RowData> {\n  className?: string;\n  /** Imperative handle: `ref.current.refresh()`. */\n  ref?: React.Ref<DataTableHandle<Row>>;\n  /** Height of the scrolling body. Required for virtualisation to mean anything; defaults to 600px when virtualised. */\n  maxHeight?: number | string;\n  /** Force virtualisation on or off; undefined virtualises above 100 rows. */\n  virtualize?: boolean;\n  /** Estimated row height in px for the virtualizer. @default 40 */\n  rowHeight?: number;\n  /** @default true */\n  stickyHeader?: boolean;\n  /** @default \"default\" */\n  density?: \"default\" | \"compact\";\n  /** Detail panel under an expanded row; enables the expander column. */\n  renderSubComponent?: (row: DataTableRow<Row>) => React.ReactNode;\n  /** `false` hides the toolbar; a function replaces it. */\n  toolbar?: boolean | ((ctx: { instance: DataTableInstance<Row> }) => React.ReactNode);\n  /** Rendered in the toolbar while rows are selected. */\n  bulkActions?: (ctx: { rows: Row[]; table: DataTableTable<Row> }) => React.ReactNode;\n  /** Extra toolbar controls (right side). */\n  toolbarActions?: React.ReactNode;\n  searchPlaceholder?: string;\n  emptyState?: React.ReactNode;\n  /** @default \"No results\" */\n  emptyMessage?: string;\n  pageSizeOptions?: number[];\n  /** @default true */\n  enableExport?: boolean;\n  /** @default \"export\" */\n  exportFileName?: string;\n  /** Show the loading skeleton regardless of the source's own state. */\n  loading?: boolean;\n  /** Error to show above the table, in addition to the server source's. */\n  error?: string | Error | null;\n  onRowClick?: (row: Row, event: React.MouseEvent<HTMLTableRowElement>) => void;\n  /**\n   * The row a detail pane is currently showing, matched against the row id\n   * (`getRowId`, the row index when that is not set). It gets `data-active`\n   * and the `--ds-primary-soft` tint, independent of checkbox selection — a\n   * master/detail list highlights one row without selecting it, and a table\n   * with both can show a selected set and one open row at once.\n   */\n  activeRowId?: string | null;\n  /** Extra classes per row, e.g. to dim rows the app considers stale. */\n  rowClassName?: (row: Row) => string | undefined;\n}\n\nexport type DataTableProps<Row extends RowData> = DataTableViewProps<Row> &\n  ({ instance: DataTableInstance<Row> } | UseDataTableOptions<Row>);\n\nfunction DataTable<Row extends RowData>(props: DataTableProps<Row>) {\n  if (\"instance\" in props) {\n    const { instance, ...view } = props;\n    return <DataTableView instance={instance} {...view} />;\n  }\n  return <DataTableOwned {...props} />;\n}\n\nfunction DataTableOwned<Row extends RowData>(props: DataTableViewProps<Row> & UseDataTableOptions<Row>) {\n  const {\n    className,\n    maxHeight,\n    virtualize,\n    rowHeight,\n    stickyHeader,\n    density,\n    renderSubComponent,\n    toolbar,\n    bulkActions,\n    toolbarActions,\n    searchPlaceholder,\n    emptyState,\n    emptyMessage,\n    pageSizeOptions,\n    enableExport,\n    exportFileName,\n    loading,\n    error,\n    onRowClick,\n    activeRowId,\n    rowClassName,\n    ref,\n    ...options\n  } = props;\n  const instance = useDataTable<Row>({\n    ...options,\n    enableExpanding: options.enableExpanding ?? Boolean(renderSubComponent),\n  });\n  return (\n    <DataTableView\n      instance={instance}\n      className={className}\n      maxHeight={maxHeight}\n      virtualize={virtualize}\n      rowHeight={rowHeight}\n      stickyHeader={stickyHeader}\n      density={density}\n      renderSubComponent={renderSubComponent}\n      toolbar={toolbar}\n      bulkActions={bulkActions}\n      toolbarActions={toolbarActions}\n      searchPlaceholder={searchPlaceholder}\n      emptyState={emptyState}\n      emptyMessage={emptyMessage}\n      pageSizeOptions={pageSizeOptions}\n      enableExport={enableExport}\n      exportFileName={exportFileName}\n      loading={loading}\n      error={error}\n      onRowClick={onRowClick}\n      activeRowId={activeRowId}\n      rowClassName={rowClassName}\n      ref={ref}\n    />\n  );\n}\n\n/* ------------------------------------------------------------------------ */\n/* Pinning                                                                   */\n/* ------------------------------------------------------------------------ */\n\nfunction pinAttrs<Row extends RowData>(\n  column: DataTableColumn<Row, any>,\n  table: DataTableTable<Row>,\n): { style: React.CSSProperties; pinned: \"start\" | \"end\" | undefined; edge: boolean } {\n  const pinned = column.getIsPinned();\n  if (!pinned) return { style: {}, pinned: undefined, edge: false };\n  if (pinned === \"start\") {\n    const last = table.getStartVisibleLeafColumns().at(-1);\n    return {\n      style: { position: \"sticky\", left: column.getStart(\"start\") },\n      pinned,\n      edge: last?.id === column.id,\n    };\n  }\n  const first = table.getEndVisibleLeafColumns()[0];\n  return {\n    style: { position: \"sticky\", right: column.getAfter(\"end\") },\n    pinned,\n    edge: first?.id === column.id,\n  };\n}\n\nconst alignClass = { start: \"text-left\", center: \"text-center\", end: \"text-right\" } as const;\n\n/* ------------------------------------------------------------------------ */\n/* Column widths and hover text (DESIGN-77)                                  */\n/* ------------------------------------------------------------------------ */\n\n/**\n * Full text for a cell's `title`, or undefined for no title.\n *\n * Cells truncate and never wrap, so the only way back to the full text is the\n * pointer. A column that renders its own value can be read straight off the\n * value; a column with a `cell` renderer draws a node the table cannot turn\n * into a sentence, and guessing produces titles like \"[object Object]\" on a\n * row of buttons. Such a column says what its hover text is with\n * `meta.hoverText`, or has none.\n */\nfunction hoverTextFor<Row extends RowData>(cell: DataTableCell<Row, any>): string | undefined {\n  const def = cell.column.columnDef;\n  const meta = def.meta;\n  if (meta?.hoverText) return meta.hoverText(cell.row.original) || undefined;\n  if (!meta?.plainCell) return undefined;\n  const value = cell.getValue();\n  // `|| undefined` on the way out too: an empty string is a `title=\"\"`, which\n  // is a pointer that stops on an empty tooltip rather than no tooltip.\n  return typeof value === \"string\" || typeof value === \"number\"\n    ? String(value) || undefined\n    : undefined;\n}\n\n/* ------------------------------------------------------------------------ */\n/* Editable cell                                                             */\n/* ------------------------------------------------------------------------ */\n\nfunction EditableCell<Row extends RowData>({\n  cell,\n  instance,\n  onDone,\n}: {\n  cell: DataTableCell<Row, any>;\n  instance: DataTableInstance<Row>;\n  onDone: () => void;\n}) {\n  const editable = cell.column.columnDef.meta?.editable;\n  const config = typeof editable === \"object\" ? editable : {};\n  const initial = cell.getValue();\n  const [draft, setDraft] = React.useState(initial == null ? \"\" : String(initial));\n  const done = React.useRef(false);\n\n  const finish = () => {\n    done.current = true;\n    instance.editing.stop();\n    onDone();\n  };\n  const commit = () => {\n    if (done.current) return;\n    const value = config.parse ? config.parse(draft) : config.type === \"number\" ? Number(draft) : draft;\n    void instance.editing.commit(cell.row, cell.column.id, value);\n    finish();\n  };\n  const cancel = () => {\n    if (done.current) return;\n    finish();\n  };\n\n  return (\n    <Input\n      data-slot=\"data-table-editor\"\n      autoFocus\n      type={config.type === \"number\" ? \"number\" : \"text\"}\n      value={draft}\n      onChange={(e) => setDraft(e.target.value)}\n      onFocus={(e) => e.target.select()}\n      onBlur={commit}\n      onKeyDown={(e) => {\n        // The editor owns its keys; the grid must not move the focus cell.\n        e.stopPropagation();\n        if (e.key === \"Enter\") {\n          e.preventDefault();\n          commit();\n        } else if (e.key === \"Escape\") {\n          e.preventDefault();\n          cancel();\n        }\n      }}\n      className=\"h-7 px-2 py-0 text-[length:var(--ds-text-body-sm)]\"\n    />\n  );\n}\n\n/* ------------------------------------------------------------------------ */\n/* View                                                                      */\n/* ------------------------------------------------------------------------ */\n\ntype CellCoord = { r: number; c: number };\n\nfunction DataTableView<Row extends RowData>({\n  instance,\n  className,\n  maxHeight,\n  virtualize,\n  rowHeight = 40,\n  stickyHeader = true,\n  density = \"default\",\n  renderSubComponent,\n  toolbar = true,\n  bulkActions,\n  toolbarActions,\n  searchPlaceholder,\n  emptyState,\n  emptyMessage = \"No results\",\n  pageSizeOptions,\n  enableExport = true,\n  exportFileName = \"export\",\n  loading,\n  error,\n  onRowClick,\n  activeRowId,\n  rowClassName,\n  ref,\n}: DataTableViewProps<Row> & { instance: DataTableInstance<Row> }) {\n  const { table, paginationMode } = instance;\n  const rows = table.getRowModel().rows;\n  const leafColumns = table.getVisibleLeafColumns();\n  // The one column drawn with no fixed width, so the space the sized columns\n  // leave lands on it instead of on the filler cell (DESIGN-77). First visible\n  // one wins; hide it and the table falls back to the old filler behaviour.\n  // A pinned column is skipped: pinning positions it with a `left`/`right`\n  // offset read off the widths of the columns beside it, and a column with no\n  // width of its own would leave every pinned neighbour at the wrong offset.\n  const fillColumnId = leafColumns.find(\n    (column) => column.columnDef.meta?.fill && !column.getIsPinned(),\n  )?.id;\n  const widthFor = (column: DataTableColumn<Row, any>, size: number) =>\n    column.id === fillColumnId ? undefined : size;\n  // A width the fill column would otherwise have to share the remainder with.\n  const fillerStyle = fillColumnId ? ({ width: 0 } as const) : undefined;\n  const colCount = leafColumns.length;\n  const headerGroups = table.getHeaderGroups();\n  const isVirtual = virtualize ?? rows.length > VIRTUALIZE_ABOVE;\n  const isLoading = loading || instance.isLoading;\n  const showSkeleton = isLoading && rows.length === 0;\n  const showEmpty = !isLoading && rows.length === 0;\n  const resolvedHeight = maxHeight ?? (isVirtual ? DEFAULT_VIRTUAL_HEIGHT : undefined);\n  const errorMessage = error instanceof Error ? error.message : (error ?? instance.error?.message ?? \"\");\n\n  const scrollRef = React.useRef<HTMLDivElement>(null);\n  const tableRef = React.useRef<HTMLTableElement>(null);\n\n  const refresh = instance.refetch;\n  React.useImperativeHandle(ref, () => ({ refresh, instance }), [refresh, instance]);\n\n  // Mandatory on every server-backed table (P-39): a Refresh button beside the\n  // search box and a stamp saying which moment these rows are. The switch only\n  // appears where the table asked for `autoRefresh`.\n  const refreshProps =\n    instance.dataSource.kind === \"server\"\n      ? {\n          onRefresh: refresh,\n          isFetching: instance.isFetching,\n          lastUpdatedAt: instance.lastUpdatedAt,\n          lastErrorAt: instance.lastErrorAt,\n          autoRefresh: instance.autoRefresh,\n        }\n      : undefined;\n\n  /* Virtualisation ------------------------------------------------------ */\n\n  const virtualizer = useVirtualizer<HTMLDivElement, HTMLTableRowElement>({\n    count: rows.length,\n    enabled: isVirtual,\n    getScrollElement: () => scrollRef.current,\n    estimateSize: () => rowHeight,\n    overscan: 8,\n    getItemKey: (index) => rows[index]?.id ?? index,\n    // An expanded row and its detail row are one virtual item.\n    measureElement: (element) => {\n      let height = element.getBoundingClientRect().height;\n      const next = element.nextElementSibling as HTMLElement | null;\n      if (next?.dataset.slot === \"data-table-subrow\") height += next.getBoundingClientRect().height;\n      return height;\n    },\n  });\n  const virtualItems = isVirtual ? virtualizer.getVirtualItems() : null;\n  const paddingTop = virtualItems?.length ? virtualItems[0]!.start : 0;\n  const paddingBottom = virtualItems?.length\n    ? virtualizer.getTotalSize() - virtualItems[virtualItems.length - 1]!.end\n    : 0;\n\n  /* Infinite scroll ----------------------------------------------------- */\n\n  const onScroll = React.useCallback(\n    (event: React.UIEvent<HTMLDivElement>) => {\n      if (paginationMode !== \"infinite\" || !instance.hasNextPage || instance.isFetching) return;\n      const el = event.currentTarget;\n      if (el.scrollHeight - el.scrollTop - el.clientHeight < INFINITE_THRESHOLD_PX) instance.fetchNextPage();\n    },\n    [paginationMode, instance],\n  );\n\n  /* Keyboard navigation ------------------------------------------------- */\n\n  const [focused, setFocused] = React.useState<CellCoord>({ r: -1, c: 0 });\n  const pendingFocus = React.useRef<CellCoord | null>(null);\n\n  const cellElement = (coord: CellCoord) =>\n    tableRef.current?.querySelector<HTMLElement>(\n      `[data-row-index=\"${coord.r}\"][data-col-index=\"${coord.c}\"]`,\n    ) ?? null;\n\n  const focusCell = React.useCallback(\n    (coord: CellCoord) => {\n      const el = cellElement(coord);\n      if (el) {\n        setFocused(coord);\n        el.focus();\n        return;\n      }\n      if (isVirtual && coord.r >= 0) {\n        pendingFocus.current = coord;\n        setFocused(coord);\n        virtualizer.scrollToIndex(coord.r, { align: \"auto\" });\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [isVirtual, virtualizer],\n  );\n\n  React.useEffect(() => {\n    const coord = pendingFocus.current;\n    if (!coord) return;\n    const el = cellElement(coord);\n    if (el) {\n      pendingFocus.current = null;\n      el.focus();\n    }\n  });\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLTableElement>) => {\n    const target = event.target as HTMLElement;\n    // Portaled menus bubble through React but live outside the table element.\n    if (!tableRef.current?.contains(target)) return;\n    if (instance.editing.cell) return;\n    const cell = target.closest<HTMLElement>(\"[data-row-index][data-col-index]\");\n    if (!cell) return;\n    const r = Number(cell.dataset.rowIndex);\n    const c = Number(cell.dataset.colIndex);\n    const lastRow = rows.length - 1;\n    const lastCol = colCount - 1;\n    const onCellItself = target === cell;\n\n    switch (event.key) {\n      case \"ArrowDown\":\n        event.preventDefault();\n        focusCell({ r: Math.min(lastRow, r + 1), c });\n        return;\n      case \"ArrowUp\":\n        event.preventDefault();\n        focusCell({ r: Math.max(-1, r - 1), c });\n        return;\n      case \"ArrowRight\":\n        event.preventDefault();\n        focusCell({ r, c: Math.min(lastCol, c + 1) });\n        return;\n      case \"ArrowLeft\":\n        event.preventDefault();\n        focusCell({ r, c: Math.max(0, c - 1) });\n        return;\n      case \"Home\":\n        event.preventDefault();\n        focusCell(event.ctrlKey ? { r: -1, c: 0 } : { r, c: 0 });\n        return;\n      case \"End\":\n        event.preventDefault();\n        focusCell(event.ctrlKey ? { r: lastRow, c: lastCol } : { r, c: lastCol });\n        return;\n      case \"PageDown\":\n        event.preventDefault();\n        focusCell({ r: Math.min(lastRow, r + 10), c });\n        return;\n      case \"PageUp\":\n        event.preventDefault();\n        focusCell({ r: Math.max(-1, r - 10), c });\n        return;\n      case \"Enter\": {\n        if (!onCellItself) return;\n        if (r === -1) {\n          const column = leafColumns[c];\n          if (column?.getCanSort()) {\n            event.preventDefault();\n            column.toggleSorting(undefined, event.shiftKey);\n          }\n          return;\n        }\n        const row = rows[r];\n        const column = leafColumns[c];\n        if (row && column && column.columnDef.meta?.editable) {\n          event.preventDefault();\n          instance.editing.start({ rowId: row.id, columnId: column.id });\n        }\n        return;\n      }\n      case \" \": {\n        if (!onCellItself || r === -1) return;\n        const row = rows[r];\n        if (row?.getCanSelect()) {\n          event.preventDefault();\n          row.toggleSelected();\n        }\n        return;\n      }\n      default:\n        return;\n    }\n  };\n\n  const onFocus = (event: React.FocusEvent<HTMLTableElement>) => {\n    const cell = (event.target as HTMLElement).closest<HTMLElement>(\"[data-row-index][data-col-index]\");\n    if (!cell || !tableRef.current?.contains(cell)) return;\n    const r = Number(cell.dataset.rowIndex);\n    const c = Number(cell.dataset.colIndex);\n    setFocused((f) => (f.r === r && f.c === c ? f : { r, c }));\n  };\n\n  const tabIndexFor = (r: number, c: number) => (focused.r === r && focused.c === c ? 0 : -1);\n\n  /* Rendering ----------------------------------------------------------- */\n\n  const cellPadding = density === \"compact\" ? \"px-3 py-1.5\" : \"px-3 py-2.5\";\n  const headPadding = density === \"compact\" ? \"px-3 py-1.5\" : \"px-3 py-2\";\n  const editingCell = instance.editing.cell;\n\n  const renderRow = (row: DataTableRow<Row>, index: number, virtualIndex?: number) => {\n    const cells = row.getVisibleCells();\n    const endStart = cells.findIndex((cell) => cell.column.getIsPinned() === \"end\");\n    const splitAt = endStart === -1 ? cells.length : endStart;\n    const selected = row.getIsSelected();\n    const active = activeRowId != null && row.id === activeRowId;\n    const expanded = renderSubComponent && row.getIsExpanded();\n\n    const renderCell = (cell: DataTableCell<Row, any>, c: number) => {\n      const column = cell.column;\n      const meta = column.columnDef.meta;\n      const pin = pinAttrs(column, table);\n      const isEditing = editingCell?.rowId === row.id && editingCell.columnId === column.id;\n      const canEdit = Boolean(meta?.editable);\n      return (\n        <td\n          key={cell.id}\n          role=\"gridcell\"\n          data-slot=\"data-table-cell\"\n          data-row-index={index}\n          data-col-index={c}\n          data-pinned={pin.pinned}\n          data-pinned-edge={pin.edge ? \"\" : undefined}\n          data-editable={canEdit ? \"\" : undefined}\n          data-editing={isEditing ? \"\" : undefined}\n          aria-colindex={c + 1}\n          tabIndex={tabIndexFor(index, c)}\n          title={isEditing ? undefined : hoverTextFor(cell)}\n          style={{ width: widthFor(column, column.getSize()), ...pin.style }}\n          onDoubleClick={\n            canEdit && !isEditing\n              ? () => instance.editing.start({ rowId: row.id, columnId: column.id })\n              : undefined\n          }\n          className={cn(\n            \"relative align-middle outline-none\",\n            isEditing ? \"px-1.5 py-1\" : cellPadding,\n            alignClass[meta?.align ?? \"start\"],\n            \"focus-visible:ring-[2px] focus-visible:ring-inset focus-visible:ring-[var(--ds-ring)]\",\n            // Pinned cells cover what scrolls under them, so their background is\n            // opaque card with the translucent hover / selected tint layered on.\n            pin.pinned &&\n              \"z-[1] bg-[var(--ds-card)] group-hover/row:bg-[linear-gradient(var(--ds-hover),var(--ds-hover))] group-data-[selected]/row:bg-[linear-gradient(var(--ds-primary-soft),var(--ds-primary-soft))] group-data-[active]/row:bg-[linear-gradient(var(--ds-primary-soft),var(--ds-primary-soft))]\",\n            pin.pinned === \"start\" && pin.edge && \"shadow-[inset_-1px_0_0_var(--ds-border)]\",\n            pin.pinned === \"end\" && pin.edge && \"shadow-[inset_1px_0_0_var(--ds-border)]\",\n            !isEditing && \"truncate\",\n            meta?.cellClassName,\n          )}\n        >\n          {isEditing ? (\n            <EditableCell\n              cell={cell}\n              instance={instance}\n              onDone={() => {\n                pendingFocus.current = { r: index, c };\n              }}\n            />\n          ) : (\n            <table.FlexRender cell={cell} />\n          )}\n        </td>\n      );\n    };\n\n    return (\n      <React.Fragment key={row.id}>\n        <tr\n          role=\"row\"\n          data-slot=\"data-table-row\"\n          data-index={virtualIndex}\n          data-selected={selected ? \"\" : undefined}\n          data-active={active ? \"\" : undefined}\n          data-expanded={expanded ? \"\" : undefined}\n          aria-rowindex={index + 2}\n          aria-selected={table.options.enableRowSelection ? selected : undefined}\n          ref={isVirtual ? virtualizer.measureElement : undefined}\n          onClick={onRowClick ? (e) => onRowClick(row.original, e) : undefined}\n          className={cn(\n            \"group/row border-b border-[var(--ds-border-subtle)] transition-colors duration-[var(--ds-duration-fast)]\",\n            \"hover:bg-[var(--ds-hover)] data-[selected]:bg-[var(--ds-primary-soft)]\",\n            // Independent of selection: a detail pane highlights one row\n            // without ticking its checkbox.\n            \"data-[active]:bg-[var(--ds-primary-soft)]\",\n            onRowClick && \"cursor-pointer\",\n            rowClassName?.(row.original),\n          )}\n        >\n          {cells.slice(0, splitAt).map((cell, c) => renderCell(cell, c))}\n          <td aria-hidden data-slot=\"data-table-filler\" style={fillerStyle} className=\"p-0\" />\n          {cells.slice(splitAt).map((cell, i) => renderCell(cell, splitAt + i))}\n        </tr>\n        {expanded ? (\n          <tr role=\"row\" data-slot=\"data-table-subrow\" className=\"border-b border-[var(--ds-border-subtle)]\">\n            <td\n              role=\"gridcell\"\n              colSpan={colCount + 1}\n              className=\"bg-[var(--ds-muted)] px-4 py-3 text-[length:var(--ds-text-body-sm)]\"\n            >\n              {renderSubComponent(row)}\n            </td>\n          </tr>\n        ) : null}\n      </React.Fragment>\n    );\n  };\n\n  const skeletonRows = Array.from({ length: Math.min(8, table.state.pagination.pageSize) }, (_, i) => (\n    <tr key={`skeleton-${i}`} aria-hidden data-slot=\"data-table-skeleton-row\" className=\"border-b border-[var(--ds-border-subtle)]\">\n      {leafColumns.map((column) => (\n        <td key={column.id} className={cellPadding} style={{ width: widthFor(column, column.getSize()) }}>\n          <Skeleton className=\"h-3.5 w-3/4\" />\n        </td>\n      ))}\n      <td style={fillerStyle} className=\"p-0\" />\n    </tr>\n  ));\n\n  return (\n    <div data-slot=\"data-table\" className={cn(\"flex min-w-0 flex-col gap-3\", className)}>\n      {errorMessage ? (\n        <ErrorBanner message={errorMessage} onRetry={instance.error ? instance.refetch : undefined} />\n      ) : null}\n      {toolbar === false ? null : typeof toolbar === \"function\" ? (\n        toolbar({ instance })\n      ) : (\n        <DataTableToolbar\n          table={table}\n          bulkActions={bulkActions}\n          searchPlaceholder={searchPlaceholder}\n          enableExport={enableExport}\n          exportFileName={exportFileName}\n          refresh={refreshProps}\n        >\n          {toolbarActions}\n        </DataTableToolbar>\n      )}\n      <div\n        ref={scrollRef}\n        data-slot=\"data-table-container\"\n        onScroll={onScroll}\n        style={{ maxHeight: resolvedHeight }}\n        className={cn(\n          \"relative w-full overflow-auto rounded-[var(--ds-radius-md)] border border-[var(--ds-border)] bg-[var(--ds-card)]\",\n        )}\n      >\n        <table\n          ref={tableRef}\n          role=\"grid\"\n          data-slot=\"data-table-grid\"\n          data-virtualized={isVirtual ? \"\" : undefined}\n          aria-rowcount={rows.length + 1}\n          aria-colcount={colCount}\n          aria-busy={instance.isFetching || undefined}\n          aria-multiselectable={table.options.enableRowSelection ? true : undefined}\n          onKeyDown={onKeyDown}\n          onFocus={onFocus}\n          style={{ minWidth: table.getTotalSize() }}\n          className={cn(\n            \"w-full table-fixed border-collapse caption-bottom\",\n            \"text-[length:var(--ds-text-body-sm)] leading-[var(--ds-text-body-sm--line-height)] text-[color:var(--ds-foreground)]\",\n          )}\n        >\n          <thead data-slot=\"data-table-header\" className={cn(stickyHeader && \"sticky top-0 z-[2]\")}>\n            {headerGroups.map((group) => {\n              const endStart = group.headers.findIndex((h) => h.column.getIsPinned() === \"end\");\n              const splitAt = endStart === -1 ? group.headers.length : endStart;\n              const renderHead = (header: (typeof group.headers)[number], c: number) => {\n                const column = header.column;\n                const meta = column.columnDef.meta;\n                const pin = pinAttrs(column, table);\n                const sorted = column.getIsSorted();\n                const def = column.columnDef;\n                return (\n                  <th\n                    key={header.id}\n                    role=\"columnheader\"\n                    scope=\"col\"\n                    data-slot=\"data-table-head\"\n                    data-row-index={-1}\n                    data-col-index={c}\n                    data-pinned={pin.pinned}\n                    data-pinned-edge={pin.edge ? \"\" : undefined}\n                    aria-colindex={c + 1}\n                    aria-sort={\n                      sorted === \"asc\"\n                        ? \"ascending\"\n                        : sorted === \"desc\"\n                          ? \"descending\"\n                          : column.getCanSort()\n                            ? \"none\"\n                            : undefined\n                    }\n                    colSpan={header.colSpan}\n                    tabIndex={tabIndexFor(-1, c)}\n                    // Only where the column says so. A header is one short\n                    // phrase the consumer chose, so repeating it in a tooltip\n                    // on every `<th>` is noise, and it was wrong outright on\n                    // the select and expand columns, whose header is a node\n                    // with no sentence in it. `meta.label` is the column\n                    // saying what it is called; when it is set, `title` on the\n                    // `<th>` reaches the button inside it too, since a pointer\n                    // over a node with no title of its own takes its\n                    // ancestor's. Body cells keep their own hover text.\n                    title={meta?.label}\n                    style={{ width: widthFor(column, header.getSize()), ...pin.style }}\n                    className={cn(\n                      \"group/head relative h-10 align-middle font-medium outline-none\",\n                      headPadding,\n                      \"bg-[var(--ds-muted)] text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-muted-foreground)]\",\n                      \"border-b border-[var(--ds-border)]\",\n                      alignClass[meta?.align ?? \"start\"],\n                      \"focus-visible:ring-[2px] focus-visible:ring-inset focus-visible:ring-[var(--ds-ring)]\",\n                      pin.pinned && \"z-[3]\",\n                      pin.pinned === \"start\" && pin.edge && \"shadow-[inset_-1px_0_0_var(--ds-border)]\",\n                      pin.pinned === \"end\" && pin.edge && \"shadow-[inset_1px_0_0_var(--ds-border)]\",\n                      meta?.headerClassName,\n                    )}\n                  >\n                    {header.isPlaceholder ? null : typeof def.header === \"string\" ? (\n                      <DataTableColumnHeader column={column} title={def.header} />\n                    ) : (\n                      <table.FlexRender header={header} />\n                    )}\n                    {column.getCanResize() ? (\n                      <div\n                        data-slot=\"data-table-resizer\"\n                        data-resizing={column.getIsResizing() ? \"\" : undefined}\n                        onMouseDown={header.getResizeHandler()}\n                        onTouchStart={header.getResizeHandler()}\n                        onDoubleClick={() => column.resetSize()}\n                        className={cn(\n                          \"absolute right-0 top-0 h-full w-1 cursor-col-resize touch-none select-none\",\n                          \"opacity-0 transition-opacity duration-[var(--ds-duration-fast)] hover:opacity-100 data-[resizing]:opacity-100\",\n                          \"bg-[var(--ds-ring)]\",\n                        )}\n                      />\n                    ) : null}\n                  </th>\n                );\n              };\n              return (\n                <tr key={group.id} role=\"row\" aria-rowindex={1}>\n                  {group.headers.slice(0, splitAt).map((header, c) => renderHead(header, c))}\n                  <th\n                    aria-hidden\n                    data-slot=\"data-table-filler-head\"\n                    style={fillerStyle}\n                    className=\"border-b border-[var(--ds-border)] bg-[var(--ds-muted)] p-0\"\n                  />\n                  {group.headers.slice(splitAt).map((header, i) => renderHead(header, splitAt + i))}\n                </tr>\n              );\n            })}\n          </thead>\n          <tbody data-slot=\"data-table-body\">\n            {showSkeleton ? skeletonRows : null}\n            {showEmpty ? (\n              <tr role=\"row\" data-slot=\"data-table-empty\">\n                <td role=\"gridcell\" colSpan={colCount + 1} className=\"p-0\">\n                  {emptyState ?? (\n                    <div className=\"flex flex-col items-center justify-center gap-2 px-4 py-12 text-center text-[color:var(--ds-muted-foreground)]\">\n                      <Inbox aria-hidden className=\"size-6 text-[color:var(--ds-text-tertiary)]\" />\n                      <p className=\"text-[length:var(--ds-text-body-sm)]\">{emptyMessage}</p>\n                    </div>\n                  )}\n                </td>\n              </tr>\n            ) : null}\n            {virtualItems ? (\n              <>\n                {paddingTop > 0 ? (\n                  <tr aria-hidden data-slot=\"data-table-spacer\" style={{ height: paddingTop }}>\n                    <td colSpan={colCount + 1} className=\"p-0\" />\n                  </tr>\n                ) : null}\n                {virtualItems.map((item) => {\n                  const row = rows[item.index];\n                  return row ? renderRow(row, item.index, item.index) : null;\n                })}\n                {paddingBottom > 0 ? (\n                  <tr aria-hidden data-slot=\"data-table-spacer\" style={{ height: paddingBottom }}>\n                    <td colSpan={colCount + 1} className=\"p-0\" />\n                  </tr>\n                ) : null}\n              </>\n            ) : (\n              rows.map((row, index) => renderRow(row, index))\n            )}\n          </tbody>\n        </table>\n        {paginationMode === \"infinite\" && instance.isFetching && rows.length > 0 ? (\n          <div\n            data-slot=\"data-table-loading-more\"\n            className=\"flex items-center justify-center gap-2 border-t border-[var(--ds-border-subtle)] py-2 text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-muted-foreground)]\"\n          >\n            <Spinner size={14} /> Loading more\n          </div>\n        ) : null}\n      </div>\n      {paginationMode === \"pages\" ? (\n        <DataTablePagination table={table} pageSizeOptions={pageSizeOptions} />\n      ) : paginationMode === \"infinite\" ? (\n        <div className=\"text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-muted-foreground)]\">\n          {rows.length} of {instance.total}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nexport { DataTable, DataTableView };\n"],"mappings":"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"}

package/dist/components/data-table/system-columns.js

@@ -10,7 +10,20 @@ import { jsx } from "react/jsx-runtime";
 * when `enableRowSelection` is set, the expander when a `renderSubComponent`
 * is given. Both are display columns, neither sorts, hides, resizes or
 * exports, and a consumer column with the same id replaces them.
+*
+* Both controls stop the event from reaching the row (DESIGN-79). A table
+* with `onRowClick` puts a navigation on the whole row, and without this the
+* chevron opens the detail panel and navigates away from it in the same
+* gesture — and the checkbox selects a row and then leaves the page. It has
+* to be here: every consumer of these columns would otherwise need the same
+* guard, and the one that forgets has a control that cannot be used.
 */
+const stopRowActivation = {
+	onClick: (event) => event.stopPropagation(),
+	onKeyDown: (event) => {
+		if (event.key === "Enter" || event.key === " ") event.stopPropagation();
+	}
+};
 function selectColumn(helper) {
 	return helper.display({
 		id: "select",
@@ -21,14 +34,16 @@ function selectColumn(helper) {
 				"aria-label": "Select all rows on this page",
 				checked: all,
 				indeterminate: some,
-				onCheckedChange: (checked) => table.toggleAllPageRowsSelected(Boolean(checked))
+				onCheckedChange: (checked) => table.toggleAllPageRowsSelected(Boolean(checked)),
+				...stopRowActivation
 			});
 		},
 		cell: ({ row }) => /* @__PURE__ */ jsx(Checkbox, {
 			"aria-label": "Select row",
 			checked: row.getIsSelected(),
 			disabled: !row.getCanSelect(),
-			onCheckedChange: (checked) => row.toggleSelected(Boolean(checked))
+			onCheckedChange: (checked) => row.toggleSelected(Boolean(checked)),
+			...stopRowActivation
 		}),
 		size: 40,
 		minSize: 40,
@@ -58,7 +73,11 @@ function expandColumn(helper) {
 			"data-slot": "data-table-expander",
 			"aria-label": row.getIsExpanded() ? "Collapse row" : "Expand row",
 			"aria-expanded": row.getIsExpanded(),
-			onClick: row.getToggleExpandedHandler(),
+			onClick: (event) => {
+				event.stopPropagation();
+				row.getToggleExpandedHandler()();
+			},
+			onKeyDown: stopRowActivation.onKeyDown,
 			className: cn("inline-flex size-6 items-center justify-center rounded-[var(--ds-radius-sm)]", "text-[color:var(--ds-muted-foreground)] hover:bg-[var(--ds-hover)] hover:text-[color:var(--ds-foreground)]", "outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40"),
 			children: /* @__PURE__ */ jsx(ChevronRight, { className: cn("size-4 transition-transform duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]", row.getIsExpanded() && "rotate-90") })
 		}) : null,

package/dist/components/data-table/system-columns.js.map

@@ -1 +1 @@
-{"version":3,"file":"system-columns.js","names":[],"sources":["../../../src/components/data-table/system-columns.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ColumnHelper, RowData } from \"@tanstack/react-table\";\nimport { ChevronRight } from \"lucide-react\";\nimport { Checkbox } from \"@/components/checkbox\";\nimport { cn } from \"@/lib/cn\";\nimport type { DataTableFeatures } from \"./features\";\nimport type { DataTableColumnDef } from \"./types\";\n\n/**\n * Columns the table adds on the consumer's behalf: the selection checkbox\n * when `enableRowSelection` is set, the expander when a `renderSubComponent`\n * is given. Both are display columns, neither sorts, hides, resizes or\n * exports, and a consumer column with the same id replaces them.\n */\nexport function selectColumn<Row extends RowData>(\n  helper: ColumnHelper<DataTableFeatures<Row>, Row>,\n): DataTableColumnDef<Row, unknown> {\n  return helper.display({\n    id: \"select\",\n    header: ({ table }) => {\n      const all = table.getIsAllPageRowsSelected();\n      const some = table.getIsSomePageRowsSelected() && !all;\n      return (\n        <Checkbox\n          aria-label=\"Select all rows on this page\"\n          checked={all}\n          indeterminate={some}\n          onCheckedChange={(checked) => table.toggleAllPageRowsSelected(Boolean(checked))}\n        />\n      );\n    },\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        disabled={!row.getCanSelect()}\n        onCheckedChange={(checked) => row.toggleSelected(Boolean(checked))}\n      />\n    ),\n    size: 40,\n    minSize: 40,\n    maxSize: 40,\n    enableSorting: false,\n    enableHiding: false,\n    enableResizing: false,\n    enableColumnFilter: false,\n    enableGlobalFilter: false,\n    meta: { exportable: false, align: \"center\", cellClassName: \"px-2\", headerClassName: \"px-2\" },\n  });\n}\n\nexport function expandColumn<Row extends RowData>(\n  helper: ColumnHelper<DataTableFeatures<Row>, Row>,\n): DataTableColumnDef<Row, unknown> {\n  return helper.display({\n    id: \"expand\",\n    header: () => <span className=\"sr-only\">Expand</span>,\n    cell: ({ row }) =>\n      row.getCanExpand() ? (\n        <button\n          type=\"button\"\n          data-slot=\"data-table-expander\"\n          aria-label={row.getIsExpanded() ? \"Collapse row\" : \"Expand row\"}\n          aria-expanded={row.getIsExpanded()}\n          onClick={row.getToggleExpandedHandler()}\n          className={cn(\n            \"inline-flex size-6 items-center justify-center rounded-[var(--ds-radius-sm)]\",\n            \"text-[color:var(--ds-muted-foreground)] hover:bg-[var(--ds-hover)] hover:text-[color:var(--ds-foreground)]\",\n            \"outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40\",\n          )}\n        >\n          <ChevronRight\n            className={cn(\n              \"size-4 transition-transform duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]\",\n              row.getIsExpanded() && \"rotate-90\",\n            )}\n          />\n        </button>\n      ) : null,\n    size: 40,\n    minSize: 40,\n    maxSize: 40,\n    enableSorting: false,\n    enableHiding: false,\n    enableResizing: false,\n    enableColumnFilter: false,\n    enableGlobalFilter: false,\n    meta: { exportable: false, align: \"center\", cellClassName: \"px-2\", headerClassName: \"px-2\" },\n  });\n}\n"],"mappings":";;;;;;;;;;;;;AAeA,SAAgB,aACd,QACkC;CAClC,OAAO,OAAO,QAAQ;EACpB,IAAI;EACJ,SAAS,EAAE,YAAY;GACrB,MAAM,MAAM,MAAM,yBAAyB;GAC3C,MAAM,OAAO,MAAM,0BAA0B,KAAK,CAAC;GACnD,OACE,oBAAC,UAAD;IACE,cAAW;IACX,SAAS;IACT,eAAe;IACf,kBAAkB,YAAY,MAAM,0BAA0B,QAAQ,OAAO,CAAC;GAC/E,CAAA;EAEL;EACA,OAAO,EAAE,UACP,oBAAC,UAAD;GACE,cAAW;GACX,SAAS,IAAI,cAAc;GAC3B,UAAU,CAAC,IAAI,aAAa;GAC5B,kBAAkB,YAAY,IAAI,eAAe,QAAQ,OAAO,CAAC;EAClE,CAAA;EAEH,MAAM;EACN,SAAS;EACT,SAAS;EACT,eAAe;EACf,cAAc;EACd,gBAAgB;EAChB,oBAAoB;EACpB,oBAAoB;EACpB,MAAM;GAAE,YAAY;GAAO,OAAO;GAAU,eAAe;GAAQ,iBAAiB;EAAO;CAC7F,CAAC;AACH;AAEA,SAAgB,aACd,QACkC;CAClC,OAAO,OAAO,QAAQ;EACpB,IAAI;EACJ,cAAc,oBAAC,QAAD;GAAM,WAAU;GAAU,UAAA;EAAY,CAAA;EACpD,OAAO,EAAE,UACP,IAAI,aAAa,IACf,oBAAC,UAAD;GACE,MAAK;GACL,aAAU;GACV,cAAY,IAAI,cAAc,IAAI,iBAAiB;GACnD,iBAAe,IAAI,cAAc;GACjC,SAAS,IAAI,yBAAyB;GACtC,WAAW,GACT,gFACA,8GACA,8EACF;GAEA,UAAA,oBAAC,cAAD,EACE,WAAW,GACT,4FACA,IAAI,cAAc,KAAK,WACzB,EACD,CAAA;EACK,CAAA,IACN;EACN,MAAM;EACN,SAAS;EACT,SAAS;EACT,eAAe;EACf,cAAc;EACd,gBAAgB;EAChB,oBAAoB;EACpB,oBAAoB;EACpB,MAAM;GAAE,YAAY;GAAO,OAAO;GAAU,eAAe;GAAQ,iBAAiB;EAAO;CAC7F,CAAC;AACH"}
+{"version":3,"file":"system-columns.js","names":[],"sources":["../../../src/components/data-table/system-columns.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ColumnHelper, RowData } from \"@tanstack/react-table\";\nimport type * as React from \"react\";\nimport { ChevronRight } from \"lucide-react\";\nimport { Checkbox } from \"@/components/checkbox\";\nimport { cn } from \"@/lib/cn\";\nimport type { DataTableFeatures } from \"./features\";\nimport type { DataTableColumnDef } from \"./types\";\n\n/**\n * Columns the table adds on the consumer's behalf: the selection checkbox\n * when `enableRowSelection` is set, the expander when a `renderSubComponent`\n * is given. Both are display columns, neither sorts, hides, resizes or\n * exports, and a consumer column with the same id replaces them.\n *\n * Both controls stop the event from reaching the row (DESIGN-79). A table\n * with `onRowClick` puts a navigation on the whole row, and without this the\n * chevron opens the detail panel and navigates away from it in the same\n * gesture — and the checkbox selects a row and then leaves the page. It has\n * to be here: every consumer of these columns would otherwise need the same\n * guard, and the one that forgets has a control that cannot be used.\n */\nconst stopRowActivation = {\n  onClick: (event: React.MouseEvent) => event.stopPropagation(),\n  // A button fires `click` for Enter and Space, so `onClick` covers the\n  // keyboard too; this stops the grid's own key handling from seeing the key\n  // before the control does.\n  onKeyDown: (event: React.KeyboardEvent) => {\n    if (event.key === \"Enter\" || event.key === \" \") event.stopPropagation();\n  },\n} as const;\nexport function selectColumn<Row extends RowData>(\n  helper: ColumnHelper<DataTableFeatures<Row>, Row>,\n): DataTableColumnDef<Row, unknown> {\n  return helper.display({\n    id: \"select\",\n    header: ({ table }) => {\n      const all = table.getIsAllPageRowsSelected();\n      const some = table.getIsSomePageRowsSelected() && !all;\n      return (\n        <Checkbox\n          aria-label=\"Select all rows on this page\"\n          checked={all}\n          indeterminate={some}\n          onCheckedChange={(checked) => table.toggleAllPageRowsSelected(Boolean(checked))}\n          {...stopRowActivation}\n        />\n      );\n    },\n    cell: ({ row }) => (\n      <Checkbox\n        aria-label=\"Select row\"\n        checked={row.getIsSelected()}\n        disabled={!row.getCanSelect()}\n        onCheckedChange={(checked) => row.toggleSelected(Boolean(checked))}\n        {...stopRowActivation}\n      />\n    ),\n    size: 40,\n    minSize: 40,\n    maxSize: 40,\n    enableSorting: false,\n    enableHiding: false,\n    enableResizing: false,\n    enableColumnFilter: false,\n    enableGlobalFilter: false,\n    meta: { exportable: false, align: \"center\", cellClassName: \"px-2\", headerClassName: \"px-2\" },\n  });\n}\n\nexport function expandColumn<Row extends RowData>(\n  helper: ColumnHelper<DataTableFeatures<Row>, Row>,\n): DataTableColumnDef<Row, unknown> {\n  return helper.display({\n    id: \"expand\",\n    header: () => <span className=\"sr-only\">Expand</span>,\n    cell: ({ row }) =>\n      row.getCanExpand() ? (\n        <button\n          type=\"button\"\n          data-slot=\"data-table-expander\"\n          aria-label={row.getIsExpanded() ? \"Collapse row\" : \"Expand row\"}\n          aria-expanded={row.getIsExpanded()}\n          onClick={(event) => {\n            event.stopPropagation();\n            row.getToggleExpandedHandler()();\n          }}\n          onKeyDown={stopRowActivation.onKeyDown}\n          className={cn(\n            \"inline-flex size-6 items-center justify-center rounded-[var(--ds-radius-sm)]\",\n            \"text-[color:var(--ds-muted-foreground)] hover:bg-[var(--ds-hover)] hover:text-[color:var(--ds-foreground)]\",\n            \"outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40\",\n          )}\n        >\n          <ChevronRight\n            className={cn(\n              \"size-4 transition-transform duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]\",\n              row.getIsExpanded() && \"rotate-90\",\n            )}\n          />\n        </button>\n      ) : null,\n    size: 40,\n    minSize: 40,\n    maxSize: 40,\n    enableSorting: false,\n    enableHiding: false,\n    enableResizing: false,\n    enableColumnFilter: false,\n    enableGlobalFilter: false,\n    meta: { exportable: false, align: \"center\", cellClassName: \"px-2\", headerClassName: \"px-2\" },\n  });\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAuBA,MAAM,oBAAoB;CACxB,UAAU,UAA4B,MAAM,gBAAgB;CAI5D,YAAY,UAA+B;EACzC,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK,MAAM,gBAAgB;CACxE;AACF;AACA,SAAgB,aACd,QACkC;CAClC,OAAO,OAAO,QAAQ;EACpB,IAAI;EACJ,SAAS,EAAE,YAAY;GACrB,MAAM,MAAM,MAAM,yBAAyB;GAC3C,MAAM,OAAO,MAAM,0BAA0B,KAAK,CAAC;GACnD,OACE,oBAAC,UAAD;IACE,cAAW;IACX,SAAS;IACT,eAAe;IACf,kBAAkB,YAAY,MAAM,0BAA0B,QAAQ,OAAO,CAAC;IAC9E,GAAI;GACL,CAAA;EAEL;EACA,OAAO,EAAE,UACP,oBAAC,UAAD;GACE,cAAW;GACX,SAAS,IAAI,cAAc;GAC3B,UAAU,CAAC,IAAI,aAAa;GAC5B,kBAAkB,YAAY,IAAI,eAAe,QAAQ,OAAO,CAAC;GACjE,GAAI;EACL,CAAA;EAEH,MAAM;EACN,SAAS;EACT,SAAS;EACT,eAAe;EACf,cAAc;EACd,gBAAgB;EAChB,oBAAoB;EACpB,oBAAoB;EACpB,MAAM;GAAE,YAAY;GAAO,OAAO;GAAU,eAAe;GAAQ,iBAAiB;EAAO;CAC7F,CAAC;AACH;AAEA,SAAgB,aACd,QACkC;CAClC,OAAO,OAAO,QAAQ;EACpB,IAAI;EACJ,cAAc,oBAAC,QAAD;GAAM,WAAU;GAAU,UAAA;EAAY,CAAA;EACpD,OAAO,EAAE,UACP,IAAI,aAAa,IACf,oBAAC,UAAD;GACE,MAAK;GACL,aAAU;GACV,cAAY,IAAI,cAAc,IAAI,iBAAiB;GACnD,iBAAe,IAAI,cAAc;GACjC,UAAU,UAAU;IAClB,MAAM,gBAAgB;IACtB,IAAI,yBAAyB,CAAC,CAAC;GACjC;GACA,WAAW,kBAAkB;GAC7B,WAAW,GACT,gFACA,8GACA,8EACF;GAEA,UAAA,oBAAC,cAAD,EACE,WAAW,GACT,4FACA,IAAI,cAAc,KAAK,WACzB,EACD,CAAA;EACK,CAAA,IACN;EACN,MAAM;EACN,SAAS;EACT,SAAS;EACT,eAAe;EACf,cAAc;EACd,gBAAgB;EAChB,oBAAoB;EACpB,oBAAoB;EACpB,MAAM;GAAE,YAAY;GAAO,OAAO;GAAU,eAAe;GAAQ,iBAAiB;EAAO;CAC7F,CAAC;AACH"}

package/dist/components/data-table/types.d.ts

@@ -76,6 +76,34 @@ export interface DataTableColumnMeta<Row = unknown> {
   }>;
   /** Text alignment of the header and cells. Numbers usually want `end`. */
   align?: "start" | "center" | "end";
+  /**
+   * This column takes whatever width the sized columns leave (DESIGN-77).
+   *
+   * The grid is `table-fixed`: every column is drawn at its `size`, and a
+   * column that never declared one sits at TanStack's 150 px default. On a
+   * list that is one wide column and a few narrow ones — a title beside an
+   * id, a status and an assignee — that means the column people actually read
+   * is clipped while the table shows empty space to its right. Mark that
+   * column `fill` and it is the one column drawn with no fixed width, so the
+   * remainder lands on it.
+   *
+   * One per table: the first visible one wins. It keeps its `size` as a floor
+   * — the table's `min-width` still counts it, so the row scrolls rather than
+   * squeezing the column to nothing — and it is not itself resizable, because
+   * a column with no width of its own has no edge to drag.
+   */
+  fill?: boolean;
+  /**
+   * Full text for the `title` on every cell in this column, when the cell
+   * draws something other than its own value.
+   *
+   * Cells truncate and never wrap, so the full text has to be reachable on
+   * hover. A column that renders its value directly gets that for free. A
+   * column with its own `cell` renderer draws an arbitrary node, and the
+   * table will not guess a string for it — say what the hover text is here.
+   * Return `undefined` for no title.
+   */
+  hoverText?: (row: Row) => string | undefined;
   /** Enter or double-click opens an editor; Enter commits, Escape cancels. */
   editable?: boolean | DataTableEditable;
   /** Receives the committed value. Falls back to the table's `onCellCommit`. */
@@ -90,6 +118,14 @@ export interface DataTableColumnMeta<Row = unknown> {
   cellClassName?: string;
   /** Extra classes for the header cell. */
   headerClassName?: string;
+  /**
+   * @internal Set by `useDataTable`, never by a consumer. Marks a column whose
+   * cell renders its own value, so the view can put the full text in a `title`
+   * without guessing a string out of a React node (DESIGN-77). It has to be
+   * recorded before TanStack merges its fallback cell renderer in, after which
+   * a column that declared no `cell` looks exactly like one that did.
+   */
+  plainCell?: boolean;
 }
 export type DataTableColumnDef<Row extends RowData, Value = unknown> = ColumnDef<DataTableFeatures<Row>, Row, Value>;
 export type DataTableColumn<Row extends RowData, Value = unknown> = Column<DataTableFeatures<Row>, Row, Value>;
@@ -166,7 +202,12 @@ export interface UseDataTableOptions<Row extends RowData> {
   enableHiding?: boolean;
   /** @default true */
   enableColumnPinning?: boolean;
-  /** @default false */
+  /**
+   * Drag handles on the column edges. Defaults to `false`, or to `true` when
+   * a column is marked `meta.fill`: there the drag has somewhere to go, since
+   * the fill column absorbs whatever the dragged column takes or gives back.
+   * An explicit `false` still wins.
+   */
   enableColumnResizing?: boolean;
   /** Starting sort, filters, visibility, pinning, sizing. */
   initialState?: Partial<DataTableState<Row>>;

package/dist/components/data-table/use-data-table.js

@@ -15,6 +15,31 @@ const AUTO_REFRESH_DEFAULT_MS = 6e4;
 const AUTO_REFRESH_STORAGE_PREFIX = "cortena.data-table.auto-refresh.";
 /** One warning per process, not one per render. */
 const warned = { missingStateKey: false };
+/** Column sets already complained about, so a re-render does not repeat it. */
+const warnedUnsized = /* @__PURE__ */ new Set();
+/**
+* True where a developer is the one who would read a `console.warn`.
+*
+* Neither signal is universal, and the unguarded form of either one throws.
+* `process` is a Node global: a bundler that replaces `process.env.NODE_ENV`
+* leaves nothing behind, but a plain ESM consumer or a browser import map has
+* no `process` at all, and the bare identifier is a ReferenceError that takes
+* the table down with it. `import.meta.env` is Vite's, and is simply absent
+* under webpack or in the published ESM as Node loads it. So: ask Vite, then
+* ask Node, and when neither answers say nothing. A development warning is
+* worth having only where someone can act on it, and a library that throws to
+* deliver one is worse than a library that stays quiet.
+*/
+function isDevBuild() {
+	const viteEnv = import.meta.env;
+	if (viteEnv) return viteEnv.DEV === true;
+	if (typeof process === "undefined") return false;
+	return true;
+}
+/** The id TanStack will give this column, for a message written before the table exists. */
+function columnDefId(column) {
+	return column.id ?? (typeof column.accessorKey === "string" ? column.accessorKey : void 0) ?? (typeof column.header === "string" ? column.header : "(unnamed)");
+}
 function readStoredFlag(key) {
 	try {
 		return window.localStorage.getItem(key) === "on";
@@ -76,7 +101,7 @@ function useDebounced(value, ms) {
 * whole instance to `<DataTable instance={...} />`.
 */
 function useDataTable(options) {
-	const { columns, dataSource, getRowId, getSubRows, pagination: paginationMode = "pages", pageSize = 25, enableRowSelection = false, enableExpanding = false, getRowCanExpand, enableSorting = true, enableMultiSort = false, enableGlobalFilter = true, enableColumnFilters = true, enableHiding = true, enableColumnPinning = true, enableColumnResizing = false, initialState, onCellCommit, onRowSelectionChange, searchDebounceMs = 250, autoRefresh, stateKey } = options;
+	const { columns, dataSource, getRowId, getSubRows, pagination: paginationMode = "pages", pageSize = 25, enableRowSelection = false, enableExpanding = false, getRowCanExpand, enableSorting = true, enableMultiSort = false, enableGlobalFilter = true, enableColumnFilters = true, enableHiding = true, enableColumnPinning = true, enableColumnResizing, initialState, onCellCommit, onRowSelectionChange, searchDebounceMs = 250, autoRefresh, stateKey } = options;
 	const isServer = dataSource.kind === "server";
 	const [globalFilter, setGlobalFilter] = React.useState(initialState?.globalFilter ?? "");
 	const [columnFilters, setColumnFilters] = React.useState(initialState?.columnFilters ?? []);
@@ -131,6 +156,16 @@ function useDataTable(options) {
 		active: autoActive
 	} : void 0);
 	const data = isServer ? server.rows : dataSource.rows;
+	const hasFillColumn = columns.some((c) => c.meta?.fill);
+	const resizing = enableColumnResizing ?? hasFillColumn;
+	const resizeMode = enableColumnResizing === void 0 ? "onEnd" : "onChange";
+	const unsizedIds = columns.filter((c) => c.size === void 0).map(columnDefId).join(", ");
+	React.useEffect(() => {
+		if (!isDevBuild()) return;
+		if (hasFillColumn || unsizedIds === "" || warnedUnsized.has(unsizedIds)) return;
+		warnedUnsized.add(unsizedIds);
+		console.warn(`[cortena-ui] DataTable: no column is marked \`meta: { fill: true }\`, and ${unsizedIds} declared no \`size\`, so ${unsizedIds.includes(",") ? "they sit" : "it sits"} at the 150px default and the table leaves empty space to the right. Mark the column people scan the list by with \`meta: { fill: true }\` and give the rest a \`size\`.`);
+	}, [hasFillColumn, unsizedIds]);
 	const resolvedColumns = React.useMemo(() => {
 		const helper = createColumnHelper$1();
 		const out = [];
@@ -138,15 +173,20 @@ function useDataTable(options) {
 		if (enableExpanding && !columns.some((c) => c.id === "expand")) out.push(expandColumn(helper));
 		for (const column of columns) {
 			const filter = column.meta?.filter;
-			if (filter === "faceted" && column.filterFn === void 0) out.push({
-				...column,
-				filterFn: "oneOf"
-			});
-			else if (filter === "text" && column.filterFn === void 0) out.push({
+			const defaults = {};
+			if (filter === "faceted" && column.filterFn === void 0) defaults.filterFn = "oneOf";
+			else if (filter === "text" && column.filterFn === void 0) defaults.filterFn = "includesString";
+			if (column.meta?.fill && column.enableResizing === void 0) defaults.enableResizing = false;
+			const plain = !("cell" in column) || column.cell == null;
+			const resolved = {
 				...column,
-				filterFn: "includesString"
-			});
-			else out.push(column);
+				...defaults,
+				...plain ? { meta: {
+					...column.meta,
+					plainCell: true
+				} } : null
+			};
+			out.push(resolved);
 		}
 		return out;
 	}, [
@@ -186,8 +226,8 @@ function useDataTable(options) {
 		enableColumnFilters,
 		enableHiding,
 		enableColumnPinning,
-		enableColumnResizing,
-		columnResizeMode: "onChange",
+		enableColumnResizing: resizing,
+		columnResizeMode: resizeMode,
 		globalFilterFn: "search"
 	});
 	const onSelectionRef = React.useRef(onRowSelectionChange);

package/dist/components/data-table/use-data-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-data-table.js","names":["createColumnHelper"],"sources":["../../../src/components/data-table/use-data-table.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  useTable,\n  type ColumnFiltersState,\n  type PaginationState,\n  type RowData,\n  type RowSelectionState,\n  type SortingState,\n} from \"@tanstack/react-table\";\nimport * as React from \"react\";\nimport { createColumnHelper, dataTableFeatures } from \"./features\";\nimport { expandColumn, selectColumn } from \"./system-columns\";\nimport type {\n  DataSource,\n  DataTableAutoRefreshState,\n  DataTableColumnDef,\n  DataTableEditingCell,\n  DataTableInstance,\n  DataTableRefreshPause,\n  DataTableRow,\n  DataTableTable,\n  TableQuery,\n  UseDataTableOptions,\n} from \"./types\";\nimport { useServerSource } from \"./use-server-source\";\n\nconst EMPTY_ROWS: never[] = [];\n\n/** The floor on `autoRefresh.intervalMs`; anything shorter is load, not freshness. */\nexport const AUTO_REFRESH_MIN_MS = 30_000;\n/** Used when `autoRefresh` names no interval. */\nexport const AUTO_REFRESH_DEFAULT_MS = 60_000;\n/** `cortena.data-table.auto-refresh.<stateKey>` holds `\"on\"` or `\"off\"`. */\nexport const AUTO_REFRESH_STORAGE_PREFIX = \"cortena.data-table.auto-refresh.\";\n\n/** One warning per process, not one per render. */\nconst warned = { missingStateKey: false };\n\nfunction readStoredFlag(key: string): boolean {\n  try {\n    return window.localStorage.getItem(key) === \"on\";\n  } catch {\n    return false;\n  }\n}\n\n/**\n * The user's auto-refresh choice, remembered per table.\n *\n * It starts off and is read from storage in an effect rather than in the\n * initial state, so a server-rendered table and its first client render agree\n * — a switch that hydrates in the opposite position is a React mismatch and,\n * worse, a table that starts polling before the page is interactive.\n */\nfunction usePersistedFlag(storageKey: string | null): [boolean, (on: boolean) => void] {\n  const [on, setOn] = React.useState(false);\n  React.useEffect(() => {\n    setOn(storageKey ? readStoredFlag(storageKey) : false);\n  }, [storageKey]);\n  const set = React.useCallback(\n    (next: boolean) => {\n      setOn(next);\n      if (!storageKey) return;\n      try {\n        window.localStorage.setItem(storageKey, next ? \"on\" : \"off\");\n      } catch {\n        /* Private mode, or storage full: the switch still works for this visit. */\n      }\n    },\n    [storageKey],\n  );\n  return [on, set];\n}\n\nconst subscribeVisibility = (onChange: () => void) => {\n  document.addEventListener(\"visibilitychange\", onChange);\n  return () => document.removeEventListener(\"visibilitychange\", onChange);\n};\n\n/** True while the tab is in the background. Polling a tab nobody is looking at is a battery bill. */\nfunction useDocumentHidden(): boolean {\n  return React.useSyncExternalStore(\n    subscribeVisibility,\n    () => document.visibilityState === \"hidden\",\n    () => false,\n  );\n}\n\nfunction useDebounced<T>(value: T, ms: number): T {\n  const [debounced, setDebounced] = React.useState(value);\n  React.useEffect(() => {\n    if (ms <= 0) {\n      setDebounced(value);\n      return;\n    }\n    const id = setTimeout(() => setDebounced(value), ms);\n    return () => clearTimeout(id);\n  }, [value, ms]);\n  return ms <= 0 ? value : debounced;\n}\n\n/**\n * Builds the table for a `dataSource`. This is where the design decision's\n * \"the component sets the manual flags itself\" lives: a server source flips\n * `manualFiltering`, `manualSorting` and `manualPagination` and feeds the\n * table's own filter / sort / page state back out as a `TableQuery`; a client\n * source leaves every row model in memory. Everything else (selection,\n * expansion, visibility, pinning, sizing) is owned by the table.\n *\n * Use it directly when the default layout is not enough: pass the returned\n * `table` to `DataTableToolbar`, `DataTablePagination` and friends, or the\n * whole instance to `<DataTable instance={...} />`.\n */\nexport function useDataTable<Row extends RowData>(\n  options: UseDataTableOptions<Row>,\n): DataTableInstance<Row> {\n  const {\n    columns,\n    dataSource,\n    getRowId,\n    getSubRows,\n    pagination: paginationMode = \"pages\",\n    pageSize = 25,\n    enableRowSelection = false,\n    enableExpanding = false,\n    getRowCanExpand,\n    enableSorting = true,\n    enableMultiSort = false,\n    enableGlobalFilter = true,\n    enableColumnFilters = true,\n    enableHiding = true,\n    enableColumnPinning = true,\n    enableColumnResizing = false,\n    initialState,\n    onCellCommit,\n    onRowSelectionChange,\n    searchDebounceMs = 250,\n    autoRefresh,\n    stateKey,\n  } = options;\n\n  const isServer = dataSource.kind === \"server\";\n\n  // Slices the server query is built from are React state; the table mirrors\n  // them through `state` + `on*Change`, which v9 still supports alongside atoms.\n  const [globalFilter, setGlobalFilter] = React.useState<string>(\n    (initialState?.globalFilter as string | undefined) ?? \"\",\n  );\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    initialState?.columnFilters ?? [],\n  );\n  const [sorting, setSorting] = React.useState<SortingState>(initialState?.sorting ?? []);\n  const [pagination, setPagination] = React.useState<PaginationState>(\n    initialState?.pagination ?? { pageIndex: 0, pageSize },\n  );\n  // Selection and the open editor are lifted for the same reason the query\n  // slices are: auto-refresh has to know about them before the query for this\n  // render is declared, and `table.state` only exists after `useTable`.\n  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>(\n    initialState?.rowSelection ?? {},\n  );\n  const [editingCell, setEditingCell] = React.useState<DataTableEditingCell | null>(null);\n\n  const searchQuery = useDebounced(globalFilter, isServer ? searchDebounceMs : 0);\n\n  // A new search, filter or sort starts from page one again. Client sources\n  // get this from `autoResetPageIndex`; manual pagination has to do it here.\n  const scopeKey = JSON.stringify([searchQuery, columnFilters, sorting]);\n  const lastScope = React.useRef(scopeKey);\n  React.useEffect(() => {\n    if (lastScope.current === scopeKey) return;\n    lastScope.current = scopeKey;\n    setPagination((p) => (p.pageIndex === 0 ? p : { ...p, pageIndex: 0 }));\n  }, [scopeKey]);\n\n  const query = React.useMemo<TableQuery>(\n    () => ({\n      // Trimmed for the same reason the client filter trims (features.ts): a\n      // backend asked for `q: \" \"` returns nothing, and the user sees an empty\n      // table with no explanation. Whitespace-only means no search term.\n      q: searchQuery.trim() || undefined,\n      filters: columnFilters.length ? columnFilters : undefined,\n      sort: sorting.length ? sorting : undefined,\n      page: pagination.pageIndex,\n      pageSize: pagination.pageSize,\n    }),\n    [searchQuery, columnFilters, sorting, pagination.pageIndex, pagination.pageSize],\n  );\n\n  /* Freshness (DESIGN-D19 / P-39) -------------------------------------- */\n\n  const wantsAuto = isServer && autoRefresh !== undefined;\n  React.useEffect(() => {\n    if (!wantsAuto || stateKey || warned.missingStateKey) return;\n    warned.missingStateKey = true;\n    console.warn(\n      \"[cortena-ui] DataTable: `autoRefresh` needs a `stateKey`. Without one the \" +\n        \"user's on/off choice cannot be remembered between visits, and two tables \" +\n        \"on one screen would share the same setting.\",\n    );\n  }, [wantsAuto, stateKey]);\n  const storageKey = wantsAuto && stateKey ? AUTO_REFRESH_STORAGE_PREFIX + stateKey : null;\n  const [autoEnabled, setAutoEnabled] = usePersistedFlag(storageKey);\n  const hidden = useDocumentHidden();\n  const baseIntervalMs = Math.max(\n    autoRefresh?.intervalMs ?? AUTO_REFRESH_DEFAULT_MS,\n    AUTO_REFRESH_MIN_MS,\n  );\n  // The polite rules, in the order a user would explain them. Each one is a\n  // reason the interval is not running, and the toolbar says which.\n  const pausedBy: DataTableRefreshPause | null = hidden\n    ? \"hidden\"\n    : editingCell\n      ? \"editing\"\n      : Object.keys(rowSelection).length > 0\n        ? \"selection\"\n        : autoRefresh?.paused\n          ? \"app\"\n          : null;\n  const autoActive = wantsAuto && autoEnabled && pausedBy === null;\n\n  const server = useServerSource<Row>(\n    isServer ? dataSource : undefined,\n    query,\n    paginationMode,\n    wantsAuto ? { intervalMs: baseIntervalMs, active: autoActive } : undefined,\n  );\n\n  const data: ReadonlyArray<Row> = isServer ? server.rows : dataSource.rows;\n\n  // System columns first; then each consumer column with its meta defaults\n  // applied (a faceted column filters with `oneOf` unless told otherwise).\n  const resolvedColumns = React.useMemo(() => {\n    const helper = createColumnHelper<Row>();\n    const out: DataTableColumnDef<Row, any>[] = [];\n    if (enableRowSelection && !columns.some((c) => c.id === \"select\")) out.push(selectColumn(helper));\n    if (enableExpanding && !columns.some((c) => c.id === \"expand\")) out.push(expandColumn(helper));\n    for (const column of columns) {\n      const filter = column.meta?.filter;\n      if (filter === \"faceted\" && column.filterFn === undefined) {\n        out.push({ ...column, filterFn: \"oneOf\" });\n      } else if (filter === \"text\" && column.filterFn === undefined) {\n        out.push({ ...column, filterFn: \"includesString\" });\n      } else {\n        out.push(column);\n      }\n    }\n    return out;\n  }, [columns, enableRowSelection, enableExpanding]);\n\n  const table: DataTableTable<Row> = useTable({\n    features: dataTableFeatures<Row>(),\n    columns: resolvedColumns,\n    data: data.length ? data : EMPTY_ROWS,\n    getRowId,\n    getSubRows,\n    initialState,\n    state: { globalFilter, columnFilters, sorting, pagination, rowSelection },\n    onGlobalFilterChange: setGlobalFilter,\n    onColumnFiltersChange: setColumnFilters,\n    onSortingChange: setSorting,\n    onPaginationChange: setPagination,\n    onRowSelectionChange: setRowSelection,\n    manualFiltering: isServer,\n    manualSorting: isServer,\n    manualPagination: isServer || paginationMode !== \"pages\",\n    rowCount: isServer ? server.total : undefined,\n    enableRowSelection,\n    enableExpanding,\n    getRowCanExpand: getRowCanExpand ?? (enableExpanding ? () => true : undefined),\n    enableSorting,\n    enableMultiSort,\n    enableGlobalFilter,\n    enableColumnFilters,\n    enableHiding,\n    enableColumnPinning,\n    enableColumnResizing,\n    columnResizeMode: \"onChange\",\n    // `search`, not `includesString`: it trims the query, so a box holding only\n    // whitespace filters nothing rather than emptying the grid. See features.ts.\n    globalFilterFn: \"search\",\n  });\n\n  // Selection callback with original rows, for consumers that keep selection outside.\n  const onSelectionRef = React.useRef(onRowSelectionChange);\n  onSelectionRef.current = onRowSelectionChange;\n  const firstSelection = React.useRef(true);\n  React.useEffect(() => {\n    if (firstSelection.current) {\n      firstSelection.current = false;\n      return;\n    }\n    onSelectionRef.current?.(table.getSelectedRowModel().rows.map((r) => r.original));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [rowSelection]);\n\n  const commit = React.useCallback(\n    async (row: DataTableRow<Row>, columnId: string, value: unknown) => {\n      const meta = table.getColumn(columnId)?.columnDef.meta;\n      const handler = meta?.onCommit ?? onCellCommit;\n      await handler?.(row.original, columnId, value);\n    },\n    [table, onCellCommit],\n  );\n  const editing = React.useMemo(\n    () => ({\n      cell: editingCell,\n      start: (cell: DataTableEditingCell) => setEditingCell(cell),\n      stop: () => setEditingCell(null),\n      commit,\n    }),\n    [editingCell, commit],\n  );\n\n  // The stamp keeps the last real response time: with keepPreviousData a page\n  // change puts a placeholder on screen whose `dataUpdatedAt` is zero, and the\n  // stamp must not blink out while the next page loads.\n  const lastUpdatedRef = React.useRef<number | null>(null);\n  if (server.lastUpdatedAt && server.lastUpdatedAt > (lastUpdatedRef.current ?? 0)) {\n    lastUpdatedRef.current = server.lastUpdatedAt;\n  }\n  const lastUpdatedAt = lastUpdatedRef.current;\n\n  const autoState = React.useMemo<DataTableAutoRefreshState | null>(\n    () =>\n      wantsAuto\n        ? {\n            enabled: autoEnabled,\n            setEnabled: setAutoEnabled,\n            active: autoActive && !server.mutating,\n            // A mutation in flight is the one pause only the query layer can\n            // see; it is folded in here so the toolbar can still say why.\n            pausedBy: autoEnabled ? (pausedBy ?? (server.mutating ? \"mutation\" : null)) : null,\n            intervalMs: server.intervalMs === false ? baseIntervalMs : server.intervalMs,\n            baseIntervalMs,\n            backingOff: server.failures > 0,\n          }\n        : null,\n    [\n      wantsAuto,\n      autoEnabled,\n      setAutoEnabled,\n      autoActive,\n      pausedBy,\n      server.mutating,\n      server.intervalMs,\n      server.failures,\n      baseIntervalMs,\n    ],\n  );\n\n  const total = isServer\n    ? (server.total ?? 0)\n    : paginationMode === \"pages\"\n      ? table.getPrePaginatedRowModel().rows.length\n      : table.getRowModel().rows.length;\n\n  return {\n    table,\n    dataSource: dataSource as DataSource<Row>,\n    paginationMode,\n    rows: data as Row[],\n    total,\n    isLoading: server.isLoading,\n    isFetching: server.isFetching,\n    error: server.error,\n    refetch: server.refetch,\n    fetchNextPage: server.fetchNextPage,\n    hasNextPage: server.hasNextPage,\n    searchQuery,\n    lastUpdatedAt,\n    lastErrorAt: server.lastErrorAt,\n    autoRefresh: autoState,\n    editing,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-data-table.js","names":["createColumnHelper"],"sources":["../../../src/components/data-table/use-data-table.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  useTable,\n  type ColumnFiltersState,\n  type PaginationState,\n  type RowData,\n  type RowSelectionState,\n  type SortingState,\n} from \"@tanstack/react-table\";\nimport * as React from \"react\";\nimport { createColumnHelper, dataTableFeatures } from \"./features\";\nimport { expandColumn, selectColumn } from \"./system-columns\";\nimport type {\n  DataSource,\n  DataTableAutoRefreshState,\n  DataTableColumnDef,\n  DataTableEditingCell,\n  DataTableInstance,\n  DataTableRefreshPause,\n  DataTableRow,\n  DataTableTable,\n  TableQuery,\n  UseDataTableOptions,\n} from \"./types\";\nimport { useServerSource } from \"./use-server-source\";\n\nconst EMPTY_ROWS: never[] = [];\n\n/** The floor on `autoRefresh.intervalMs`; anything shorter is load, not freshness. */\nexport const AUTO_REFRESH_MIN_MS = 30_000;\n/** Used when `autoRefresh` names no interval. */\nexport const AUTO_REFRESH_DEFAULT_MS = 60_000;\n/** `cortena.data-table.auto-refresh.<stateKey>` holds `\"on\"` or `\"off\"`. */\nexport const AUTO_REFRESH_STORAGE_PREFIX = \"cortena.data-table.auto-refresh.\";\n\n/** One warning per process, not one per render. */\nconst warned = { missingStateKey: false };\n/** Column sets already complained about, so a re-render does not repeat it. */\nconst warnedUnsized = new Set<string>();\n\n/**\n * True where a developer is the one who would read a `console.warn`.\n *\n * Neither signal is universal, and the unguarded form of either one throws.\n * `process` is a Node global: a bundler that replaces `process.env.NODE_ENV`\n * leaves nothing behind, but a plain ESM consumer or a browser import map has\n * no `process` at all, and the bare identifier is a ReferenceError that takes\n * the table down with it. `import.meta.env` is Vite's, and is simply absent\n * under webpack or in the published ESM as Node loads it. So: ask Vite, then\n * ask Node, and when neither answers say nothing. A development warning is\n * worth having only where someone can act on it, and a library that throws to\n * deliver one is worse than a library that stays quiet.\n */\nfunction isDevBuild(): boolean {\n  const viteEnv = (import.meta as unknown as { env?: { DEV?: boolean } }).env;\n  if (viteEnv) return viteEnv.DEV === true;\n  if (typeof process === \"undefined\") return false;\n  return process.env?.NODE_ENV !== \"production\";\n}\n\n/**\n * Forgets which column sets have already warned.\n *\n * @internal Test hook. The warning is once per process, which makes every test\n * after the first one depend on using column ids no earlier test used. Call\n * this in a `beforeEach` instead.\n */\nexport function resetUnsizedWarnings(): void {\n  warnedUnsized.clear();\n}\n\n/** The id TanStack will give this column, for a message written before the table exists. */\nfunction columnDefId(column: { id?: string; accessorKey?: unknown; header?: unknown }): string {\n  return column.id ?? (typeof column.accessorKey === \"string\" ? column.accessorKey : undefined) ??\n    (typeof column.header === \"string\" ? column.header : \"(unnamed)\");\n}\n\nfunction readStoredFlag(key: string): boolean {\n  try {\n    return window.localStorage.getItem(key) === \"on\";\n  } catch {\n    return false;\n  }\n}\n\n/**\n * The user's auto-refresh choice, remembered per table.\n *\n * It starts off and is read from storage in an effect rather than in the\n * initial state, so a server-rendered table and its first client render agree\n * — a switch that hydrates in the opposite position is a React mismatch and,\n * worse, a table that starts polling before the page is interactive.\n */\nfunction usePersistedFlag(storageKey: string | null): [boolean, (on: boolean) => void] {\n  const [on, setOn] = React.useState(false);\n  React.useEffect(() => {\n    setOn(storageKey ? readStoredFlag(storageKey) : false);\n  }, [storageKey]);\n  const set = React.useCallback(\n    (next: boolean) => {\n      setOn(next);\n      if (!storageKey) return;\n      try {\n        window.localStorage.setItem(storageKey, next ? \"on\" : \"off\");\n      } catch {\n        /* Private mode, or storage full: the switch still works for this visit. */\n      }\n    },\n    [storageKey],\n  );\n  return [on, set];\n}\n\nconst subscribeVisibility = (onChange: () => void) => {\n  document.addEventListener(\"visibilitychange\", onChange);\n  return () => document.removeEventListener(\"visibilitychange\", onChange);\n};\n\n/** True while the tab is in the background. Polling a tab nobody is looking at is a battery bill. */\nfunction useDocumentHidden(): boolean {\n  return React.useSyncExternalStore(\n    subscribeVisibility,\n    () => document.visibilityState === \"hidden\",\n    () => false,\n  );\n}\n\nfunction useDebounced<T>(value: T, ms: number): T {\n  const [debounced, setDebounced] = React.useState(value);\n  React.useEffect(() => {\n    if (ms <= 0) {\n      setDebounced(value);\n      return;\n    }\n    const id = setTimeout(() => setDebounced(value), ms);\n    return () => clearTimeout(id);\n  }, [value, ms]);\n  return ms <= 0 ? value : debounced;\n}\n\n/**\n * Builds the table for a `dataSource`. This is where the design decision's\n * \"the component sets the manual flags itself\" lives: a server source flips\n * `manualFiltering`, `manualSorting` and `manualPagination` and feeds the\n * table's own filter / sort / page state back out as a `TableQuery`; a client\n * source leaves every row model in memory. Everything else (selection,\n * expansion, visibility, pinning, sizing) is owned by the table.\n *\n * Use it directly when the default layout is not enough: pass the returned\n * `table` to `DataTableToolbar`, `DataTablePagination` and friends, or the\n * whole instance to `<DataTable instance={...} />`.\n */\nexport function useDataTable<Row extends RowData>(\n  options: UseDataTableOptions<Row>,\n): DataTableInstance<Row> {\n  const {\n    columns,\n    dataSource,\n    getRowId,\n    getSubRows,\n    pagination: paginationMode = \"pages\",\n    pageSize = 25,\n    enableRowSelection = false,\n    enableExpanding = false,\n    getRowCanExpand,\n    enableSorting = true,\n    enableMultiSort = false,\n    enableGlobalFilter = true,\n    enableColumnFilters = true,\n    enableHiding = true,\n    enableColumnPinning = true,\n    enableColumnResizing,\n    initialState,\n    onCellCommit,\n    onRowSelectionChange,\n    searchDebounceMs = 250,\n    autoRefresh,\n    stateKey,\n  } = options;\n\n  const isServer = dataSource.kind === \"server\";\n\n  // Slices the server query is built from are React state; the table mirrors\n  // them through `state` + `on*Change`, which v9 still supports alongside atoms.\n  const [globalFilter, setGlobalFilter] = React.useState<string>(\n    (initialState?.globalFilter as string | undefined) ?? \"\",\n  );\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    initialState?.columnFilters ?? [],\n  );\n  const [sorting, setSorting] = React.useState<SortingState>(initialState?.sorting ?? []);\n  const [pagination, setPagination] = React.useState<PaginationState>(\n    initialState?.pagination ?? { pageIndex: 0, pageSize },\n  );\n  // Selection and the open editor are lifted for the same reason the query\n  // slices are: auto-refresh has to know about them before the query for this\n  // render is declared, and `table.state` only exists after `useTable`.\n  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>(\n    initialState?.rowSelection ?? {},\n  );\n  const [editingCell, setEditingCell] = React.useState<DataTableEditingCell | null>(null);\n\n  const searchQuery = useDebounced(globalFilter, isServer ? searchDebounceMs : 0);\n\n  // A new search, filter or sort starts from page one again. Client sources\n  // get this from `autoResetPageIndex`; manual pagination has to do it here.\n  const scopeKey = JSON.stringify([searchQuery, columnFilters, sorting]);\n  const lastScope = React.useRef(scopeKey);\n  React.useEffect(() => {\n    if (lastScope.current === scopeKey) return;\n    lastScope.current = scopeKey;\n    setPagination((p) => (p.pageIndex === 0 ? p : { ...p, pageIndex: 0 }));\n  }, [scopeKey]);\n\n  const query = React.useMemo<TableQuery>(\n    () => ({\n      // Trimmed for the same reason the client filter trims (features.ts): a\n      // backend asked for `q: \" \"` returns nothing, and the user sees an empty\n      // table with no explanation. Whitespace-only means no search term.\n      q: searchQuery.trim() || undefined,\n      filters: columnFilters.length ? columnFilters : undefined,\n      sort: sorting.length ? sorting : undefined,\n      page: pagination.pageIndex,\n      pageSize: pagination.pageSize,\n    }),\n    [searchQuery, columnFilters, sorting, pagination.pageIndex, pagination.pageSize],\n  );\n\n  /* Freshness (DESIGN-D19 / P-39) -------------------------------------- */\n\n  const wantsAuto = isServer && autoRefresh !== undefined;\n  React.useEffect(() => {\n    if (!wantsAuto || stateKey || warned.missingStateKey) return;\n    warned.missingStateKey = true;\n    console.warn(\n      \"[cortena-ui] DataTable: `autoRefresh` needs a `stateKey`. Without one the \" +\n        \"user's on/off choice cannot be remembered between visits, and two tables \" +\n        \"on one screen would share the same setting.\",\n    );\n  }, [wantsAuto, stateKey]);\n  const storageKey = wantsAuto && stateKey ? AUTO_REFRESH_STORAGE_PREFIX + stateKey : null;\n  const [autoEnabled, setAutoEnabled] = usePersistedFlag(storageKey);\n  const hidden = useDocumentHidden();\n  const baseIntervalMs = Math.max(\n    autoRefresh?.intervalMs ?? AUTO_REFRESH_DEFAULT_MS,\n    AUTO_REFRESH_MIN_MS,\n  );\n  // The polite rules, in the order a user would explain them. Each one is a\n  // reason the interval is not running, and the toolbar says which.\n  const pausedBy: DataTableRefreshPause | null = hidden\n    ? \"hidden\"\n    : editingCell\n      ? \"editing\"\n      : Object.keys(rowSelection).length > 0\n        ? \"selection\"\n        : autoRefresh?.paused\n          ? \"app\"\n          : null;\n  const autoActive = wantsAuto && autoEnabled && pausedBy === null;\n\n  const server = useServerSource<Row>(\n    isServer ? dataSource : undefined,\n    query,\n    paginationMode,\n    wantsAuto ? { intervalMs: baseIntervalMs, active: autoActive } : undefined,\n  );\n\n  const data: ReadonlyArray<Row> = isServer ? server.rows : dataSource.rows;\n\n  /* Column widths (DESIGN-77) ------------------------------------------ */\n\n  // A fill column is the one column drawn with no fixed width, so a grid that\n  // is `table-fixed` end to end still has somewhere to put the space left\n  // over. It also turns resizing on, because the drag now has somewhere to go.\n  const hasFillColumn = columns.some((c) => c.meta?.fill);\n  const resizing = enableColumnResizing ?? hasFillColumn;\n  // A consumer who asked for resizing gets the live drag. A table that only\n  // has it because of the fill column commits on release: every move in\n  // `onChange` re-renders every row, and a table nobody asked to be resizable\n  // should not pay that for a drag it did not advertise.\n  const resizeMode = enableColumnResizing === undefined ? \"onEnd\" : \"onChange\";\n\n  // A column with no `size` sits at TanStack's 150 px default. That is fine\n  // for a status chip and wrong for the title people scan the list by, and\n  // nothing on screen says which happened — the text is simply clipped.\n  const unsizedIds = columns.filter((c) => c.size === undefined).map(columnDefId).join(\", \");\n  React.useEffect(() => {\n    if (!isDevBuild()) return;\n    if (hasFillColumn || unsizedIds === \"\" || warnedUnsized.has(unsizedIds)) return;\n    warnedUnsized.add(unsizedIds);\n    console.warn(\n      `[cortena-ui] DataTable: no column is marked \\`meta: { fill: true }\\`, and ` +\n        `${unsizedIds} declared no \\`size\\`, so ${unsizedIds.includes(\",\") ? \"they sit\" : \"it sits\"} ` +\n        \"at the 150px default and the table leaves empty space to the right. Mark the \" +\n        \"column people scan the list by with `meta: { fill: true }` and give the rest a `size`.\",\n    );\n  }, [hasFillColumn, unsizedIds]);\n\n  // System columns first; then each consumer column with its meta defaults\n  // applied (a faceted column filters with `oneOf` unless told otherwise).\n  const resolvedColumns = React.useMemo(() => {\n    const helper = createColumnHelper<Row>();\n    const out: DataTableColumnDef<Row, any>[] = [];\n    if (enableRowSelection && !columns.some((c) => c.id === \"select\")) out.push(selectColumn(helper));\n    if (enableExpanding && !columns.some((c) => c.id === \"expand\")) out.push(expandColumn(helper));\n    for (const column of columns) {\n      const filter = column.meta?.filter;\n      const defaults: Record<string, unknown> = {};\n      if (filter === \"faceted\" && column.filterFn === undefined) defaults.filterFn = \"oneOf\";\n      else if (filter === \"text\" && column.filterFn === undefined) defaults.filterFn = \"includesString\";\n      // The fill column has no width of its own, so there is no edge to drag.\n      if (column.meta?.fill && column.enableResizing === undefined) defaults.enableResizing = false;\n      // Recorded before TanStack merges its fallback renderer in: by the time\n      // the view is handed a `columnDef`, the default cell renderer is there\n      // and a column that declared no `cell` is indistinguishable from one\n      // that did. It goes in `meta`, which TanStack carries verbatim, rather\n      // than on a symbol key the table is under no obligation to copy.\n      const plain = !(\"cell\" in column) || column.cell == null;\n      const resolved = {\n        ...column,\n        ...defaults,\n        ...(plain ? { meta: { ...column.meta, plainCell: true } } : null),\n      };\n      out.push(resolved as DataTableColumnDef<Row, any>);\n    }\n    return out;\n  }, [columns, enableRowSelection, enableExpanding]);\n\n  const table: DataTableTable<Row> = useTable({\n    features: dataTableFeatures<Row>(),\n    columns: resolvedColumns,\n    data: data.length ? data : EMPTY_ROWS,\n    getRowId,\n    getSubRows,\n    initialState,\n    state: { globalFilter, columnFilters, sorting, pagination, rowSelection },\n    onGlobalFilterChange: setGlobalFilter,\n    onColumnFiltersChange: setColumnFilters,\n    onSortingChange: setSorting,\n    onPaginationChange: setPagination,\n    onRowSelectionChange: setRowSelection,\n    manualFiltering: isServer,\n    manualSorting: isServer,\n    manualPagination: isServer || paginationMode !== \"pages\",\n    rowCount: isServer ? server.total : undefined,\n    enableRowSelection,\n    enableExpanding,\n    getRowCanExpand: getRowCanExpand ?? (enableExpanding ? () => true : undefined),\n    enableSorting,\n    enableMultiSort,\n    enableGlobalFilter,\n    enableColumnFilters,\n    enableHiding,\n    enableColumnPinning,\n    enableColumnResizing: resizing,\n    columnResizeMode: resizeMode,\n    // `search`, not `includesString`: it trims the query, so a box holding only\n    // whitespace filters nothing rather than emptying the grid. See features.ts.\n    globalFilterFn: \"search\",\n  });\n\n  // Selection callback with original rows, for consumers that keep selection outside.\n  const onSelectionRef = React.useRef(onRowSelectionChange);\n  onSelectionRef.current = onRowSelectionChange;\n  const firstSelection = React.useRef(true);\n  React.useEffect(() => {\n    if (firstSelection.current) {\n      firstSelection.current = false;\n      return;\n    }\n    onSelectionRef.current?.(table.getSelectedRowModel().rows.map((r) => r.original));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [rowSelection]);\n\n  const commit = React.useCallback(\n    async (row: DataTableRow<Row>, columnId: string, value: unknown) => {\n      const meta = table.getColumn(columnId)?.columnDef.meta;\n      const handler = meta?.onCommit ?? onCellCommit;\n      await handler?.(row.original, columnId, value);\n    },\n    [table, onCellCommit],\n  );\n  const editing = React.useMemo(\n    () => ({\n      cell: editingCell,\n      start: (cell: DataTableEditingCell) => setEditingCell(cell),\n      stop: () => setEditingCell(null),\n      commit,\n    }),\n    [editingCell, commit],\n  );\n\n  // The stamp keeps the last real response time: with keepPreviousData a page\n  // change puts a placeholder on screen whose `dataUpdatedAt` is zero, and the\n  // stamp must not blink out while the next page loads.\n  const lastUpdatedRef = React.useRef<number | null>(null);\n  if (server.lastUpdatedAt && server.lastUpdatedAt > (lastUpdatedRef.current ?? 0)) {\n    lastUpdatedRef.current = server.lastUpdatedAt;\n  }\n  const lastUpdatedAt = lastUpdatedRef.current;\n\n  const autoState = React.useMemo<DataTableAutoRefreshState | null>(\n    () =>\n      wantsAuto\n        ? {\n            enabled: autoEnabled,\n            setEnabled: setAutoEnabled,\n            active: autoActive && !server.mutating,\n            // A mutation in flight is the one pause only the query layer can\n            // see; it is folded in here so the toolbar can still say why.\n            pausedBy: autoEnabled ? (pausedBy ?? (server.mutating ? \"mutation\" : null)) : null,\n            intervalMs: server.intervalMs === false ? baseIntervalMs : server.intervalMs,\n            baseIntervalMs,\n            backingOff: server.failures > 0,\n          }\n        : null,\n    [\n      wantsAuto,\n      autoEnabled,\n      setAutoEnabled,\n      autoActive,\n      pausedBy,\n      server.mutating,\n      server.intervalMs,\n      server.failures,\n      baseIntervalMs,\n    ],\n  );\n\n  const total = isServer\n    ? (server.total ?? 0)\n    : paginationMode === \"pages\"\n      ? table.getPrePaginatedRowModel().rows.length\n      : table.getRowModel().rows.length;\n\n  return {\n    table,\n    dataSource: dataSource as DataSource<Row>,\n    paginationMode,\n    rows: data as Row[],\n    total,\n    isLoading: server.isLoading,\n    isFetching: server.isFetching,\n    error: server.error,\n    refetch: server.refetch,\n    fetchNextPage: server.fetchNextPage,\n    hasNextPage: server.hasNextPage,\n    searchQuery,\n    lastUpdatedAt,\n    lastErrorAt: server.lastErrorAt,\n    autoRefresh: autoState,\n    editing,\n  };\n}\n"],"mappings":"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"}

package/dist/components/toast.d.ts

@@ -21,7 +21,7 @@ import { Toast } from "@base-ui/react/toast";
  * `toastManager` to `Toaster` when you need to fire toasts outside React.
  */
 declare const toastVariants: (props?: ({
-  variant?: "default" | "success" | "warning" | "destructive" | null | undefined;
+  variant?: "default" | "success" | "destructive" | "warning" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /** The Base UI toast manager: `{ toasts, add, close, update, promise }`. */
 declare const useToast: typeof Toast.useToastManager;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cortena-ui",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "Cortena UI \u2014 the shared React component library for cortenaweb and every Cortena extension. shadcn over Base UI, styled entirely from cortena-design tokens.",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {

package/src/components/data-table/data-table.tsx

@@ -203,6 +203,33 @@ function pinAttrs<Row extends RowData>(
 
 const alignClass = { start: "text-left", center: "text-center", end: "text-right" } as const;
 
+/* ------------------------------------------------------------------------ */
+/* Column widths and hover text (DESIGN-77)                                  */
+/* ------------------------------------------------------------------------ */
+
+/**
+ * Full text for a cell's `title`, or undefined for no title.
+ *
+ * Cells truncate and never wrap, so the only way back to the full text is the
+ * pointer. A column that renders its own value can be read straight off the
+ * value; a column with a `cell` renderer draws a node the table cannot turn
+ * into a sentence, and guessing produces titles like "[object Object]" on a
+ * row of buttons. Such a column says what its hover text is with
+ * `meta.hoverText`, or has none.
+ */
+function hoverTextFor<Row extends RowData>(cell: DataTableCell<Row, any>): string | undefined {
+  const def = cell.column.columnDef;
+  const meta = def.meta;
+  if (meta?.hoverText) return meta.hoverText(cell.row.original) || undefined;
+  if (!meta?.plainCell) return undefined;
+  const value = cell.getValue();
+  // `|| undefined` on the way out too: an empty string is a `title=""`, which
+  // is a pointer that stops on an empty tooltip rather than no tooltip.
+  return typeof value === "string" || typeof value === "number"
+    ? String(value) || undefined
+    : undefined;
+}
+
 /* ------------------------------------------------------------------------ */
 /* Editable cell                                                             */
 /* ------------------------------------------------------------------------ */
@@ -297,6 +324,19 @@ function DataTableView<Row extends RowData>({
   const { table, paginationMode } = instance;
   const rows = table.getRowModel().rows;
   const leafColumns = table.getVisibleLeafColumns();
+  // The one column drawn with no fixed width, so the space the sized columns
+  // leave lands on it instead of on the filler cell (DESIGN-77). First visible
+  // one wins; hide it and the table falls back to the old filler behaviour.
+  // A pinned column is skipped: pinning positions it with a `left`/`right`
+  // offset read off the widths of the columns beside it, and a column with no
+  // width of its own would leave every pinned neighbour at the wrong offset.
+  const fillColumnId = leafColumns.find(
+    (column) => column.columnDef.meta?.fill && !column.getIsPinned(),
+  )?.id;
+  const widthFor = (column: DataTableColumn<Row, any>, size: number) =>
+    column.id === fillColumnId ? undefined : size;
+  // A width the fill column would otherwise have to share the remainder with.
+  const fillerStyle = fillColumnId ? ({ width: 0 } as const) : undefined;
   const colCount = leafColumns.length;
   const headerGroups = table.getHeaderGroups();
   const isVirtual = virtualize ?? rows.length > VIRTUALIZE_ABOVE;
@@ -519,7 +559,8 @@ function DataTableView<Row extends RowData>({
           data-editing={isEditing ? "" : undefined}
           aria-colindex={c + 1}
           tabIndex={tabIndexFor(index, c)}
-          style={{ width: column.getSize(), ...pin.style }}
+          title={isEditing ? undefined : hoverTextFor(cell)}
+          style={{ width: widthFor(column, column.getSize()), ...pin.style }}
           onDoubleClick={
             canEdit && !isEditing
               ? () => instance.editing.start({ rowId: row.id, columnId: column.id })
@@ -579,7 +620,7 @@ function DataTableView<Row extends RowData>({
           )}
         >
           {cells.slice(0, splitAt).map((cell, c) => renderCell(cell, c))}
-          <td aria-hidden data-slot="data-table-filler" className="p-0" />
+          <td aria-hidden data-slot="data-table-filler" style={fillerStyle} className="p-0" />
           {cells.slice(splitAt).map((cell, i) => renderCell(cell, splitAt + i))}
         </tr>
         {expanded ? (
@@ -600,11 +641,11 @@ function DataTableView<Row extends RowData>({
   const skeletonRows = Array.from({ length: Math.min(8, table.state.pagination.pageSize) }, (_, i) => (
     <tr key={`skeleton-${i}`} aria-hidden data-slot="data-table-skeleton-row" className="border-b border-[var(--ds-border-subtle)]">
       {leafColumns.map((column) => (
-        <td key={column.id} className={cellPadding} style={{ width: column.getSize() }}>
+        <td key={column.id} className={cellPadding} style={{ width: widthFor(column, column.getSize()) }}>
           <Skeleton className="h-3.5 w-3/4" />
         </td>
       ))}
-      <td className="p-0" />
+      <td style={fillerStyle} className="p-0" />
     </tr>
   ));
 
@@ -685,7 +726,17 @@ function DataTableView<Row extends RowData>({
                     }
                     colSpan={header.colSpan}
                     tabIndex={tabIndexFor(-1, c)}
-                    style={{ width: header.getSize(), ...pin.style }}
+                    // Only where the column says so. A header is one short
+                    // phrase the consumer chose, so repeating it in a tooltip
+                    // on every `<th>` is noise, and it was wrong outright on
+                    // the select and expand columns, whose header is a node
+                    // with no sentence in it. `meta.label` is the column
+                    // saying what it is called; when it is set, `title` on the
+                    // `<th>` reaches the button inside it too, since a pointer
+                    // over a node with no title of its own takes its
+                    // ancestor's. Body cells keep their own hover text.
+                    title={meta?.label}
+                    style={{ width: widthFor(column, header.getSize()), ...pin.style }}
                     className={cn(
                       "group/head relative h-10 align-middle font-medium outline-none",
                       headPadding,
@@ -724,7 +775,12 @@ function DataTableView<Row extends RowData>({
               return (
                 <tr key={group.id} role="row" aria-rowindex={1}>
                   {group.headers.slice(0, splitAt).map((header, c) => renderHead(header, c))}
-                  <th aria-hidden className="border-b border-[var(--ds-border)] bg-[var(--ds-muted)] p-0" />
+                  <th
+                    aria-hidden
+                    data-slot="data-table-filler-head"
+                    style={fillerStyle}
+                    className="border-b border-[var(--ds-border)] bg-[var(--ds-muted)] p-0"
+                  />
                   {group.headers.slice(splitAt).map((header, i) => renderHead(header, splitAt + i))}
                 </tr>
               );

package/src/components/data-table/system-columns.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import type { ColumnHelper, RowData } from "@tanstack/react-table";
+import type * as React from "react";
 import { ChevronRight } from "lucide-react";
 import { Checkbox } from "@/components/checkbox";
 import { cn } from "@/lib/cn";
@@ -12,7 +13,23 @@ import type { DataTableColumnDef } from "./types";
  * when `enableRowSelection` is set, the expander when a `renderSubComponent`
  * is given. Both are display columns, neither sorts, hides, resizes or
  * exports, and a consumer column with the same id replaces them.
+ *
+ * Both controls stop the event from reaching the row (DESIGN-79). A table
+ * with `onRowClick` puts a navigation on the whole row, and without this the
+ * chevron opens the detail panel and navigates away from it in the same
+ * gesture — and the checkbox selects a row and then leaves the page. It has
+ * to be here: every consumer of these columns would otherwise need the same
+ * guard, and the one that forgets has a control that cannot be used.
  */
+const stopRowActivation = {
+  onClick: (event: React.MouseEvent) => event.stopPropagation(),
+  // A button fires `click` for Enter and Space, so `onClick` covers the
+  // keyboard too; this stops the grid's own key handling from seeing the key
+  // before the control does.
+  onKeyDown: (event: React.KeyboardEvent) => {
+    if (event.key === "Enter" || event.key === " ") event.stopPropagation();
+  },
+} as const;
 export function selectColumn<Row extends RowData>(
   helper: ColumnHelper<DataTableFeatures<Row>, Row>,
 ): DataTableColumnDef<Row, unknown> {
@@ -27,6 +44,7 @@ export function selectColumn<Row extends RowData>(
           checked={all}
           indeterminate={some}
           onCheckedChange={(checked) => table.toggleAllPageRowsSelected(Boolean(checked))}
+          {...stopRowActivation}
         />
       );
     },
@@ -36,6 +54,7 @@ export function selectColumn<Row extends RowData>(
         checked={row.getIsSelected()}
         disabled={!row.getCanSelect()}
         onCheckedChange={(checked) => row.toggleSelected(Boolean(checked))}
+        {...stopRowActivation}
       />
     ),
     size: 40,
@@ -63,7 +82,11 @@ export function expandColumn<Row extends RowData>(
           data-slot="data-table-expander"
           aria-label={row.getIsExpanded() ? "Collapse row" : "Expand row"}
           aria-expanded={row.getIsExpanded()}
-          onClick={row.getToggleExpandedHandler()}
+          onClick={(event) => {
+            event.stopPropagation();
+            row.getToggleExpandedHandler()();
+          }}
+          onKeyDown={stopRowActivation.onKeyDown}
           className={cn(
             "inline-flex size-6 items-center justify-center rounded-[var(--ds-radius-sm)]",
             "text-[color:var(--ds-muted-foreground)] hover:bg-[var(--ds-hover)] hover:text-[color:var(--ds-foreground)]",

package/src/components/data-table/types.ts

@@ -71,6 +71,34 @@ export interface DataTableColumnMeta<Row = unknown> {
   filterOptions?: Array<{ value: string | number | boolean; label?: string; icon?: React.ComponentType<{ className?: string }> }>;
   /** Text alignment of the header and cells. Numbers usually want `end`. */
   align?: "start" | "center" | "end";
+  /**
+   * This column takes whatever width the sized columns leave (DESIGN-77).
+   *
+   * The grid is `table-fixed`: every column is drawn at its `size`, and a
+   * column that never declared one sits at TanStack's 150 px default. On a
+   * list that is one wide column and a few narrow ones — a title beside an
+   * id, a status and an assignee — that means the column people actually read
+   * is clipped while the table shows empty space to its right. Mark that
+   * column `fill` and it is the one column drawn with no fixed width, so the
+   * remainder lands on it.
+   *
+   * One per table: the first visible one wins. It keeps its `size` as a floor
+   * — the table's `min-width` still counts it, so the row scrolls rather than
+   * squeezing the column to nothing — and it is not itself resizable, because
+   * a column with no width of its own has no edge to drag.
+   */
+  fill?: boolean;
+  /**
+   * Full text for the `title` on every cell in this column, when the cell
+   * draws something other than its own value.
+   *
+   * Cells truncate and never wrap, so the full text has to be reachable on
+   * hover. A column that renders its value directly gets that for free. A
+   * column with its own `cell` renderer draws an arbitrary node, and the
+   * table will not guess a string for it — say what the hover text is here.
+   * Return `undefined` for no title.
+   */
+  hoverText?: (row: Row) => string | undefined;
   /** Enter or double-click opens an editor; Enter commits, Escape cancels. */
   editable?: boolean | DataTableEditable;
   /** Receives the committed value. Falls back to the table's `onCellCommit`. */
@@ -85,6 +113,14 @@ export interface DataTableColumnMeta<Row = unknown> {
   cellClassName?: string;
   /** Extra classes for the header cell. */
   headerClassName?: string;
+  /**
+   * @internal Set by `useDataTable`, never by a consumer. Marks a column whose
+   * cell renders its own value, so the view can put the full text in a `title`
+   * without guessing a string out of a React node (DESIGN-77). It has to be
+   * recorded before TanStack merges its fallback cell renderer in, after which
+   * a column that declared no `cell` looks exactly like one that did.
+   */
+  plainCell?: boolean;
 }
 
 export type DataTableColumnDef<Row extends RowData, Value = unknown> = ColumnDef<
@@ -183,7 +219,12 @@ export interface UseDataTableOptions<Row extends RowData> {
   enableHiding?: boolean;
   /** @default true */
   enableColumnPinning?: boolean;
-  /** @default false */
+  /**
+   * Drag handles on the column edges. Defaults to `false`, or to `true` when
+   * a column is marked `meta.fill`: there the drag has somewhere to go, since
+   * the fill column absorbs whatever the dragged column takes or gives back.
+   * An explicit `false` still wins.
+   */
   enableColumnResizing?: boolean;
   /** Starting sort, filters, visibility, pinning, sizing. */
   initialState?: Partial<DataTableState<Row>>;

package/src/components/data-table/use-data-table.ts

@@ -36,6 +36,45 @@ export const AUTO_REFRESH_STORAGE_PREFIX = "cortena.data-table.auto-refresh.";
 
 /** One warning per process, not one per render. */
 const warned = { missingStateKey: false };
+/** Column sets already complained about, so a re-render does not repeat it. */
+const warnedUnsized = new Set<string>();
+
+/**
+ * True where a developer is the one who would read a `console.warn`.
+ *
+ * Neither signal is universal, and the unguarded form of either one throws.
+ * `process` is a Node global: a bundler that replaces `process.env.NODE_ENV`
+ * leaves nothing behind, but a plain ESM consumer or a browser import map has
+ * no `process` at all, and the bare identifier is a ReferenceError that takes
+ * the table down with it. `import.meta.env` is Vite's, and is simply absent
+ * under webpack or in the published ESM as Node loads it. So: ask Vite, then
+ * ask Node, and when neither answers say nothing. A development warning is
+ * worth having only where someone can act on it, and a library that throws to
+ * deliver one is worse than a library that stays quiet.
+ */
+function isDevBuild(): boolean {
+  const viteEnv = (import.meta as unknown as { env?: { DEV?: boolean } }).env;
+  if (viteEnv) return viteEnv.DEV === true;
+  if (typeof process === "undefined") return false;
+  return process.env?.NODE_ENV !== "production";
+}
+
+/**
+ * Forgets which column sets have already warned.
+ *
+ * @internal Test hook. The warning is once per process, which makes every test
+ * after the first one depend on using column ids no earlier test used. Call
+ * this in a `beforeEach` instead.
+ */
+export function resetUnsizedWarnings(): void {
+  warnedUnsized.clear();
+}
+
+/** The id TanStack will give this column, for a message written before the table exists. */
+function columnDefId(column: { id?: string; accessorKey?: unknown; header?: unknown }): string {
+  return column.id ?? (typeof column.accessorKey === "string" ? column.accessorKey : undefined) ??
+    (typeof column.header === "string" ? column.header : "(unnamed)");
+}
 
 function readStoredFlag(key: string): boolean {
   try {
@@ -131,7 +170,7 @@ export function useDataTable<Row extends RowData>(
     enableColumnFilters = true,
     enableHiding = true,
     enableColumnPinning = true,
-    enableColumnResizing = false,
+    enableColumnResizing,
     initialState,
     onCellCommit,
     onRowSelectionChange,
@@ -229,6 +268,35 @@ export function useDataTable<Row extends RowData>(
 
   const data: ReadonlyArray<Row> = isServer ? server.rows : dataSource.rows;
 
+  /* Column widths (DESIGN-77) ------------------------------------------ */
+
+  // A fill column is the one column drawn with no fixed width, so a grid that
+  // is `table-fixed` end to end still has somewhere to put the space left
+  // over. It also turns resizing on, because the drag now has somewhere to go.
+  const hasFillColumn = columns.some((c) => c.meta?.fill);
+  const resizing = enableColumnResizing ?? hasFillColumn;
+  // A consumer who asked for resizing gets the live drag. A table that only
+  // has it because of the fill column commits on release: every move in
+  // `onChange` re-renders every row, and a table nobody asked to be resizable
+  // should not pay that for a drag it did not advertise.
+  const resizeMode = enableColumnResizing === undefined ? "onEnd" : "onChange";
+
+  // A column with no `size` sits at TanStack's 150 px default. That is fine
+  // for a status chip and wrong for the title people scan the list by, and
+  // nothing on screen says which happened — the text is simply clipped.
+  const unsizedIds = columns.filter((c) => c.size === undefined).map(columnDefId).join(", ");
+  React.useEffect(() => {
+    if (!isDevBuild()) return;
+    if (hasFillColumn || unsizedIds === "" || warnedUnsized.has(unsizedIds)) return;
+    warnedUnsized.add(unsizedIds);
+    console.warn(
+      `[cortena-ui] DataTable: no column is marked \`meta: { fill: true }\`, and ` +
+        `${unsizedIds} declared no \`size\`, so ${unsizedIds.includes(",") ? "they sit" : "it sits"} ` +
+        "at the 150px default and the table leaves empty space to the right. Mark the " +
+        "column people scan the list by with `meta: { fill: true }` and give the rest a `size`.",
+    );
+  }, [hasFillColumn, unsizedIds]);
+
   // System columns first; then each consumer column with its meta defaults
   // applied (a faceted column filters with `oneOf` unless told otherwise).
   const resolvedColumns = React.useMemo(() => {
@@ -238,13 +306,23 @@ export function useDataTable<Row extends RowData>(
     if (enableExpanding && !columns.some((c) => c.id === "expand")) out.push(expandColumn(helper));
     for (const column of columns) {
       const filter = column.meta?.filter;
-      if (filter === "faceted" && column.filterFn === undefined) {
-        out.push({ ...column, filterFn: "oneOf" });
-      } else if (filter === "text" && column.filterFn === undefined) {
-        out.push({ ...column, filterFn: "includesString" });
-      } else {
-        out.push(column);
-      }
+      const defaults: Record<string, unknown> = {};
+      if (filter === "faceted" && column.filterFn === undefined) defaults.filterFn = "oneOf";
+      else if (filter === "text" && column.filterFn === undefined) defaults.filterFn = "includesString";
+      // The fill column has no width of its own, so there is no edge to drag.
+      if (column.meta?.fill && column.enableResizing === undefined) defaults.enableResizing = false;
+      // Recorded before TanStack merges its fallback renderer in: by the time
+      // the view is handed a `columnDef`, the default cell renderer is there
+      // and a column that declared no `cell` is indistinguishable from one
+      // that did. It goes in `meta`, which TanStack carries verbatim, rather
+      // than on a symbol key the table is under no obligation to copy.
+      const plain = !("cell" in column) || column.cell == null;
+      const resolved = {
+        ...column,
+        ...defaults,
+        ...(plain ? { meta: { ...column.meta, plainCell: true } } : null),
+      };
+      out.push(resolved as DataTableColumnDef<Row, any>);
     }
     return out;
   }, [columns, enableRowSelection, enableExpanding]);
@@ -275,8 +353,8 @@ export function useDataTable<Row extends RowData>(
     enableColumnFilters,
     enableHiding,
     enableColumnPinning,
-    enableColumnResizing,
-    columnResizeMode: "onChange",
+    enableColumnResizing: resizing,
+    columnResizeMode: resizeMode,
     // `search`, not `includesString`: it trims the query, so a box holding only
     // whitespace filters nothing rather than emptying the grid. See features.ts.
     globalFilterFn: "search",