@nuvui/table 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,103 @@
+"use client";
+import { tableContexts } from "./context.js";
+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 { createTableHook } from "@tanstack/react-table";
+import { useDirection } from "@nuvui/react/direction";
+//#region src/components/data-table/create-data-table-hook.tsx
+const tableComponents = {
+	Toolbar: DataTableToolbar,
+	Filter: DataTableFilter,
+	ColumnChooser: DataTableColumnChooser,
+	BulkActions: DataTableBulkActions,
+	Pagination: DataTablePagination
+};
+const headerComponents = {
+	ColumnHeader: DataTableColumnHeader,
+	ColumnFilter: DataTableColumnFilter,
+	SelectAll: DataTableSelectAll
+};
+const cellComponents = {
+	SelectRow: DataTableSelectRow,
+	ExpandToggle: DataTableExpandToggle
+};
+const control = {
+	enableSorting: false,
+	enableHiding: false,
+	enableResizing: false,
+	enableColumnFilter: false,
+	enableGlobalFilter: false,
+	size: 48,
+	meta: { control: true }
+};
+/**
+* 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`.
+*/
+function createDataTableHook(options) {
+	const hook = createTableHook({
+		...options,
+		...tableContexts,
+		tableComponents: {
+			...tableComponents,
+			...options.tableComponents
+		},
+		cellComponents: {
+			...cellComponents,
+			...options.cellComponents
+		},
+		headerComponents: {
+			...headerComponents,
+			...options.headerComponents
+		}
+	});
+	function useDataTable(tableOptions, selector) {
+		const columnResizeDirection = useDirection();
+		return hook.useAppTable({
+			columnResizeDirection,
+			...tableOptions
+		}, selector);
+	}
+	function createColumnHelper() {
+		const helper = hook.createAppColumnHelper();
+		return Object.assign(helper, {
+			select: (column = {}) => helper.display({
+				id: "select",
+				header: DataTableSelectAll,
+				cell: DataTableSelectRow,
+				...control,
+				...column
+			}),
+			expand: (column = {}) => helper.display({
+				id: "expand",
+				cell: DataTableExpandToggle,
+				...control,
+				...column
+			})
+		});
+	}
+	return {
+		/** The features object that was passed in. */
+		features: hook.appFeatures,
+		useDataTable,
+		createColumnHelper,
+		useTableContext: hook.useTableContext,
+		useHeaderContext: hook.useHeaderContext,
+		useCellContext: hook.useCellContext
+	};
+}
+//#endregion
+export { createDataTableHook };

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

