@nuvui/table 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,126 @@
+"use client";
+import { supports, useDataTableView } from "./context.js";
+import { cx } from "../../utils/cx.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@nuvui/react/button";
+import { NativeSelect } from "@nuvui/react/native-select";
+//#region src/components/data-table/pagination.tsx
+const paths = {
+	first: "M11 4l-4 4 4 4M5 4v8",
+	previous: "M10 4l-4 4 4 4",
+	next: "M6 4l4 4-4 4",
+	last: "M5 4l4 4-4 4M11 4v8"
+};
+function PageButton({ icon, label, disabled, onClick }) {
+	return /* @__PURE__ */ jsx(Button, {
+		intent: "ghost",
+		size: "sm",
+		className: "nuv-data-table__page-button",
+		"aria-label": label,
+		"aria-disabled": disabled || void 0,
+		onClick: () => {
+			if (!disabled) onClick();
+		},
+		children: /* @__PURE__ */ jsx("svg", {
+			"aria-hidden": "true",
+			className: "nuv-data-table__page-icon",
+			viewBox: "0 0 16 16",
+			width: "16",
+			height: "16",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			children: /* @__PURE__ */ jsx("path", { d: paths[icon] })
+		})
+	});
+}
+const defaultSizes = [
+	10,
+	20,
+	50,
+	100
+];
+/**
+* The bar under the table: rows per page, which rows are showing out of
+* how many, and buttons for the first, previous, next and last page. It
+* needs `rowPaginationFeature`, and shows nothing without it.
+*/
+function DataTablePagination({ pageSizes = defaultSizes, className, ...props }) {
+	const { table, labels } = useDataTableView("DataTablePagination");
+	const id = useId();
+	if (!supports.pagination(table)) return null;
+	const { pageIndex, pageSize } = table.atoms.pagination.get();
+	const total = table.getRowCount();
+	const pages = Math.max(table.getPageCount(), 1);
+	const from = total === 0 ? 0 : pageIndex * pageSize + 1;
+	const to = Math.min((pageIndex + 1) * pageSize, total);
+	const sizes = pageSizes.includes(pageSize) ? pageSizes : [...pageSizes, pageSize].sort((a, b) => a - b);
+	const back = table.getCanPreviousPage();
+	const forward = table.getCanNextPage();
+	return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		"aria-label": labels.pagination,
+		className: cx("nuv-data-table__pagination", className),
+		...props,
+		children: [
+			pageSizes.length > 0 ? /* @__PURE__ */ jsxs("div", {
+				className: "nuv-data-table__page-size",
+				children: [/* @__PURE__ */ jsx("label", {
+					htmlFor: id,
+					className: "nuv-data-table__page-size-label",
+					children: labels.rowsPerPage
+				}), /* @__PURE__ */ jsx(NativeSelect, {
+					id,
+					value: pageSize,
+					onChange: (event) => table.setPageSize(Number(event.target.value)),
+					children: sizes.map((size) => /* @__PURE__ */ jsx("option", {
+						value: size,
+						children: size
+					}, size))
+				})]
+			}) : null,
+			/* @__PURE__ */ jsx("span", {
+				className: "nuv-data-table__page-range",
+				children: labels.pageRange(from, to, total)
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "nuv-data-table__pages",
+				children: [
+					/* @__PURE__ */ jsx(PageButton, {
+						icon: "first",
+						label: labels.firstPage,
+						disabled: !back,
+						onClick: () => table.firstPage()
+					}),
+					/* @__PURE__ */ jsx(PageButton, {
+						icon: "previous",
+						label: labels.previousPage,
+						disabled: !back,
+						onClick: () => table.previousPage()
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "nuv-data-table__page",
+						children: labels.page(pageIndex + 1, pages)
+					}),
+					/* @__PURE__ */ jsx(PageButton, {
+						icon: "next",
+						label: labels.nextPage,
+						disabled: !forward,
+						onClick: () => table.nextPage()
+					}),
+					/* @__PURE__ */ jsx(PageButton, {
+						icon: "last",
+						label: labels.lastPage,
+						disabled: !forward,
+						onClick: () => table.lastPage()
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { DataTablePagination };

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

@@ -0,0 +1,48 @@
+import { Row, RowData, TableFeatures } from "@tanstack/react-table";
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/data-table/selection.d.ts
+export interface DataTableSelectAllProps {
+  className?: string;
+}
+/**
+ * The checkbox in the heading of the selection column. In a table with
+ * pages it selects the rows on the page. Without pages, all of them. It
+ * shows a dash while some are selected and not all.
+ */
+export declare function DataTableSelectAll({ className }: DataTableSelectAllProps): import("react").JSX.Element | null;
+export interface DataTableSelectRowProps<TFeatures extends TableFeatures = any, TData extends RowData = any> {
+  /** The row. Inside a column's `cell` it's found without being passed. */
+  row?: Row<TFeatures, TData>;
+  className?: string;
+}
+/**
+ * A row's checkbox. Shift and a click selects every row from the last one
+ * clicked to this one.
+ */
+export declare function DataTableSelectRow<TFeatures extends TableFeatures, TData extends RowData>({ row: given, className }: DataTableSelectRowProps<TFeatures, TData>): import("react").JSX.Element | null;
+export interface DataTableExpandToggleProps<TFeatures extends TableFeatures = any, TData extends RowData = any> {
+  /** The row. Inside a column's `cell` it's found without being passed. */
+  row?: Row<TFeatures, TData>;
+  className?: string;
+}
+/**
+ * The button that opens and closes a row: its detail panel, or the rows
+ * under it. In a tree it's indented by how deep the row is, and a row with
+ * nothing under it gets a gap of the same width, so the text after it
+ * lines up.
+ */
+export declare function DataTableExpandToggle<TFeatures extends TableFeatures, TData extends RowData>({ row: given, className }: DataTableExpandToggleProps<TFeatures, TData>): import("react").JSX.Element;
+export interface DataTableBulkActionsProps<TFeatures extends TableFeatures = any, TData extends RowData = any> extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+  /**
+   * The actions, usually buttons. As a function it's given the selected
+   * rows that are loaded. With a server doing the paging those are only
+   * the ones on this page: use `table.getSelectedRowIds()` for all of them.
+   */
+  children?: ReactNode | ((rows: Row<TFeatures, TData>[]) => ReactNode);
+}
+/**
+ * A bar that's there while rows are selected. It says how many, holds the
+ * actions you give it, and has a button that clears the selection.
+ */
+export declare function DataTableBulkActions<TFeatures extends TableFeatures, TData extends RowData>({ children, className, ...props }: DataTableBulkActionsProps<TFeatures, TData>): import("react").JSX.Element | null;
+//#endregion

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

@@ -0,0 +1,153 @@
+"use client";
+import { canExpand, expanded, supports, useCell, useDataTableView } from "./context.js";
+import { cx } from "../../utils/cx.js";
+import { useShiftClick } from "../../utils/use-shift-click.js";
+import { useLayoutEffect, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@nuvui/react/button";
+import { Checkbox } from "@nuvui/react/checkbox";
+//#region src/components/data-table/selection.tsx
+const keepText = (event) => {
+	if (event.shiftKey) event.preventDefault();
+};
+/**
+* The checkbox in the heading of the selection column. In a table with
+* pages it selects the rows on the page. Without pages, all of them. It
+* shows a dash while some are selected and not all.
+*/
+function DataTableSelectAll({ className }) {
+	const { table, labels } = useDataTableView("DataTableSelectAll");
+	if (!supports.selection(table)) return null;
+	const paged = supports.pagination(table);
+	const all = paged ? table.getIsAllPageRowsSelected() : table.getIsAllRowsSelected();
+	const some = paged ? table.getIsSomePageRowsSelected() : table.getIsSomeRowsSelected();
+	const none = table.getRowModel().rows.length === 0;
+	return /* @__PURE__ */ jsx(Checkbox, {
+		className,
+		"data-nuv-select-all": "",
+		"aria-label": paged ? labels.selectPage : labels.selectAll,
+		disabled: none,
+		checked: all ? true : some ? "indeterminate" : false,
+		onClick: () => paged ? table.toggleAllPageRowsSelected(!all) : table.toggleAllRowsSelected(!all)
+	});
+}
+/**
+* A row's checkbox. Shift and a click selects every row from the last one
+* clicked to this one.
+*/
+function DataTableSelectRow({ row: given, className }) {
+	const { labels, rowName } = useDataTableView("DataTableSelectRow");
+	const click = useShiftClick();
+	const cell = useCell();
+	const row = given ?? cell?.row;
+	if (!row) throw new Error("DataTableSelectRow needs a row, or to be inside a column's cell.");
+	if (typeof row.getIsSelected !== "function") return null;
+	const checked = row.getIsSelected();
+	return /* @__PURE__ */ jsx(Checkbox, {
+		className,
+		"aria-label": labels.selectRow(rowName(row)),
+		disabled: !row.getCanSelect(),
+		checked: checked ? true : row.getIsSomeSelected() ? "indeterminate" : false,
+		onMouseDown: keepText,
+		...click.props,
+		onClick: (event) => row.getToggleSelectedHandler()({
+			target: { checked: !checked },
+			shiftKey: click.shift(event)
+		})
+	});
+}
+/**
+* The button that opens and closes a row: its detail panel, or the rows
+* under it. In a tree it's indented by how deep the row is, and a row with
+* nothing under it gets a gap of the same width, so the text after it
+* lines up.
+*/
+function DataTableExpandToggle({ row: given, className }) {
+	const { labels, rowName } = useDataTableView("DataTableExpandToggle");
+	const cell = useCell();
+	const row = given ?? cell?.row;
+	if (!row) throw new Error("DataTableExpandToggle needs a row, or to be inside a column's cell.");
+	const indent = { "--nuv-data-table-depth": row.depth };
+	if (!canExpand(row)) return /* @__PURE__ */ jsx("span", {
+		className: cx("nuv-data-table__expand-gap", className),
+		style: indent
+	});
+	const open = expanded(row);
+	const name = rowName(row);
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: cx("nuv-data-table__expand", className),
+		style: indent,
+		"aria-expanded": open,
+		"aria-label": open ? labels.collapseRow(name) : labels.expandRow(name),
+		onClick: row.getToggleExpandedHandler(),
+		children: /* @__PURE__ */ jsx("svg", {
+			"aria-hidden": "true",
+			className: "nuv-data-table__expand-icon",
+			viewBox: "0 0 16 16",
+			width: "16",
+			height: "16",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			children: /* @__PURE__ */ jsx("path", { d: "M6 4l4 4-4 4" })
+		})
+	});
+}
+/**
+* A bar that's there while rows are selected. It says how many, holds the
+* actions you give it, and has a button that clears the selection.
+*/
+function DataTableBulkActions({ children, className, ...props }) {
+	const { table, labels } = useDataTableView("DataTableBulkActions");
+	const bar = useRef(null);
+	const heldFocus = useRef(false);
+	const available = supports.selection(table);
+	const count = available ? table.getSelectedRowIds().length : 0;
+	useLayoutEffect(() => {
+		if (count > 0 || !heldFocus.current) return;
+		heldFocus.current = false;
+		const active = document.activeElement;
+		if (active && active !== document.body) return;
+		const root = bar.current?.closest(".nuv-data-table");
+		const target = root?.querySelector("[data-nuv-select-all]:not(:disabled)") ?? root?.querySelector(".nuv-table-container");
+		if (!target) return;
+		if (!target.hasAttribute("tabindex") && target.tagName === "DIV") target.setAttribute("tabindex", "-1");
+		target.focus();
+	}, [count]);
+	if (!available) return null;
+	return /* @__PURE__ */ jsx("div", {
+		ref: bar,
+		role: "group",
+		"aria-label": labels.bulkActions,
+		className: cx("nuv-data-table__bulk", className),
+		hidden: count === 0,
+		onFocus: () => {
+			heldFocus.current = true;
+		},
+		onBlur: (event) => {
+			if (event.relatedTarget) heldFocus.current = false;
+		},
+		...props,
+		children: count > 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "nuv-data-table__bulk-count",
+				children: labels.selected(count)
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "nuv-data-table__bulk-actions",
+				children: typeof children === "function" ? children(table.getSelectedRowModel().rows) : children
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				intent: "ghost",
+				size: "sm",
+				onClick: () => table.resetRowSelection(true),
+				children: labels.clearSelection
+			})
+		] }) : null
+	});
+}
+//#endregion
+export { DataTableBulkActions, DataTableExpandToggle, DataTableSelectAll, DataTableSelectRow };

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

