@antdv-vue/pro-table 0.0.0-stage → 2.0.3

package/dist/InternalTable.js

@@ -0,0 +1,444 @@
+import TableAlert from "./components/Alert/index.js";
+import { genProColumnsToColumns } from "./utils/genProColumnsToColumns.js";
+import { flattenColumns, genColumnKey, mergePagination, parseServerDefaultColumnConfig, useActionType } from "./utils/index.js";
+import FormSearch from "./components/Form/index.js";
+import { useTableContextInject } from "./Store/Provide.js";
+import Toolbar from "./components/ToolBar/index.js";
+import style_default from "./style/index.js";
+import TableRender from "./TableRender.js";
+import useFetchData from "./useFetchData.js";
+import { columnSort } from "./utils/columnSort.js";
+import { cloneVNode, computed, createVNode, defineComponent, mergeProps, shallowRef, toRef, watchEffect } from "vue";
+import { useProFormInstanceExpose } from "@antdv-vue/pro-form";
+import { proTheme, useIntl } from "@antdv-vue/pro-provider";
+import { stringify, useEditableArray, useEffect, useMountMergeState } from "@antdv-vue/pro-utils";
+import { classNames } from "@v-c/util";
+import isEqual from "@v-c/util/dist/isEqual";
+import { useConfig } from "antdv-next/config-provider/context";
+//#region src/InternalTable.tsx
+function useRowKey(props) {
+	return computed(() => {
+		if (typeof props.rowKey === "function") return props.rowKey;
+		const rowKey = (record, index) => {
+			if (index === -1) return record[props.rowKey];
+			if (props.name) return index?.toString();
+			return record[props.rowKey] ?? index?.toString();
+		};
+		return rowKey;
+	});
+}
+function useMergedPagination({ pagination, action, intl, request, type }) {
+	return computed(() => {
+		const newPropsPagination = pagination === false ? false : { ...pagination || {} };
+		const pageConfig = {
+			...action.pageInfo.value,
+			setPageInfo: ({ pageSize, current }) => {
+				const { pageInfo } = action;
+				if (pageSize === pageInfo.value.pageSize || pageInfo.value.current === 1) {
+					action.setPageInfo({
+						pageSize,
+						current
+					});
+					return;
+				}
+				if (request) action.setDataSource([]);
+				action.setPageInfo({
+					pageSize,
+					current: type === "listy" ? current : 1
+				});
+			}
+		};
+		if (request && newPropsPagination) {
+			delete newPropsPagination.onChange;
+			delete newPropsPagination.onShowSizeChange;
+		}
+		return mergePagination(newPropsPagination, pageConfig, intl.value);
+	});
+}
+const InternalProTable = /* @__PURE__ */ defineComponent((props, { slots, expose }) => {
+	const config = useConfig();
+	const formRef = shallowRef();
+	const prefixCls = computed(() => props.prefixCls ?? config.value.getPrefixCls("pro"));
+	const baseClassName = computed(() => `${prefixCls.value}-table`);
+	const intl = useIntl();
+	const { token } = proTheme?.useToken();
+	/** 通用的来操作子节点的工具类 */
+	const actionRef = shallowRef();
+	const counter = useTableContextInject();
+	const [hashId, cssVarCls] = style_default(baseClassName);
+	/** 单选多选的相关逻辑 */
+	const [selectedRowKeys, setSelectedRowKeys] = useMountMergeState(props.rowSelection ? props.rowSelection?.defaultSelectedRowKeys || [] : void 0, { value: computed(() => props.rowSelection ? props.rowSelection.selectedRowKeys : void 0) });
+	const [formSearch, setFormSearch] = useMountMergeState(() => {
+		if (props.manualRequest || props.search !== false) return;
+		return {};
+	});
+	const [proFilter, setProFilter] = useMountMergeState({});
+	const [proSort, setProSort] = useMountMergeState({});
+	const defaultProTableParams = computed(() => {
+		const { sort, filter } = parseServerDefaultColumnConfig(flattenColumns(props.columns));
+		return {
+			defaultProFilter: filter,
+			defaultProSort: sort
+		};
+	});
+	/** 设置默认排序和筛选值 */
+	useEffect(() => {
+		setProFilter(defaultProTableParams.value.defaultProFilter);
+		setProSort(defaultProTableParams.value.defaultProSort);
+	}, [() => defaultProTableParams.value.defaultProFilter, () => defaultProTableParams.value.defaultProSort]);
+	/** 需要初始化 不然默认可能报错 这里取了 defaultCurrent 和 current 为了保证不会重复刷新 */
+	const fetchPagination = computed(() => typeof props.pagination === "object" ? props.pagination : {
+		defaultCurrent: 1,
+		defaultPageSize: 20,
+		pageSize: 20,
+		current: 1
+	});
+	const fetchData = computed(() => {
+		if (!props.request) return void 0;
+		return async (pageParams) => {
+			const actionParams = {
+				...pageParams || {},
+				...formSearch.value,
+				...props.params
+			};
+			delete actionParams._timestamp;
+			return await props.request?.(actionParams, proSort.value, proFilter.value);
+		};
+	});
+	const action = useFetchData(fetchData, props.defaultData, {
+		pageInfo: computed(() => props.pagination === false ? false : fetchPagination.value),
+		loading: toRef(() => props.loading),
+		dataSource: toRef(() => props.dataSource),
+		onDataSourceChange: props.onDataSourceChange,
+		onLoad: props.onLoad,
+		onLoadingChange: props.onLoadingChange,
+		onRequestError: props.onRequestError,
+		postData: props.postData,
+		revalidateOnFocus: toRef(() => props.revalidateOnFocus || false),
+		manual: computed(() => formSearch.value === void 0),
+		polling: toRef(() => props.polling),
+		effects: [
+			() => stringify(props.params),
+			() => stringify(formSearch.value),
+			() => stringify(proFilter.value),
+			() => stringify(proSort.value)
+		],
+		debounceTime: toRef(() => props.debounceTime),
+		onPageInfoChange: (pageInfo) => {
+			if (!props.pagination || !fetchData.value) return;
+			props.pagination?.onChange?.(pageInfo.current, pageInfo.pageSize);
+			props.pagination?.onShowSizeChange?.(pageInfo.current, pageInfo.pageSize);
+		}
+	});
+	/** 聚焦的时候重新请求数据，这样可以保证数据都是最新的。 */
+	useEffect(() => {
+		if (props.manualRequest || !props.request || !props.revalidateOnFocus || props.form?.ignoreRules) return;
+		const visibilitychange = async () => {
+			if (document.visibilityState === "visible") await action.reload();
+		};
+		document.addEventListener("visibilitychange", visibilitychange);
+		return () => document.removeEventListener("visibilitychange", visibilitychange);
+	}, []);
+	/** SelectedRowKeys受控处理selectRows */
+	const preserveRecords = shallowRef(/* @__PURE__ */ new Map());
+	const getRowKey = useRowKey(props);
+	watchEffect(() => {
+		if (action.dataSource.value?.length) action.dataSource.value.forEach((data) => {
+			const dataRowKey = getRowKey.value(data, -1);
+			preserveRecords.value.set(dataRowKey, data);
+		});
+	});
+	/** 清空所有的选中项 */
+	const onCleanSelected = () => {
+		if (props.rowSelection && props.rowSelection.onChange) props.rowSelection.onChange([], [], { type: "all" });
+		setSelectedRowKeys([]);
+	};
+	if (counter.propsRef) counter.propsRef.value = props;
+	if (counter.setPrefixName) counter.setPrefixName(props.name);
+	/** 可编辑行的相关配置 */
+	const editableUtils = useEditableArray({
+		...props.editable,
+		type: computed(() => props.editable?.type),
+		editableKeys: computed(() => props.editable?.editableKeys),
+		tableName: computed(() => props.name),
+		getRowKey,
+		childrenColumnName: computed(() => props.expandable?.childrenColumnName || "children"),
+		dataSource: computed(() => action?.dataSource.value || []),
+		setDataSource: (data) => {
+			props.editable?.onValuesChange?.(void 0, data);
+			action?.setDataSource(data);
+		}
+	});
+	/** 绑定 action */
+	actionRef.value = useActionType(action, {
+		nativeElement: computed(() => counter.rootDomRef?.value),
+		focus: () => {
+			counter.rootDomRef?.value?.focus();
+		},
+		fullScreen: async () => {
+			if (!counter.rootDomRef?.value || !document.fullscreenEnabled) return;
+			if (document.fullscreenElement) await document.exitFullscreen();
+			else await counter.rootDomRef?.value.requestFullscreen();
+		},
+		onCleanSelected: async () => {
+			onCleanSelected();
+		},
+		resetAll: async () => {
+			onCleanSelected();
+			counter.setKeyWords?.(void 0);
+			action.setPageInfo({ current: 1 });
+			setProFilter(defaultProTableParams.value.defaultProFilter);
+			setProSort(defaultProTableParams.value.defaultProSort);
+			formRef.value?.resetFields();
+			setFormSearch({});
+		},
+		editableUtils
+	});
+	/** 同步 action */
+	counter.setAction?.(actionRef.value);
+	const tableColumns = computed(() => genProColumnsToColumns({
+		columns: props.columns,
+		counter,
+		columnEmptyText: props.columnEmptyText || "-",
+		type: props.type,
+		editableUtils,
+		marginSM: token.value.marginSM,
+		rowKey: props.rowKey || "id",
+		childrenColumnName: props.expandable?.childrenColumnName ?? "children",
+		proFilter: proFilter.value,
+		proSort: proSort.value
+	})?.sort(columnSort(counter.columnsMap?.value)));
+	useEffect(() => {
+		if (tableColumns.value && tableColumns.value.length > 0) {
+			const columnKeys = tableColumns.value.map((item) => genColumnKey(item.key, item.index));
+			counter.setSortKeyColumns?.(columnKeys);
+		}
+	}, [() => tableColumns.value]);
+	const selectedRows = computed(() => selectedRowKeys.value?.map((key) => preserveRecords.value?.get(key)));
+	/** 页面编辑的计算 */
+	const pagination = useMergedPagination({
+		pagination: props.pagination,
+		action,
+		intl,
+		request: props.request,
+		type: props.type || "table"
+	});
+	const onFormSearchSubmit = async (values) => {
+		if (props.options && props.options.search) {
+			const { name = "keyword" } = props.options.search === true ? {} : props.options.search;
+			/** 如果传入的 onSearch 返回值为 false，则不要把options.search.name对应的值set到formSearch */
+			if (typeof props.options.search !== "boolean") {
+				if (await props.options.search?.onSearch?.(counter.keyWords?.value)) {
+					setFormSearch({
+						...values,
+						[name]: counter.keyWords?.value
+					});
+					return;
+				}
+			}
+		}
+		setFormSearch(values);
+	};
+	const loading = computed(() => {
+		if (typeof action.loading.value === "object") return action.loading.value.spinning || false;
+		return action.loading.value;
+	});
+	/** 是不是 LightFilter, LightFilter 有一些特殊的处理 */
+	const isLightFilter = computed(() => props.search !== false && props.search?.filterType === "light");
+	const hideToolbar = computed(() => props.options === false && !props.headerTitle && !props.toolBarRender && !props.toolbar && !isLightFilter.value);
+	expose({
+		...actionRef.value,
+		get nativeElement() {
+			return actionRef.value?.nativeElement;
+		},
+		get pageInfo() {
+			return actionRef.value?.pageInfo;
+		},
+		formRef: useProFormInstanceExpose(formRef)
+	});
+	return () => {
+		const { name: isEditorTable, tableAlertRender, tableAlertOptionRender, rowSelection: propsRowSelection = false, toolBarRender, headerTitle, toolbar, ghost, search, columns, form, type = "table", manualRequest, onReset, onSubmit, searchFormRender, optionsRender, dateFormatter, beforeSearchSubmit, cardBordered, options, tooltip } = props;
+		/** 行选择相关的问题 */
+		const rowSelection = {
+			selectedRowKeys: selectedRowKeys.value,
+			...props.rowSelection,
+			onChange: (keys, rows) => {
+				if (props.rowSelection && props.rowSelection.onChange) props.rowSelection.onChange(keys, rows, { type: "all" });
+				setSelectedRowKeys(keys);
+			}
+		};
+		const defaultSearchNode = search === false && type !== "form" ? null : createVNode(FormSearch, {
+			"pagination": pagination.value,
+			"beforeSearchSubmit": beforeSearchSubmit,
+			"action": actionRef.value,
+			"columns": columns,
+			"onFormSearchSubmit": onFormSearchSubmit,
+			"ghost": ghost,
+			"onReset": onReset,
+			"onSubmit": onSubmit,
+			"loading": !!loading.value,
+			"manualRequest": manualRequest,
+			"search": search,
+			"form": form,
+			"type": type,
+			"cardBordered": typeof cardBordered === "string" ? true : cardBordered,
+			"dateFormatter": dateFormatter
+		}, null);
+		const searchNode = searchFormRender && defaultSearchNode ? searchFormRender(props, defaultSearchNode) : defaultSearchNode;
+		/** 内置的工具栏 */
+		const toolbarDom = toolBarRender === false ? null : createVNode(Toolbar, {
+			"headerTitle": headerTitle,
+			"hideToolbar": hideToolbar.value,
+			"selectedRows": selectedRows.value,
+			"loading": loading.value,
+			"selectedRowKeys": selectedRowKeys.value,
+			"columns": tableColumns.value,
+			"tooltip": tooltip,
+			"toolbar": toolbar,
+			"onFormSearchSubmit": (newValues) => setFormSearch({
+				...formSearch.value,
+				...newValues
+			}),
+			"searchNode": isLightFilter.value && searchNode !== null ? cloneVNode(searchNode, { ref: formRef }) : null,
+			"options": options,
+			"optionsRender": optionsRender,
+			"action": actionRef.value,
+			"toolBarRender": toolBarRender
+		}, null);
+		/** 内置的多选操作栏 */
+		const alertDom = propsRowSelection ? createVNode(TableAlert, {
+			"selectedRowKeys": selectedRowKeys.value,
+			"selectedRows": selectedRows.value,
+			"onCleanSelected": onCleanSelected,
+			"alertOptionRender": tableAlertOptionRender,
+			"alertInfoRender": tableAlertRender,
+			"alwaysShowAlert": propsRowSelection?.alwaysShowAlert
+		}, null) : null;
+		return createVNode(TableRender, mergeProps(props, {
+			"class": classNames(baseClassName.value, hashId.value, cssVarCls.value),
+			"name": isEditorTable,
+			"prefixCls": baseClassName.value,
+			"size": counter.tableSize?.value,
+			"onSizeChange": counter.setTableSize,
+			"pagination": pagination.value,
+			"searchNode": searchNode !== null ? cloneVNode(searchNode, { ref: formRef }) : null,
+			"rowSelection": propsRowSelection ? rowSelection : void 0,
+			"tableColums": tableColumns.value,
+			"isLightFilter": isLightFilter.value,
+			"action": action,
+			"alertDom": alertDom,
+			"toolbarDom": toolbarDom,
+			"hideToolbar": hideToolbar.value,
+			"onSortChange": (sortConfig) => {
+				if (isEqual(proSort.value, sortConfig)) return;
+				setProSort(sortConfig ?? {});
+			},
+			"onFilterChange": (filterConfig) => {
+				if (isEqual(filterConfig, proFilter.value)) return;
+				setProFilter(filterConfig ?? {});
+			},
+			"editableUtils": editableUtils,
+			"getRowKey": getRowKey.value
+		}), slots);
+	};
+}, {
+	name: "InternalProTable",
+	props: [
+		"beforeSearchSubmit",
+		"bodyCell",
+		"bordered",
+		"caption",
+		"cardBordered",
+		"cardProps",
+		"childrenColumnName",
+		"classes",
+		"columnEmptyText",
+		"columns",
+		"columnsState",
+		"components",
+		"dataSource",
+		"dateFormatter",
+		"debounceTime",
+		"defaultData",
+		"defaultExpandAllRows",
+		"defaultExpandedRowKeys",
+		"defaultSize",
+		"direction",
+		"dropdownPrefixCls",
+		"editable",
+		"errorBoundaryRender",
+		"expandIcon",
+		"expandIconColumnIndex",
+		"expandRowByClick",
+		"expandable",
+		"expandedRowClassName",
+		"expandedRowKeys",
+		"expandedRowRender",
+		"footer",
+		"form",
+		"getContainerWidth",
+		"getPopupContainer",
+		"ghost",
+		"headerCell",
+		"headerTitle",
+		"id",
+		"indentSize",
+		"loading",
+		"locale",
+		"manualRequest",
+		"measureRowRender",
+		"name",
+		"onDataSourceChange",
+		"onExpand",
+		"onExpandedRowsChange",
+		"onHeaderRow",
+		"onLoad",
+		"onLoadingChange",
+		"onRequestError",
+		"onReset",
+		"onRow",
+		"onSizeChange",
+		"onSubmit",
+		"options",
+		"optionsRender",
+		"pagination",
+		"params",
+		"polling",
+		"postData",
+		"prefixCls",
+		"request",
+		"revalidateOnFocus",
+		"rootClass",
+		"rowClassName",
+		"rowHoverable",
+		"rowKey",
+		"rowSelection",
+		"scroll",
+		"search",
+		"searchFormRender",
+		"showHeader",
+		"showSorterTooltip",
+		"size",
+		"sortDirections",
+		"sticky",
+		"styles",
+		"summary",
+		"tableAlertOptionRender",
+		"tableAlertRender",
+		"tableClass",
+		"tableExtraRender",
+		"tableLayout",
+		"tableRender",
+		"tableStyle",
+		"tableViewRender",
+		"tailor",
+		"title",
+		"toolBarRender",
+		"toolbar",
+		"tooltip",
+		"type",
+		"virtual"
+	]
+});
+//#endregion
+export { InternalProTable as default };

