@nuvui/table 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nuvraxis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,58 @@
-# Temporary Holding Version
+# @nuvui/table
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Tables for [`@nuvui/react`](https://www.npmjs.com/package/@nuvui/react): the elements of a table, styled, and a data table drawn from a [TanStack Table](https://tanstack.com/table) 9 instance, with the controls that go with it.
+
+This is early: the package is on npm as a 0.x version, and before 1.0 a minor version may rename or remove things. The [changelog](https://nuvui.nuvraxis.com/docs/changelog) says where one does, and the [repository README](https://github.com/Nuvraxis/nuvui#readme) says where things stand.
+
+```sh
+pnpm add @nuvui/table @nuvui/react @tanstack/react-table
+```
+
+```tsx
+"use client";
+
+import "@nuvui/react/styles.css";
+import "@nuvui/table/styles.css";
+import { DataTable } from "@nuvui/table";
+import { createColumnHelper, useDataTable } from "@nuvui/table/full";
+
+type Person = { id: string; name: string; email: string };
+
+const helper = createColumnHelper<Person>();
+const columns = helper.columns([
+  helper.accessor("name", { header: "Name" }),
+  helper.accessor("email", { header: "Email" }),
+]);
+
+export function People({ people }: { people: Person[] }) {
+  const table = useDataTable({ columns, data: people });
+  return <DataTable table={table} caption="People" rowHeader="name" />;
+}
+```
+
+## What's in it
+
+- `Table`, `TableContainer`, `TableHeader`, `TableBody`, `TableFooter`, `TableRow`, `TableHead`, `TableCell` and `TableCaption`: a real `table`, styled, for a table written out by hand. A sticky header, a pinned column, and a box that scrolls sideways and can be reached from the keyboard.
+- `DataTable`: a finished table from a TanStack table. Headings that sort, a search field, a column chooser, checkboxes with a bar for the selected rows, a pagination bar, pinned and resizable columns, rows that open, and loading, empty and error states. Each is there when the table was made with the feature for it.
+- `createDataTableHook`: makes the hook your tables are created with, from the TanStack features you list. Only those end up in your bundle.
+- `@nuvui/table/full`: that hook, ready made, with all nine features.
+- `useDataTableRequest`: for a table whose sorting, filtering and paging are done by a server.
+- `@nuvui/table/virtual`: the data table with only the rows in view drawn. It needs `@tanstack/react-virtual`.
+
+TanStack Table keeps a table's state and works out its rows. The markup, the styles, the controls and the accessibility are this package's: a caption or label, `scope` on headings, `aria-sort`, named checkboxes, and a live region that reads out what a sort, a filter or a change of page did.
+
+## Peer dependencies
+
+`@nuvui/react` and `@tanstack/react-table` 9 are peer dependencies. Your columns are written with TanStack's own helpers and types, so your app owns that version. `@tanstack/react-virtual` is an optional peer, needed only for `@nuvui/table/virtual`.
+
+TanStack Table 9 is a different API from version 8. The docs have a page for people coming from version 8.
+
+The package is ES modules only, as `@tanstack/react-table` is.
+
+It's a package of its own so that an app which only wants buttons and dialogs doesn't have to install a table engine.
+
+The docs are at https://nuvui.nuvraxis.com/docs/table.
+
+## License
+
+MIT

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

@@ -0,0 +1,67 @@
+import "./context.js";
+import { Row, RowData, TableFeatures } from "@tanstack/react-table";
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/data-table/content.d.ts
+/** A table has to have a name. One of these gives it one. */
+export type DataTableName = {
+  /** The table's name, shown under it. */
+  caption: ReactNode;
+  "aria-label"?: undefined;
+  "aria-labelledby"?: undefined;
+} | {
+  caption?: undefined;
+  "aria-label": string;
+  "aria-labelledby"?: undefined;
+} | {
+  caption?: undefined;
+  "aria-label"?: undefined;
+  /** The id of a heading that's already on the page. */
+  "aria-labelledby": string;
+};
+export interface DataTableContentOwnProps<TFeatures extends TableFeatures = any, TData extends RowData = any> {
+  /**
+   * Keep the caption for screen readers and show nothing.
+   * @default false
+   */
+  captionHidden?: boolean;
+  /**
+   * Keep the header row in view while the rows scroll. Give the table a
+   * height to scroll in with `--nuv-table-container-max-height`.
+   * @default false
+   */
+  stickyHeader?: boolean;
+  /**
+   * Shade every second row.
+   * @default false
+   */
+  striped?: boolean;
+  /**
+   * `"auto"` sizes each column to what's in it. `"fixed"` gives each column
+   * the width TanStack holds for it, which needs `columnSizingFeature`, and
+   * puts a grip on every column that can be resized.
+   * @default "auto"
+   */
+  layout?: "auto" | "fixed";
+  /**
+   * What a row shows under itself when it's open. With this set, a row can
+   * be opened if `getRowCanExpand` says so.
+   */
+  renderDetail?: (row: Row<TFeatures, TData>) => ReactNode;
+  /** Shown in place of rows when there are none. */
+  empty?: ReactNode;
+  /**
+   * How many placeholder rows to show while the first rows load.
+   * @default the page size, up to 10
+   */
+  loadingRows?: number;
+  className?: string;
+}
+export type DataTableContentProps<TFeatures extends TableFeatures = any, TData extends RowData = any> = DataTableContentOwnProps<TFeatures, TData> & DataTableName;
+/**
+ * The table itself: the headings, the rows, and what's shown when there
+ * are no rows. `DataTable` puts this between the toolbar and the
+ * pagination bar. Use it yourself, inside `DataTableRoot`, to lay those
+ * out differently.
+ */
+export declare function DataTableContent<TFeatures extends TableFeatures = any, TData extends RowData = any>(props: DataTableContentProps<TFeatures, TData>): import("react").JSX.Element;
+//#endregion

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

@@ -0,0 +1,278 @@
+"use client";
+import { anyFilter, canResize, columnLabel, columnMeta, expanded, leafColumns, pinned, selected, sorted, supports, tableContexts, useDataTableView } from "./context.js";
+import { cx } from "../../utils/cx.js";
+import { DataTableColumnHeader, DataTableResizeHandle } from "./header.js";
+import { Table, TableBody, TableCaption, TableCell, TableContainer, TableFooter, TableHead, TableHeader, TableRow } from "../table/table.js";
+import { Fragment, useEffect, useId, useLayoutEffect, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@nuvui/react/button";
+import { Skeleton } from "@nuvui/react/skeleton";
+//#region src/components/data-table/content.tsx
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function pins(columns) {
+	const result = /* @__PURE__ */ new Map();
+	const start = columns.filter((column) => pinned(column) === "start");
+	const end = columns.filter((column) => pinned(column) === "end").reverse();
+	start.forEach((column, index) => {
+		result.set(column.id, {
+			side: "start",
+			index,
+			edge: index === start.length - 1
+		});
+	});
+	end.forEach((column, index) => {
+		result.set(column.id, {
+			side: "end",
+			index,
+			edge: index === end.length - 1
+		});
+	});
+	return result;
+}
+function headerPin(column, pinMap) {
+	const leaves = column.getLeafColumns();
+	const first = pinMap.get(leaves[0]?.id ?? "");
+	if (first?.side !== "end") return first;
+	return pinMap.get(leaves[leaves.length - 1]?.id ?? "");
+}
+const pinStyle = (pin) => pin ? { [pin.side === "start" ? "insetInlineStart" : "insetInlineEnd"]: `var(--nuv-data-table-pin-${pin.side}-${pin.index}, 0px)` } : void 0;
+function usePinOffsets(table, key) {
+	useIsomorphicLayoutEffect(() => {
+		const element = table.current;
+		if (!element || !key) return;
+		const cells = [...element.querySelectorAll("thead [data-pin]")];
+		const measure = () => {
+			for (const side of ["start", "end"]) {
+				const ordered = cells.filter((cell) => cell.dataset.pin === side).sort((a, b) => Number(a.dataset.pinIndex) - Number(b.dataset.pinIndex));
+				let offset = 0;
+				for (const cell of ordered) {
+					element.style.setProperty(`--nuv-data-table-pin-${side}-${cell.dataset.pinIndex}`, `${offset}px`);
+					offset += cell.getBoundingClientRect().width;
+				}
+			}
+		};
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(measure);
+		for (const cell of cells) observer.observe(cell);
+		return () => observer.disconnect();
+	}, [key]);
+}
+const ariaSort = (column) => {
+	const direction = sorted(column);
+	if (!direction || column.getSortIndex() > 0) return void 0;
+	return direction === "asc" ? "ascending" : "descending";
+};
+function HeaderCell({ header, table, pin, resizable, footer = false }) {
+	const { column } = header;
+	const leaf = column.columns.length === 0;
+	const meta = columnMeta(column);
+	const template = footer ? column.columnDef.footer : column.columnDef.header;
+	let content = null;
+	if (footer) content = header.isPlaceholder ? null : /* @__PURE__ */ jsx(table.FlexRender, { footer: header });
+	else if (typeof template === "string") content = template ? /* @__PURE__ */ jsx(DataTableColumnHeader, {
+		column,
+		children: template
+	}) : null;
+	else if (template) content = /* @__PURE__ */ jsx(table.FlexRender, { header });
+	const shared = {
+		colSpan: header.colSpan > 1 ? header.colSpan : void 0,
+		align: meta.align,
+		pinned: pin?.side,
+		pinnedEdge: pin?.edge,
+		style: pinStyle(pin)
+	};
+	let cell;
+	if (footer) cell = /* @__PURE__ */ jsx(TableCell, {
+		...shared,
+		children: content
+	});
+	else if (content === null || meta.control) cell = /* @__PURE__ */ jsx(TableCell, {
+		...shared,
+		rowSpan: header.rowSpan > 1 ? header.rowSpan : void 0,
+		className: cx("nuv-table__head", meta.control && "nuv-data-table__cell--control"),
+		"data-pin": leaf ? pin?.side : void 0,
+		"data-pin-index": leaf ? pin?.index : void 0,
+		children: content
+	});
+	else {
+		const handle = leaf && resizable && canResize(column);
+		cell = /* @__PURE__ */ jsxs(TableHead, {
+			...shared,
+			rowSpan: header.rowSpan > 1 ? header.rowSpan : void 0,
+			"aria-sort": leaf ? ariaSort(column) : void 0,
+			"aria-label": handle ? columnLabel(column) : void 0,
+			className: cx(handle && !pin && "nuv-data-table__head--resizable"),
+			"data-pin": leaf ? pin?.side : void 0,
+			"data-pin-index": leaf ? pin?.index : void 0,
+			children: [content, handle ? /* @__PURE__ */ jsx(DataTableResizeHandle, { header }) : null]
+		});
+	}
+	if (table.AppHeader) {
+		const Wrapper = footer && table.AppFooter || table.AppHeader;
+		return /* @__PURE__ */ jsx(Wrapper, {
+			header,
+			children: () => cell
+		});
+	}
+	return /* @__PURE__ */ jsx(tableContexts.headerContext.Provider, {
+		value: header,
+		children: cell
+	});
+}
+function BodyCell({ row, column, table, pin, rowHeader }) {
+	const cell = row.getAllCellsByColumnId()[column.id];
+	if (!cell) return null;
+	const meta = columnMeta(column);
+	const element = /* @__PURE__ */ jsx(TableCell, {
+		rowHeader,
+		align: meta.align,
+		pinned: pin?.side,
+		pinnedEdge: pin?.edge,
+		style: pinStyle(pin),
+		className: cx(meta.control && "nuv-data-table__cell--control"),
+		children: /* @__PURE__ */ jsx(table.FlexRender, { cell })
+	});
+	if (table.AppCell) return /* @__PURE__ */ jsx(table.AppCell, {
+		cell,
+		children: () => element
+	});
+	return /* @__PURE__ */ jsx(tableContexts.cellContext.Provider, {
+		value: cell,
+		children: element
+	});
+}
+/**
+* What the two tables share: the box, the headings, the footer, and what's
+* shown when there are no rows. The rows themselves are drawn by `children`,
+* which is where a plain table and a virtual one differ.
+*/
+function ContentFrame({ caption, captionHidden = false, stickyHeader = false, striped = false, layout = "auto", renderDetail, empty, loadingRows, className, containerRef, containerProps, tableProps, children, ...name }) {
+	const { table, labels, rowHeader, loading, error, onRetry } = useDataTableView("DataTableContent");
+	const element = useRef(null);
+	const captionId = useId();
+	const headerGroups = table.getHeaderGroups();
+	const columns = leafColumns(table);
+	const pinMap = supports.pinning(table) ? pins(columns) : /* @__PURE__ */ new Map();
+	usePinOffsets(element, [...pinMap].map(([id, pin]) => `${id}:${pin.side}`).join(","));
+	const sized = layout === "fixed" && supports.sizing(table);
+	const resizable = sized && supports.resizing(table);
+	const rows = table.getRowModel().rows;
+	const hasFooter = table.getAllLeafColumns().some((column) => column.columnDef.footer);
+	const renderRow = (row, options = {}) => {
+		const open = renderDetail !== void 0 && expanded(row);
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TableRow, {
+			selected: selected(row),
+			...options.rowProps,
+			children: columns.map((column) => /* @__PURE__ */ jsx(BodyCell, {
+				row,
+				column,
+				table,
+				pin: pinMap.get(column.id),
+				rowHeader: column.id === rowHeader
+			}, column.id))
+		}), open ? /* @__PURE__ */ jsx(TableRow, {
+			className: "nuv-data-table__detail-row",
+			children: /* @__PURE__ */ jsx(TableCell, {
+				colSpan: columns.length,
+				className: "nuv-data-table__detail",
+				children: renderDetail(row)
+			})
+		}) : null] }, row.id);
+	};
+	const message = (content, alert = false) => /* @__PURE__ */ jsx(TableRow, {
+		className: "nuv-data-table__message-row",
+		children: /* @__PURE__ */ jsx(TableCell, {
+			colSpan: columns.length,
+			className: "nuv-data-table__message",
+			role: alert ? "alert" : void 0,
+			children: content
+		})
+	});
+	let body;
+	if (error) body = message(/* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", { children: error === true ? labels.error : error }), onRetry ? /* @__PURE__ */ jsx(Button, {
+		intent: "secondary",
+		size: "sm",
+		onClick: onRetry,
+		children: labels.retry
+	}) : null] }), true);
+	else if (rows.length > 0) body = children(rows, renderRow, headerGroups.length);
+	else if (loading) {
+		const pageSize = table.atoms.pagination?.get().pageSize;
+		const count = loadingRows ?? Math.min(pageSize ?? 5, 10);
+		body = Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx(TableRow, {
+			className: "nuv-data-table__loading-row",
+			children: columns.map((column) => /* @__PURE__ */ jsx(TableCell, {
+				className: cx(columnMeta(column).control && "nuv-data-table__cell--control"),
+				children: /* @__PURE__ */ jsx(Skeleton, { shape: "text" })
+			}, column.id))
+		}, index));
+	} else if (anyFilter(table)) body = message(/* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", { children: labels.noMatches }), /* @__PURE__ */ jsx(Button, {
+		intent: "secondary",
+		size: "sm",
+		onClick: () => {
+			if (supports.columnFilters(table)) table.resetColumnFilters(true);
+			if (supports.globalFilter(table)) table.setGlobalFilter("");
+		},
+		children: labels.clearFilters
+	})] }));
+	else body = message(empty ?? labels.empty);
+	const labelledBy = caption != null ? captionId : name["aria-labelledby"];
+	return /* @__PURE__ */ jsx(TableContainer, {
+		ref: containerRef,
+		"aria-label": name["aria-label"],
+		"aria-labelledby": labelledBy,
+		...containerProps,
+		className: cx("nuv-data-table__container", className, containerProps?.className),
+		children: /* @__PURE__ */ jsxs(Table, {
+			ref: element,
+			stickyHeader,
+			striped,
+			layout,
+			"aria-label": name["aria-label"],
+			"aria-labelledby": caption != null ? void 0 : name["aria-labelledby"],
+			"aria-busy": loading || void 0,
+			style: sized ? { inlineSize: table.getTotalSize() } : void 0,
+			...tableProps,
+			children: [
+				caption != null ? /* @__PURE__ */ jsx(TableCaption, {
+					id: captionId,
+					visuallyHidden: captionHidden,
+					children: caption
+				}) : null,
+				sized ? /* @__PURE__ */ jsx("colgroup", { children: columns.map((column) => /* @__PURE__ */ jsx("col", { style: { inlineSize: column.getSize() } }, column.id)) }) : null,
+				/* @__PURE__ */ jsx(TableHeader, { children: headerGroups.map((group, index) => /* @__PURE__ */ jsx(TableRow, {
+					"aria-rowindex": tableProps?.["aria-rowcount"] !== void 0 ? index + 1 : void 0,
+					children: group.headers.map((header) => header.rowSpan === 0 ? null : /* @__PURE__ */ jsx(HeaderCell, {
+						header,
+						table,
+						pin: headerPin(header.column, pinMap),
+						resizable
+					}, header.id))
+				}, group.id)) }),
+				/* @__PURE__ */ jsx(TableBody, { children: body }),
+				hasFooter ? /* @__PURE__ */ jsx(TableFooter, { children: /* @__PURE__ */ jsx(TableRow, { children: (table.getFooterGroups()[0]?.headers ?? []).map((header) => /* @__PURE__ */ jsx(HeaderCell, {
+					header,
+					table,
+					pin: pinMap.get(header.column.id),
+					resizable: false,
+					footer: true
+				}, header.id)) }) }) : null
+			]
+		})
+	});
+}
+/**
+* The table itself: the headings, the rows, and what's shown when there
+* are no rows. `DataTable` puts this between the toolbar and the
+* pagination bar. Use it yourself, inside `DataTableRoot`, to lay those
+* out differently.
+*/
+function DataTableContent(props) {
+	return /* @__PURE__ */ jsx(ContentFrame, {
+		...props,
+		children: (rows, renderRow) => rows.map((row) => renderRow(row))
+	});
+}
+//#endregion
+export { ContentFrame, DataTableContent };

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

