@lobehub/ui 5.51.2 → 5.53.0

package/es/base-ui/Table/Table.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.mjs","names":[],"sources":["../../../src/base-ui/Table/Table.tsx"],"sourcesContent":["'use client';\n\nimport { type RowData, useTable } from '@tanstack/react-table';\nimport { cx } from 'antd-style';\nimport { type Key, memo, type ReactNode, useEffect, useMemo } from 'react';\n\nimport Pagination from '@/base-ui/Pagination';\nimport Spin from '@/base-ui/Spin';\nimport { useEventCallback } from '@/hooks/useEventCallback';\n\nimport { tableFeatureSet } from './features';\nimport FilterMenu from './FilterMenu';\nimport { getFixedOffsets } from './fixedOffsets';\nimport { styles } from './style';\nimport TableBody from './TableBody';\nimport TableHead from './TableHead';\nimport { toColumnDefs } from './toColumnDefs';\nimport type { FilterValue, TableColumn, TableProps } from './type';\nimport { useTableState } from './useTableState';\n\nconst EMPTY_DATA: any[] = [];\n\nexport interface TableInternalProps<T> extends TableProps<T> {\n  renderFilter?: (column: TableColumn<T>, id: string, table: any) => ReactNode;\n}\n\nconst TableInner = <T extends RowData>(props: TableInternalProps<T>) => {\n  const {\n    bordered = false,\n    className,\n    classNames,\n    columns,\n    dataSource = EMPTY_DATA as T[],\n    emptyText,\n    loading = false,\n    onChange,\n    onRow,\n    pagination,\n    ref,\n    renderFilter,\n    rowClassName,\n    rowKey,\n    scroll,\n    size = 'middle',\n    style,\n    styles: customStyles,\n    tableLayout,\n  } = props;\n\n  const state = useTableState({ columns, onChange, pagination });\n  const columnDefs = useMemo(() => toColumnDefs(columns), [columns]);\n  const fixedOffsets = useMemo(() => getFixedOffsets(columns), [columns]);\n\n  const table = useTable({\n    columns: columnDefs,\n    data: dataSource,\n    enableMultiSort: false,\n    enableSortingRemoval: true,\n    features: tableFeatureSet,\n    getRowId: (record: T) =>\n      String(typeof rowKey === 'function' ? rowKey(record) : (record[rowKey] as Key)),\n    manualSorting: state.manualSorting,\n    onColumnFiltersChange: state.onColumnFiltersChange,\n    onSortingChange: state.onSortingChange,\n    state: {\n      columnFilters: state.columnFilters,\n      sorting: state.sorting,\n    },\n  } as any);\n\n  const allRows = table.getRowModel().rows as unknown as { id: Key; original: T }[];\n  const { page } = state;\n  const clientPaginated = pagination !== false && state.config?.total === undefined;\n  const total = state.config?.total ?? allRows.length;\n  const pageCount = Math.max(1, Math.ceil(total / page.pageSize));\n  const pageIndex = Math.min(page.pageIndex, pageCount - 1);\n  const rows = clientPaginated\n    ? allRows.slice(pageIndex * page.pageSize, (pageIndex + 1) * page.pageSize)\n    : allRows;\n\n  const syncClampedPage = useEventCallback(() => state.clampPage(pageIndex));\n\n  useEffect(() => {\n    if (clientPaginated && pageIndex !== page.pageIndex) syncClampedPage();\n  }, [clientPaginated, pageIndex, page.pageIndex, syncClampedPage]);\n\n  const minWidth = scroll?.x === 'max-content' ? '100%' : scroll?.x;\n\n  return (\n    <div className={cx(styles.root, className)} ref={ref} style={style}>\n      <div\n        className={cx(styles.wrapper, bordered && styles.bordered, classNames?.wrapper)}\n        data-table-wrapper=\"\"\n        style={{ maxHeight: scroll?.y, ...customStyles?.wrapper }}\n      >\n        <table\n          className={cx(styles.table, size === 'small' ? styles.small : styles.middle)}\n          style={{\n            minWidth,\n            tableLayout,\n            width: scroll?.x === 'max-content' ? 'max-content' : '100%',\n          }}\n        >\n          <TableHead\n            classNames={classNames}\n            columnIds={state.columnIds}\n            columns={columns}\n            fixedOffsets={fixedOffsets}\n            getColumn={(id) => table.getColumn(id) as any}\n            styles={customStyles}\n            renderFilter={(column, id) => {\n              if (renderFilter) return renderFilter(column, id, table);\n              const tableColumn = table.getColumn(id) as any;\n              const value = (tableColumn?.getFilterValue() as FilterValue[] | undefined) ?? [];\n              return (\n                <FilterMenu\n                  filters={column.filters ?? []}\n                  label={typeof column.title === 'string' ? column.title : id}\n                  value={value}\n                  onChange={(next) =>\n                    tableColumn?.setFilterValue(next.length > 0 ? next : undefined)\n                  }\n                />\n              );\n            }}\n          />\n          <TableBody\n            classNames={classNames}\n            columnIds={state.columnIds}\n            columns={columns}\n            emptyText={emptyText}\n            fixedOffsets={fixedOffsets}\n            loading={loading}\n            rowClassName={rowClassName}\n            rows={rows}\n            styles={customStyles}\n            onRow={onRow}\n          />\n        </table>\n        {loading && rows.length > 0 && (\n          <div className={styles.loading} data-table-loading=\"\">\n            <Spin />\n          </div>\n        )}\n      </div>\n      {pagination !== false && total > 0 && (\n        <div className={styles.pagination}>\n          <Pagination\n            current={pageIndex + 1}\n            pageSize={page.pageSize}\n            pageSizeOptions={state.config?.pageSizeOptions}\n            showSizeChanger={state.config?.showSizeChanger}\n            total={total}\n            onChange={(next, pageSize) =>\n              state.onPaginationChange({ pageIndex: next - 1, pageSize })\n            }\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n\nconst Table = memo(TableInner) as unknown as (<T extends RowData>(\n  props: TableProps<T>,\n) => ReactNode) & {\n  displayName?: string;\n};\n\nTable.displayName = 'Table';\n\nexport { TableInner };\n\nexport default Table;\n"],"mappings":"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"}

package/es/base-ui/Table/TableBody.mjs

