@lobehub/ui/es/base-ui/Table/Table.mjs

Lobe UI is an open-source UI component library for building AIGC web apps

"use client";
import { useEventCallback } from "../../hooks/useEventCallback.mjs";
import Pagination from "../Pagination/Pagination.mjs";
import Spin from "../Spin/Spin.mjs";
import { tableFeatureSet } from "./features.mjs";
import { styles } from "./style.mjs";
import FilterMenu from "./FilterMenu.mjs";
import { getFixedOffsets } from "./fixedOffsets.mjs";
import { toColumnDefs } from "./toColumnDefs.mjs";
import TableBody from "./TableBody.mjs";
import TableHead from "./TableHead.mjs";
import { useTableState } from "./useTableState.mjs";
import { memo, useEffect, useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { cx } from "antd-style";
import { useTable } from "@tanstack/react-table";
//#region src/base-ui/Table/Table.tsx
const EMPTY_DATA = [];
const TableInner = (props) => {
	const { bordered = false, className, classNames, columns, dataSource = EMPTY_DATA, emptyText, loading = false, onChange, onRow, pagination, ref, renderFilter, rowClassName, rowKey, scroll, size = "middle", style, styles: customStyles, tableLayout } = props;
	const state = useTableState({
		columns,
		onChange,
		pagination
	});
	const columnDefs = useMemo(() => toColumnDefs(columns), [columns]);
	const fixedOffsets = useMemo(() => getFixedOffsets(columns), [columns]);
	const table = useTable({
		columns: columnDefs,
		data: dataSource,
		enableMultiSort: false,
		enableSortingRemoval: true,
		features: tableFeatureSet,
		getRowId: (record) => String(typeof rowKey === "function" ? rowKey(record) : record[rowKey]),
		manualSorting: state.manualSorting,
		onColumnFiltersChange: state.onColumnFiltersChange,
		onSortingChange: state.onSortingChange,
		state: {
			columnFilters: state.columnFilters,
			sorting: state.sorting
		}
	});
	const allRows = table.getRowModel().rows;
	const { page } = state;
	const clientPaginated = pagination !== false && state.config?.total === void 0;
	const total = state.config?.total ?? allRows.length;
	const pageCount = Math.max(1, Math.ceil(total / page.pageSize));
	const pageIndex = Math.min(page.pageIndex, pageCount - 1);
	const rows = clientPaginated ? allRows.slice(pageIndex * page.pageSize, (pageIndex + 1) * page.pageSize) : allRows;
	const syncClampedPage = useEventCallback(() => state.clampPage(pageIndex));
	useEffect(() => {
		if (clientPaginated && pageIndex !== page.pageIndex) syncClampedPage();
	}, [
		clientPaginated,
		pageIndex,
		page.pageIndex,
		syncClampedPage
	]);
	const minWidth = scroll?.x === "max-content" ? "100%" : scroll?.x;
	return /* @__PURE__ */ jsxs("div", {
		className: cx(styles.root, className),
		ref,
		style,
		children: [/* @__PURE__ */ jsxs("div", {
			className: cx(styles.wrapper, bordered && styles.bordered, classNames?.wrapper),
			"data-table-wrapper": "",
			style: {
				maxHeight: scroll?.y,
				...customStyles?.wrapper
			},
			children: [/* @__PURE__ */ jsxs("table", {
				className: cx(styles.table, size === "small" ? styles.small : styles.middle),
				style: {
					minWidth,
					tableLayout,
					width: scroll?.x === "max-content" ? "max-content" : "100%"
				},
				children: [/* @__PURE__ */ jsx(TableHead, {
					classNames,
					columnIds: state.columnIds,
					columns,
					fixedOffsets,
					getColumn: (id) => table.getColumn(id),
					styles: customStyles,
					renderFilter: (column, id) => {
						if (renderFilter) return renderFilter(column, id, table);
						const tableColumn = table.getColumn(id);
						const value = tableColumn?.getFilterValue() ?? [];
						return /* @__PURE__ */ jsx(FilterMenu, {
							filters: column.filters ?? [],
							label: typeof column.title === "string" ? column.title : id,
							value,
							onChange: (next) => tableColumn?.setFilterValue(next.length > 0 ? next : void 0)
						});
					}
				}), /* @__PURE__ */ jsx(TableBody, {
					classNames,
					columnIds: state.columnIds,
					columns,
					emptyText,
					fixedOffsets,
					loading,
					rowClassName,
					rows,
					styles: customStyles,
					onRow
				})]
			}), loading && rows.length > 0 && /* @__PURE__ */ jsx("div", {
				className: styles.loading,
				"data-table-loading": "",
				children: /* @__PURE__ */ jsx(Spin, {})
			})]
		}), pagination !== false && total > 0 && /* @__PURE__ */ jsx("div", {
			className: styles.pagination,
			children: /* @__PURE__ */ jsx(Pagination, {
				current: pageIndex + 1,
				pageSize: page.pageSize,
				pageSizeOptions: state.config?.pageSizeOptions,
				showSizeChanger: state.config?.showSizeChanger,
				total,
				onChange: (next, pageSize) => state.onPaginationChange({
					pageIndex: next - 1,
					pageSize
				})
			})
		})]
	});
};
const Table = memo(TableInner);
Table.displayName = "Table";
//#endregion
export { TableInner, Table as default };

//# sourceMappingURL=Table.mjs.map