@@ -0,0 +1,51 @@
+import { Column, RowData, TableFeatures } from "@tanstack/react-table";
+import { HTMLAttributes } from "react";
+import { InputProps } from "@nuvui/react/input";
+//#region src/components/data-table/toolbar.d.ts
+export interface DataTableFilterOwnProps {
+  /**
+   * How long to wait after the last keystroke before filtering, in
+   * milliseconds. Set it when each change asks a server.
+   * @default 0
+   */
+  debounce?: number;
+}
+export interface DataTableFilterProps extends DataTableFilterOwnProps, Omit<InputProps, "value" | "defaultValue" | "onChange" | "type"> {}
+/**
+ * A search field over every column that can be searched. It's the table's
+ * global filter. It needs `globalFilteringFeature`, and shows nothing
+ * without it.
+ */
+export declare function DataTableFilter({ debounce, className, ...props }: DataTableFilterProps): import("react").JSX.Element | null;
+export interface DataTableColumnFilterProps<TFeatures extends TableFeatures = any, TData extends RowData = any> extends Omit<InputProps, "value" | "defaultValue" | "onChange"> {
+  /**
+   * The column to filter. Inside a column's `header` it's found without
+   * being passed.
+   */
+  column?: Column<TFeatures, TData, any>;
+  /** @default 0 */
+  debounce?: number;
+}
+/**
+ * A text field that filters one column. For a filter that isn't text, such
+ * as a select of statuses, use any control and call
+ * `column.setFilterValue`.
+ */
+export declare function DataTableColumnFilter<TFeatures extends TableFeatures, TData extends RowData>({ column: given, debounce, className, ...props }: DataTableColumnFilterProps<TFeatures, TData>): import("react").JSX.Element | null;
+export interface DataTableColumnChooserProps {
+  className?: string;
+}
+/**
+ * A button that opens a list of the columns, each with a tick that shows
+ * or hides it. Columns with `enableHiding: false` aren't in the list. It
+ * needs `columnVisibilityFeature`, and shows nothing without it.
+ */
+export declare function DataTableColumnChooser({ className }: DataTableColumnChooserProps): import("react").JSX.Element | null;
+export type DataTableToolbarProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * The row of controls above the table. With no children it holds the
+ * search field and the column chooser, each only if the table has the
+ * feature for it, and is left out when it has neither.
+ */
+export declare function DataTableToolbar({ className, children, ...props }: DataTableToolbarProps): import("react").JSX.Element | null;
+//#endregion

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

