@optimum-intelligence/opti-ui 0.0.0-stage → 0.3.0

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

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import type { DataTableColumn, DataTableEntry } from './types';
+/** Column widths taken from the browser's own layout, then held. */
+export interface ColumnLock {
+    key: string;
+    /** Width of the wrapper when measured; another one asks for a new measurement. */
+    container: number;
+    table: number;
+    widths: number[];
+}
+/**
+ * Lets the browser lay the columns out once, then holds their widths, so
+ * paging, sorting, scrolling and editing cannot move them. The widths are
+ * measured again when the table is resized or `key` (the column set) changes.
+ * `measuring` is true for the render the widths are read from; it is replaced
+ * before the browser paints.
+ */
+export declare function useColumnLock(anchor: HTMLElement | null, enabled: boolean, key: string, ready: boolean): {
+    lock: ColumnLock | null;
+    measuring: boolean;
+};
+/**
+ * Rows the column widths are measured with, next to the ones on screen: the
+ * row with the longest text of each column, and a few spread over the data.
+ * Without them the widths would fit the first page only.
+ */
+export declare function pickSizerRows<T>(entries: DataTableEntry<T>[], columns: DataTableColumn<T>[]): DataTableEntry<T>[];
+/**
+ * Height of the table with a full page of rows, so a shorter last page can keep
+ * it and the pagination below stays where the pointer is.
+ */
+export declare function usePageHeight(anchor: HTMLElement | null, enabled: boolean, full: boolean, key: string): number | undefined;
+export interface VirtualRowsOptions {
+    enabled: boolean;
+    /** Number of rows in the list. */
+    count: number;
+    /** Height every row has. Left out, it is the tallest row seen. */
+    rowHeight?: number;
+    /** Rows rendered beyond each edge of the view. */
+    overscan: number;
+    /** Row height assumed before the first row is measured. */
+    estimate: number;
+    /** Height of the view assumed before it is measured, and on the server. */
+    viewport: number;
+    /** Changes when the row height may (density): forgets the measured one. */
+    key: string;
+}
+export interface VirtualRows {
+    /** Rows `start` (included) to `end` (excluded) are rendered. */
+    start: number;
+    end: number;
+    /** Heights standing in for the rows above and below them. */
+    before: number;
+    after: number;
+    /** Height to give every row, once known: equal rows keep the scrollbar steady. */
+    rowHeight?: number;
+    onScroll: (event: React.UIEvent<HTMLElement>) => void;
+}
+/** Renders only the rows in view of the scrolling wrapper, and stands in for the rest with empty space. */
+export declare function useVirtualRows(anchor: HTMLElement | null, { enabled, count, rowHeight, overscan, estimate, viewport: assumed, key }: VirtualRowsOptions): VirtualRows;

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