@@ -0,0 +1,23 @@
+import { AppReactTable, Column, ReactTable, Row } from "@tanstack/react-table";
+import { ReactNode } from "react";
+//#region src/components/data-table/context.d.ts
+/**
+ * What a column can say about itself for the controls. Register it with
+ * `columnMeta: metaHelper<DataTableColumnMeta>()` in `tableFeatures` and
+ * a column's `meta` is typed.
+ */
+export interface DataTableColumnMeta {
+  /**
+   * The column's name in the column chooser and for screen readers. A
+   * column whose `header` is a string doesn't need one.
+   */
+  label?: string;
+  /** Which side the column's cells and heading sit on. */
+  align?: "start" | "center" | "end";
+  /**
+   * The column only holds a control, such as a checkbox. It's kept as
+   * narrow as the control.
+   */
+  control?: boolean;
+}
+//#endregion

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

@@ -0,0 +1,51 @@
+"use client";
+import { createTableHookContexts } from "@tanstack/react-table";
+import { createContext, useContext } from "react";
+//#region src/components/data-table/context.tsx
+const tableContexts = createTableHookContexts();
+const ViewContext = createContext(null);
+function useDataTableView(part) {
+	const view = useContext(ViewContext);
+	if (!view) throw new Error(`${part} has to be inside a DataTable or DataTableRoot.`);
+	return view;
+}
+const useHeader = () => useContext(tableContexts.headerContext);
+const useCell = () => useContext(tableContexts.cellContext);
+const is = (value) => typeof value === "function";
+const supports = {
+	sorting: (table) => is(table.setSorting),
+	columnFilters: (table) => is(table.setColumnFilters),
+	globalFilter: (table) => is(table.setGlobalFilter),
+	pagination: (table) => is(table.setPagination),
+	selection: (table) => is(table.setRowSelection),
+	visibility: (table) => is(table.setColumnVisibility),
+	pinning: (table) => is(table.setColumnPinning),
+	sizing: (table) => is(table.setColumnSizing),
+	resizing: (table) => is(table.setColumnResizing),
+	expanding: (table) => is(table.setExpanded)
+};
+const columnMeta = (column) => column.columnDef.meta ?? {};
+function columnLabel(column) {
+	const { label } = columnMeta(column);
+	if (label) return label;
+	const { header } = column.columnDef;
+	return typeof header === "string" && header ? header : column.id;
+}
+const canSort = (column) => is(column.getCanSort) && column.getCanSort();
+const sorted = (column) => is(column.getIsSorted) ? column.getIsSorted() : false;
+const pinned = (column) => is(column.getIsPinned) ? column.getIsPinned() : false;
+const canResize = (column) => is(column.getCanResize) && is(column.getSize) && column.getCanResize();
+const canHide = (column) => is(column.getCanHide) && column.getCanHide();
+const canExpand = (row) => is(row.getCanExpand) && row.getCanExpand();
+const expanded = (row) => is(row.getIsExpanded) && row.getIsExpanded();
+const selected = (row) => is(row.getIsSelected) && row.getIsSelected();
+function leafColumns(table) {
+	return table.getHeaderGroups().flatMap((group) => group.headers).filter((header) => header.subHeaders.length === 0).map((header) => header.column);
+}
+function anyFilter(table) {
+	const columnFilters = table.atoms.columnFilters?.get() ?? [];
+	const globalFilter = table.atoms.globalFilter?.get();
+	return columnFilters.length > 0 || globalFilter != null && globalFilter !== "";
+}
+//#endregion
+export { ViewContext, anyFilter, canExpand, canHide, canResize, canSort, columnLabel, columnMeta, expanded, leafColumns, pinned, selected, sorted, supports, tableContexts, useCell, useDataTableView, useHeader };