@@ -0,0 +1,123 @@
+"use client";
+import { canHide, columnLabel, supports, useDataTableView, useHeader } from "./context.js";
+import { cx } from "../../utils/cx.js";
+import { useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@nuvui/react/button";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuTrigger } from "@nuvui/react/dropdown-menu";
+import { Input } from "@nuvui/react/input";
+//#region src/components/data-table/toolbar.tsx
+function useDebounced(value, commit, debounce) {
+	const [text, setText] = useState(value);
+	const sent = useRef(value);
+	const timer = useRef(void 0);
+	useEffect(() => {
+		if (value !== sent.current) {
+			sent.current = value;
+			setText(value);
+		}
+	}, [value]);
+	useEffect(() => () => clearTimeout(timer.current), []);
+	const change = (next) => {
+		setText(next);
+		clearTimeout(timer.current);
+		const send = () => {
+			sent.current = next;
+			commit(next);
+		};
+		if (debounce > 0) timer.current = setTimeout(send, debounce);
+		else send();
+	};
+	return [text, change];
+}
+/**
+* A search field over every column that can be searched. It's the table's
+* global filter. It needs `globalFilteringFeature`, and shows nothing
+* without it.
+*/
+function DataTableFilter({ debounce = 0, className, ...props }) {
+	const { table, labels } = useDataTableView("DataTableFilter");
+	const available = supports.globalFilter(table);
+	const [text, change] = useDebounced(available ? String(table.atoms.globalFilter.get() ?? "") : "", (next) => table.setGlobalFilter(next), debounce);
+	if (!available) return null;
+	return /* @__PURE__ */ jsx(Input, {
+		type: "search",
+		"aria-label": labels.search,
+		placeholder: labels.search,
+		className: cx("nuv-data-table__filter", className),
+		...props,
+		value: text,
+		onChange: (event) => change(event.target.value)
+	});
+}
+/**
+* A text field that filters one column. For a filter that isn't text, such
+* as a select of statuses, use any control and call
+* `column.setFilterValue`.
+*/
+function DataTableColumnFilter({ column: given, debounce = 0, className, ...props }) {
+	const { labels } = useDataTableView("DataTableColumnFilter");
+	const header = useHeader();
+	const column = given ?? header?.column;
+	if (!column) throw new Error("DataTableColumnFilter needs a column, or to be inside a column's header.");
+	const available = typeof column.getCanFilter === "function" && column.getCanFilter();
+	const [text, change] = useDebounced(available ? String(column.getFilterValue() ?? "") : "", (next) => column.setFilterValue(next === "" ? void 0 : next), debounce);
+	if (!available) return null;
+	return /* @__PURE__ */ jsx(Input, {
+		type: "search",
+		"aria-label": labels.filterColumn(columnLabel(column)),
+		className: cx("nuv-data-table__column-filter", className),
+		...props,
+		value: text,
+		onChange: (event) => change(event.target.value)
+	});
+}
+/**
+* A button that opens a list of the columns, each with a tick that shows
+* or hides it. Columns with `enableHiding: false` aren't in the list. It
+* needs `columnVisibilityFeature`, and shows nothing without it.
+*/
+function DataTableColumnChooser({ className }) {
+	const { table, labels } = useDataTableView("DataTableColumnChooser");
+	if (!supports.visibility(table)) return null;
+	const columns = table.getAllLeafColumns().filter(canHide);
+	if (columns.length === 0) return null;
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Button, {
+			intent: "secondary",
+			size: "sm",
+			className: cx("nuv-data-table__chooser", className),
+			children: labels.columns
+		})
+	}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+		align: "end",
+		children: columns.map((column) => /* @__PURE__ */ jsx(DropdownMenuCheckboxItem, {
+			checked: column.getIsVisible(),
+			onCheckedChange: (checked) => column.toggleVisibility(checked),
+			onSelect: (event) => event.preventDefault(),
+			children: columnLabel(column)
+		}, column.id))
+	})] });
+}
+/**
+* The row of controls above the table. With no children it holds the
+* search field and the column chooser, each only if the table has the
+* feature for it, and is left out when it has neither.
+*/
+function DataTableToolbar({ className, children, ...props }) {
+	const { table } = useDataTableView("DataTableToolbar");
+	const standard = supports.globalFilter(table) || supports.visibility(table) && table.getAllLeafColumns().some(canHide);
+	if (children == null && !standard) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("nuv-data-table__toolbar", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(DataTableFilter, {}),
+			/* @__PURE__ */ jsx("span", { className: "nuv-data-table__toolbar-gap" }),
+			/* @__PURE__ */ jsx(DataTableColumnChooser, {})
+		] })
+	});
+}
+//#endregion
+export { DataTableColumnChooser, DataTableColumnFilter, DataTableFilter, DataTableToolbar };

