@lobehub/ui 5.60.0 → 5.61.0

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

@@ -1,133 +1,480 @@
 "use client";
+import { Tooltip } from "../Tooltip/Tooltip.mjs";
+import ActionIcon from "../ActionIcon/ActionIcon.mjs";
+import { useTranslation } from "../../i18n/useTranslation.mjs";
 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 Empty from "../../Empty/Empty.mjs";
+import table_default from "../../i18n/resources/en/table.mjs";
+import Column from "./Column.mjs";
+import ColumnGroup from "./ColumnGroup.mjs";
+import { SELECTION_ALL, SELECTION_COLUMN, SELECTION_INVERT, SELECTION_NONE, isPlainObject } from "./selectionUtils.mjs";
+import { assertColumnKeys, fillColumns, flattenColumns, getColumnId, getColumnPos, isColumnGroup, isColumnVisibleAt, renderColumnTitle } from "./columnUtils.mjs";
+import renderExpandIcon from "./ExpandIcon.mjs";
+import { PREFIX_CLS, styles } from "./style.mjs";
+import FilterDropdown, { TableMeasureRowContext } from "./FilterDropdown.mjs";
+import TableLoadingSkeleton from "./LoadingSkeleton.mjs";
+import { normalizeClassNames, normalizeStyles, resolveSemantic } from "./semantic.mjs";
+import { useBreakpoint } from "./useBreakpoint.mjs";
+import { useSelection } from "./useSelection.mjs";
+import { DEFAULT_SORT_DIRECTIONS, getMultiplePriority, getNextSortOrder } from "./useSorter.mjs";
 import { useTableState } from "./useTableState.mjs";