package/dist/RenderTypings.d.ts

@@ -0,0 +1,33 @@
+import { ToolBarProps } from "./components/ToolBar/index.js";
+import { ActionType, ProTableProps } from "./typing.js";
+import { IntlType } from "@antdv-vue/pro-provider";
+import { Key, WithFalse } from "@antdv-vue/pro-utils";
+import { VueNode as VueNode$1 } from "@v-c/util";
+
+//#region src/RenderTypings.d.ts
+type ErrorBoundaryRender = WithFalse<(options: {
+  error: Error;
+  info: string;
+}) => VueNode$1>;
+type TableAlertRender<T> = WithFalse<(props: {
+  intl: IntlType;
+  selectedRowKeys: (number | string | Key)[];
+  selectedRows: T[];
+  onCleanSelected: () => void;
+}) => VueNode$1>;
+type TableRender<T, U, K> = WithFalse<(props: ProTableProps<T, U, K>, defaultDom: VueNode$1, /** 各个区域的 dom */
+
+domList: {
+  toolbar?: VueNode$1;
+  alert?: VueNode$1;
+  table?: VueNode$1;
+}) => VueNode$1>;
+type SearchFormRender<T, U, K> = (props: ProTableProps<T, U, K>, defaultDom: VueNode$1) => VueNode$1;
+type OptionsRender<T, U> = (props: ToolBarProps<T, U>, defaultDom: VueNode$1[]) => VueNode$1[];
+type TableExtraRender<T, U, K> = (props: ProTableProps<T, U, K>, dataSource: any[]) => VueNode$1;
+type ToolBarRender<T> = (action: ActionType<any, T> | undefined, rows: {
+  selectedRowKeys?: Key[];
+  selectedRows: (T | undefined)[];
+}) => VueNode$1[];
+//#endregion
+export { ErrorBoundaryRender, OptionsRender, SearchFormRender, TableAlertRender, TableExtraRender, TableRender, ToolBarRender };