package/dist/components/data-table/use-data-table-request.d.ts

@@ -0,0 +1,44 @@
+import { ColumnFiltersState, PaginationState, SortingState, Updater } from "@tanstack/react-table";
+//#region src/components/data-table/use-data-table-request.d.ts
+/** What a server is asked for: which page, in what order, filtered how. */
+export interface DataTableRequest {
+  pagination: PaginationState;
+  sorting: SortingState;
+  columnFilters: ColumnFiltersState;
+  globalFilter: string;
+}
+export interface DataTableRequestOptions {
+  state: DataTableRequest;
+  onPaginationChange: (updater: Updater<PaginationState>) => void;
+  onSortingChange: (updater: Updater<SortingState>) => void;
+  onColumnFiltersChange: (updater: Updater<ColumnFiltersState>) => void;
+  onGlobalFilterChange: (updater: Updater<string>) => void;
+  manualPagination: true;
+  manualSorting: true;
+  manualFiltering: true;
+}
+/**
+ * For a table whose sorting, filtering and paging are done by a server.
+ *
+ * It holds what the table is asking for, and returns it with the options
+ * that make the table ask and not do the work itself. Spread the options
+ * into `useDataTable`, fetch with the request, and pass the rows you get
+ * back as `data` with the total as `rowCount`.
+ *
+ * A new sort or filter goes back to the first page. TanStack does that
+ * itself when it does the paging, and not when a server does.
+ *
+ * @example
+ * const [request, options] = useDataTableRequest({
+ *   pagination: { pageIndex: 0, pageSize: 20 },
+ * });
+ * const page = useQuery({ queryKey: ["people", request], ... });
+ * const table = useDataTable({
+ *   columns,
+ *   data: page.data?.rows ?? none,
+ *   rowCount: page.data?.total,
+ *   ...options,
+ * });
+ */
+export declare function useDataTableRequest(initial?: Partial<DataTableRequest>): [request: DataTableRequest, options: DataTableRequestOptions];
+//#endregion

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