@@ -0,0 +1,76 @@
+import { DataTableLabels } from "./labels.js";
+import { DataTableContentOwnProps, DataTableName } from "./content.js";
+import { ReactTable, Row, RowData, TableFeatures } from "@tanstack/react-table";
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/data-table/data-table.d.ts
+export interface DataTableRootOwnProps<TFeatures extends TableFeatures = any, TData extends RowData = any> {
+  /** The table, from `useDataTable` or from TanStack's own `useTable`. */
+  table: ReactTable<TFeatures, TData, any>;
+  /** Text the table writes itself, to change or translate. */
+  labels?: Partial<DataTableLabels>;
+  /**
+   * The id of the column that names each row, such as a person's name. Its
+   * cells become the row's heading, and the row's checkbox and expand
+   * button are named after it: "Select Ada Lovelace".
+   */
+  rowHeader?: string;
+  /**
+   * A name for a row, where no one column gives it. It's used the way
+   * `rowHeader` is, for the names of the row's controls.
+   */
+  getRowLabel?: (row: Row<TFeatures, TData>) => string;
+  /**
+   * Rows are on their way. With none yet, the table shows placeholders.
+   * With some, it keeps them and marks itself busy.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * The rows couldn't be loaded. A message of your own, or `true` for the
+   * standard one. It's shown in place of the rows.
+   */
+  error?: ReactNode;
+  /** With `error`, adds a button that calls this. */
+  onRetry?: () => void;
+}
+export interface DataTableRootProps<TFeatures extends TableFeatures, TData extends RowData> extends DataTableRootOwnProps<TFeatures, TData>, HTMLAttributes<HTMLDivElement> {}
+/**
+ * What every part of a data table sits in. It takes the table and hands it
+ * to the parts, and reads out what changes for screen readers.
+ *
+ * `DataTable` is this with the usual parts already inside. Use this one to
+ * arrange them yourself.
+ */
+export declare function DataTableRoot<TFeatures extends TableFeatures, TData extends RowData>({ table: given, labels, rowHeader, getRowLabel, loading, error, onRetry, className, children, ...props }: DataTableRootProps<TFeatures, TData>): import("react").JSX.Element;
+export interface DataTableOwnProps<TFeatures extends TableFeatures = any, TData extends RowData = any> {
+  /**
+   * What goes above the table. Left out, it's the search field and the
+   * column chooser, where the table has those features. `false` for
+   * nothing.
+   */
+  toolbar?: ReactNode;
+  /**
+   * Actions for the selected rows. They show in a bar above the table
+   * while anything is selected. As a function it's given the selected
+   * rows that are loaded.
+   */
+  bulkActions?: ReactNode | ((rows: Row<TFeatures, TData>[]) => ReactNode);
+  /**
+   * What goes under the table. Left out, it's the pagination bar, where
+   * the table has pages. `false` for nothing.
+   */
+  pagination?: ReactNode;
+  /**
+   * The choices for rows per page.
+   * @default [10, 20, 50, 100]
+   */
+  pageSizes?: number[];
+}
+export type DataTableProps<TFeatures extends TableFeatures, TData extends RowData> = DataTableRootOwnProps<TFeatures, TData> & DataTableContentOwnProps<TFeatures, TData> & DataTableOwnProps<TFeatures, TData> & DataTableName;
+/**
+ * A finished table from a TanStack table: headings that sort, rows, a
+ * search field, a column chooser, checkboxes and a pagination bar, each
+ * one there if the table was made with the feature for it.
+ */
+export declare function DataTable<TFeatures extends TableFeatures, TData extends RowData>(props: DataTableProps<TFeatures, TData>): import("react").JSX.Element;
+//#endregion

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