package/dist/RenderTypings.js

@@ -0,0 +1 @@
+export {};

package/dist/ResizableTableTitle.d.ts

@@ -0,0 +1,24 @@
+import * as _$vue from "vue";
+import { SlotsType } from "vue";
+
+//#region src/ResizableTableTitle.d.ts
+interface ResizableTableTitleProps {
+  resizable?: boolean;
+  width?: number | string;
+}
+interface ResizableTableTitleEmits {
+  resize: (event: MouseEvent, info: {
+    size: {
+      width: number;
+    };
+  }) => void;
+  [key: string]: (...args: any[]) => void;
+}
+interface ResizableTableTitleSlots {
+  default?: () => any;
+}
+declare const ResizableTableTitle: _$vue.DefineSetupFnComponent<ResizableTableTitleProps, ResizableTableTitleEmits, SlotsType<ResizableTableTitleSlots>, ResizableTableTitleProps & {
+  [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, _$vue.PublicProps>;
+//#endregion
+export { ResizableTableTitleEmits, ResizableTableTitleProps, ResizableTableTitleSlots, ResizableTableTitle as default };

package/dist/ResizableTableTitle.js

@@ -0,0 +1,89 @@
+import { computed, createVNode, defineComponent, mergeProps, onBeforeUnmount, shallowRef } from "vue";
+import { classNames } from "@v-c/util";
+//#region src/ResizableTableTitle.tsx
+function getWidthNumber(width, element) {
+	if (typeof width === "number") return width;
+	if (typeof width === "string") {
+		const parsedWidth = Number.parseFloat(width);
+		if (Number.isFinite(parsedWidth)) return parsedWidth;
+	}
+	return element?.offsetWidth ?? 0;
+}
+const ResizableTableTitle = /* @__PURE__ */ defineComponent((props, { attrs, slots, emit }) => {
+	const cellRef = shallowRef();
+	let startX = 0;
+	let startWidth = 0;
+	let previousUserSelect = "";
+	let resizeFrame;
+	let latestResize;
+	const resizeable = computed(() => !!props.resizable);
+	function clearDocumentEvents() {
+		document.removeEventListener("mousemove", onMouseMove);
+		document.removeEventListener("mouseup", onMouseUp);
+		document.body.style.userSelect = previousUserSelect;
+		if (resizeFrame !== void 0) {
+			cancelAnimationFrame(resizeFrame);
+			resizeFrame = void 0;
+		}
+		latestResize = void 0;
+	}
+	function flushResize() {
+		resizeFrame = void 0;
+		if (!latestResize) return;
+		const { event, width } = latestResize;
+		latestResize = void 0;
+		emit("resize", event, { size: { width } });
+	}
+	function scheduleResize(event, width) {
+		latestResize = {
+			event,
+			width
+		};
+		if (resizeFrame !== void 0) return;
+		resizeFrame = requestAnimationFrame(flushResize);
+	}
+	function onMouseMove(event) {
+		scheduleResize(event, Math.max(startWidth + event.clientX - startX, 40));
+	}
+	function onMouseUp() {
+		if (resizeFrame !== void 0) {
+			cancelAnimationFrame(resizeFrame);
+			flushResize();
+		}
+		clearDocumentEvents();
+	}
+	function onMouseDown(event) {
+		event.preventDefault();
+		event.stopPropagation();
+		startX = event.clientX;
+		startWidth = getWidthNumber(props.width, cellRef.value);
+		previousUserSelect = document.body.style.userSelect;
+		document.body.style.userSelect = "none";
+		document.addEventListener("mousemove", onMouseMove);
+		document.addEventListener("mouseup", onMouseUp);
+	}
+	onBeforeUnmount(clearDocumentEvents);
+	return () => {
+		const { class: className, className: legacyClassName, style, ...restAttrs } = attrs;
+		const widthStyle = props.width == null ? void 0 : { width: typeof props.width === "number" ? `${props.width}px` : props.width };
+		return createVNode("th", mergeProps(restAttrs, {
+			"ref": cellRef,
+			"class": classNames(className, legacyClassName, { "ant-table-cell-resizable": resizeable.value }),
+			"style": {
+				...style,
+				...widthStyle,
+				position: resizeable.value ? "relative" : style?.position
+			}
+		}), [slots.default?.(), resizeable.value && createVNode("span", {
+			"class": "ant-table-cell-resizable-handle",
+			"onMousedown": onMouseDown
+		}, null)]);
+	};
+}, {
+	name: "ResizableTableTitle",
+	inheritAttrs: false,
+	props: ["resizable", "width"],
+	emits: ["resize"]
+});
+//#endregion
+export { ResizableTableTitle as default };

package/dist/Store/Provide.d.ts

@@ -0,0 +1,68 @@
+import { DensitySize } from "../components/ToolBar/DensityIcon.js";
+import { ActionType, ProColumns, ProTableProps } from "../typing.js";
+import { ComputedRef, Ref, ShallowRef } from "vue";
+import { ParamsType } from "@antdv-vue/pro-provider";
+import { TableColumnType } from "antdv-next";
+import { NamePath } from "antdv-next/dist/form/types";
+
+//#region src/Store/Provide.d.ts
+interface ColumnsState {
+  show?: boolean;
+  fixed?: boolean | 'start' | 'end';
+  order?: number;
+  disable?: boolean | {
+    checkbox: boolean;
+  };
+}
+type ProTableColumn<T> = ColumnsState & TableColumnType<T>;
+interface UseContainerProps<T, U, ValueType> {
+  onColumnsStateChange?: (map: Record<string, ColumnsState> | undefined) => void;
+  size?: DensitySize;
+  defaultSize?: DensitySize;
+  onSizeChange?: (size: DensitySize) => void;
+  columns?: ProTableColumn<T>[] | ProColumns<T, ValueType>[];
+  columnsState?: ProTableProps<T, U, ValueType>['columnsState'];
+}
+declare function useContainer<T = Record<string, any>, U = ParamsType, ValueType = 'text'>(props?: UseContainerProps<T, U, ValueType>): {
+  action: ShallowRef<any, any>;
+  setAction: (newAction?: ActionType<any, T>) => void;
+  sortKeyColumns: ShallowRef<string[], string[]>;
+  setSortKeyColumns: (keys: string[]) => void;
+  propsRef: ShallowRef<ProTableProps<T, U, ValueType> | undefined, ProTableProps<T, U, ValueType> | undefined>;
+  tableSize: Ref<DensitySize, DensitySize>;
+  setTableSize: (val: DensitySize) => void;
+  prefixName: ShallowRef<(string | number | boolean | (string | number | boolean)[]) | undefined, (string | number | boolean | (string | number | boolean)[]) | undefined>;
+  setPrefixName: (name?: NamePath<string | number | boolean>) => void;
+  columnsMap: Ref<Record<string, ColumnsState>, Record<string, ColumnsState>>;
+  setColumnsMap: (val: Record<string, ColumnsState>) => void;
+  keyWords: Ref<string | undefined, string | undefined>;
+  setKeyWords: (val: string | undefined) => void;
+  columns: ProTableColumn<T>[] | ProColumns<T, ValueType>[] | undefined;
+  clearPersistenceStorage: () => void;
+  defaultColumnKeyMap: ComputedRef<Record<string, ColumnsState>>;
+  rootDomRef: ShallowRef<HTMLDivElement | null, HTMLDivElement | null>;
+};
+interface ContainerReturnType<T, U, ValueType> {
+  action?: ShallowRef<ActionType<any, T> | undefined>;
+  setAction?: (newAction?: ActionType<any, T>) => void;
+  sortKeyColumns?: ShallowRef<string[]>;
+  setSortKeyColumns?: (keys: string[]) => void;
+  propsRef?: ShallowRef<ProTableProps<T, U, ValueType> | undefined>;
+  tableSize?: Ref<DensitySize>;
+  setTableSize?: (val: DensitySize) => void;
+  prefixName: ShallowRef<NamePath<string | number | boolean> | undefined>;
+  setPrefixName?: (name?: NamePath<string | number | boolean>) => void;
+  columnsMap?: Ref<Record<string, ColumnsState>>;
+  setColumnsMap?: (val: Record<string, ColumnsState>) => void;
+  keyWords?: Ref<string | undefined>;
+  setKeyWords?: (val: string | undefined) => void;
+  columns?: ProTableColumn<T>[] | ProColumns<T, ValueType>[];
+  clearPersistenceStorage?: () => void;
+  defaultColumnKeyMap?: ComputedRef<Record<string, ColumnsState>>;
+  rootDomRef?: ShallowRef<HTMLDivElement | null>;
+}
+declare const tableContextKey: unique symbol;
+declare function useTableContextProvider<T, U, S>(props: ContainerReturnType<T, U, S>): void;
+declare const useTableContextInject: <T, U, S>() => ContainerReturnType<T, U, S>;
+//#endregion
+export { ColumnsState, ContainerReturnType, ProTableColumn, UseContainerProps, tableContextKey, useContainer, useTableContextInject, useTableContextProvider };