package/dist/components/data-table/create-data-table-hook.d.ts

@@ -0,0 +1,78 @@
+import { DataTableColumnHeader } from "./header.js";
+import { DataTablePagination } from "./pagination.js";
+import { DataTableBulkActions, DataTableExpandToggle, DataTableSelectAll, DataTableSelectRow } from "./selection.js";
+import { DataTableColumnChooser, DataTableColumnFilter, DataTableFilter, DataTableToolbar } from "./toolbar.js";
+import { AppColumnHelper, AppDisplayColumnDef, AppReactTable, CreateTableHookOptions, DisplayColumnDef, RowData, TableFeatures, TableOptions, TableState } from "@tanstack/react-table";
+import { ComponentType } from "react";
+//#region src/components/data-table/create-data-table-hook.d.ts
+declare const tableComponents: {
+  Toolbar: typeof DataTableToolbar;
+  Filter: typeof DataTableFilter;
+  ColumnChooser: typeof DataTableColumnChooser;
+  BulkActions: typeof DataTableBulkActions;
+  Pagination: typeof DataTablePagination;
+};
+declare const headerComponents: {
+  ColumnHeader: typeof DataTableColumnHeader;
+  ColumnFilter: typeof DataTableColumnFilter;
+  SelectAll: typeof DataTableSelectAll;
+};
+declare const cellComponents: {
+  SelectRow: typeof DataTableSelectRow;
+  ExpandToggle: typeof DataTableExpandToggle;
+};
+type Components = Record<string, ComponentType<any>>;
+type None = {};
+type TableComponents<T extends Components> = typeof tableComponents & T;
+type HeaderComponents<T extends Components> = typeof headerComponents & T;
+type CellComponents<T extends Components> = typeof cellComponents & T;
+type ControlColumn<TFeatures extends TableFeatures, TData extends RowData, TCell extends Components, THeader extends Components> = Partial<AppDisplayColumnDef<TFeatures, TData, CellComponents<TCell>, HeaderComponents<THeader>>>;
+export type DataTableColumnHelper<TFeatures extends TableFeatures, TData extends RowData, TCell extends Components = None, THeader extends Components = None> = AppColumnHelper<TFeatures, TData, CellComponents<TCell>, HeaderComponents<THeader>> & {
+  /**
+   * A column of checkboxes: one a row, and one in the heading for all of
+   * them. Needs `rowSelectionFeature`.
+   */
+  select: (column?: ControlColumn<TFeatures, TData, TCell, THeader>) => DisplayColumnDef<TFeatures, TData, unknown>;
+  /**
+   * A column of buttons that open and close a row. Needs
+   * `rowExpandingFeature`.
+   */
+  expand: (column?: ControlColumn<TFeatures, TData, TCell, THeader>) => DisplayColumnDef<TFeatures, TData, unknown>;
+};
+export type DataTableHookOptions<TFeatures extends TableFeatures, TTable extends Components = None, TCell extends Components = None, THeader extends Components = None> = Omit<CreateTableHookOptions<TFeatures, TTable, TCell, THeader>, "tableContext" | "cellContext" | "headerContext">;
+/**
+ * Makes the hook an app's tables are created with. Call it once, in a
+ * module of its own, with the features your tables use. Only those end up
+ * in your bundle.
+ *
+ * It's TanStack's `createTableHook` with this package's controls already
+ * registered, and takes the same options. What it returns:
+ *
+ * - `useDataTable`: `useTable`, bound to the features. Its table has the
+ *   controls on it: `table.Pagination`, `table.Filter` and so on.
+ * - `createColumnHelper`: TanStack's column helper, bound to the features,
+ *   with `select()` and `expand()` added. In a column's `header` and `cell`
+ *   the controls are on what it's given: `header.ColumnHeader`,
+ *   `cell.SelectRow`.
+ */
+export declare function createDataTableHook<TFeatures extends TableFeatures, const TTable extends Components = None, const TCell extends Components = None, const THeader extends Components = None>(options: DataTableHookOptions<TFeatures, TTable, TCell, THeader>): {
+  /** The features object that was passed in. */
+  features: TFeatures;
+  useDataTable: <TData extends RowData, TSelected = TableState<TFeatures>>(tableOptions: Omit<TableOptions<TFeatures, TData>, "features">, selector?: (state: TableState<TFeatures>) => TSelected) => AppReactTable<TFeatures, TData, TSelected, TableComponents<TTable>, CellComponents<TCell>, HeaderComponents<THeader>>;
+  createColumnHelper: <TData extends RowData>() => DataTableColumnHelper<TFeatures, TData, TCell, THeader>;
+  useTableContext: <TData extends RowData = RowData, TSelected = import("@tanstack/react-table").ExtractFeatureMapTypes<TFeatures, import("@tanstack/react-table").TableState_FeatureMap>>() => AppReactTable<TFeatures, TData, TSelected, TableComponents<TTable>, CellComponents<TCell>, HeaderComponents<THeader>>;
+  useHeaderContext: <TValue extends import("@tanstack/react-table").CellData = unknown>() => import("@tanstack/react-table").Header_Core<TFeatures, any, TValue> & import("@tanstack/react-table").ExtractFeatureMapTypes<TFeatures, import("@tanstack/react-table").Header_FeatureMap> & {
+    ColumnHeader: typeof DataTableColumnHeader;
+    ColumnFilter: typeof DataTableColumnFilter;
+    SelectAll: typeof DataTableSelectAll;
+  } & THeader & {
+    FlexRender: () => import("react").ReactNode;
+  };
+  useCellContext: <TValue extends import("@tanstack/react-table").CellData = unknown>() => import("@tanstack/react-table").Cell_Core<TFeatures, any, TValue> & import("@tanstack/react-table").ExtractFeatureMapTypes<TFeatures, import("@tanstack/react-table").Cell_FeatureMap> & {
+    SelectRow: typeof DataTableSelectRow;
+    ExpandToggle: typeof DataTableExpandToggle;
+  } & TCell & {
+    FlexRender: () => import("react").ReactNode;
+  };
+};
+//#endregion