@@ -0,0 +1,178 @@
+"use client";
+import { ViewContext, columnLabel, supports, tableContexts, useDataTableView } from "./context.js";
+import { cx } from "../../utils/cx.js";
+import { DataTablePagination } from "./pagination.js";
+import { DataTableBulkActions } from "./selection.js";
+import { DataTableToolbar } from "./toolbar.js";
+import { DataTableContent } from "./content.js";
+import { defaultLabels } from "./labels.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/data-table/data-table.tsx
+function Announcer() {
+	const { table, labels, loading } = useDataTableView("DataTable");
+	const [message, setMessage] = useState("");
+	const sorting = table.atoms.sorting?.get();
+	const columnFilters = table.atoms.columnFilters?.get();
+	const globalFilter = table.atoms.globalFilter?.get();
+	const pageIndex = table.atoms.pagination?.get().pageIndex;
+	const selection = supports.selection(table) ? table.getSelectedRowIds().length : 0;
+	const seen = useRef({
+		sorting,
+		columnFilters,
+		globalFilter,
+		pageIndex,
+		selection
+	});
+	const pending = useRef(null);
+	const asked = useRef(null);
+	const { data } = table.options;
+	const manualFilter = table.options.manualFiltering === true;
+	const manualSort = table.options.manualSorting === true;
+	const manualPage = table.options.manualPagination === true;
+	useEffect(() => {
+		const before = seen.current;
+		seen.current = {
+			sorting,
+			columnFilters,
+			globalFilter,
+			pageIndex,
+			selection
+		};
+		let fresh = true;
+		if (before.columnFilters !== columnFilters || before.globalFilter !== globalFilter) pending.current = "filter";
+		else if (before.sorting !== sorting) pending.current = "sort";
+		else if (before.pageIndex !== pageIndex) pending.current = "page";
+		else if (before.selection !== selection) pending.current = "selection";
+		else fresh = false;
+		const change = pending.current;
+		if (!change) return;
+		if (change === "filter" && manualFilter || change === "sort" && manualSort || change === "page" && manualPage) {
+			if (fresh) asked.current = {
+				data,
+				loaded: false
+			};
+			if (asked.current && loading) asked.current.loaded = true;
+			if (!(asked.current !== null && !loading && (asked.current.loaded || asked.current.data !== data))) return;
+			asked.current = null;
+		} else if (loading) return;
+		pending.current = null;
+		let text = "";
+		if (change === "filter") text = labels.results(supports.pagination(table) ? table.getRowCount() : table.getRowModel().rows.length);
+		else if (change === "sort") {
+			const first = sorting?.[0];
+			const column = first ? table.getColumn(first.id) : void 0;
+			if (!first || !column) text = labels.sortCleared;
+			else if (first.desc) text = labels.sortedDescending(columnLabel(column));
+			else text = labels.sortedAscending(columnLabel(column));
+		} else if (change === "page") text = labels.page((pageIndex ?? 0) + 1, Math.max(table.getPageCount(), 1));
+		else text = labels.selected(selection);
+		setMessage((last) => last === text ? `${text}\u00a0` : text);
+	}, [
+		table,
+		labels,
+		loading,
+		data,
+		manualFilter,
+		manualSort,
+		manualPage,
+		sorting,
+		columnFilters,
+		globalFilter,
+		pageIndex,
+		selection
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		role: "status",
+		"aria-live": "polite",
+		"aria-atomic": "true",
+		className: "nuv-data-table__status",
+		children: message
+	});
+}
+function Provide({ table, labels: given, rowHeader, getRowLabel, loading, error, onRetry, children }) {
+	const labels = useMemo(() => ({
+		...defaultLabels,
+		...given
+	}), [given]);
+	const view = {
+		table,
+		labels,
+		rowHeader,
+		loading,
+		error,
+		onRetry,
+		rowName(row) {
+			if (getRowLabel) return getRowLabel(row);
+			if (rowHeader) return String(row.getValue(rowHeader) ?? "");
+			const index = row.getDisplayIndex();
+			return labels.rowName((index === -1 ? row.index : index) + 1);
+		}
+	};
+	return /* @__PURE__ */ jsx(tableContexts.tableContext.Provider, {
+		value: table,
+		children: /* @__PURE__ */ jsx(ViewContext.Provider, {
+			value: view,
+			children
+		})
+	});
+}
+/**
+* What every part of a data table sits in. It takes the table and hands it
+* to the parts, and reads out what changes for screen readers.
+*
+* `DataTable` is this with the usual parts already inside. Use this one to
+* arrange them yourself.
+*/
+function DataTableRoot({ table: given, labels, rowHeader, getRowLabel, loading = false, error, onRetry, className, children, ...props }) {
+	const table = given;
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("nuv-data-table", className),
+		"data-loading": loading ? "" : void 0,
+		...props,
+		children: /* @__PURE__ */ jsx(table.Subscribe, {
+			selector: (state) => state,
+			children: () => /* @__PURE__ */ jsxs(Provide, {
+				table,
+				labels,
+				rowHeader,
+				getRowLabel,
+				loading,
+				error,
+				onRetry,
+				children: [children, /* @__PURE__ */ jsx(Announcer, {})]
+			})
+		})
+	});
+}
+/**
+* A finished table from a TanStack table: headings that sort, rows, a
+* search field, a column chooser, checkboxes and a pagination bar, each
+* one there if the table was made with the feature for it.
+*/
+function DataTable(props) {
+	return /* @__PURE__ */ jsx(DataTableLayout, {
+		...props,
+		content: (content) => /* @__PURE__ */ jsx(DataTableContent, { ...content })
+	});
+}
+function DataTableLayout({ content: renderContent, table, labels, rowHeader, getRowLabel, loading, error, onRetry, className, toolbar, bulkActions, pagination, pageSizes, ...content }) {
+	return /* @__PURE__ */ jsxs(DataTableRoot, {
+		table,
+		labels,
+		rowHeader,
+		getRowLabel,
+		loading,
+		error,
+		onRetry,
+		className,
+		children: [
+			toolbar === void 0 ? /* @__PURE__ */ jsx(DataTableToolbar, {}) : toolbar,
+			bulkActions !== void 0 ? /* @__PURE__ */ jsx(DataTableBulkActions, { children: bulkActions }) : null,
+			renderContent(content),
+			pagination === void 0 ? /* @__PURE__ */ jsx(DataTablePagination, { pageSizes }) : pagination
+		]
+	});
+}
+//#endregion
+export { DataTable, DataTableLayout, DataTableRoot };

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