@@ -0,0 +1,59 @@
+"use client";
+import Spin from "../Spin/Spin.mjs";
+import Empty from "../../Empty/Empty.mjs";
+import { styles } from "./style.mjs";
+import { getCellValue } from "./toColumnDefs.mjs";
+import { createElement } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/base-ui/Table/TableBody.tsx
+const TableBody = ({ classNames, columnIds, columns, emptyText, fixedOffsets, loading, onRow, rowClassName, rows, styles: customStyles }) => {
+	if (rows.length === 0) return /* @__PURE__ */ jsx("tbody", {
+		className: classNames?.body,
+		style: customStyles?.body,
+		children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+			className: styles.empty,
+			colSpan: columns.length,
+			children: loading ? /* @__PURE__ */ jsx(Spin, {}) : emptyText ?? /* @__PURE__ */ jsx(Empty, { description: "No data" })
+		}) })
+	});
+	return /* @__PURE__ */ jsx("tbody", {
+		className: classNames?.body,
+		style: customStyles?.body,
+		children: rows.map((row, rowIndex) => {
+			const record = row.original;
+			const rowProps = onRow?.(record, rowIndex) ?? {};
+			const extraClassName = typeof rowClassName === "function" ? rowClassName(record, rowIndex) : rowClassName;
+			return /* @__PURE__ */ createElement("tr", {
+				...rowProps,
+				key: row.id,
+				style: {
+					...customStyles?.row,
+					...rowProps.style
+				},
+				className: cx(styles.row, rowProps.onClick && styles.clickable, extraClassName, classNames?.row, rowProps.className)
+			}, columns.map((column, columnIndex) => {
+				const value = getCellValue(record, column);
+				const cellProps = column.onCell?.(record, rowIndex) ?? {};
+				const content = column.render ? column.render(value, record, rowIndex) : value;
+				return /* @__PURE__ */ createElement("td", {
+					...cellProps,
+					key: columnIds[columnIndex],
+					title: column.ellipsis && typeof content === "string" ? content : cellProps.title,
+					className: cx(styles.cell, column.ellipsis && styles.ellipsis, column.fixed && styles.fixed, column.className, classNames?.cell, cellProps.className),
+					style: {
+						textAlign: column.align,
+						width: column.width,
+						...fixedOffsets[columnIndex],
+						...customStyles?.cell,
+						...cellProps.style
+					}
+				}, content);
+			}));
+		})
+	});
+};
+//#endregion
+export { TableBody as default };
+
+//# sourceMappingURL=TableBody.mjs.map

package/es/base-ui/Table/TableBody.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableBody.mjs","names":[],"sources":["../../../src/base-ui/Table/TableBody.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport type { CSSProperties, Key, ReactNode } from 'react';\n\nimport Spin from '@/base-ui/Spin';\nimport Empty from '@/Empty';\n\nimport { styles } from './style';\nimport { getCellValue } from './toColumnDefs';\nimport type { TableColumn, TableProps } from './type';\n\ninterface TableBodyProps<T> {\n  classNames?: TableProps<T>['classNames'];\n  columnIds: string[];\n  columns: TableColumn<T>[];\n  emptyText?: ReactNode;\n  fixedOffsets: (CSSProperties | undefined)[];\n  loading: boolean;\n  onRow?: TableProps<T>['onRow'];\n  rowClassName?: TableProps<T>['rowClassName'];\n  rows: { id: Key; original: T }[];\n  styles?: TableProps<T>['styles'];\n}\n\nconst TableBody = <T,>({\n  classNames,\n  columnIds,\n  columns,\n  emptyText,\n  fixedOffsets,\n  loading,\n  onRow,\n  rowClassName,\n  rows,\n  styles: customStyles,\n}: TableBodyProps<T>) => {\n  if (rows.length === 0) {\n    return (\n      <tbody className={classNames?.body} style={customStyles?.body}>\n        <tr>\n          <td className={styles.empty} colSpan={columns.length}>\n            {loading ? <Spin /> : (emptyText ?? <Empty description=\"No data\" />)}\n          </td>\n        </tr>\n      </tbody>\n    );\n  }\n\n  return (\n    <tbody className={classNames?.body} style={customStyles?.body}>\n      {rows.map((row, rowIndex) => {\n        const record = row.original;\n        const rowProps = onRow?.(record, rowIndex) ?? {};\n        const extraClassName =\n          typeof rowClassName === 'function' ? rowClassName(record, rowIndex) : rowClassName;\n\n        return (\n          <tr\n            {...rowProps}\n            key={row.id}\n            style={{ ...customStyles?.row, ...rowProps.style }}\n            className={cx(\n              styles.row,\n              rowProps.onClick && styles.clickable,\n              extraClassName,\n              classNames?.row,\n              rowProps.className,\n            )}\n          >\n            {columns.map((column, columnIndex) => {\n              const value = getCellValue(record, column);\n              const cellProps = column.onCell?.(record, rowIndex) ?? {};\n              const content = column.render\n                ? column.render(value, record, rowIndex)\n                : (value as ReactNode);\n\n              return (\n                <td\n                  {...cellProps}\n                  key={columnIds[columnIndex]}\n                  title={column.ellipsis && typeof content === 'string' ? content : cellProps.title}\n                  className={cx(\n                    styles.cell,\n                    column.ellipsis && styles.ellipsis,\n                    column.fixed && styles.fixed,\n                    column.className,\n                    classNames?.cell,\n                    cellProps.className,\n                  )}\n                  style={{\n                    textAlign: column.align,\n                    width: column.width,\n                    ...fixedOffsets[columnIndex],\n                    ...customStyles?.cell,\n                    ...cellProps.style,\n                  }}\n                >\n                  {content}\n                </td>\n              );\n            })}\n          </tr>\n        );\n      })}\n    </tbody>\n  );\n};\n\nexport default TableBody;\n"],"mappings":";;;;;;;;;AAyBA,MAAM,aAAiB,EACrB,YACA,WACA,SACA,WACA,cACA,SACA,OACA,cACA,MACA,QAAQ,mBACe;CACvB,IAAI,KAAK,WAAW,GAClB,OACE,oBAAC,SAAD;EAAO,WAAW,YAAY;EAAM,OAAO,cAAc;EACvD,UAAA,oBAAC,MAAD,EAAA,UACE,oBAAC,MAAD;GAAI,WAAW,OAAO;GAAO,SAAS,QAAQ;GAC3C,UAAA,UAAU,oBAAC,MAAD,CAAO,CAAA,IAAK,aAAa,oBAAC,OAAD,EAAO,aAAY,UAAW,CAAA;EAChE,CAAA,EACF,CAAA;CACC,CAAA;CAIX,OACE,oBAAC,SAAD;EAAO,WAAW,YAAY;EAAM,OAAO,cAAc;EACtD,UAAA,KAAK,KAAK,KAAK,aAAa;GAC3B,MAAM,SAAS,IAAI;GACnB,MAAM,WAAW,QAAQ,QAAQ,QAAQ,KAAK,CAAC;GAC/C,MAAM,iBACJ,OAAO,iBAAiB,aAAa,aAAa,QAAQ,QAAQ,IAAI;GAExE,OACE,8BAAC,MAAD;IACE,GAAI;IACJ,KAAK,IAAI;IACT,OAAO;KAAE,GAAG,cAAc;KAAK,GAAG,SAAS;IAAM;IACjD,WAAW,GACT,OAAO,KACP,SAAS,WAAW,OAAO,WAC3B,gBACA,YAAY,KACZ,SAAS,SACX;GAkCE,GAhCD,QAAQ,KAAK,QAAQ,gBAAgB;IACpC,MAAM,QAAQ,aAAa,QAAQ,MAAM;IACzC,MAAM,YAAY,OAAO,SAAS,QAAQ,QAAQ,KAAK,CAAC;IACxD,MAAM,UAAU,OAAO,SACnB,OAAO,OAAO,OAAO,QAAQ,QAAQ,IACpC;IAEL,OACE,8BAAC,MAAD;KACE,GAAI;KACJ,KAAK,UAAU;KACf,OAAO,OAAO,YAAY,OAAO,YAAY,WAAW,UAAU,UAAU;KAC5E,WAAW,GACT,OAAO,MACP,OAAO,YAAY,OAAO,UAC1B,OAAO,SAAS,OAAO,OACvB,OAAO,WACP,YAAY,MACZ,UAAU,SACZ;KACA,OAAO;MACL,WAAW,OAAO;MAClB,OAAO,OAAO;MACd,GAAG,aAAa;MAChB,GAAG,cAAc;MACjB,GAAG,UAAU;KACf;IAGE,GADD,OACC;GAER,CAAC,CACC;EAER,CAAC;CACI,CAAA;AAEX"}

package/es/base-ui/Table/TableHead.mjs

@@ -0,0 +1,50 @@
+"use client";
+import Icon from "../../Icon/Icon.mjs";
+import { styles } from "./style.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { ChevronDown, ChevronUp } from "lucide-react";
+//#region src/base-ui/Table/TableHead.tsx
+const ariaSortOf = (sorted) => sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : "none";
+const TableHead = ({ classNames, columnIds, columns, fixedOffsets, getColumn, renderFilter, styles: customStyles }) => /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((column, index) => {
+	const id = columnIds[index];
+	const tableColumn = getColumn(id);
+	const sorted = column.sorter ? tableColumn?.getIsSorted() ?? false : false;
+	return /* @__PURE__ */ jsx("th", {
+		"aria-sort": column.sorter ? ariaSortOf(sorted) : void 0,
+		scope: "col",
+		className: cx(styles.header, column.fixed && styles.fixed, column.className, classNames?.header),
+		style: {
+			textAlign: column.align,
+			width: column.width,
+			...fixedOffsets[index],
+			...customStyles?.header,
+			...column.fixed ? { zIndex: 3 } : void 0
+		},
+		children: /* @__PURE__ */ jsxs("span", {
+			className: styles.headerInner,
+			children: [column.sorter ? /* @__PURE__ */ jsxs("button", {
+				className: styles.sortButton,
+				type: "button",
+				onClick: tableColumn?.getToggleSortingHandler(),
+				children: [column.title, /* @__PURE__ */ jsxs("span", {
+					"aria-hidden": "true",
+					className: styles.sortCaret,
+					children: [/* @__PURE__ */ jsx(Icon, {
+						"data-active": sorted === "asc",
+						icon: ChevronUp,
+						size: 10
+					}), /* @__PURE__ */ jsx(Icon, {
+						"data-active": sorted === "desc",
+						icon: ChevronDown,
+						size: 10
+					})]
+				})]
+			}) : column.title, column.filters?.length ? renderFilter?.(column, id) : null]
+		})
+	}, id);
+}) }) });
+//#endregion
+export { TableHead as default };
+
+//# sourceMappingURL=TableHead.mjs.map

