@faasjs/ant-design 8.0.0-beta.23 → 8.0.0-beta.25

package/dist/index.d.ts

@@ -752,7 +752,7 @@ type TableFaasDataResponse<T = any> = {
  * }
  * ```
  */
-declare function Table<T extends Record<string, any>, ExtendTypes = any>(props: TableProps<T, ExtendTypes>): _$react_jsx_runtime0.JSX.Element | null;
+declare function Table<T extends Record<string, any>, ExtendTypes = any>(props: TableProps<T, ExtendTypes>): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/data.d.ts
 /**

package/dist/index.mjs

@@ -1,8 +1,8 @@
-import { ErrorBoundary as ErrorBoundary$1, FaasDataWrapper as FaasDataWrapper$1, FaasReactClient, OptionalWrapper, createSplittingContext, faas, useEqualCallback, useEqualEffect, useFaas, withFaasData as withFaasData$1 } from "@faasjs/react";
+import { ErrorBoundary as ErrorBoundary$1, FaasDataWrapper as FaasDataWrapper$1, FaasReactClient, OptionalWrapper, createSplittingContext, faas, useEqualCallback, useEqualEffect, useEqualMemo, useFaas, withFaasData as withFaasData$1 } from "@faasjs/react";
 import { Alert, Button, Col, ConfigProvider as ConfigProvider$1, DatePicker, Descriptions, Drawer, Form as Form$1, Input, InputNumber, Modal, Radio, Result, Row, Select, Skeleton, Space, Spin, Switch, Table as Table$1, Tabs as Tabs$1, Typography, message, notification, theme } from "antd";
 import { BrowserRouter, Route, Routes as Routes$1, useLocation, useNavigate } from "react-router-dom";
 import { cloneDeep, defaultsDeep, isNil, uniqBy } from "lodash-es";
-import { Suspense, cloneElement, createContext, createElement, isValidElement, lazy, useCallback, useContext, useState } from "react";
+import { Suspense, cloneElement, createContext, createElement, isValidElement, lazy, useContext, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CheckOutlined, CloseOutlined, MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
 import dayjs from "dayjs";
@@ -930,6 +930,24 @@ function processProps(propsCopy, config) {
 	}
 	return propsCopy;
 }
+function createComputedProps(props, config, hidden, setConditionalHidden) {
+	const propsCopy = cloneDeep(props);
+	delete propsCopy.extendTypes;
+	if (propsCopy.if) {
+		const condition = propsCopy.if;
+		const originShouldUpdate = propsCopy.shouldUpdate;
+		propsCopy.shouldUpdate = (prev, cur) => {
+			const show = condition(cur);
+			const shouldUpdate = hidden !== show;
+			setConditionalHidden(!show);
+			const origin = originShouldUpdate ? typeof originShouldUpdate === "boolean" ? originShouldUpdate : originShouldUpdate(prev, cur, {}) : true;
+			return shouldUpdate || origin;
+		};
+		delete propsCopy.if;
+		delete propsCopy.hidden;
+	}
+	return processProps(propsCopy, config);
+}
 /**
 * Render a FaasJS-aware Ant Design form field or nested field group.
 *
@@ -958,33 +976,14 @@ function processProps(propsCopy, config) {
 * ```
 */
 function FormItem(props) {
-	const [computedProps, setComputedProps] = useState();
-	const [extendTypes, setExtendTypes] = useState();
 	const { theme } = useConfigContext();
 	const [hidden, setHidden] = useState(props.hidden || false);
-	useEqualEffect(() => {
-		const { extendTypes, ...propsCopy } = { ...props };
-		if (extendTypes) setExtendTypes(extendTypes);
-		if (propsCopy.if) {
-			const condition = propsCopy.if;
-			const originShouldUpdate = propsCopy.shouldUpdate;
-			propsCopy.shouldUpdate = (prev, cur) => {
-				const show = condition(cur);
-				const shouldUpdate = hidden !== show;
-				setHidden(!show);
-				const origin = originShouldUpdate ? typeof originShouldUpdate === "boolean" ? originShouldUpdate : originShouldUpdate(prev, cur, {}) : true;
-				return shouldUpdate || origin;
-			};
-			delete propsCopy.if;
-			delete propsCopy.hidden;
-		}
-		setComputedProps(processProps(propsCopy, theme.common));
-	}, [
+	const computedProps = useEqualMemo(() => createComputedProps(props, theme.common, hidden, setHidden), [
 		hidden,
 		props,
 		theme.common
 	]);
-	if (!computedProps) return null;
+	const extendTypes = props.extendTypes;
 	const itemType = computedProps.type ?? "string";
 	if (hidden) return /* @__PURE__ */ jsx(Form$1.Item, {
 		...computedProps,
@@ -1565,6 +1564,284 @@ function processValue(item, value) {
 	if (["date", "time"].includes(itemType)) return transferred.format(itemType === "date" ? "YYYY-MM-DD" : "YYYY-MM-DD HH:mm:ss");
 	return transferred;
 }
+function toTableFilters(options, includeBlank = false) {
+	const filters = options.map((option) => ({
+		text: option.label,
+		value: option.value
+	}));
+	if (includeBlank) filters.push({
+		text: /* @__PURE__ */ jsx(Blank, {}),
+		value: null
+	});
+	return filters;
+}
+function generateFilterDropdown(item, search) {
+	if (item.filterDropdown && item.filterDropdown !== true) return;
+	if (!item.options?.length) return;
+	if (item.options.length < 11) {
+		if (!item.filters) item.filters = toTableFilters(item.options);
+		return;
+	}
+	item.filterDropdown = ({ setSelectedKeys, selectedKeys, confirm }) => /* @__PURE__ */ jsx("div", {
+		style: {
+			padding: 8,
+			width: "200px"
+		},
+		onKeyDown: (e) => e.stopPropagation(),
+		children: /* @__PURE__ */ jsx(Select, {
+			options: item.options,
+			allowClear: true,
+			showSearch: true,
+			style: { width: "100%" },
+			placeholder: `${search} ${item.title}`,
+			value: selectedKeys,
+			onChange: (v) => {
+				setSelectedKeys(v?.length ? v : []);
+				confirm();
+			},
+			mode: "multiple",
+			filterOption: (input, option) => {
+				if (!input || !option) return true;
+				if (typeof option.label !== "string") return option.value === input;
+				input = input.trim();
+				return option.value === input || option.label.toLowerCase().includes(input.toLowerCase());
+			}
+		})
+	});
+}
+function createTextSearchFilterDropdown(item, search, transformValue) {
+	return ({ setSelectedKeys, confirm, clearFilters }) => /* @__PURE__ */ jsx(Input.Search, {
+		placeholder: `${search} ${item.title}`,
+		allowClear: true,
+		onSearch: (v) => {
+			if (v) setSelectedKeys(transformValue ? [transformValue(v)] : [v]);
+			else {
+				setSelectedKeys([]);
+				clearFilters?.();
+			}
+			confirm();
+		}
+	});
+}
+function createTableColumns(items, options) {
+	const columns = cloneDeep(items).filter((item) => !(item.tableChildren === null || item.children === null || item.tableRender === null || item.render === null));
+	for (const item of columns) {
+		if (!item.key) item.key = item.id;
+		if (!item.dataIndex) item.dataIndex = item.id;
+		const itemType = item.type ?? "string";
+		item.title = item.title ?? idToTitle(item.id);
+		item.type = itemType;
+		if (item.options?.length) {
+			item.options = transferOptions(item.options);
+			item.filters = toTableFilters(item.options, true);
+			generateFilterDropdown(item, options.search);
+		}
+		const children = item.tableChildren || item.children;
+		if (children) {
+			item.render = (value, values) => cloneUnionFaasItemElement(children, {
+				scene: "table",
+				value,
+				values,
+				index: 0
+			});
+			delete item.children;
+			delete item.tableChildren;
+			continue;
+		}
+		const render = item.tableRender || item.render;
+		if (render) {
+			item.render = (value, values) => render(value, values, 0, "table");
+			delete item.tableRender;
+			continue;
+		}
+		const extendType = options.extendTypes?.[itemType];
+		if (extendType) {
+			const extendChildren = extendType.children;
+			if (extendChildren) item.render = (value, values) => cloneUnionFaasItemElement(extendChildren, {
+				scene: "table",
+				value,
+				values,
+				index: 0
+			});
+			else {
+				const extendRender = extendType.render;
+				if (extendRender) item.render = (value, values) => extendRender(value, values, 0, "table");
+				else throw Error(`${itemType} requires children or render`);
+			}
+			continue;
+		}
+		switch (itemType) {
+			case "string":
+				if (!item.render) item.render = (value) => processValue(item, value);
+				if (item.filterDropdown !== false) {
+					if (!item.onFilter && !options.faasData) item.onFilter = (value, row) => {
+						if (!value || isNil(value)) return true;
+						if (isNil(row[item.id])) return false;
+						return row[item.id].trim().toLowerCase().includes(value.trim().toLowerCase());
+					};
+					if (typeof item.filterDropdown === "undefined" && !item.filters && item.optionsType !== "auto") item.filterDropdown = createTextSearchFilterDropdown(item, options.search);
+				}
+				break;
+			case "string[]":
+				if (!item.render) item.render = (value) => processValue(item, value);
+				if (item.filterDropdown !== false) {
+					if (!item.onFilter && !options.faasData) item.onFilter = (value, row) => {
+						if (value === null && (!row[item.id] || !row[item.id].length)) return true;
+						if (!row[item.id] || !row[item.id].length || !value) return false;
+						return row[item.id].some((v) => v.trim().toLowerCase().includes(value.trim().toLowerCase()));
+					};
+					if (typeof item.filterDropdown === "undefined" && !item.filters && item.optionsType !== "auto") item.filterDropdown = createTextSearchFilterDropdown(item, options.search);
+				}
+				break;
+			case "number":
+				if (!item.render) item.render = (value) => processValue(item, value);
+				if (typeof item.sorter === "undefined") item.sorter = (a, b) => a[item.id] - b[item.id];
+				if (item.filterDropdown !== false) {
+					if (!item.onFilter && !options.faasData) item.onFilter = (value, row) => {
+						if (value === null) return true;
+						if (isNil(row[item.id])) return false;
+						return value == row[item.id];
+					};
+					if (typeof item.filterDropdown === "undefined" && !item.filters) item.filterDropdown = createTextSearchFilterDropdown(item, options.search, Number);
+				}
+				break;
+			case "number[]":
+				if (!item.render) item.render = (value) => processValue(item, value);
+				if (item.filterDropdown !== false) {
+					if (!item.onFilter && !options.faasData) item.onFilter = (value, row) => {
+						if (value === null && (!row[item.id] || !row[item.id].length)) return true;
+						if (!row[item.id] || !row[item.id].length) return false;
+						return row[item.id].includes(Number(value));
+					};
+					if (typeof item.filterDropdown === "undefined" && !item.filters) item.filterDropdown = createTextSearchFilterDropdown(item, options.search, Number);
+				}
+				break;
+			case "boolean":
+				if (!item.render) item.render = (value) => isNil(value) ? /* @__PURE__ */ jsx(Blank, {}) : value ? /* @__PURE__ */ jsx(CheckOutlined, { style: {
+					marginTop: "4px",
+					color: "#52c41a"
+				} }) : /* @__PURE__ */ jsx(CloseOutlined, { style: {
+					marginTop: "4px",
+					color: "#ff4d4f"
+				} });
+				if (item.filterDropdown !== false) {
+					if (typeof item.filterDropdown === "undefined") item.filterDropdown = ({ setSelectedKeys, selectedKeys, confirm: confirmFilter }) => /* @__PURE__ */ jsxs(Radio.Group, {
+						style: { padding: 8 },
+						buttonStyle: "solid",
+						value: JSON.stringify(selectedKeys[0]),
+						onChange: (e) => {
+							setSelectedKeys(e.target.value ? [{
+								true: true,
+								false: false,
+								null: null
+							}[e.target.value]] : []);
+							confirmFilter();
+						},
+						children: [
+							/* @__PURE__ */ jsx(Radio.Button, { children: options.all }),
+							/* @__PURE__ */ jsx(Radio.Button, {
+								value: "true",
+								children: /* @__PURE__ */ jsx(CheckOutlined, { style: {
+									color: "#52c41a",
+									verticalAlign: "middle"
+								} })
+							}),
+							/* @__PURE__ */ jsx(Radio.Button, {
+								value: "false",
+								children: /* @__PURE__ */ jsx(CloseOutlined, { style: {
+									verticalAlign: "middle",
+									color: "#ff4d4f"
+								} })
+							}),
+							/* @__PURE__ */ jsx(Radio.Button, {
+								value: "null",
+								children: options.blank
+							})
+						]
+					});
+					if (!item.onFilter && !options.faasData) item.onFilter = (value, row) => {
+						switch (value) {
+							case true: return !isNil(row[item.id]) && row[item.id] !== false;
+							case false: return !isNil(row[item.id]) && !row[item.id];
+							default: return isNil(row[item.id]);
+						}
+					};
+				}
+				break;
+			case "date":
+			case "time":
+				if (itemType === "time") item.width = item.width ?? 200;
+				if (!item.render) item.render = (value) => processValue(item, value);
+				if (typeof item.sorter === "undefined") item.sorter = (a, b, order) => {
+					if (isNil(a[item.id])) return order === "ascend" ? 1 : -1;
+					if (isNil(b[item.id])) return order === "ascend" ? -1 : 1;
+					return new Date(a[item.id]).getTime() < new Date(b[item.id]).getTime() ? -1 : 1;
+				};
+				if (item.filterDropdown !== false) {
+					if (typeof item.filterDropdown === "undefined") item.filterDropdown = ({ setSelectedKeys, confirm }) => /* @__PURE__ */ jsx(DatePicker.RangePicker, { onChange: (dates) => {
+						const start = dates?.[0];
+						const end = dates?.[1];
+						setSelectedKeys(start && end ? [[start.startOf("day").toISOString(), end.endOf("day").toISOString()]] : []);
+						confirm();
+					} });
+					if (!item.onFilter && !options.faasData) item.onFilter = (value, row) => {
+						if (isNil(value[0])) return true;
+						if (isNil(row[item.id])) return false;
+						return dayjs(row[item.id]) >= dayjs(value[0]) && dayjs(row[item.id]) <= dayjs(value[1]);
+					};
+				}
+				break;
+			case "object":
+				if (!item.render) item.render = (value) => /* @__PURE__ */ jsx(Description, {
+					items: item.object || [],
+					dataSource: value || {},
+					column: 1
+				});
+				break;
+			case "object[]":
+				if (!item.render) item.render = (value) => /* @__PURE__ */ jsx(Fragment, { children: value.map((v, i) => /* @__PURE__ */ jsx(Description, {
+					items: item.object || [],
+					dataSource: v || [],
+					column: 1
+				}, i)) });
+				break;
+			default:
+				if (!item.render) item.render = (value) => processValue(item, value);
+				if (item.filterDropdown !== false && !item.onFilter && !options.faasData) item.onFilter = (value, row) => {
+					if (value === null && isNil(row[item.id])) return true;
+					return value === row[item.id];
+				};
+				break;
+		}
+	}
+	if (options.dataSource) {
+		for (const column of columns) if (column.optionsType === "auto" && !column.options && !column.filters) {
+			const normalizedOptions = uniqBy(options.dataSource, column.id).map((value) => ({
+				label: value[column.id],
+				value: value[column.id]
+			}));
+			if (!normalizedOptions.length) continue;
+			column.options = normalizedOptions;
+			generateFilterDropdown(column, options.search);
+		}
+	}
+	return columns;
+}
+function applyFaasDataColumnOptions(columns, data) {
+	if (!data?.options) return columns;
+	let updated = false;
+	const nextColumns = columns.map((column) => {
+		if (!data.options?.[column.id]) return column;
+		updated = true;
+		const nextColumn = { ...column };
+		nextColumn.options = transferOptions(data.options[column.id]);
+		nextColumn.filters = toTableFilters(nextColumn.options, true);
+		nextColumn.render = (value) => processValue(nextColumn, value);
+		if (nextColumn.filterDropdown) delete nextColumn.filterDropdown;
+		return nextColumn;
+	});
+	return updated ? nextColumns : columns;
+}
 /**
 * Render an Ant Design table from FaasJS item metadata.
 *
@@ -1601,288 +1878,24 @@ function processValue(item, value) {
 * ```
 */
 function Table(props) {
-	const [columns, setColumns] = useState();
 	const { theme } = useConfigContext();
 	const { all, blank, search } = theme.common;
-	const generateFilterDropdown = useCallback((item) => {
-		if (item.filterDropdown && item.filterDropdown !== true) return;
-		if (!item.options?.length) return;
-		if (item.options.length < 11) {
-			if (!item.filters) item.filters = item.options.map((o) => ({
-				text: o.label,
-				value: o.value
-			}));
-			return;
-		}
-		item.filterDropdown = ({ setSelectedKeys, selectedKeys, confirm }) => /* @__PURE__ */ jsx("div", {
-			style: {
-				padding: 8,
-				width: "200px"
-			},
-			onKeyDown: (e) => e.stopPropagation(),
-			children: /* @__PURE__ */ jsx(Select, {
-				options: item.options,
-				allowClear: true,
-				showSearch: true,
-				style: { width: "100%" },
-				placeholder: `${search} ${item.title}`,
-				value: selectedKeys,
-				onChange: (v) => {
-					setSelectedKeys(v?.length ? v : []);
-					confirm();
-				},
-				mode: "multiple",
-				filterOption: (input, option) => {
-					if (!input || !option) return true;
-					if (typeof option.label !== "string") return option.value === input;
-					input = input.trim();
-					return option.value === input || option.label.toLowerCase().includes(input.toLowerCase());
-				}
-			})
-		});
-		return item;
-	}, [search]);
-	useEqualEffect(() => {
-		const items = cloneDeep(props.items).filter((item) => !(item.tableChildren === null || item.children === null || item.tableRender === null || item.render === null));
-		const createTextSearchFilterDropdown = (item, transformValue) => ({ setSelectedKeys, confirm, clearFilters }) => /* @__PURE__ */ jsx(Input.Search, {
-			placeholder: `${search} ${item.title}`,
-			allowClear: true,
-			onSearch: (v) => {
-				if (v) setSelectedKeys(transformValue ? [transformValue(v)] : [v]);
-				else {
-					setSelectedKeys([]);
-					clearFilters?.();
-				}
-				confirm();
-			}
-		});
-		for (const item of items) {
-			if (!item.key) item.key = item.id;
-			if (!item.dataIndex) item.dataIndex = item.id;
-			const itemType = item.type ?? "string";
-			item.title = item.title ?? idToTitle(item.id);
-			item.type = itemType;
-			if (item.options?.length) {
-				item.options = transferOptions(item.options);
-				item.filters = item.options.map((o) => ({
-					text: o.label,
-					value: o.value
-				})).concat({
-					text: /* @__PURE__ */ jsx(Blank, {}),
-					value: null
-				});
-				generateFilterDropdown(item);
-			}
-			const children = item.tableChildren || item.children;
-			if (children) {
-				item.render = (value, values) => cloneUnionFaasItemElement(children, {
-					scene: "table",
-					value,
-					values,
-					index: 0
-				});
-				delete item.children;
-				delete item.tableChildren;
-				continue;
-			}
-			const render = item.tableRender || item.render;
-			if (render) {
-				item.render = (value, values) => render(value, values, 0, "table");
-				delete item.tableRender;
-				continue;
-			}
-			const extendType = props.extendTypes?.[itemType];
-			if (extendType) {
-				const extendChildren = extendType.children;
-				if (extendChildren) item.render = (value, values) => cloneUnionFaasItemElement(extendChildren, {
-					scene: "table",
-					value,
-					values,
-					index: 0
-				});
-				else {
-					const extendRender = extendType.render;
-					if (extendRender) item.render = (value, values) => extendRender(value, values, 0, "table");
-					else throw Error(`${itemType} requires children or render`);
-				}
-				continue;
-			}
-			switch (itemType) {
-				case "string":
-					if (!item.render) item.render = (value) => processValue(item, value);
-					if (item.filterDropdown !== false) {
-						if (!item.onFilter && !props.faasData) item.onFilter = (value, row) => {
-							if (!value || isNil(value)) return true;
-							if (isNil(row[item.id])) return false;
-							return row[item.id].trim().toLowerCase().includes(value.trim().toLowerCase());
-						};
-						if (typeof item.filterDropdown === "undefined" && !item.filters && item.optionsType !== "auto") item.filterDropdown = createTextSearchFilterDropdown(item);
-					}
-					break;
-				case "string[]":
-					if (!item.render) item.render = (value) => processValue(item, value);
-					if (item.filterDropdown !== false) {
-						if (!item.onFilter && !props.faasData) item.onFilter = (value, row) => {
-							if (value === null && (!row[item.id] || !row[item.id].length)) return true;
-							if (!row[item.id] || !row[item.id].length || !value) return false;
-							return row[item.id].some((v) => v.trim().toLowerCase().includes(value.trim().toLowerCase()));
-						};
-						if (typeof item.filterDropdown === "undefined" && !item.filters && item.optionsType !== "auto") item.filterDropdown = createTextSearchFilterDropdown(item);
-					}
-					break;
-				case "number":
-					if (!item.render) item.render = (value) => processValue(item, value);
-					if (typeof item.sorter === "undefined") item.sorter = (a, b) => a[item.id] - b[item.id];
-					if (item.filterDropdown !== false) {
-						if (!item.onFilter && !props.faasData) item.onFilter = (value, row) => {
-							if (value === null) return true;
-							if (isNil(row[item.id])) return false;
-							return value == row[item.id];
-						};
-						if (typeof item.filterDropdown === "undefined" && !item.filters) item.filterDropdown = createTextSearchFilterDropdown(item, Number);
-					}
-					break;
-				case "number[]":
-					if (!item.render) item.render = (value) => processValue(item, value);
-					if (item.filterDropdown !== false) {
-						if (!item.onFilter && !props.faasData) item.onFilter = (value, row) => {
-							if (value === null && (!row[item.id] || !row[item.id].length)) return true;
-							if (!row[item.id] || !row[item.id].length) return false;
-							return row[item.id].includes(Number(value));
-						};
-						if (typeof item.filterDropdown === "undefined" && !item.filters) item.filterDropdown = createTextSearchFilterDropdown(item, Number);
-					}
-					break;
-				case "boolean":
-					if (!item.render) item.render = (value) => isNil(value) ? /* @__PURE__ */ jsx(Blank, {}) : value ? /* @__PURE__ */ jsx(CheckOutlined, { style: {
-						marginTop: "4px",
-						color: "#52c41a"
-					} }) : /* @__PURE__ */ jsx(CloseOutlined, { style: {
-						marginTop: "4px",
-						color: "#ff4d4f"
-					} });
-					if (item.filterDropdown !== false) {
-						if (typeof item.filterDropdown === "undefined") item.filterDropdown = ({ setSelectedKeys, selectedKeys, confirm: confirmFilter }) => /* @__PURE__ */ jsxs(Radio.Group, {
-							style: { padding: 8 },
-							buttonStyle: "solid",
-							value: JSON.stringify(selectedKeys[0]),
-							onChange: (e) => {
-								setSelectedKeys(e.target.value ? [{
-									true: true,
-									false: false,
-									null: null
-								}[e.target.value]] : []);
-								confirmFilter();
-							},
-							children: [
-								/* @__PURE__ */ jsx(Radio.Button, { children: all }),
-								/* @__PURE__ */ jsx(Radio.Button, {
-									value: "true",
-									children: /* @__PURE__ */ jsx(CheckOutlined, { style: {
-										color: "#52c41a",
-										verticalAlign: "middle"
-									} })
-								}),
-								/* @__PURE__ */ jsx(Radio.Button, {
-									value: "false",
-									children: /* @__PURE__ */ jsx(CloseOutlined, { style: {
-										verticalAlign: "middle",
-										color: "#ff4d4f"
-									} })
-								}),
-								/* @__PURE__ */ jsx(Radio.Button, {
-									value: "null",
-									children: blank
-								})
-							]
-						});
-						if (!item.onFilter && !props.faasData) item.onFilter = (value, row) => {
-							switch (value) {
-								case true: return !isNil(row[item.id]) && row[item.id] !== false;
-								case false: return !isNil(row[item.id]) && !row[item.id];
-								default: return isNil(row[item.id]);
-							}
-						};
-					}
-					break;
-				case "date":
-				case "time":
-					if (itemType === "time") item.width = item.width ?? 200;
-					if (!item.render) item.render = (value) => processValue(item, value);
-					if (typeof item.sorter === "undefined") item.sorter = (a, b, order) => {
-						if (isNil(a[item.id])) return order === "ascend" ? 1 : -1;
-						if (isNil(b[item.id])) return order === "ascend" ? -1 : 1;
-						return new Date(a[item.id]).getTime() < new Date(b[item.id]).getTime() ? -1 : 1;
-					};
-					if (item.filterDropdown !== false) {
-						if (typeof item.filterDropdown === "undefined") item.filterDropdown = ({ setSelectedKeys, confirm }) => /* @__PURE__ */ jsx(DatePicker.RangePicker, { onChange: (dates) => {
-							const start = dates?.[0];
-							const end = dates?.[1];
-							setSelectedKeys(start && end ? [[start.startOf("day").toISOString(), end.endOf("day").toISOString()]] : []);
-							confirm();
-						} });
-						if (!item.onFilter && !props.faasData) item.onFilter = (value, row) => {
-							if (isNil(value[0])) return true;
-							if (isNil(row[item.id])) return false;
-							return dayjs(row[item.id]) >= dayjs(value[0]) && dayjs(row[item.id]) <= dayjs(value[1]);
-						};
-					}
-					break;
-				case "object":
-					if (!item.render) item.render = (value) => /* @__PURE__ */ jsx(Description, {
-						items: item.object || [],
-						dataSource: value || {},
-						column: 1
-					});
-					break;
-				case "object[]":
-					if (!item.render) item.render = (value) => /* @__PURE__ */ jsx(Fragment, { children: value.map((v, i) => /* @__PURE__ */ jsx(Description, {
-						items: item.object || [],
-						dataSource: v || [],
-						column: 1
-					}, i)) });
-					break;
-				default:
-					if (!item.render) item.render = (value) => processValue(item, value);
-					if (item.filterDropdown !== false && !item.onFilter && !props.faasData) item.onFilter = (value, row) => {
-						if (value === null && isNil(row[item.id])) return true;
-						return value === row[item.id];
-					};
-					break;
-			}
-		}
-		setColumns(items);
-	}, [
+	const columns = useEqualMemo(() => createTableColumns(props.items, {
+		all,
+		blank,
+		search,
+		...props.extendTypes ? { extendTypes: props.extendTypes } : {},
+		...props.faasData ? { faasData: props.faasData } : {},
+		...props.dataSource ? { dataSource: props.dataSource } : {}
+	}), [
 		all,
 		blank,
-		generateFilterDropdown,
+		props.dataSource,
 		props.extendTypes,
 		props.faasData,
 		props.items,
 		search
 	]);
-	useEqualEffect(() => {
-		if (!props.dataSource || !columns) return;
-		for (const column of columns) if (column.optionsType === "auto" && !column.options && !column.filters) {
-			const options = uniqBy(props.dataSource, column.id).map((v) => ({
-				label: v[column.id],
-				value: v[column.id]
-			}));
-			if (options.length) setColumns((prev) => {
-				const newColumns = [...prev || []];
-				const index = newColumns.findIndex((item) => item.id === column.id);
-				if (index < 0) return newColumns;
-				newColumns[index].options = options;
-				generateFilterDropdown(newColumns[index]);
-				return newColumns;
-			});
-		}
-	}, [
-		props.dataSource,
-		columns,
-		generateFilterDropdown
-	]);
-	if (!columns) return null;
 	if (props.dataSource) return /* @__PURE__ */ jsx(Table$1, {
 		...props,
 		rowKey: props.rowKey || "id",
@@ -1902,71 +1915,40 @@ function Table(props) {
 	});
 }
 function FaasDataTable({ props, columns, data, params, reload, loading }) {
-	const [currentColumns, setCurrentColumns] = useState(columns);
-	useEqualEffect(() => {
-		if (!data || Array.isArray(data)) return;
-		setCurrentColumns((prev) => {
-			const newColumns = [...prev];
-			for (const column of newColumns) if (data.options?.[column.id]) {
-				column.options = transferOptions(data.options[column.id]);
-				column.filters = column.options.map((v) => ({
-					text: v.label,
-					value: v.value
-				})).concat({
-					text: /* @__PURE__ */ jsx(Blank, {}),
-					value: null
-				});
-				column.render = (value) => processValue(column, value);
-				if (column.filterDropdown) delete column.filterDropdown;
-				continue;
-			}
-			return newColumns;
-		});
-	}, [data]);
-	if (!data) return /* @__PURE__ */ jsx(Table$1, {
-		...props,
-		...typeof loading === "undefined" ? {} : { loading },
-		rowKey: props.rowKey || "id",
-		columns: currentColumns,
-		dataSource: []
-	});
-	if (Array.isArray(data)) return /* @__PURE__ */ jsx(Table$1, {
-		...props,
-		...typeof loading === "undefined" ? {} : { loading },
-		rowKey: props.rowKey || "id",
-		columns: currentColumns,
-		dataSource: data
-	});
+	const currentColumns = useEqualMemo(() => !data || Array.isArray(data) ? columns : applyFaasDataColumnOptions(columns, data), [columns, data]);
+	const tableDataSource = !data ? [] : Array.isArray(data) ? data : data.rows;
 	return /* @__PURE__ */ jsx(Table$1, {
 		...props,
 		...typeof loading === "undefined" ? {} : { loading },
-		rowKey: props.rowKey || "id",
-		columns: currentColumns,
-		dataSource: data.rows,
-		pagination: props.pagination === false ? false : {
-			...props.pagination || Object.create(null),
-			...data.pagination || Object.create(null)
-		},
-		onChange: (pagination, filters, sorter, extra) => {
-			if (!reload) return;
-			if (props.onChange) {
-				const processed = props.onChange(pagination, filters, sorter, extra);
+		...!data || Array.isArray(data) ? {} : {
+			pagination: props.pagination === false ? false : {
+				...props.pagination || Object.create(null),
+				...data.pagination || Object.create(null)
+			},
+			onChange: (pagination, filters, sorter, extra) => {
+				if (!reload) return;
+				if (props.onChange) {
+					const processed = props.onChange(pagination, filters, sorter, extra);
+					reload({
+						...params || Object.create(null),
+						pagination: processed.pagination,
+						filters: processed.filters,
+						sorter: processed.sorter,
+						extra: processed.extra
+					});
+					return;
+				}
 				reload({
 					...params || Object.create(null),
-					pagination: processed.pagination,
-					filters: processed.filters,
-					sorter: processed.sorter,
-					extra: processed.extra
+					pagination,
+					filters,
+					sorter
 				});
-				return;
 			}
-			reload({
-				...params || Object.create(null),
-				pagination,
-				filters,
-				sorter
-			});
-		}
+		},
+		rowKey: props.rowKey || "id",
+		columns: currentColumns,
+		dataSource: tableDataSource
 	});
 }
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faasjs/ant-design",
-  "version": "8.0.0-beta.23",
+  "version": "8.0.0-beta.25",
   "homepage": "https://faasjs.com/doc/ant-design",
   "bugs": {
     "url": "https://github.com/faasjs/faasjs/issues"
@@ -27,7 +27,7 @@
   },
   "devDependencies": {
     "@ant-design/icons": "*",
-    "@faasjs/react": ">=8.0.0-beta.23",
+    "@faasjs/react": ">=8.0.0-beta.25",
     "@types/lodash-es": "*",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
@@ -39,7 +39,7 @@
   },
   "peerDependencies": {
     "@ant-design/icons": "*",
-    "@faasjs/react": ">=8.0.0-beta.23",
+    "@faasjs/react": ">=8.0.0-beta.25",
     "antd": "^6.0.0",
     "lodash-es": "*",
     "react": "^19.0.0",