@@ -0,0 +1,23 @@
+import "./context.js";
+import { Column, RowData, TableFeatures } from "@tanstack/react-table";
+import { ReactNode } from "react";
+//#region src/components/data-table/header.d.ts
+export interface DataTableColumnHeaderProps<TFeatures extends TableFeatures = any, TData extends RowData = any> {
+  /**
+   * The column this is the heading of. Inside a column's `header` it's
+   * found without being passed.
+   */
+  column?: Column<TFeatures, TData, any>;
+  /** The heading. Without it, the column's own label is used. */
+  children?: ReactNode;
+  className?: string;
+}
+/**
+ * A column's heading. When the column can be sorted it's a button that
+ * sorts by it: ascending, then descending, then not at all. Shift and a
+ * click adds the column to a sort by several.
+ *
+ * A column whose `header` is a string gets this without asking.
+ */
+export declare function DataTableColumnHeader<TFeatures extends TableFeatures, TData extends RowData>({ column: given, children, className }: DataTableColumnHeaderProps<TFeatures, TData>): import("react").JSX.Element;
+//#endregion

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

@@ -0,0 +1,120 @@
+"use client";
+import { canSort, columnLabel, sorted, useDataTableView, useHeader } from "./context.js";
+import { cx } from "../../utils/cx.js";
+import { useShiftClick } from "../../utils/use-shift-click.js";
+import { useDirection } from "@nuvui/react/direction";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/data-table/header.tsx
+function SortIcon({ direction }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		"aria-hidden": "true",
+		className: "nuv-data-table__sort-icon",
+		"data-direction": direction || void 0,
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		children: [direction !== "desc" ? /* @__PURE__ */ jsx("path", { d: "M5 6.5l3-3 3 3" }) : null, direction !== "asc" ? /* @__PURE__ */ jsx("path", { d: "M5 9.5l3 3 3-3" }) : null]
+	});
+}
+/**
+* A column's heading. When the column can be sorted it's a button that
+* sorts by it: ascending, then descending, then not at all. Shift and a
+* click adds the column to a sort by several.
+*
+* A column whose `header` is a string gets this without asking.
+*/
+function DataTableColumnHeader({ column: given, children, className }) {
+	useDataTableView("DataTableColumnHeader");
+	const click = useShiftClick();
+	const header = useHeader();
+	const column = given ?? header?.column;
+	if (!column) throw new Error("DataTableColumnHeader needs a column, or to be inside a column's header.");
+	const content = children ?? columnLabel(column);
+	if (!canSort(column)) return /* @__PURE__ */ jsx("span", {
+		className: cx("nuv-data-table__heading", className),
+		children: content
+	});
+	const direction = sorted(column);
+	const index = column.getSortIndex();
+	const several = (column.table.atoms.sorting?.get().length ?? 0) > 1;
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: cx("nuv-data-table__sort", className),
+		"data-sorted": direction || void 0,
+		...click.props,
+		onClick: (event) => {
+			const shiftKey = click.shift(event);
+			column.getToggleSortingHandler()?.(shiftKey === event.shiftKey ? event : {
+				...event,
+				shiftKey
+			});
+		},
+		onMouseDown: (event) => {
+			if (event.shiftKey) event.preventDefault();
+		},
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "nuv-data-table__heading",
+				children: content
+			}),
+			/* @__PURE__ */ jsx(SortIcon, { direction }),
+			direction && several ? /* @__PURE__ */ jsx("span", {
+				className: "nuv-data-table__sort-index",
+				"aria-hidden": "true",
+				children: index + 1
+			}) : null
+		]
+	});
+}
+const step = 16;
+const bigStep = 64;
+/**
+* The grip at the edge of a heading that changes the column's width. The
+* data table puts one on every column that can be resized.
+*/
+function DataTableResizeHandle({ header }) {
+	const { labels } = useDataTableView("DataTableResizeHandle");
+	const direction = useDirection();
+	const { column } = header;
+	const size = column.getSize();
+	const min = column.columnDef.minSize ?? 20;
+	const max = column.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER;
+	const resize = (next) => column.table.setColumnSizing((old) => ({
+		...old,
+		[column.id]: Math.min(Math.max(next, min), max)
+	}));
+	const onKeyDown = (event) => {
+		const amount = event.shiftKey ? bigStep : step;
+		const wider = direction === "rtl" ? "ArrowLeft" : "ArrowRight";
+		const narrower = direction === "rtl" ? "ArrowRight" : "ArrowLeft";
+		if (event.key === wider) resize(size + amount);
+		else if (event.key === narrower) resize(size - amount);
+		else if (event.key === "Home") resize(min);
+		else if (event.key === "Enter") column.resetSize();
+		else return;
+		event.preventDefault();
+	};
+	const start = header.getResizeHandler();
+	return /* @__PURE__ */ jsx("div", {
+		role: "separator",
+		"aria-orientation": "vertical",
+		"aria-label": labels.resizeColumn(columnLabel(column)),
+		"aria-valuenow": Math.round(size),
+		"aria-valuemin": min,
+		"aria-valuemax": max === Number.MAX_SAFE_INTEGER ? void 0 : max,
+		tabIndex: 0,
+		className: "nuv-data-table__resize",
+		"data-resizing": column.getIsResizing() ? "" : void 0,
+		onMouseDown: start,
+		onTouchStart: start,
+		onDoubleClick: () => column.resetSize(),
+		onKeyDown
+	});
+}
+//#endregion
+export { DataTableColumnHeader, DataTableResizeHandle };

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