@@ -0,0 +1,72 @@
+"use client";
+import { functionalUpdate } from "@tanstack/react-table";
+import { useMemo, useState } from "react";
+//#region src/components/data-table/use-data-table-request.ts
+const firstPage = (request) => ({
+	...request,
+	pagination: {
+		...request.pagination,
+		pageIndex: 0
+	}
+});
+/**
+* For a table whose sorting, filtering and paging are done by a server.
+*
+* It holds what the table is asking for, and returns it with the options
+* that make the table ask and not do the work itself. Spread the options
+* into `useDataTable`, fetch with the request, and pass the rows you get
+* back as `data` with the total as `rowCount`.
+*
+* A new sort or filter goes back to the first page. TanStack does that
+* itself when it does the paging, and not when a server does.
+*
+* @example
+* const [request, options] = useDataTableRequest({
+*   pagination: { pageIndex: 0, pageSize: 20 },
+* });
+* const page = useQuery({ queryKey: ["people", request], ... });
+* const table = useDataTable({
+*   columns,
+*   data: page.data?.rows ?? none,
+*   rowCount: page.data?.total,
+*   ...options,
+* });
+*/
+function useDataTableRequest(initial = {}) {
+	const [request, setRequest] = useState(() => ({
+		pagination: {
+			pageIndex: 0,
+			pageSize: 10
+		},
+		sorting: [],
+		columnFilters: [],
+		globalFilter: "",
+		...initial
+	}));
+	return [request, {
+		state: request,
+		...useMemo(() => ({
+			onPaginationChange: (updater) => setRequest((old) => ({
+				...old,
+				pagination: functionalUpdate(updater, old.pagination)
+			})),
+			onSortingChange: (updater) => setRequest((old) => firstPage({
+				...old,
+				sorting: functionalUpdate(updater, old.sorting)
+			})),
+			onColumnFiltersChange: (updater) => setRequest((old) => firstPage({
+				...old,
+				columnFilters: functionalUpdate(updater, old.columnFilters)
+			})),
+			onGlobalFilterChange: (updater) => setRequest((old) => firstPage({
+				...old,
+				globalFilter: functionalUpdate(updater, old.globalFilter) ?? ""
+			})),
+			manualPagination: true,
+			manualSorting: true,
+			manualFiltering: true
+		}), [])
+	}];
+}
+//#endregion
+export { useDataTableRequest };

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

@@ -0,0 +1,2 @@
+import { Table, TableBody, TableBodyProps, TableCaption, TableCaptionOwnProps, TableCaptionProps, TableCell, TableCellOwnProps, TableCellProps, TableContainer, TableContainerProps, TableFooter, TableFooterProps, TableHead, TableHeadProps, TableHeader, TableHeaderProps, TableOwnProps, TableProps, TableRow, TableRowOwnProps, TableRowProps } from "./table.js";
+export { Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionOwnProps, type TableCaptionProps, TableCell, type TableCellOwnProps, type TableCellProps, TableContainer, type TableContainerProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableOwnProps, type TableProps, TableRow, type TableRowOwnProps, type TableRowProps };

package/dist/components/table/index.js

@@ -0,0 +1,2 @@
+import { Table, TableBody, TableCaption, TableCell, TableContainer, TableFooter, TableHead, TableHeader, TableRow } from "./table.js";
+export { Table, TableBody, TableCaption, TableCell, TableContainer, TableFooter, TableHead, TableHeader, TableRow };