@@ -0,0 +1,272 @@
+"use client";
+import { getColumnValue } from "./useDataTable.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+//#region src/components/data-table/layout.ts
+function tableOf(anchor) {
+	return anchor?.closest("table") ?? null;
+}
+function wrapperOf(anchor) {
+	return tableOf(anchor)?.parentElement ?? null;
+}
+/**
+* Lets the browser lay the columns out once, then holds their widths, so
+* paging, sorting, scrolling and editing cannot move them. The widths are
+* measured again when the table is resized or `key` (the column set) changes.
+* `measuring` is true for the render the widths are read from; it is replaced
+* before the browser paints.
+*/
+function useColumnLock(anchor, enabled, key, ready) {
+	const $ = c(16);
+	const [lock, setLock] = React.useState(null);
+	const [shown, setShown] = React.useState(true);
+	const held = enabled && lock?.key === key ? lock : null;
+	const measuring = enabled && ready && !held && anchor !== null;
+	let t0;
+	if ($[0] !== anchor || $[1] !== key || $[2] !== measuring) {
+		t0 = () => {
+			const table = tableOf(anchor);
+			const wrapper = table?.parentElement;
+			if (!measuring || !table || !wrapper || !wrapper.clientWidth) return;
+			const heads = table.querySelectorAll(":scope > thead > tr > th");
+			setLock({
+				key,
+				container: wrapper.clientWidth,
+				table: table.getBoundingClientRect().width,
+				widths: Array.from(heads, _temp)
+			});
+		};
+		$[0] = anchor;
+		$[1] = key;
+		$[2] = measuring;
+		$[3] = t0;
+	} else t0 = $[3];
+	let t1;
+	if ($[4] !== anchor || $[5] !== key || $[6] !== measuring || $[7] !== shown) {
+		t1 = [
+			anchor,
+			measuring,
+			key,
+			shown
+		];
+		$[4] = anchor;
+		$[5] = key;
+		$[6] = measuring;
+		$[7] = shown;
+		$[8] = t1;
+	} else t1 = $[8];
+	React.useLayoutEffect(t0, t1);
+	let t2;
+	let t3;
+	if ($[9] !== anchor || $[10] !== enabled) {
+		t2 = () => {
+			const wrapper_0 = wrapperOf(anchor);
+			if (!enabled || !wrapper_0 || typeof ResizeObserver === "undefined") return;
+			const observer = new ResizeObserver(() => {
+				const width = wrapper_0.clientWidth;
+				setShown(width > 0);
+				if (width > 0) setLock((current) => current && Math.abs(current.container - width) >= 1 ? null : current);
+			});
+			observer.observe(wrapper_0);
+			return () => observer.disconnect();
+		};
+		t3 = [anchor, enabled];
+		$[9] = anchor;
+		$[10] = enabled;
+		$[11] = t2;
+		$[12] = t3;
+	} else {
+		t2 = $[11];
+		t3 = $[12];
+	}
+	React.useEffect(t2, t3);
+	let t4;
+	if ($[13] !== held || $[14] !== measuring) {
+		t4 = {
+			lock: held,
+			measuring
+		};
+		$[13] = held;
+		$[14] = measuring;
+		$[15] = t4;
+	} else t4 = $[15];
+	return t4;
+}
+/**
+* Rows the column widths are measured with, next to the ones on screen: the
+* row with the longest text of each column, and a few spread over the data.
+* Without them the widths would fit the first page only.
+*/
+function _temp(head) {
+	return head.getBoundingClientRect().width;
+}
+function pickSizerRows(entries, columns) {
+	const picked = /* @__PURE__ */ new Set();
+	const step = Math.max(1, Math.ceil(entries.length / 12));
+	for (let index = 0; index < entries.length; index += step) picked.add(entries[index]);
+	for (const column of columns) {
+		let longest = null;
+		let length = 0;
+		for (const entry of entries) {
+			const value = getColumnValue(column, entry.row);
+			const size = value === null || value === void 0 ? 0 : String(value).length;
+			if (size > length) {
+				longest = entry;
+				length = size;
+			}
+		}
+		if (longest) picked.add(longest);
+	}
+	return [...picked];
+}
+/**
+* Height of the table with a full page of rows, so a shorter last page can keep
+* it and the pagination below stays where the pointer is.
+*/
+function usePageHeight(anchor, enabled, full, key) {
+	const $ = c(5);
+	const [held, setHeld] = React.useState(null);
+	let t0;
+	if ($[0] !== anchor || $[1] !== enabled || $[2] !== full || $[3] !== key) {
+		t0 = () => {
+			const wrapper = wrapperOf(anchor);
+			if (!enabled || !full || !wrapper) return;
+			const height = wrapper.getBoundingClientRect().height;
+			if (height) setHeld((current) => current?.key === key && Math.abs(current.height - height) < 1 ? current : {
+				key,
+				height
+			});
+		};
+		$[0] = anchor;
+		$[1] = enabled;
+		$[2] = full;
+		$[3] = key;
+		$[4] = t0;
+	} else t0 = $[4];
+	React.useLayoutEffect(t0);
+	return enabled && held?.key === key ? held.height : void 0;
+}
+/** Renders only the rows in view of the scrolling wrapper, and stands in for the rest with empty space. */
+function useVirtualRows(anchor, t0) {
+	const $ = c(28);
+	const { enabled, count, rowHeight, overscan, estimate, viewport: assumed, key } = t0;
+	const [first, setFirst] = React.useState(0);
+	const [viewport, setViewport] = React.useState(null);
+	const [tallest, setTallest] = React.useState(null);
+	const measured = tallest?.key === key ? tallest.height : void 0;
+	const height = rowHeight ?? measured ?? estimate;
+	const visible = Math.ceil((viewport ?? assumed) / height) + 1;
+	const top = Math.max(0, Math.min(first, count - 1));
+	const from = Math.max(0, top - overscan);
+	const start = from - from % 2;
+	const end = Math.min(count, top + visible + overscan);
+	let t1;
+	if ($[0] !== anchor || $[1] !== enabled || $[2] !== key || $[3] !== rowHeight) {
+		t1 = () => {
+			const table = tableOf(anchor);
+			if (!enabled || rowHeight !== void 0 || !table) return;
+			let max = 0;
+			for (const row of table.querySelectorAll(":scope > tbody > tr[aria-rowindex]")) max = Math.max(max, row.getBoundingClientRect().height);
+			if (max) setTallest((current) => current?.key === key && max - current.height < .5 ? current : {
+				key,
+				height: max
+			});
+		};
+		$[0] = anchor;
+		$[1] = enabled;
+		$[2] = key;
+		$[3] = rowHeight;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== anchor || $[6] !== count || $[7] !== enabled || $[8] !== end || $[9] !== key || $[10] !== rowHeight || $[11] !== start) {
+		t2 = [
+			anchor,
+			enabled,
+			rowHeight,
+			key,
+			start,
+			end,
+			count
+		];
+		$[5] = anchor;
+		$[6] = count;
+		$[7] = enabled;
+		$[8] = end;
+		$[9] = key;
+		$[10] = rowHeight;
+		$[11] = start;
+		$[12] = t2;
+	} else t2 = $[12];
+	React.useLayoutEffect(t1, t2);
+	let t3;
+	let t4;
+	if ($[13] !== anchor || $[14] !== enabled) {
+		t3 = () => {
+			const wrapper = wrapperOf(anchor);
+			if (!enabled || !wrapper) return;
+			setViewport(wrapper.clientHeight);
+			if (typeof ResizeObserver === "undefined") return;
+			const observer = new ResizeObserver(() => setViewport(wrapper.clientHeight));
+			observer.observe(wrapper);
+			return () => observer.disconnect();
+		};
+		t4 = [anchor, enabled];
+		$[13] = anchor;
+		$[14] = enabled;
+		$[15] = t3;
+		$[16] = t4;
+	} else {
+		t3 = $[15];
+		t4 = $[16];
+	}
+	React.useEffect(t3, t4);
+	if (!enabled) {
+		let t5;
+		if ($[17] !== count) {
+			t5 = {
+				start: 0,
+				end: count,
+				before: 0,
+				after: 0,
+				onScroll: _temp2
+			};
+			$[17] = count;
+			$[18] = t5;
+		} else t5 = $[18];
+		return t5;
+	}
+	const t5 = start * height;
+	const t6 = (count - end) * height;
+	const t7 = rowHeight ?? measured;
+	let t8;
+	if ($[19] !== height) {
+		t8 = (event) => setFirst(Math.floor(event.currentTarget.scrollTop / height));
+		$[19] = height;
+		$[20] = t8;
+	} else t8 = $[20];
+	let t9;
+	if ($[21] !== end || $[22] !== start || $[23] !== t5 || $[24] !== t6 || $[25] !== t7 || $[26] !== t8) {
+		t9 = {
+			start,
+			end,
+			before: t5,
+			after: t6,
+			rowHeight: t7,
+			onScroll: t8
+		};
+		$[21] = end;
+		$[22] = start;
+		$[23] = t5;
+		$[24] = t6;
+		$[25] = t7;
+		$[26] = t8;
+		$[27] = t9;
+	} else t9 = $[27];
+	return t9;
+}
+function _temp2() {}
+//#endregion
+export { pickSizerRows, useColumnLock, usePageHeight, useVirtualRows };
+
+//# sourceMappingURL=layout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","names":["React","getColumnValue","DataTableColumn","DataTableEntry","tableOf","anchor","HTMLElement","closest","wrapperOf","parentElement","ColumnLock","key","container","table","widths","useColumnLock","enabled","ready","$","_c","lock","setLock","useState","shown","setShown","held","measuring","t0","wrapper","clientWidth","heads","querySelectorAll","getBoundingClientRect","width","Array","from","_temp","t1","useLayoutEffect","t2","t3","wrapper_0","ResizeObserver","observer","current","Math","abs","observe","disconnect","useEffect","t4","head","pickSizerRows","entries","T","columns","picked","Set","step","max","ceil","length","index","add","column","longest","entry","value","row","size","undefined","String","usePageHeight","full","setHeld","height","VirtualRowsOptions","count","rowHeight","overscan","estimate","viewport","VirtualRows","start","end","before","after","onScroll","event","UIEvent","useVirtualRows","assumed","first","setFirst","setViewport","tallest","setTallest","measured","visible","top","min","clientHeight","t5","_temp2","t6","t7","t8","floor","currentTarget","scrollTop","t9","_c"],"sources":["../../../src/components/data-table/layout.ts"],"sourcesContent":["import * as React from 'react';\nimport { getColumnValue } from './useDataTable';\nimport type { DataTableColumn, DataTableEntry } from './types';\n\n// The hooks here find the table through an element rendered inside it (its\n// `<colgroup>`), so `tableProps` keeps its own `ref` for the consumer.\nfunction tableOf(anchor: HTMLElement | null) {\n  return anchor?.closest('table') ?? null;\n}\n\nfunction wrapperOf(anchor: HTMLElement | null) {\n  return tableOf(anchor)?.parentElement ?? null;\n}\n\n// ─── Column widths ───────────────────────────────────────────────────────────\n\n/** Column widths taken from the browser's own layout, then held. */\nexport interface ColumnLock {\n  key: string;\n  /** Width of the wrapper when measured; another one asks for a new measurement. */\n  container: number;\n  table: number;\n  widths: number[];\n}\n\n/**\n * Lets the browser lay the columns out once, then holds their widths, so\n * paging, sorting, scrolling and editing cannot move them. The widths are\n * measured again when the table is resized or `key` (the column set) changes.\n * `measuring` is true for the render the widths are read from; it is replaced\n * before the browser paints.\n */\nexport function useColumnLock(anchor: HTMLElement | null, enabled: boolean, key: string, ready: boolean) {\n  const [lock, setLock] = React.useState<ColumnLock | null>(null);\n  const [shown, setShown] = React.useState(true);\n  const held = enabled && lock?.key === key ? lock : null;\n  const measuring = enabled && ready && !held && anchor !== null;\n\n  React.useLayoutEffect(() => {\n    const table = tableOf(anchor);\n    const wrapper = table?.parentElement;\n    // A hidden table (a closed tab) has no widths to read: it is measured when it shows.\n    if (!measuring || !table || !wrapper || !wrapper.clientWidth) return;\n    const heads = table.querySelectorAll<HTMLElement>(':scope > thead > tr > th');\n    setLock({\n      key,\n      container: wrapper.clientWidth,\n      table: table.getBoundingClientRect().width,\n      widths: Array.from(heads, (head) => head.getBoundingClientRect().width),\n    });\n  }, [anchor, measuring, key, shown]);\n\n  React.useEffect(() => {\n    const wrapper = wrapperOf(anchor);\n    if (!enabled || !wrapper || typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver(() => {\n      const width = wrapper.clientWidth;\n      setShown(width > 0);\n      if (width > 0) setLock((current) => (current && Math.abs(current.container - width) >= 1 ? null : current));\n    });\n    observer.observe(wrapper);\n    return () => observer.disconnect();\n  }, [anchor, enabled]);\n\n  return { lock: held, measuring };\n}\n\n/**\n * Rows the column widths are measured with, next to the ones on screen: the\n * row with the longest text of each column, and a few spread over the data.\n * Without them the widths would fit the first page only.\n */\nexport function pickSizerRows<T>(entries: DataTableEntry<T>[], columns: DataTableColumn<T>[]): DataTableEntry<T>[] {\n  const picked = new Set<DataTableEntry<T>>();\n  const step = Math.max(1, Math.ceil(entries.length / 12));\n  for (let index = 0; index < entries.length; index += step) picked.add(entries[index]!);\n  for (const column of columns) {\n    let longest: DataTableEntry<T> | null = null;\n    let length = 0;\n    for (const entry of entries) {\n      const value = getColumnValue(column, entry.row);\n      const size = value === null || value === undefined ? 0 : String(value).length;\n      if (size > length) {\n        longest = entry;\n        length = size;\n      }\n    }\n    if (longest) picked.add(longest);\n  }\n  return [...picked];\n}\n\n// ─── Page height ─────────────────────────────────────────────────────────────\n\n/**\n * Height of the table with a full page of rows, so a shorter last page can keep\n * it and the pagination below stays where the pointer is.\n */\nexport function usePageHeight(anchor: HTMLElement | null, enabled: boolean, full: boolean, key: string) {\n  const [held, setHeld] = React.useState<{ key: string; height: number } | null>(null);\n\n  React.useLayoutEffect(() => {\n    const wrapper = wrapperOf(anchor);\n    if (!enabled || !full || !wrapper) return;\n    const height = wrapper.getBoundingClientRect().height;\n    if (height) setHeld((current) => (current?.key === key && Math.abs(current.height - height) < 1 ? current : { key, height }));\n  });\n\n  return enabled && held?.key === key ? held.height : undefined;\n}\n\n// ─── Virtual rows ────────────────────────────────────────────────────────────\n\nexport interface VirtualRowsOptions {\n  enabled: boolean;\n  /** Number of rows in the list. */\n  count: number;\n  /** Height every row has. Left out, it is the tallest row seen. */\n  rowHeight?: number;\n  /** Rows rendered beyond each edge of the view. */\n  overscan: number;\n  /** Row height assumed before the first row is measured. */\n  estimate: number;\n  /** Height of the view assumed before it is measured, and on the server. */\n  viewport: number;\n  /** Changes when the row height may (density): forgets the measured one. */\n  key: string;\n}\n\nexport interface VirtualRows {\n  /** Rows `start` (included) to `end` (excluded) are rendered. */\n  start: number;\n  end: number;\n  /** Heights standing in for the rows above and below them. */\n  before: number;\n  after: number;\n  /** Height to give every row, once known: equal rows keep the scrollbar steady. */\n  rowHeight?: number;\n  onScroll: (event: React.UIEvent<HTMLElement>) => void;\n}\n\n/** Renders only the rows in view of the scrolling wrapper, and stands in for the rest with empty space. */\nexport function useVirtualRows(\n  anchor: HTMLElement | null,\n  { enabled, count, rowHeight, overscan, estimate, viewport: assumed, key }: VirtualRowsOptions,\n): VirtualRows {\n  const [first, setFirst] = React.useState(0);\n  const [viewport, setViewport] = React.useState<number | null>(null);\n  const [tallest, setTallest] = React.useState<{ key: string; height: number } | null>(null);\n\n  const measured = tallest?.key === key ? tallest.height : undefined;\n  const height = rowHeight ?? measured ?? estimate;\n  const visible = Math.ceil((viewport ?? assumed) / height) + 1;\n  const top = Math.max(0, Math.min(first, count - 1));\n  const from = Math.max(0, top - overscan);\n  // An even start keeps the stripes of a striped table on the same rows.\n  const start = from - (from % 2);\n  const end = Math.min(count, top + visible + overscan);\n\n  React.useLayoutEffect(() => {\n    const table = tableOf(anchor);\n    if (!enabled || rowHeight !== undefined || !table) return;\n    let max = 0;\n    for (const row of table.querySelectorAll(':scope > tbody > tr[aria-rowindex]')) {\n      max = Math.max(max, row.getBoundingClientRect().height);\n    }\n    // Only ever grows: rows are given this height, so a smaller reading is the height itself.\n    if (max) setTallest((current) => (current?.key === key && max - current.height < 0.5 ? current : { key, height: max }));\n  }, [anchor, enabled, rowHeight, key, start, end, count]);\n\n  React.useEffect(() => {\n    const wrapper = wrapperOf(anchor);\n    if (!enabled || !wrapper) return;\n    setViewport(wrapper.clientHeight);\n    if (typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver(() => setViewport(wrapper.clientHeight));\n    observer.observe(wrapper);\n    return () => observer.disconnect();\n  }, [anchor, enabled]);\n\n  if (!enabled) return { start: 0, end: count, before: 0, after: 0, onScroll: () => undefined };\n  return {\n    start,\n    end,\n    before: start * height,\n    after: (count - end) * height,\n    rowHeight: rowHeight ?? measured,\n    onScroll: (event) => setFirst(Math.floor(event.currentTarget.scrollTop / height)),\n  };\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,319 @@
+import type * as React from 'react';
+import type { DateRange } from '../calendar/date-utils';
+import type { DateRangePreset } from '../date-picker/DateRangePicker';
+import type { InputProps } from '../input/Input';
+import type { PaginationLabels } from '../pagination/Pagination';
+export interface DataTableFilterOption {
+    value: string;
+    label: React.ReactNode;
+}
+interface FilterBase {
+    /** Key of this filter in `filterValues`. */
+    id: string;
+    /** Text on the control. */
+    label: string;
+}
+/** Dropdown that keeps the rows with one chosen value. */
+export interface DataTableSelectFilter<T> extends FilterBase {
+    type: 'select';
+    /** Value compared with the chosen option; an array matches on any of its items. Defaults to `row[id]`. */
+    value?: (row: T) => unknown;
+    /** Options to offer. Left out, they are collected from the rows. */
+    options?: DataTableFilterOption[];
+}
+/** On/off chip that keeps the matching rows while it is on. */
+export interface DataTableToggleFilter<T> extends FilterBase {
+    type: 'toggle';
+    /** Rows kept while the toggle is on. Defaults to rows where `row[id]` is truthy. */
+    match?: (row: T) => boolean;
+}
+/** Date range picker that keeps the rows dated inside the range, both days included. */
+export interface DataTableDateRangeFilter<T> extends FilterBase {
+    type: 'dateRange';
+    /** Date of the row: an ISO string, a `Date` or a timestamp. Defaults to `row[id]`. */
+    value?: (row: T) => string | number | Date | null | undefined;
+    presets?: DateRangePreset[];
+    min?: string;
+    max?: string;
+}
+export type DataTableFilter<T> = DataTableSelectFilter<T> | DataTableToggleFilter<T> | DataTableDateRangeFilter<T>;
+type ColumnFilterConfig<F> = F extends FilterBase ? Omit<F, 'id' | 'label'> & {
+    label?: string;
+} : never;
+/** A filter declared on a column: its type, or its definition without the `id` (the column's). */
+export type DataTableColumnFilter<T> = DataTableFilter<T>['type'] | ColumnFilterConfig<DataTableFilter<T>>;
+/** A select filter holds the option value, a toggle `true`, a date range `{ start, end }`. */
+export type DataTableFilterValue = string | true | DateRange;
+/** Values of the active filters by filter id. An inactive filter has no key. */
+export type DataTableFilterValues = Record<string, DataTableFilterValue>;
+/** A filter as the table uses it: column shorthand expanded, options collected. */
+export interface DataTableResolvedFilter<T> {
+    id: string;
+    type: DataTableFilter<T>['type'];
+    label: string;
+    /** Select filters only; empty for the other types. */
+    options: DataTableFilterOption[];
+    presets?: DateRangePreset[];
+    min?: string;
+    max?: string;
+    /** Whether `row` passes the filter at `value`. */
+    test: (row: T, value: DataTableFilterValue) => boolean;
+}
+export interface DataTableEditorContext<T> {
+    row: T;
+    /** Current value of the edited field. */
+    value: unknown;
+    setValue: (value: unknown) => void;
+    /** True while the row is being saved. */
+    disabled: boolean;
+}
+export interface DataTableColumnEdit<T> {
+    /** Built-in editor (default `text`). */
+    type?: 'text' | 'checkbox' | 'select';
+    /** Row property the editor writes. Defaults to the column id. */
+    field?: Extract<keyof T, string>;
+    /** Options of a `select` editor. */
+    options?: DataTableFilterOption[];
+    /** Props for the `text` editor's input (`inputMode`, `placeholder`, `type`…). */
+    inputProps?: Omit<InputProps, 'value' | 'defaultValue' | 'onValueChange' | 'size'>;
+    /** Replaces the built-in editor. */
+    render?: (context: DataTableEditorContext<T>) => React.ReactNode;
+}
+export interface DataTableColumn<T> {
+    /** Unique key. Also the property read from the row when there is no `accessor`. */
+    id: string;
+    header: React.ReactNode;
+    /** Plain-text name, used for the column's filter when `header` is not a string. */
+    label?: string;
+    /** Value used for sorting, searching, filtering and the default cell. Defaults to `row[id]`. */
+    accessor?: (row: T) => unknown;
+    /** Custom cell content. */
+    cell?: (row: T) => React.ReactNode;
+    /** Defaults to `true`, or `false` for columns that only define `cell` (actions, icons). */
+    sortable?: boolean;
+    /** Include this column in the built-in search. Same default as `sortable`. */
+    searchable?: boolean;
+    /** `contains` (default) matches anywhere in the value; `exact` only whole words, for ids and codes. */
+    searchMode?: 'contains' | 'exact';
+    /** Custom ascending comparison. */
+    compare?: (a: T, b: T) => number;
+    /** Adds a filter on this column to the toolbar. */
+    filter?: DataTableColumnFilter<T>;
+    /** Makes the cell editable once `onRowSave` is set. */
+    edit?: NonNullable<DataTableColumnEdit<T>['type']> | DataTableColumnEdit<T>;
+    /** Leaves the column out of the grid; it still takes part in search, filters and sorting. */
+    hidden?: boolean;
+    align?: 'start' | 'center' | 'end';
+    /** Right-align with tabular figures. */
+    numeric?: boolean;
+    /** Monospace text, for ids, codes and timestamps. */
+    mono?: boolean;
+    /** Quieter text colour, for secondary values. */
+    muted?: boolean;
+    /** Cuts long text with an ellipsis instead of wrapping it. The column takes its `width`, not the text's. */
+    truncate?: boolean;
+    /** Preferred width. The table measures its columns once and then holds them, so this is a starting point. */
+    width?: number | string;
+    /** Floor for the measured width, for columns whose content gets longer on later pages. */
+    minWidth?: number | string;
+    /** Extra class on the column's body cells. */
+    cellClassName?: string | ((row: T) => string | undefined);
+}
+export interface DataTableSort {
+    id: string;
+    direction: 'asc' | 'desc';
+}
+export interface DataTableRowAction {
+    /** Tooltip and accessible name. */
+    label: string;
+    icon: React.ReactNode;
+    onClick: () => void;
+    disabled?: boolean;
+    /** Colours the button red on hover. */
+    danger?: boolean;
+}
+export type DataTableRowTone = 'accent' | 'info' | 'success' | 'warning' | 'danger';
+export interface DataTableEntry<T> {
+    id: string;
+    row: T;
+}
+export interface DataTableLabels extends PaginationLabels {
+    search: string;
+    clearSearch: string;
+    selectAll: string;
+    selectRow: (label: string) => string;
+    count: (count: number) => React.ReactNode;
+    /** Summary while a search or filter narrows the rows. Defaults to `count` of the total, prefixed with the match count. */
+    filteredCount: (count: number, total: number) => React.ReactNode;
+    selected: (count: number) => React.ReactNode;
+    emptyTitle: React.ReactNode;
+    emptyDescription: React.ReactNode;
+    noMatchTitle: React.ReactNode;
+    noMatchDescription: React.ReactNode;
+    /** Shown instead of `noMatchDescription` when filters leave no rows. Defaults to it. */
+    noFilterMatchDescription: React.ReactNode;
+    loading: string;
+    errorTitle: React.ReactNode;
+    retry: string;
+    /** Accessible name of the filter group. */
+    filters: string;
+    /** The "no filter" option of a select filter. */
+    filterAll: string;
+    clearFilters: string;
+    /** Accessible name of the row actions column. */
+    actions: string;
+    edit: string;
+    save: string;
+    cancel: string;
+    delete: string;
+}
+/** Labels with the defaults filled in. Pagination texts stay partial: `Pagination` has its own defaults. */
+export type DataTableResolvedLabels = Omit<DataTableLabels, keyof PaginationLabels> & Partial<PaginationLabels>;
+export interface UseDataTableOptions<T> {
+    /** All rows, or in server mode the rows of the current page. */
+    data: T[];
+    columns: DataTableColumn<T>[];
+    /**
+     * `server` renders `data` as it is: search, filtering, sorting and pagination are
+     * left to the API, driven by the `search` / `filterValues` / `sort` / `page` callbacks.
+     */
+    mode?: 'client' | 'server';
+    /** Server mode: number of rows across all pages. */
+    total?: number;
+    /** Shows placeholder rows when there is no data yet, and dims the rows during a refetch. */
+    loading?: boolean;
+    /** Error message shown in place of the rows. */
+    error?: React.ReactNode;
+    /** Adds a retry button to the error message. */
+    onRetry?: () => void;
+    /** Stable id per row, needed for selection and editing. Defaults to `row.id`, then the index. */
+    getRowId?: (row: T, index: number) => string;
+    /** Language whose alphabet orders sorted text and filter options (`"hu"`). Defaults to the browser's. */
+    locale?: string;
+    /** Show the search box (default `true`). */
+    searchable?: boolean;
+    search?: string;
+    defaultSearch?: string;
+    onSearchChange?: (search: string) => void;
+    /** Milliseconds of typing pause before the search applies. Defaults to 300 in server mode, 0 otherwise. */
+    searchDebounce?: number;
+    /** Replaces the built-in search, which matches every term against the searchable columns. */
+    filter?: (row: T, search: string) => boolean;
+    /** Toolbar filters that are not tied to a column. Columns add theirs with `filter`. */
+    filters?: DataTableFilter<T>[];
+    filterValues?: DataTableFilterValues;
+    defaultFilterValues?: DataTableFilterValues;
+    onFilterValuesChange?: (values: DataTableFilterValues) => void;
+    sort?: DataTableSort | null;
+    defaultSort?: DataTableSort | null;
+    onSortChange?: (sort: DataTableSort | null) => void;
+    /** Paginate rows (default `true`). */
+    paginated?: boolean;
+    page?: number;
+    onPageChange?: (page: number) => void;
+    pageSize?: number;
+    defaultPageSize?: number;
+    onPageSizeChange?: (pageSize: number) => void;
+    /**
+     * Selected row ids. Passing `onSelectionChange` adds the checkbox column.
+     * Select-all covers every filtered row, or in server mode the current page.
+     */
+    selection?: string[];
+    onSelectionChange?: (selection: string[]) => void;
+    /** Makes rows clickable and keyboard-activatable (Enter). */
+    onRowClick?: (row: T) => void;
+    /** Accessible name of a row, used by row selection and clickable rows. */
+    rowLabel?: (row: T) => string;
+    /** Trailing cell of each row: icon buttons, or any content (a menu, a link). */
+    rowActions?: (row: T) => DataTableRowAction[] | React.ReactNode;
+    /** Tints a row to flag its state. */
+    rowTone?: (row: T) => DataTableRowTone | null | undefined;
+    /** Extra props for a row's `<tr>` (`className`, `style`, `data-*`). */
+    rowProps?: (row: T) => React.HTMLAttributes<HTMLTableRowElement> & Record<`data-${string}`, unknown>;
+    /**
+     * Adds an edit action to each row; columns with `edit` turn into inputs. Called
+     * with the edited row. Return a promise to keep the row open while it saves; a
+     * rejected one leaves it open for another try.
+     */
+    onRowSave?: (row: T, original: T) => void | Promise<void>;
+    /** Adds a delete action, shown while a row is edited, or on every row without `onRowSave`. */
+    onRowDelete?: (row: T) => void;
+    /** Override texts for localisation. */
+    labels?: Partial<DataTableLabels>;
+}
+/** State and derived rows of a table, returned by `useDataTable` and read by the `DataTable` parts. */
+export interface DataTableInstance<T> {
+    mode: 'client' | 'server';
+    /** Every column, hidden ones included. */
+    columns: DataTableColumn<T>[];
+    visibleColumns: DataTableColumn<T>[];
+    labels: DataTableResolvedLabels;
+    locale?: string;
+    /** Every row of `data`, before search and filters. */
+    allRows: DataTableEntry<T>[];
+    /** Rows after filters, search and sorting, across all pages. In server mode: the current page. */
+    rows: DataTableEntry<T>[];
+    /** Rows of the current page. */
+    pageRows: DataTableEntry<T>[];
+    /** Number of matching rows across all pages. */
+    count: number;
+    /** Number of rows before search and filters; in server mode the same as `count`. */
+    totalCount: number;
+    /** A search or filter is narrowing the rows. */
+    filtered: boolean;
+    /** Clears the search and every filter. */
+    reset: () => void;
+    loading: boolean;
+    /** Loading with no rows to show yet. */
+    pending: boolean;
+    error?: React.ReactNode;
+    onRetry?: () => void;
+    searchable: boolean;
+    search: string;
+    setSearch: (search: string) => void;
+    searchDebounce: number;
+    filters: DataTableResolvedFilter<T>[];
+    filterValues: DataTableFilterValues;
+    /** Sets one filter; `undefined` clears it. */
+    setFilterValue: (id: string, value: DataTableFilterValue | undefined) => void;
+    clearFilters: () => void;
+    activeFilterCount: number;
+    sort: DataTableSort | null;
+    setSort: (sort: DataTableSort | null) => void;
+    /** Cycles a column through ascending, descending and unsorted. */
+    toggleSort: (id: string) => void;
+    isSortable: (column: DataTableColumn<T>) => boolean;
+    paginated: boolean;
+    page: number;
+    pageCount: number;
+    pageSize: number;
+    setPage: (page: number) => void;
+    setPageSize: (pageSize: number) => void;
+    selectable: boolean;
+    /** Ids of the selected rows. */
+    selection: string[];
+    isSelected: (id: string) => boolean;
+    toggleRow: (id: string, selected: boolean) => void;
+    toggleAll: (selected: boolean) => void;
+    allSelected: boolean;
+    someSelected: boolean;
+    editable: boolean;
+    deletable: boolean;
+    /** Id of the row being edited. */
+    editingId: string | null;
+    /** True while `onRowSave` is pending. */
+    saving: boolean;
+    startEdit: (id: string) => void;
+    cancelEdit: () => void;
+    /** Value of a field of the row being edited, with its unsaved changes. */
+    editValue: (row: T, field: string) => unknown;
+    setEditValue: (field: string, value: unknown) => void;
+    saveEdit: () => void;
+    deleteRow: (row: T) => void;
+    onRowClick?: (row: T) => void;
+    rowLabel?: (row: T) => string;
+    rowActions?: (row: T) => DataTableRowAction[] | React.ReactNode;
+    rowTone?: (row: T) => DataTableRowTone | null | undefined;
+    rowProps?: (row: T) => React.HTMLAttributes<HTMLTableRowElement>;
+}
+export {};