-import { memo, useEffect, useMemo } from "react";
+import { memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "antd-style";
-import { useTable } from "@tanstack/react-table";
+import { ArrowDownFromLine, ArrowUpDown, ArrowUpToLine } from "lucide-react";
+import RcTable, { EXPAND_COLUMN, INTERNAL_HOOKS, Summary, VirtualTable, convertChildrenToColumns } from "@rc-component/table";
 //#region src/base-ui/Table/Table.tsx
 const EMPTY_DATA = [];
+const DEFAULT_INDENT_SIZE = 15;
+const DEFAULT_SORTER_TOOLTIP = { target: "full-header" };
+/**
+* Estimated `virtual` row height per size, like antd: padding × 2 + 14px × 22/14 line + 1px border.
+* rc-virtual-list still measures the real rows; this only seeds the scroll range.
+*/
+const VIRTUAL_ROW_HEIGHT = {
+	large: 55,
+	medium: 47,
+	middle: 47,
+	small: 39
+};
+const sizeClassName = {
+	large: styles.sizeLarge,
+	medium: styles.sizeMedium,
+	middle: styles.sizeMedium,
+	small: styles.sizeSmall
+};
+const sortTipOf = (next, locale) => next === "descend" ? locale.triggerDesc : next === "ascend" ? locale.triggerAsc : locale.cancelSort;
+const ariaSortOf = (order) => order === "ascend" ? "ascending" : order === "descend" ? "descending" : "none";
+const paginationAlignClassName = {
+	center: styles.paginationCenter,
+	end: styles.paginationEnd,
+	start: styles.paginationStart
+};
+/** antd `normalizePlacement`: `topLeft` / `bottomStart` → `start`, `*Center` → `center`, else `end`. */
+const normalizePlacement = (placement) => {
+	const lower = placement.toLowerCase();
+	if (lower.includes("center")) return "center";
+	return lower.includes("left") || lower.includes("start") ? "start" : "end";
+};
+const wrapMeasureRow = (measureRow) => /* @__PURE__ */ jsx(TableMeasureRowContext, {
+	value: true,
+	children: measureRow
+});
+/** antd's ref shape: the root element itself, extended with `nativeElement` and `scrollTo`. */
+const toTableRef = (element, scrollTo) => {
+	const extra = {
+		nativeElement: element,
+		scrollTo
+	};
+	return new Proxy(element, { get(target, prop) {
+		if (prop in extra) return extra[prop];
+		const value = Reflect.get(target, prop, target);
+		return typeof value === "function" ? value.bind(target) : value;
+	} });
+};
 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 { variant = "borderless", children, childrenColumnName: legacyChildrenColumnName, className, classNames, column: columnDefaults, columns: columnsProp, components, dataSource = EMPTY_DATA, emptyText, expandable, expandedRowRender: legacyExpandedRowRender, expandIcon: legacyExpandIcon, expandIconColumnIndex: legacyExpandIconColumnIndex, footer, getPopupContainer, indentSize: legacyIndentSize, loading = false, locale, measureRowRender, onChange, onHeaderRow, onRow, onScroll, pagination, ref, rootClassName, rowClassName, rowHoverable = true, rowKey = "key", rowSelection, scroll, showHeader, showSorterTooltip: tableShowSorterTooltip = DEFAULT_SORTER_TOOLTIP, size: sizeProp, sortDirections: tableSortDirections = DEFAULT_SORT_DIRECTIONS, sticky, style, styles: customStyles, summary, tableLayout, title, virtual } = props;
+	const size = sizeProp ?? "middle";
+	const { t } = useTranslation(table_default);
+	const tableLocale = useMemo(() => ({
+		cancelSort: t("table.cancelSort"),
+		collapse: t("table.collapse"),
+		expand: t("table.expand"),
+		filterCheckAll: t("table.filterCheckAll"),
+		filterConfirm: t("table.filterConfirm"),
+		filterEmptyText: t("table.filterEmptyText"),
+		filterReset: t("table.filterReset"),
+		filterSearchPlaceholder: t("table.filterSearchPlaceholder"),
+		filterTitle: t("table.filterTitle"),
+		selectAll: t("table.selectAll"),
+		selectInvert: t("table.selectInvert"),
+		selectNone: t("table.selectNone"),
+		selectionAll: t("table.selectionAll"),
+		sortTitle: t("table.sortTitle"),
+		triggerAsc: t("table.triggerAsc"),
+		triggerDesc: t("table.triggerDesc"),
+		...locale?.filterCheckall !== void 0 && { filterCheckAll: locale.filterCheckall },
+		...locale
+	}), [t, locale]);
+	const semanticInfo = { props };
+	const mergedClassNames = normalizeClassNames(resolveSemantic(classNames, semanticInfo));
+	const mergedStyles = normalizeStyles(resolveSemantic(customStyles, semanticInfo));
+	const rawColumns = useMemo(() => columnsProp ?? convertChildrenToColumns(children), [columnsProp, children]);
+	const columns = useMemo(() => fillColumns(rawColumns, columnDefaults), [rawColumns, columnDefaults]);
+	assertColumnKeys(columns);
+	const needResponsive = useMemo(() => flattenColumns(columns).some(({ column }) => column.responsive), [columns]);
+	const screens = useBreakpoint(needResponsive);
+	const hasRowSelection = Boolean(rowSelection);
+	const childrenColumnName = expandable?.childrenColumnName ?? legacyChildrenColumnName ?? "children";
+	const expandType = useMemo(() => {
+		if (dataSource.some((record) => isPlainObject(record) && record[childrenColumnName])) return "nest";
+		if (legacyExpandedRowRender || expandable?.expandedRowRender) return "row";
+		return null;
+	}, [
+		childrenColumnName,
+		dataSource,
+		legacyExpandedRowRender,
+		expandable?.expandedRowRender
+	]);
+	const mergedExpandable = useMemo(() => {
+		const config = {
+			childrenColumnName: legacyChildrenColumnName,
+			expandedRowRender: legacyExpandedRowRender,
+			expandIconColumnIndex: legacyExpandIconColumnIndex,
+			...expandable,
+			expandIcon: expandable?.expandIcon ?? legacyExpandIcon ?? ((iconProps) => renderExpandIcon(iconProps, tableLocale))
+		};
+		if (expandType === "nest" && config.expandIconColumnIndex === void 0) config.expandIconColumnIndex = hasRowSelection ? 1 : 0;
+		else if ((config.expandIconColumnIndex ?? 0) > 0 && hasRowSelection) config.expandIconColumnIndex = config.expandIconColumnIndex - 1;
+		if (virtual && config.columnWidth === void 0) config.columnWidth = 48;
+		if (typeof config.indentSize !== "number") config.indentSize = typeof legacyIndentSize === "number" ? legacyIndentSize : DEFAULT_INDENT_SIZE;
+		return config;
+	}, [
+		expandable,
+		legacyChildrenColumnName,
+		legacyExpandedRowRender,
+		legacyExpandIcon,
+		legacyExpandIconColumnIndex,
+		legacyIndentSize,
+		expandType,
+		hasRowSelection,
+		virtual,
+		tableLocale
+	]);
+	const rootRef = useRef(null);
+	const rcRef = useRef(null);
+	useImperativeHandle(ref, () => toTableRef(rootRef.current, (config) => rcRef.current?.scrollTo(config)), []);
 	const state = useTableState({
+		childrenColumnName,
 		columns,
+		dataSource,
 		onChange,
+		onTableChange: () => {
+			if (scroll && scroll.scrollToFirstRowOnChange !== false) rcRef.current?.scrollTo({ top: 0 });
+		},
 		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 { config: paginationConfig, data: allRows, filterStates, page, sortStates, titleProps } = state;
+	const { pageIndex, pageSize } = page;
+	const { total } = state;
+	const rows = useMemo(() => {
+		if (pagination === false) return allRows;
+		if (allRows.length < total && allRows.length <= pageSize) return allRows;
+		return allRows.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+	}, [
+		allRows,
+		pagination,
+		pageIndex,
+		pageSize,
+		total
+	]);
+	const getRowKey = useMemo(() => typeof rowKey === "function" ? rowKey : (record) => record?.[rowKey], [rowKey]);
+	const recordMap = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		const dig = (records) => {
+			records.forEach((record, index) => {
+				map.set(getRowKey(record, index), record);
+				const children = isPlainObject(record) ? record[childrenColumnName] : void 0;
+				if (Array.isArray(children)) dig(children);
+			});
+		};
+		dig(dataSource);
+		return map;
+	}, [
+		dataSource,
+		childrenColumnName,
+		getRowKey
+	]);
+	const getRecordByKey = useCallback((key) => recordMap.get(key), [recordMap]);
+	const mergedRowSelection = useMemo(() => {
+		if (!virtual || !rowSelection || rowSelection.columnWidth !== void 0) return rowSelection;
+		const withDropdown = Boolean(rowSelection.selections) && rowSelection.type !== "radio";
+		return {
+			...rowSelection,
+			columnWidth: 32 + (withDropdown ? 24 : 0) + (variant === "outlined" ? 16 : 0)
+		};
+	}, [
+		virtual,
+		rowSelection,
+		variant
+	]);
+	const [transformSelectionColumns, selectedKeySet] = useSelection({
+		childrenColumnName,
+		data: allRows,
+		expandType,
+		getRecordByKey,
+		getRowKey,
+		locale: tableLocale,
+		pageData: rows
+	}, mergedRowSelection);
+	const mergedRowClassName = useCallback((record, index, indent) => cx(selectedKeySet.has(getRowKey(record, index)) && `lobe-table-row-selected`, typeof rowClassName === "function" ? rowClassName(record, index, indent) : rowClassName), [
+		selectedKeySet,
+		getRowKey,
+		rowClassName
+	]);
+	const clientPaginated = pagination !== false && paginationConfig?.total === void 0;
 	const syncClampedPage = useEventCallback(() => state.clampPage(pageIndex));
 	useEffect(() => {
-		if (clientPaginated && pageIndex !== page.pageIndex) syncClampedPage();
+		if (clientPaginated && pageIndex !== state.rawPageIndex) syncClampedPage();
 	}, [
 		clientPaginated,
 		pageIndex,
-		page.pageIndex,
+		state.rawPageIndex,
 		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)
-						});
+	const { spinning: isLoading = true, tip, variant: spinVariant = "network", ...spinRest } = typeof loading === "object" ? loading : { spinning: loading };
+	const spinProps = {
+		variant: spinVariant,
+		...spinRest
+	};
+	const triggerSort = useEventCallback(state.triggerSort);
+	const triggerFilter = useEventCallback(state.triggerFilter);
+	const rcColumns = useMemo(() => {
+		const transform = (list, parentPos) => list.flatMap((column, index) => {
+			if (column === EXPAND_COLUMN || column === SELECTION_COLUMN) return [column];
+			const pos = getColumnPos(index, parentPos);
+			if (!isColumnVisibleAt(column, screens)) return [];
+			const id = getColumnId(column, pos);
+			const { defaultFilteredValue: _defaultFilteredValue, defaultSortOrder: _defaultSortOrder, filterDropdown, filterDropdownOpen: _filterDropdownOpen, filterDropdownProps: _filterDropdownProps, filtered: _filtered, filteredValue: _filteredValue, filterIcon: _filterIcon, filterMode: _filterMode, filterMultiple: _filterMultiple, filterOnClose: _filterOnClose, filterResetToDefaultFilteredValue: _filterResetToDefaultFilteredValue, filters: columnFilters, filterSearch: _filterSearch, onFilter: _onFilter, onFilterDropdownOpenChange: _onFilterDropdownOpenChange, onHeaderCell, responsive: _responsive, showSorterTooltip: columnShowSorterTooltip, sortDirections: columnSortDirections, sortIcon, sortOrder: _sortOrder, sorter, title: columnTitle, ...rest } = column;
+			const order = sorter ? sortStates.find(({ key }) => key === id)?.sortOrder : void 0;
+			const titleNode = renderColumnTitle(columnTitle, titleProps);
+			const titleText = typeof titleNode === "string" || typeof titleNode === "number" ? String(titleNode) : void 0;
+			const titleContent = column.ellipsis ? /* @__PURE__ */ jsx("span", {
+				className: cx(styles.columnTitle, `${PREFIX_CLS}-column-title`),
+				children: titleNode
+			}) : titleNode;
+			const filterNode = columnFilters || filterDropdown ? /* @__PURE__ */ jsx(FilterDropdown, {
+				column,
+				columnKey: id,
+				filterState: filterStates.find(({ key }) => key === id),
+				getPopupContainer,
+				label: titleText ?? id,
+				locale: tableLocale,
+				triggerFilter
+			}) : null;
+			const hasControls = Boolean(sorter) || Boolean(filterNode);
+			let sorterNode = null;
+			if (sorter) {
+				const nextOrder = getNextSortOrder(columnSortDirections ?? tableSortDirections, order);
+				const showTooltip = columnShowSorterTooltip ?? tableShowSorterTooltip;
+				const { target, ...tooltipOptions } = typeof showTooltip === "object" ? showTooltip : {};
+				const tooltipProps = {
+					title: sortTipOf(nextOrder, tableLocale),
+					...tooltipOptions
+				};
+				const withTooltip = (node) => /* @__PURE__ */ jsx(Tooltip, {
+					...tooltipProps,
+					children: node
+				});
+				const iconOnlyTooltip = Boolean(showTooltip) && target === "sorter-icon";
+				const onSort = () => triggerSort({
+					column,
+					key: id,
+					multiplePriority: getMultiplePriority(column),
+					sortOrder: nextOrder
+				});
+				const sortAction = /* @__PURE__ */ jsx(ActionIcon, {
+					active: Boolean(order),
+					className: cx(styles.sortCaret, `${PREFIX_CLS}-column-sorter`),
+					"data-order": order ?? void 0,
+					size: "small",
+					icon: sortIcon ? sortIcon({ sortOrder: order ?? null }) : order === "ascend" ? ArrowUpToLine : order === "descend" ? ArrowDownFromLine : ArrowUpDown,
+					...iconOnlyTooltip && showTooltip ? {
+						title: tooltipProps.title,
+						tooltipProps: tooltipOptions
+					} : {},
+					onClick: (event) => {
+						event.stopPropagation();
+						onSort();
 					}
-				}), /* @__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,
+				});
+				const group = /* @__PURE__ */ jsxs("span", {
+					className: cx(styles.sortButton, `${PREFIX_CLS}-column-sorters`),
+					title: showTooltip ? void 0 : tableLocale.sortTitle,
+					children: [/* @__PURE__ */ jsx("span", {
+						className: styles.sortTitle,
+						onClick: onSort,
+						children: titleContent
+					}), sortAction]
+				});
+				sorterNode = showTooltip && !iconOnlyTooltip ? withTooltip(group) : group;
+			}
+			return {
+				...rest,
+				className: cx(rest.className, order ? [`${PREFIX_CLS}-column-sort`, styles.sortedColumn] : void 0),
+				children: isColumnGroup(column) ? transform(column.children, pos) : void 0,
+				key: id,
+				onHeaderCell: () => {
+					const cell = onHeaderCell?.(column);
+					return {
+						...sorter && { "aria-sort": ariaSortOf(order) },
+						...column.ellipsis && hasControls && titleText && { title: titleText },
+						...cell,
+						className: cx(sorter && `lobe-table-column-has-sorters`, cell?.className)
+					};
+				},
+				title: hasControls ? /* @__PURE__ */ jsxs("span", {
+					className: styles.headerInner,
+					children: [sorterNode ?? titleContent, filterNode]
+				}) : titleContent
+			};
+		});
+		return transform(columns);
+	}, [
+		columns,
+		screens,
+		sortStates,
+		filterStates,
+		titleProps,
+		getPopupContainer,
+		triggerFilter,
+		triggerSort,
+		tableSortDirections,
+		tableShowSorterTooltip,
+		tableLocale
+	]);
+	const mergedOnRow = useMemo(() => (record, index) => {
+		const rowProps = onRow?.(record, index ?? 0) ?? {};
+		return {
+			...rowProps,
+			className: cx(rowProps.onClick && styles.clickable, rowProps.className)
+		};
+	}, [onRow]);
+	const hasFixedColumn = useMemo(() => Boolean(rowSelection?.fixed) || flattenColumns(columns).some(({ column }) => column.fixed && !column.hidden), [columns, rowSelection?.fixed]);
+	const mergedTableLayout = tableLayout ?? (hasFixedColumn && scroll?.x !== "max-content" ? "fixed" : void 0);
+	let topPagination = null;
+	let bottomPagination = null;
+	if (paginationConfig && total > 0) {
+		const { current: _current, defaultCurrent: _defaultCurrent, defaultPageSize: _defaultPageSize, onChange: _onChange, onShowSizeChange: _onShowSizeChange, pageSize: _pageSize, placement, position, total: _total, className: paginationClassName, classNames: paginationClassNames, size: paginationSize, styles: paginationStyles, ...paginationRest } = paginationConfig;
+		const pageCount = Math.ceil(total / pageSize);
+		const renderPagination = (align, side) => /* @__PURE__ */ jsx("div", {
+			className: cx(styles.pagination, side === "top" && styles.paginationTop, paginationAlignClassName[align], `${PREFIX_CLS}-pagination-wrapper`),
 			children: /* @__PURE__ */ jsx(Pagination, {
+				...paginationRest,
 				current: pageIndex + 1,
-				pageSize: page.pageSize,
-				pageSizeOptions: state.config?.pageSizeOptions,
-				showSizeChanger: state.config?.showSizeChanger,
+				pageSize,
+				size: paginationSize ?? (sizeProp && sizeProp !== "large" ? "small" : void 0),
 				total,
-				onChange: (next, pageSize) => state.onPaginationChange({
+				className: cx(`${PREFIX_CLS}-pagination`, `${PREFIX_CLS}-pagination-${align}`, paginationClassName),
+				classNames: {
+					item: cx(mergedClassNames.pagination.item, paginationClassNames?.item),
+					root: cx(mergedClassNames.pagination.root, paginationClassNames?.root)
+				},
+				styles: {
+					item: {
+						...paginationStyles?.item,
+						...mergedStyles.pagination.item
+					},
+					root: {
+						...paginationStyles?.root,
+						...mergedStyles.pagination.root
+					}
+				},
+				onChange: (next, nextPageSize) => state.onPaginationChange({
 					pageIndex: next - 1,
-					pageSize
+					pageSize: nextPageSize
 				})
 			})
-		})]
+		});
+		if (!(paginationRest.hideOnSinglePage && pageCount <= 1)) {
+			const mergedPlacement = placement ?? position;
+			if (Array.isArray(mergedPlacement)) {
+				const find = (side) => mergedPlacement.find((item) => item.includes(side));
+				const top = find("top");
+				const bottom = find("bottom");
+				const none = mergedPlacement.every((item) => item === "none");
+				if (top) topPagination = renderPagination(normalizePlacement(top), "top");
+				if (bottom) bottomPagination = renderPagination(normalizePlacement(bottom), "bottom");
+				if (!top && !bottom && !none) bottomPagination = renderPagination("end", "bottom");
+			} else bottomPagination = renderPagination("end", "bottom");
+		}
+	}
+	const customEmpty = locale?.emptyText ?? emptyText;
+	const emptyNode = isLoading ? /* @__PURE__ */ jsx(TableLoadingSkeleton, {
+		columns,
+		expandColumn: Boolean(expandType),
+		rows: pagination === false ? 5 : Math.min(5, pageSize),
+		screens,
+		selectionColumn: hasRowSelection,
+		size
+	}) : customEmpty === void 0 ? /* @__PURE__ */ jsx(Empty, { description: t("table.emptyText") }) : typeof customEmpty === "function" ? customEmpty() : customEmpty;
+	const TableComponent = virtual ? VirtualTable : RcTable;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: rootRef,
+		style: {
+			...mergedStyles.root,
+			...style
+		},
+		className: cx(styles.root, `${PREFIX_CLS}-wrapper`, rootClassName, className, mergedClassNames.root),
+		children: [
+			topPagination,
+			/* @__PURE__ */ jsxs("div", {
+				className: styles.spinContainer,
+				"data-table-wrapper": "",
+				children: [/* @__PURE__ */ jsx(TableComponent, {
+					...virtual && { listItemHeight: VIRTUAL_ROW_HEIGHT[size] },
+					columns: rcColumns,
+					components,
+					data: rows,
+					emptyText: emptyNode,
+					expandable: mergedExpandable,
+					footer,
+					internalHooks: INTERNAL_HOOKS,
+					prefixCls: PREFIX_CLS,
+					ref: rcRef,
+					rowClassName: mergedRowClassName,
+					rowHoverable,
+					rowKey,
+					scroll,
+					showHeader,
+					sticky,
+					summary,
+					tableLayout: mergedTableLayout,
+					title,
+					transformColumns: transformSelectionColumns,
+					className: cx(styles.table, sizeClassName[size], `${PREFIX_CLS}-${size === "middle" ? "medium" : size}`, variant === "outlined" && styles.outlined, variant === "filled" && styles.filled, `${PREFIX_CLS}-${variant}`, rowHoverable && styles.hoverable),
+					classNames: {
+						body: mergedClassNames.body,
+						content: mergedClassNames.content,
+						footer: mergedClassNames.footer,
+						header: mergedClassNames.header,
+						section: mergedClassNames.section,
+						title: mergedClassNames.title
+					},
+					measureRowRender: (measureRow) => wrapMeasureRow(measureRowRender ? measureRowRender(measureRow) : measureRow),
+					styles: {
+						body: mergedStyles.body,
+						content: mergedStyles.content,
+						footer: mergedStyles.footer,
+						header: mergedStyles.header,
+						section: mergedStyles.section,
+						title: mergedStyles.title
+					},
+					onHeaderRow,
+					onRow: mergedOnRow,
+					onScroll
+				}), isLoading && /* @__PURE__ */ jsxs("div", {
+					className: styles.loading,
+					"data-table-loading": "",
+					children: [/* @__PURE__ */ jsx(Spin, { ...spinProps }), tip]
+				})]
+			}),
+			bottomPagination
+		]
 	});
 };
 const Table = memo(TableInner);
 Table.displayName = "Table";
+Table.Column = Column;
+Table.ColumnGroup = ColumnGroup;
+Table.EXPAND_COLUMN = EXPAND_COLUMN;
+Table.SELECTION_COLUMN = SELECTION_COLUMN;
+Table.SELECTION_ALL = SELECTION_ALL;
+Table.SELECTION_INVERT = SELECTION_INVERT;
+Table.SELECTION_NONE = SELECTION_NONE;
+Table.Summary = Summary;
 //#endregion
 export { TableInner, Table as default };