@@ -0,0 +1,11 @@
+import { DataTableLabels, defaultLabels } from "./labels.js";
+import { DataTableColumnMeta } from "./context.js";
+import { DataTableContent, DataTableContentOwnProps, DataTableContentProps, DataTableName } from "./content.js";
+import { DataTableColumnHeader, DataTableColumnHeaderProps } from "./header.js";
+import { DataTablePagination, DataTablePaginationOwnProps, DataTablePaginationProps } from "./pagination.js";
+import { DataTableBulkActions, DataTableBulkActionsProps, DataTableExpandToggle, DataTableExpandToggleProps, DataTableSelectAll, DataTableSelectAllProps, DataTableSelectRow, DataTableSelectRowProps } from "./selection.js";
+import { DataTableColumnChooser, DataTableColumnChooserProps, DataTableColumnFilter, DataTableColumnFilterProps, DataTableFilter, DataTableFilterOwnProps, DataTableFilterProps, DataTableToolbar, DataTableToolbarProps } from "./toolbar.js";
+import { DataTableColumnHelper, DataTableHookOptions, createDataTableHook } from "./create-data-table-hook.js";
+import { DataTable, DataTableOwnProps, DataTableProps, DataTableRoot, DataTableRootOwnProps, DataTableRootProps } from "./data-table.js";
+import { DataTableRequest, DataTableRequestOptions, useDataTableRequest } from "./use-data-table-request.js";
+export { DataTable, DataTableBulkActions, type DataTableBulkActionsProps, DataTableColumnChooser, type DataTableColumnChooserProps, DataTableColumnFilter, type DataTableColumnFilterProps, DataTableColumnHeader, type DataTableColumnHeaderProps, type DataTableColumnHelper, type DataTableColumnMeta, DataTableContent, type DataTableContentOwnProps, type DataTableContentProps, DataTableExpandToggle, type DataTableExpandToggleProps, DataTableFilter, type DataTableFilterOwnProps, type DataTableFilterProps, type DataTableHookOptions, type DataTableLabels, type DataTableName, type DataTableOwnProps, DataTablePagination, type DataTablePaginationOwnProps, type DataTablePaginationProps, type DataTableProps, type DataTableRequest, type DataTableRequestOptions, DataTableRoot, type DataTableRootOwnProps, type DataTableRootProps, DataTableSelectAll, type DataTableSelectAllProps, DataTableSelectRow, type DataTableSelectRowProps, DataTableToolbar, type DataTableToolbarProps, createDataTableHook, defaultLabels, useDataTableRequest };

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

@@ -0,0 +1,10 @@
+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 { createDataTableHook } from "./create-data-table-hook.js";
+import { DataTableContent } from "./content.js";
+import { defaultLabels } from "./labels.js";
+import { DataTable, DataTableRoot } from "./data-table.js";
+import { useDataTableRequest } from "./use-data-table-request.js";
+export { DataTable, DataTableBulkActions, DataTableColumnChooser, DataTableColumnFilter, DataTableColumnHeader, DataTableContent, DataTableExpandToggle, DataTableFilter, DataTablePagination, DataTableRoot, DataTableSelectAll, DataTableSelectRow, DataTableToolbar, createDataTableHook, defaultLabels, useDataTableRequest };

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