package/es/base-ui/Table/TableHead.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHead.mjs","names":[],"sources":["../../../src/base-ui/Table/TableHead.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { ChevronDown, ChevronUp } from 'lucide-react';\nimport type { CSSProperties, ReactNode } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { styles } from './style';\nimport type { TableColumn, TableProps } from './type';\n\ntype SortState = false | 'asc' | 'desc';\n\ninterface HeadColumn {\n  getIsSorted: () => SortState;\n  getToggleSortingHandler: () => undefined | ((event: unknown) => void);\n}\n\ninterface TableHeadProps<T> {\n  classNames?: TableProps<T>['classNames'];\n  columnIds: string[];\n  columns: TableColumn<T>[];\n  fixedOffsets: (CSSProperties | undefined)[];\n  getColumn: (id: string) => HeadColumn | undefined;\n  renderFilter?: (column: TableColumn<T>, id: string) => ReactNode;\n  styles?: TableProps<T>['styles'];\n}\n\nconst ariaSortOf = (sorted: SortState) =>\n  sorted === 'asc' ? 'ascending' : sorted === 'desc' ? 'descending' : 'none';\n\nconst TableHead = <T,>({\n  classNames,\n  columnIds,\n  columns,\n  fixedOffsets,\n  getColumn,\n  renderFilter,\n  styles: customStyles,\n}: TableHeadProps<T>) => (\n  <thead>\n    <tr>\n      {columns.map((column, index) => {\n        const id = columnIds[index];\n        const tableColumn = getColumn(id);\n        const sorted: SortState = column.sorter ? (tableColumn?.getIsSorted() ?? false) : false;\n\n        return (\n          <th\n            aria-sort={column.sorter ? ariaSortOf(sorted) : undefined}\n            key={id}\n            scope=\"col\"\n            className={cx(\n              styles.header,\n              column.fixed && styles.fixed,\n              column.className,\n              classNames?.header,\n            )}\n            style={{\n              textAlign: column.align,\n              width: column.width,\n              ...fixedOffsets[index],\n              ...customStyles?.header,\n              ...(column.fixed ? { zIndex: 3 } : undefined),\n            }}\n          >\n            <span className={styles.headerInner}>\n              {column.sorter ? (\n                <button\n                  className={styles.sortButton}\n                  type=\"button\"\n                  onClick={tableColumn?.getToggleSortingHandler()}\n                >\n                  {column.title}\n                  <span aria-hidden=\"true\" className={styles.sortCaret}>\n                    <Icon data-active={sorted === 'asc'} icon={ChevronUp} size={10} />\n                    <Icon data-active={sorted === 'desc'} icon={ChevronDown} size={10} />\n                  </span>\n                </button>\n              ) : (\n                column.title\n              )}\n              {column.filters?.length ? renderFilter?.(column, id) : null}\n            </span>\n          </th>\n        );\n      })}\n    </tr>\n  </thead>\n);\n\nexport default TableHead;\n"],"mappings":";;;;;;;AA4BA,MAAM,cAAc,WAClB,WAAW,QAAQ,cAAc,WAAW,SAAS,eAAe;AAEtE,MAAM,aAAiB,EACrB,YACA,WACA,SACA,cACA,WACA,cACA,QAAQ,mBAER,oBAAC,SAAD,EAAA,UACE,oBAAC,MAAD,EAAA,UACG,QAAQ,KAAK,QAAQ,UAAU;CAC9B,MAAM,KAAK,UAAU;CACrB,MAAM,cAAc,UAAU,EAAE;CAChC,MAAM,SAAoB,OAAO,SAAU,aAAa,YAAY,KAAK,QAAS;CAElF,OACE,oBAAC,MAAD;EACE,aAAW,OAAO,SAAS,WAAW,MAAM,IAAI,KAAA;EAEhD,OAAM;EACN,WAAW,GACT,OAAO,QACP,OAAO,SAAS,OAAO,OACvB,OAAO,WACP,YAAY,MACd;EACA,OAAO;GACL,WAAW,OAAO;GAClB,OAAO,OAAO;GACd,GAAG,aAAa;GAChB,GAAG,cAAc;GACjB,GAAI,OAAO,QAAQ,EAAE,QAAQ,EAAE,IAAI,KAAA;EACrC;EAEA,UAAA,qBAAC,QAAD;GAAM,WAAW,OAAO;GAAxB,UAAA,CACG,OAAO,SACN,qBAAC,UAAD;IACE,WAAW,OAAO;IAClB,MAAK;IACL,SAAS,aAAa,wBAAwB;IAHhD,UAAA,CAKG,OAAO,OACR,qBAAC,QAAD;KAAM,eAAY;KAAO,WAAW,OAAO;KAA3C,UAAA,CACE,oBAAC,MAAD;MAAM,eAAa,WAAW;MAAO,MAAM;MAAW,MAAM;KAAK,CAAA,GACjE,oBAAC,MAAD;MAAM,eAAa,WAAW;MAAQ,MAAM;MAAa,MAAM;KAAK,CAAA,CAChE;IACA,CAAA,CAAA;GAER,CAAA,IAAA,OAAO,OAER,OAAO,SAAS,SAAS,eAAe,QAAQ,EAAE,IAAI,IACnD;;CACJ,GAlCG,EAkCH;AAER,CAAC,EACC,CAAA,EACC,CAAA"}

package/es/base-ui/Table/features.mjs

@@ -0,0 +1,12 @@
+import { columnFilteringFeature, createFilteredRowModel, createSortedRowModel, rowSortingFeature, tableFeatures } from "@tanstack/react-table";
+//#region src/base-ui/Table/features.ts
+const tableFeatureSet = tableFeatures({
+	columnFilteringFeature,
+	filteredRowModel: createFilteredRowModel(),
+	rowSortingFeature,
+	sortedRowModel: createSortedRowModel()
+});
+//#endregion
+export { tableFeatureSet };
+
+//# sourceMappingURL=features.mjs.map

package/es/base-ui/Table/features.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"features.mjs","names":[],"sources":["../../../src/base-ui/Table/features.ts"],"sourcesContent":["import {\n  columnFilteringFeature,\n  createFilteredRowModel,\n  createSortedRowModel,\n  rowSortingFeature,\n  tableFeatures,\n} from '@tanstack/react-table';\n\nexport const tableFeatureSet = tableFeatures({\n  columnFilteringFeature,\n  filteredRowModel: createFilteredRowModel(),\n  rowSortingFeature,\n  sortedRowModel: createSortedRowModel(),\n});\n\nexport type TableFeatureSet = typeof tableFeatureSet;\n"],"mappings":";;AAQA,MAAa,kBAAkB,cAAc;CAC3C;CACA,kBAAkB,uBAAuB;CACzC;CACA,gBAAgB,qBAAqB;AACvC,CAAC"}

package/es/base-ui/Table/fixedOffsets.mjs

@@ -0,0 +1,29 @@
+//#region src/base-ui/Table/fixedOffsets.ts
+const widthOf = (column) => typeof column.width === "number" ? column.width : 0;
+const getFixedOffsets = (columns) => {
+	const offsets = columns.map(() => void 0);
+	let left = 0;
+	columns.forEach((column, index) => {
+		if (column.fixed !== "left") return;
+		offsets[index] = {
+			left,
+			position: "sticky"
+		};
+		left += widthOf(column);
+	});
+	let right = 0;
+	for (let index = columns.length - 1; index >= 0; index--) {
+		const column = columns[index];
+		if (column.fixed !== "right") continue;
+		offsets[index] = {
+			position: "sticky",
+			right
+		};
+		right += widthOf(column);
+	}
+	return offsets;
+};
+//#endregion
+export { getFixedOffsets };
+
+//# sourceMappingURL=fixedOffsets.mjs.map

package/es/base-ui/Table/fixedOffsets.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"fixedOffsets.mjs","names":[],"sources":["../../../src/base-ui/Table/fixedOffsets.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\n\nimport type { TableColumn } from './type';\n\nconst widthOf = (column: TableColumn<any>) => (typeof column.width === 'number' ? column.width : 0);\n\nexport const getFixedOffsets = (columns: TableColumn<any>[]): (CSSProperties | undefined)[] => {\n  const offsets: (CSSProperties | undefined)[] = columns.map(() => undefined);\n\n  let left = 0;\n  columns.forEach((column, index) => {\n    if (column.fixed !== 'left') return;\n    offsets[index] = { left, position: 'sticky' };\n    left += widthOf(column);\n  });\n\n  let right = 0;\n  for (let index = columns.length - 1; index >= 0; index--) {\n    const column = columns[index];\n    if (column.fixed !== 'right') continue;\n    offsets[index] = { position: 'sticky', right };\n    right += widthOf(column);\n  }\n\n  return offsets;\n};\n"],"mappings":";AAIA,MAAM,WAAW,WAA8B,OAAO,OAAO,UAAU,WAAW,OAAO,QAAQ;AAEjG,MAAa,mBAAmB,YAA+D;CAC7F,MAAM,UAAyC,QAAQ,UAAU,KAAA,CAAS;CAE1E,IAAI,OAAO;CACX,QAAQ,SAAS,QAAQ,UAAU;EACjC,IAAI,OAAO,UAAU,QAAQ;EAC7B,QAAQ,SAAS;GAAE;GAAM,UAAU;EAAS;EAC5C,QAAQ,QAAQ,MAAM;CACxB,CAAC;CAED,IAAI,QAAQ;CACZ,KAAK,IAAI,QAAQ,QAAQ,SAAS,GAAG,SAAS,GAAG,SAAS;EACxD,MAAM,SAAS,QAAQ;EACvB,IAAI,OAAO,UAAU,SAAS;EAC9B,QAAQ,SAAS;GAAE,UAAU;GAAU;EAAM;EAC7C,SAAS,QAAQ,MAAM;CACzB;CAEA,OAAO;AACT"}

package/es/base-ui/Table/index.d.mts

@@ -0,0 +1,3 @@
+import { FilterValue, SortOrder, TableColumn, TableFilters, TablePaginationConfig, TableProps, TableSemanticName, TableSorterResult } from "./type.mjs";
+import Table from "./Table.mjs";
+export { type FilterValue, type SortOrder, type TableColumn, type TableFilters, type TablePaginationConfig, type TableProps, type TableSemanticName, type TableSorterResult, Table as default };

package/es/base-ui/Table/style.mjs

@@ -0,0 +1,168 @@
+import { focusRing } from "../focusRing.mjs";
+import { createStaticStyles } from "antd-style";
+//#region src/base-ui/Table/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	bordered: css`
+    border: 1px solid ${cssVar.colorBorderSecondary};
+    border-radius: ${cssVar.borderRadiusLG};
+
+    & th,
+    & td {
+      border-inline-end: 1px solid ${cssVar.colorBorderSecondary};
+    }
+
+    & th:last-child,
+    & td:last-child {
+      border-inline-end: 0;
+    }
+  `,
+	cell: css`
+    border-block-end: 1px solid ${cssVar.colorBorderSecondary};
+    font-variant-numeric: tabular-nums;
+    background: ${cssVar.colorBgContainer};
+  `,
+	clickable: css`
+    cursor: pointer;
+  `,
+	ellipsis: css`
+    overflow: hidden;
+    max-width: 0;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `,
+	empty: css`
+    padding-block: 32px;
+    color: ${cssVar.colorTextDescription};
+    text-align: center;
+  `,
+	filterActive: css`
+    color: ${cssVar.colorPrimary};
+  `,
+	filterButton: css`
+    ${focusRing};
+    cursor: pointer;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    padding: 2px;
+    border: 0;
+    border-radius: 4px;
+
+    color: ${cssVar.colorTextQuaternary};
+
+    background: none;
+
+    &:hover {
+      color: ${cssVar.colorText};
+      background: ${cssVar.colorFillTertiary};
+    }
+  `,
+	fixed: css`
+    z-index: 1;
+    background: ${cssVar.colorBgContainer};
+  `,
+	header: css`
+    position: sticky;
+    z-index: 2;
+    inset-block-start: 0;
+
+    font-size: 13px;
+    font-weight: 500;
+    color: ${cssVar.colorTextSecondary};
+    text-align: start;
+
+    background: ${cssVar.colorBgContainer};
+    box-shadow:
+      inset 0 -1px 0 ${cssVar.colorBorderSecondary},
+      inset 0 999px 0 ${cssVar.colorFillQuaternary};
+  `,
+	headerInner: css`
+    display: inline-flex;
+    gap: 6px;
+    align-items: center;
+  `,
+	loading: css`
+    position: absolute;
+    z-index: 3;
+    inset: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    background: color-mix(in srgb, ${cssVar.colorBgContainer} 60%, transparent);
+  `,
+	middle: css`
+    & th,
+    & td {
+      padding-block: 12px;
+      padding-inline: 16px;
+    }
+  `,
+	pagination: css`
+    display: flex;
+    justify-content: flex-end;
+    margin-block-start: 12px;
+  `,
+	root: css`
+    min-width: 0;
+  `,
+	row: css`
+    &:hover > td {
+      background: color-mix(in srgb, ${cssVar.colorBgContainer}, ${cssVar.colorText} 3%);
+    }
+
+    &:last-child > td {
+      border-block-end: 0;
+    }
+  `,
+	small: css`
+    & th,
+    & td {
+      padding-block: 8px;
+      padding-inline: 12px;
+    }
+  `,
+	sortButton: css`
+    ${focusRing};
+    cursor: pointer;
+
+    display: inline-flex;
+    gap: 6px;
+    align-items: center;
+
+    padding: 0;
+    border: 0;
+    border-radius: 4px;
+
+    font: inherit;
+    color: inherit;
+
+    background: none;
+  `,
+	sortCaret: css`
+    display: inline-flex;
+    flex-direction: column;
+    color: ${cssVar.colorTextQuaternary};
+
+    & > [data-active='true'] {
+      color: ${cssVar.colorText};
+    }
+  `,
+	table: css`
+    border-spacing: 0;
+    border-collapse: separate;
+    width: 100%;
+    font-size: 14px;
+  `,
+	wrapper: css`
+    position: relative;
+    overflow: auto;
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/base-ui/Table/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Table/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { focusRing } from '@/base-ui/focusRing';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  bordered: css`\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: ${cssVar.borderRadiusLG};\n\n    & th,\n    & td {\n      border-inline-end: 1px solid ${cssVar.colorBorderSecondary};\n    }\n\n    & th:last-child,\n    & td:last-child {\n      border-inline-end: 0;\n    }\n  `,\n  cell: css`\n    border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n    font-variant-numeric: tabular-nums;\n    background: ${cssVar.colorBgContainer};\n  `,\n  clickable: css`\n    cursor: pointer;\n  `,\n  ellipsis: css`\n    overflow: hidden;\n    max-width: 0;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  empty: css`\n    padding-block: 32px;\n    color: ${cssVar.colorTextDescription};\n    text-align: center;\n  `,\n  filterActive: css`\n    color: ${cssVar.colorPrimary};\n  `,\n  filterButton: css`\n    ${focusRing};\n    cursor: pointer;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    padding: 2px;\n    border: 0;\n    border-radius: 4px;\n\n    color: ${cssVar.colorTextQuaternary};\n\n    background: none;\n\n    &:hover {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillTertiary};\n    }\n  `,\n  fixed: css`\n    z-index: 1;\n    background: ${cssVar.colorBgContainer};\n  `,\n  header: css`\n    position: sticky;\n    z-index: 2;\n    inset-block-start: 0;\n\n    font-size: 13px;\n    font-weight: 500;\n    color: ${cssVar.colorTextSecondary};\n    text-align: start;\n\n    background: ${cssVar.colorBgContainer};\n    box-shadow:\n      inset 0 -1px 0 ${cssVar.colorBorderSecondary},\n      inset 0 999px 0 ${cssVar.colorFillQuaternary};\n  `,\n  headerInner: css`\n    display: inline-flex;\n    gap: 6px;\n    align-items: center;\n  `,\n  loading: css`\n    position: absolute;\n    z-index: 3;\n    inset: 0;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    background: color-mix(in srgb, ${cssVar.colorBgContainer} 60%, transparent);\n  `,\n  middle: css`\n    & th,\n    & td {\n      padding-block: 12px;\n      padding-inline: 16px;\n    }\n  `,\n  pagination: css`\n    display: flex;\n    justify-content: flex-end;\n    margin-block-start: 12px;\n  `,\n  root: css`\n    min-width: 0;\n  `,\n  row: css`\n    &:hover > td {\n      background: color-mix(in srgb, ${cssVar.colorBgContainer}, ${cssVar.colorText} 3%);\n    }\n\n    &:last-child > td {\n      border-block-end: 0;\n    }\n  `,\n  small: css`\n    & th,\n    & td {\n      padding-block: 8px;\n      padding-inline: 12px;\n    }\n  `,\n  sortButton: css`\n    ${focusRing};\n    cursor: pointer;\n\n    display: inline-flex;\n    gap: 6px;\n    align-items: center;\n\n    padding: 0;\n    border: 0;\n    border-radius: 4px;\n\n    font: inherit;\n    color: inherit;\n\n    background: none;\n  `,\n  sortCaret: css`\n    display: inline-flex;\n    flex-direction: column;\n    color: ${cssVar.colorTextQuaternary};\n\n    & > [data-active='true'] {\n      color: ${cssVar.colorText};\n    }\n  `,\n  table: css`\n    border-spacing: 0;\n    border-collapse: separate;\n    width: 100%;\n    font-size: 14px;\n  `,\n  wrapper: css`\n    position: relative;\n    overflow: auto;\n  `,\n}));\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,UAAU,GAAG;wBACS,OAAO,qBAAqB;qBAC/B,OAAO,eAAe;;;;qCAIN,OAAO,qBAAqB;;;;;;;;CAQ/D,MAAM,GAAG;kCACuB,OAAO,qBAAqB;;kBAE5C,OAAO,iBAAiB;;CAExC,WAAW,GAAG;;;CAGd,UAAU,GAAG;;;;;;CAMb,OAAO,GAAG;;aAEC,OAAO,qBAAqB;;;CAGvC,cAAc,GAAG;aACN,OAAO,aAAa;;CAE/B,cAAc,GAAG;MACb,UAAU;;;;;;;;;;;aAWH,OAAO,oBAAoB;;;;;eAKzB,OAAO,UAAU;oBACZ,OAAO,kBAAkB;;;CAG3C,OAAO,GAAG;;kBAEM,OAAO,iBAAiB;;CAExC,QAAQ,GAAG;;;;;;;aAOA,OAAO,mBAAmB;;;kBAGrB,OAAO,iBAAiB;;uBAEnB,OAAO,qBAAqB;wBAC3B,OAAO,oBAAoB;;CAEjD,aAAa,GAAG;;;;;CAKhB,SAAS,GAAG;;;;;;;;;qCASuB,OAAO,iBAAiB;;CAE3D,QAAQ,GAAG;;;;;;;CAOX,YAAY,GAAG;;;;;CAKf,MAAM,GAAG;;;CAGT,KAAK,GAAG;;uCAE6B,OAAO,iBAAiB,IAAI,OAAO,UAAU;;;;;;;CAOlF,OAAO,GAAG;;;;;;;CAOV,YAAY,GAAG;MACX,UAAU;;;;;;;;;;;;;;;;CAgBd,WAAW,GAAG;;;aAGH,OAAO,oBAAoB;;;eAGzB,OAAO,UAAU;;;CAG9B,OAAO,GAAG;;;;;;CAMV,SAAS,GAAG;;;;AAId,EAAE"}

package/es/base-ui/Table/toColumnDefs.mjs

@@ -0,0 +1,26 @@
+//#region src/base-ui/Table/toColumnDefs.ts
+const getColumnId = (column, index) => String(column.key ?? column.dataIndex ?? `__column_${index}`);
+const getCellValue = (record, column) => column.dataIndex ? record[column.dataIndex] : void 0;
+const isEmptyFilter = (value) => !Array.isArray(value) || value.length === 0;
+const toColumnDefs = (columns) => columns.map((column, index) => {
+	if ((Boolean(column.sorter) || Boolean(column.filters?.length)) && column.key == null && column.dataIndex == null) throw new Error("[Table] sortable or filterable columns need a `key` or `dataIndex`");
+	const comparator = typeof column.sorter === "function" ? column.sorter : void 0;
+	const { onFilter } = column;
+	const filterFn = onFilter ? Object.assign((row, _columnId, filterValue) => filterValue.some((value) => onFilter(value, row.original)), { autoRemove: isEmptyFilter }) : void 0;
+	return {
+		accessorFn: (record) => getCellValue(record, column),
+		enableColumnFilter: Boolean(column.filters?.length),
+		enableSorting: Boolean(column.sorter),
+		filterFn,
+		id: getColumnId(column, index),
+		sortDescFirst: column.sortDirections?.[0] === "descend",
+		...comparator && {
+			sortFn: (rowA, rowB) => comparator(rowA.original, rowB.original),
+			sortUndefined: false
+		}
+	};
+});
+//#endregion
+export { getCellValue, getColumnId, toColumnDefs };
+
+//# sourceMappingURL=toColumnDefs.mjs.map

package/es/base-ui/Table/toColumnDefs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toColumnDefs.mjs","names":[],"sources":["../../../src/base-ui/Table/toColumnDefs.ts"],"sourcesContent":["import type { ColumnDef, RowData } from '@tanstack/react-table';\n\nimport type { TableFeatureSet } from './features';\nimport type { FilterValue, TableColumn } from './type';\n\nexport const getColumnId = (column: TableColumn<any>, index: number): string =>\n  String(column.key ?? column.dataIndex ?? `__column_${index}`);\n\nexport const getCellValue = <T>(record: T, column: TableColumn<T>): unknown =>\n  column.dataIndex ? record[column.dataIndex] : undefined;\n\nconst isEmptyFilter = (value: unknown) => !Array.isArray(value) || value.length === 0;\n\nexport const toColumnDefs = <T extends RowData>(\n  columns: TableColumn<T>[],\n): ColumnDef<TableFeatureSet, T, unknown>[] =>\n  columns.map((column, index) => {\n    const needsStableId = Boolean(column.sorter) || Boolean(column.filters?.length);\n    if (needsStableId && column.key == null && column.dataIndex == null) {\n      throw new Error('[Table] sortable or filterable columns need a `key` or `dataIndex`');\n    }\n\n    const comparator = typeof column.sorter === 'function' ? column.sorter : undefined;\n    const { onFilter } = column;\n\n    const filterFn = onFilter\n      ? Object.assign(\n          (row: { original: T }, _columnId: string, filterValue: FilterValue[]) =>\n            filterValue.some((value) => onFilter(value, row.original)),\n          { autoRemove: isEmptyFilter },\n        )\n      : undefined;\n\n    return {\n      accessorFn: (record: T) => getCellValue(record, column),\n      enableColumnFilter: Boolean(column.filters?.length),\n      enableSorting: Boolean(column.sorter),\n      filterFn,\n      id: getColumnId(column, index),\n      sortDescFirst: column.sortDirections?.[0] === 'descend',\n      ...(comparator && {\n        sortFn: (rowA: { original: T }, rowB: { original: T }) =>\n          comparator(rowA.original, rowB.original),\n        sortUndefined: false,\n      }),\n    } as unknown as ColumnDef<TableFeatureSet, T, unknown>;\n  });\n"],"mappings":";AAKA,MAAa,eAAe,QAA0B,UACpD,OAAO,OAAO,OAAO,OAAO,aAAa,YAAY,OAAO;AAE9D,MAAa,gBAAmB,QAAW,WACzC,OAAO,YAAY,OAAO,OAAO,aAAa,KAAA;AAEhD,MAAM,iBAAiB,UAAmB,CAAC,MAAM,QAAQ,KAAK,KAAK,MAAM,WAAW;AAEpF,MAAa,gBACX,YAEA,QAAQ,KAAK,QAAQ,UAAU;CAE7B,KADsB,QAAQ,OAAO,MAAM,KAAK,QAAQ,OAAO,SAAS,MAAM,MACzD,OAAO,OAAO,QAAQ,OAAO,aAAa,MAC7D,MAAM,IAAI,MAAM,oEAAoE;CAGtF,MAAM,aAAa,OAAO,OAAO,WAAW,aAAa,OAAO,SAAS,KAAA;CACzE,MAAM,EAAE,aAAa;CAErB,MAAM,WAAW,WACb,OAAO,QACJ,KAAsB,WAAmB,gBACxC,YAAY,MAAM,UAAU,SAAS,OAAO,IAAI,QAAQ,CAAC,GAC3D,EAAE,YAAY,cAAc,CAC9B,IACA,KAAA;CAEJ,OAAO;EACL,aAAa,WAAc,aAAa,QAAQ,MAAM;EACtD,oBAAoB,QAAQ,OAAO,SAAS,MAAM;EAClD,eAAe,QAAQ,OAAO,MAAM;EACpC;EACA,IAAI,YAAY,QAAQ,KAAK;EAC7B,eAAe,OAAO,iBAAiB,OAAO;EAC9C,GAAI,cAAc;GAChB,SAAS,MAAuB,SAC9B,WAAW,KAAK,UAAU,KAAK,QAAQ;GACzC,eAAe;EACjB;CACF;AACF,CAAC"}

package/es/base-ui/Table/type.d.mts

@@ -0,0 +1,68 @@
+import { CSSProperties, HTMLAttributes, Key, ReactNode, Ref, TdHTMLAttributes } from "react";
+//#region src/base-ui/Table/type.d.ts
+type SortOrder = 'ascend' | 'descend';
+type FilterValue = string | number | boolean;
+interface TableColumn<T> {
+  align?: 'left' | 'center' | 'right';
+  className?: string;
+  dataIndex?: Extract<keyof T, string>;
+  defaultSortOrder?: SortOrder;
+  ellipsis?: boolean;
+  filters?: {
+    text: ReactNode;
+    value: FilterValue;
+  }[];
+  fixed?: 'left' | 'right';
+  key?: Key;
+  onCell?: (record: T, index: number) => TdHTMLAttributes<HTMLTableCellElement>;
+  onFilter?: (value: FilterValue, record: T) => boolean;
+  render?: (value: any, record: T, index: number) => ReactNode;
+  sortDirections?: SortOrder[];
+  sorter?: boolean | ((a: T, b: T) => number);
+  title?: ReactNode;
+  width?: number | string;
+}
+interface TablePaginationConfig {
+  current?: number;
+  defaultCurrent?: number;
+  defaultPageSize?: number;
+  onChange?: (page: number, pageSize: number) => void;
+  onShowSizeChange?: (current: number, size: number) => void;
+  pageSize?: number;
+  pageSizeOptions?: number[];
+  showSizeChanger?: boolean;
+  total?: number;
+}
+interface TableSorterResult<T> {
+  column?: TableColumn<T>;
+  columnKey?: Key;
+  order?: SortOrder;
+}
+type TableFilters = Record<string, FilterValue[] | null>;
+type TableSemanticName = 'body' | 'cell' | 'header' | 'row' | 'wrapper';
+interface TableProps<T> {
+  bordered?: boolean;
+  className?: string;
+  classNames?: Partial<Record<TableSemanticName, string>>;
+  columns: TableColumn<T>[];
+  dataSource?: T[];
+  emptyText?: ReactNode;
+  loading?: boolean;
+  onChange?: (pagination: TablePaginationConfig, filters: TableFilters, sorter: TableSorterResult<T>) => void;
+  onRow?: (record: T, index: number) => HTMLAttributes<HTMLTableRowElement>;
+  pagination?: false | TablePaginationConfig;
+  ref?: Ref<HTMLDivElement>;
+  rowClassName?: string | ((record: T, index: number) => string);
+  rowKey: Extract<keyof T, string> | ((record: T) => Key);
+  scroll?: {
+    x?: number | string;
+    y?: number | string;
+  };
+  size?: 'small' | 'middle';
+  style?: CSSProperties;
+  styles?: Partial<Record<TableSemanticName, CSSProperties>>;
+  tableLayout?: 'auto' | 'fixed';
+}
+//#endregion
+export { FilterValue, SortOrder, TableColumn, TableFilters, TablePaginationConfig, TableProps, TableSemanticName, TableSorterResult };
+//# sourceMappingURL=type.d.mts.map

package/es/base-ui/Table/useTableState.mjs

@@ -0,0 +1,99 @@
+import { getColumnId } from "./toColumnDefs.mjs";
+import { useState } from "react";
+//#region src/base-ui/Table/useTableState.ts
+const resolve = (updater, previous) => typeof updater === "function" ? updater(previous) : updater;
+const initialSorting = (columns) => {
+	const index = columns.findIndex((column) => column.defaultSortOrder);
+	if (index === -1) return [];
+	return [{
+		desc: columns[index].defaultSortOrder === "descend",
+		id: getColumnId(columns[index], index)
+	}];
+};
+const useTableState = ({ columns, onChange, pagination }) => {
+	const config = pagination === false ? void 0 : pagination ?? {};
+	const columnIds = columns.map((column, index) => getColumnId(column, index));
+	const [sorting, setSorting] = useState(() => initialSorting(columns));
+	const [columnFilters, setColumnFilters] = useState([]);
+	const [innerPage, setInnerPage] = useState({
+		pageIndex: (config?.defaultCurrent ?? 1) - 1,
+		pageSize: config?.defaultPageSize ?? 10
+	});
+	const page = {
+		pageIndex: config?.current === void 0 ? innerPage.pageIndex : config.current - 1,
+		pageSize: config?.pageSize ?? innerPage.pageSize
+	};
+	const toFilters = (state) => Object.fromEntries(columns.map((column, index) => [column, columnIds[index]]).filter(([column]) => column.filters?.length).map(([, id]) => [id, state.find((filter) => filter.id === id)?.value ?? null]));
+	const toSorter = (state) => {
+		const [active] = state;
+		if (!active) return {};
+		return {
+			column: columns[columnIds.indexOf(active.id)],
+			columnKey: active.id,
+			order: active.desc ? "descend" : "ascend"
+		};
+	};
+	const toPaginationArg = (next) => config ? {
+		...config,
+		current: next.pageIndex + 1,
+		pageSize: next.pageSize
+	} : {};
+	const report = (nextPage, nextFilters, nextSorting) => onChange?.(toPaginationArg(nextPage), toFilters(nextFilters), toSorter(nextSorting));
+	const changePage = (next) => {
+		setInnerPage(next);
+		const sizeChanged = next.pageSize !== page.pageSize;
+		if (sizeChanged) config?.onShowSizeChange?.(next.pageIndex + 1, next.pageSize);
+		if (sizeChanged || next.pageIndex !== page.pageIndex) config?.onChange?.(next.pageIndex + 1, next.pageSize);
+	};
+	const clampPage = (pageIndex) => {
+		if (config?.current === void 0) {
+			setInnerPage((previous) => ({
+				...previous,
+				pageIndex
+			}));
+			return;
+		}
+		config.onChange?.(pageIndex + 1, page.pageSize);
+	};
+	const onSortingChange = (updater) => {
+		const next = resolve(updater, sorting);
+		const firstPage = {
+			...page,
+			pageIndex: 0
+		};
+		setSorting(next);
+		changePage(firstPage);
+		report(firstPage, columnFilters, next);
+	};
+	const onColumnFiltersChange = (updater) => {
+		const next = resolve(updater, columnFilters);
+		const firstPage = {
+			...page,
+			pageIndex: 0
+		};
+		setColumnFilters(next);
+		changePage(firstPage);
+		report(firstPage, next, sorting);
+	};
+	const onPaginationChange = (updater) => {
+		const next = resolve(updater, page);
+		changePage(next);
+		report(next, columnFilters, sorting);
+	};
+	return {
+		clampPage,
+		columnFilters,
+		columnIds,
+		config,
+		manualSorting: columns.some((column) => column.sorter === true),
+		onColumnFiltersChange,
+		onPaginationChange,
+		onSortingChange,
+		page,
+		sorting
+	};
+};
+//#endregion
+export { useTableState };
+
+//# sourceMappingURL=useTableState.mjs.map

package/es/base-ui/Table/useTableState.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableState.mjs","names":[],"sources":["../../../src/base-ui/Table/useTableState.ts"],"sourcesContent":["import type {\n  ColumnFiltersState,\n  PaginationState,\n  SortingState,\n  Updater,\n} from '@tanstack/react-table';\nimport { useState } from 'react';\n\nimport { getColumnId } from './toColumnDefs';\nimport type {\n  TableColumn,\n  TableFilters,\n  TablePaginationConfig,\n  TableProps,\n  TableSorterResult,\n} from './type';\n\nconst resolve = <S>(updater: Updater<S>, previous: S): S =>\n  typeof updater === 'function' ? (updater as (old: S) => S)(previous) : updater;\n\nconst initialSorting = (columns: TableColumn<any>[]): SortingState => {\n  const index = columns.findIndex((column) => column.defaultSortOrder);\n  if (index === -1) return [];\n  return [\n    { desc: columns[index].defaultSortOrder === 'descend', id: getColumnId(columns[index], index) },\n  ];\n};\n\nexport const useTableState = <T>({\n  columns,\n  onChange,\n  pagination,\n}: Pick<TableProps<T>, 'columns' | 'onChange' | 'pagination'>) => {\n  const config: TablePaginationConfig | undefined =\n    pagination === false ? undefined : (pagination ?? {});\n  const columnIds = columns.map((column, index) => getColumnId(column, index));\n\n  const [sorting, setSorting] = useState<SortingState>(() => initialSorting(columns));\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\n  const [innerPage, setInnerPage] = useState<PaginationState>({\n    pageIndex: (config?.defaultCurrent ?? 1) - 1,\n    pageSize: config?.defaultPageSize ?? 10,\n  });\n\n  const page: PaginationState = {\n    pageIndex: config?.current === undefined ? innerPage.pageIndex : config.current - 1,\n    pageSize: config?.pageSize ?? innerPage.pageSize,\n  };\n\n  const toFilters = (state: ColumnFiltersState): TableFilters =>\n    Object.fromEntries(\n      columns\n        .map((column, index) => [column, columnIds[index]] as const)\n        .filter(([column]) => column.filters?.length)\n        .map(([, id]) => [\n          id,\n          (state.find((filter) => filter.id === id)?.value as TableFilters[string]) ?? null,\n        ]),\n    );\n\n  const toSorter = (state: SortingState): TableSorterResult<T> => {\n    const [active] = state;\n    if (!active) return {};\n    const index = columnIds.indexOf(active.id);\n    return {\n      column: columns[index],\n      columnKey: active.id,\n      order: active.desc ? 'descend' : 'ascend',\n    };\n  };\n\n  const toPaginationArg = (next: PaginationState): TablePaginationConfig =>\n    config ? { ...config, current: next.pageIndex + 1, pageSize: next.pageSize } : {};\n\n  const report = (\n    nextPage: PaginationState,\n    nextFilters: ColumnFiltersState,\n    nextSorting: SortingState,\n  ) => onChange?.(toPaginationArg(nextPage), toFilters(nextFilters), toSorter(nextSorting));\n\n  const changePage = (next: PaginationState) => {\n    setInnerPage(next);\n    const sizeChanged = next.pageSize !== page.pageSize;\n    if (sizeChanged) config?.onShowSizeChange?.(next.pageIndex + 1, next.pageSize);\n    if (sizeChanged || next.pageIndex !== page.pageIndex) {\n      config?.onChange?.(next.pageIndex + 1, next.pageSize);\n    }\n  };\n\n  const clampPage = (pageIndex: number) => {\n    if (config?.current === undefined) {\n      setInnerPage((previous) => ({ ...previous, pageIndex }));\n      return;\n    }\n    config.onChange?.(pageIndex + 1, page.pageSize);\n  };\n\n  const onSortingChange = (updater: Updater<SortingState>) => {\n    const next = resolve(updater, sorting);\n    const firstPage = { ...page, pageIndex: 0 };\n    setSorting(next);\n    changePage(firstPage);\n    report(firstPage, columnFilters, next);\n  };\n\n  const onColumnFiltersChange = (updater: Updater<ColumnFiltersState>) => {\n    const next = resolve(updater, columnFilters);\n    const firstPage = { ...page, pageIndex: 0 };\n    setColumnFilters(next);\n    changePage(firstPage);\n    report(firstPage, next, sorting);\n  };\n\n  const onPaginationChange = (updater: Updater<PaginationState>) => {\n    const next = resolve(updater, page);\n    changePage(next);\n    report(next, columnFilters, sorting);\n  };\n\n  return {\n    clampPage,\n    columnFilters,\n    columnIds,\n    config,\n    manualSorting: columns.some((column) => column.sorter === true),\n    onColumnFiltersChange,\n    onPaginationChange,\n    onSortingChange,\n    page,\n    sorting,\n  };\n};\n"],"mappings":"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"}