@@ -0,0 +1,50 @@
+//#region src/components/data-table/labels.d.ts
+/**
+ * Every piece of text the data table writes itself. Pass the ones you want
+ * to change, or all of them in another language, as `labels`.
+ */
+export interface DataTableLabels {
+  /** The search field's name and placeholder. */
+  search: string;
+  /** The column chooser's button. */
+  columns: string;
+  /** Shown in place of rows when there are none. */
+  empty: string;
+  /** Shown in place of rows when a filter leaves none. */
+  noMatches: string;
+  clearFilters: string;
+  /** Shown when `error` is `true` and not a message of your own. */
+  error: string;
+  retry: string;
+  selectAll: string;
+  /** The header checkbox of a table with pages. */
+  selectPage: string;
+  selectRow: (row: string) => string;
+  /** A row's name when it has no `rowHeader` column: its place in the list. */
+  rowName: (position: number) => string;
+  expandRow: (row: string) => string;
+  collapseRow: (row: string) => string;
+  selected: (count: number) => string;
+  clearSelection: string;
+  /** The name of the bar that holds the actions for selected rows. */
+  bulkActions: string;
+  pagination: string;
+  rowsPerPage: string;
+  /** "21-40 of 143". */
+  pageRange: (from: number, to: number, total: number) => string;
+  page: (page: number, pages: number) => string;
+  firstPage: string;
+  previousPage: string;
+  nextPage: string;
+  lastPage: string;
+  resizeColumn: (column: string) => string;
+  filterColumn: (column: string) => string;
+  /** Read out after a sort. */
+  sortedAscending: (column: string) => string;
+  sortedDescending: (column: string) => string;
+  sortCleared: string;
+  /** Read out after a filter changes how many rows there are. */
+  results: (count: number) => string;
+}
+export declare const defaultLabels: DataTableLabels;
+//#endregion

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

@@ -0,0 +1,35 @@
+//#region src/components/data-table/labels.ts
+const defaultLabels = {
+	search: "Search",
+	columns: "Columns",
+	empty: "No rows.",
+	noMatches: "No rows match.",
+	clearFilters: "Clear filters",
+	error: "The rows couldn't be loaded.",
+	retry: "Try again",
+	selectAll: "Select all rows",
+	selectPage: "Select all rows on this page",
+	selectRow: (row) => `Select ${row}`,
+	rowName: (position) => `row ${position}`,
+	expandRow: (row) => `Show details for ${row}`,
+	collapseRow: (row) => `Hide details for ${row}`,
+	selected: (count) => `${count} selected`,
+	clearSelection: "Clear selection",
+	bulkActions: "Selected rows",
+	pagination: "Pagination",
+	rowsPerPage: "Rows per page",
+	pageRange: (from, to, total) => total === 0 ? "0 of 0" : `${from}–${to} of ${total}`,
+	page: (page, pages) => `Page ${page} of ${pages}`,
+	firstPage: "First page",
+	previousPage: "Previous page",
+	nextPage: "Next page",
+	lastPage: "Last page",
+	resizeColumn: (column) => `Resize ${column}`,
+	filterColumn: (column) => `Filter ${column}`,
+	sortedAscending: (column) => `Sorted by ${column}, ascending`,
+	sortedDescending: (column) => `Sorted by ${column}, descending`,
+	sortCleared: "Sorting cleared",
+	results: (count) => count === 1 ? "1 row" : `${count} rows`
+};
+//#endregion
+export { defaultLabels };

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

@@ -0,0 +1,18 @@
+import { HTMLAttributes } from "react";
+//#region src/components/data-table/pagination.d.ts
+export interface DataTablePaginationOwnProps {
+  /**
+   * The choices for rows per page. The size the table has now is added if
+   * it isn't one of them. Pass an empty list to leave the select out.
+   * @default [10, 20, 50, 100]
+   */
+  pageSizes?: number[];
+}
+export interface DataTablePaginationProps extends DataTablePaginationOwnProps, HTMLAttributes<HTMLDivElement> {}
+/**
+ * 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.
+ */
+export declare function DataTablePagination({ pageSizes, className, ...props }: DataTablePaginationProps): import("react").JSX.Element | null;
+//#endregion