@wordrhyme/auto-crud 1.13.0 → 1.14.1

package/README.md

@@ -172,20 +172,20 @@ Zod Schema → 自动推断字段类型 → 生成表格列 + 表单字段
 ```typescript
 import { createMemoryDataSource } from '@wordrhyme/auto-crud';
 
-const dataSource = createMemoryDataSource({
-  data: initialData,
-  onCreate: async (data) => {
-    /* ... */
-  },
-  onUpdate: async (id, data) => {
-    /* ... */
-  },
-  onDelete: async (id) => {
-    /* ... */
-  },
+const dataSource = createMemoryDataSource(initialData);
+const result = await dataSource.list({
+  page: 1,
+  perPage: 10,
+  filters: [{ id: 'status', operator: 'inArray', value: ['draft', 'published'] }],
+  sort: [
+    { id: 'createdAt', desc: true },
+    { id: 'id', desc: false },
+  ],
 });
 ```
 
+筛选支持省略 operator / `eq`（严格相等）和 `inArray`（字段值属于给定数组）；其他 operator 会报错。排序按配置顺序比较，前一字段相同时使用下一字段，再进行分页。内存数据源不执行全文搜索。
+
 #### 2. tRPC 数据源（tRPC Data Source）
 
 适合：全栈 TypeScript 项目
@@ -328,6 +328,37 @@ interface AutoCrudTableProps<TSchema> {
 
 `expandedRow` 的第二个参数是当前 TanStack `Row`，可通过 `row.getAllCells()` 读取已解析的列和单元格上下文，复用字段渲染器及数据源标签。只接收订单数据的单参数回调仍可使用。
 
+#### 表格状态与 URL 参数
+
+同页显示多个表格时，在资源 Hook 中配置独立的分页、排序和条件连接符参数名，`AutoCrudTable` 会自动传给表格：
+
+```tsx
+const resource = useAutoCrudResource({
+  router: trpc.orders,
+  schema: orderSchema,
+  queryKeys: {
+    page: 'ordersPage',
+    perPage: 'ordersSize',
+    sort: 'ordersSort',
+    joinOperator: 'ordersJoin',
+  },
+});
+
+<AutoCrudTable
+  id="orders"
+  schema={orderSchema}
+  resource={resource}
+  table={{
+    enableRowSelection: false,
+    initialColumnVisibility: { createdAt: false },
+  }}
+/>;
+```
+
+未配置的参数名保留默认值。搜索仍使用共享的 `search` 参数，字段筛选仍使用字段名；`queryKeys` 不隔离这些值。筛选或搜索变化时，仅重置该表格对应的页码。直接使用 `AutoTable` 时传入相同的 `queryKeys`；`table.queryKeys` 可覆盖资源提供的整组配置。
+
+`enableRowSelection` 默认 `true`，设为 `false` 后关闭行选择并隐藏选择列和批量操作栏。`initialColumnVisibility` 只设置首次显示的列，用户仍可通过列设置切换；它不同于 `table.hidden` 对列的排除。
+
 ### `useAutoCrudResource()`
 
 连接数据源到组件的 Hook。
@@ -1751,6 +1782,13 @@ Table-only hidden fields remain available in details; shared `hidden` and
 `permissions.deny` always take precedence. Labels are resolved from the selected
 record, including when it is absent from the current list page.
 
+Details share the form's column count, field spans and `x-index` order (including
+`form.overrides`). Fields without an index retain schema order. List column order
+does not control detail layout, even with `view.presentation: 'table'`.
+`view.overrides[field].index` takes precedence for detail-only ordering. Fields
+hidden only in forms remain available in details; use detail ordering to place
+read-only business fields next to related information or audit fields at the end.
+
 ```tsx
 <AutoCrudTable
   schema={schema}

package/dist/index.cjs

@@ -5122,7 +5122,7 @@ function useDataTable(props) {
 			...tableProps.defaultColumn,
 			enableColumnFilter: false
 		},
-		enableRowSelection: true,
+		enableRowSelection: tableProps.enableRowSelection ?? true,
 		onRowSelectionChange: setRowSelection,
 		onPaginationChange,
 		onSortingChange,
@@ -5188,7 +5188,7 @@ const filterModeConfig = {
 		tooltip: "Linear-style command filters"
 	}
 };
-function AutoTable({ schema, data, getRowId, expandedRow, defaultExpanded = false, pageCount = 1, pagination, total, overrides, classNames, enableRowSelection = true, exclude, filterOnly, actions, pinnedColumns, filterMode, search = false, toolbarExtra, locale = enUSTableControls, onDeleteSelected, onUpdateSelected, batchUpdateFields, actionBarExtra, actionBarActions, deleteConfirmation, initialSorting, enableExport = true, showDefaultExport = true, onSelectedCountChange, onSelectedRowsChange, getSelectedRows, exportTableRef }) {
+function AutoTable({ schema, data, getRowId, expandedRow, defaultExpanded = false, pageCount = 1, pagination, total, overrides, classNames, enableRowSelection = true, queryKeys, initialColumnVisibility, exclude, filterOnly, actions, pinnedColumns, filterMode, search = false, toolbarExtra, locale = enUSTableControls, onDeleteSelected, onUpdateSelected, batchUpdateFields, actionBarExtra, actionBarActions, deleteConfirmation, initialSorting, enableExport = true, showDefaultExport = true, onSelectedCountChange, onSelectedRowsChange, getSelectedRows, exportTableRef }) {
 	if (expandedRow && !getRowId) throw new Error("AutoTable requires getRowId when expandedRow is provided.");
 	const enableExpansion = !!expandedRow;
 	const modes = filterMode ? Array.isArray(filterMode) ? filterMode : [filterMode] : DEFAULT_MODES;
@@ -5198,7 +5198,7 @@ function AutoTable({ schema, data, getRowId, expandedRow, defaultExpanded = fals
 		shallow: false,
 		clearOnDefault: true
 	});
-	const [, setSearchPage] = useUrlState("page", parseAsInteger.withDefault(1), {
+	const [, setSearchPage] = useUrlState(queryKeys?.page ?? "page", parseAsInteger.withDefault(1), {
 		shallow: false,
 		clearOnDefault: true
 	});
@@ -5265,6 +5265,7 @@ function AutoTable({ schema, data, getRowId, expandedRow, defaultExpanded = fals
 	]);
 	const stableInitialState = (0, react.useMemo)(() => ({
 		sorting: initialSorting,
+		columnVisibility: initialColumnVisibility,
 		expanded: enableExpansion && defaultExpanded ? true : {},
 		columnPinning: pinnedColumns ?? {
 			left: [...enableExpansion ? [expandColumnId] : [], ...enableRowSelection ? ["select"] : []],
@@ -5272,6 +5273,7 @@ function AutoTable({ schema, data, getRowId, expandedRow, defaultExpanded = fals
 		}
 	}), [
 		initialSorting,
+		initialColumnVisibility,
 		pinnedColumns,
 		enableRowSelection,
 		enableExpansion,
@@ -5283,6 +5285,8 @@ function AutoTable({ schema, data, getRowId, expandedRow, defaultExpanded = fals
 	const { table, shallow, debounceMs, throttleMs } = useDataTable({
 		data,
 		columns,
+		queryKeys,
+		enableRowSelection,
 		getRowId,
 		getRowCanExpand: () => enableExpansion,
 		getExpandedRowModel: enableExpansion ? expandedRowModel : void 0,
@@ -7817,12 +7821,13 @@ function ViewModalContent({ open, onOpenChange, variant, data, schema, fields: f
 	const detailSchema = react.useMemo(() => schema.omit(Object.fromEntries(excluded.map((key) => [key, true]))), [schema, excluded]);
 	const overrides = buildFormOverrides(fieldConfig, form?.overrides, denyFields, "view");
 	const renderers = {};
-	for (const [index$1, cell] of (table.getRowModel().rows[0]?.getAllCells() ?? []).entries()) {
+	for (const cell of table.getRowModel().rows[0]?.getAllCells() ?? []) {
 		const key = cell.column.id;
+		const index$1 = view?.overrides?.[key]?.index;
 		overrides[key] = {
 			...overrides[key],
 			title: cell.column.columnDef.meta?.label ?? humanize(key),
-			"x-index": index$1
+			...index$1 !== void 0 ? { "x-index": index$1 } : {}
 		};
 		renderers[key] = () => (0, __tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext());
 		delete overrides[key]["x-data-source"];
@@ -8309,6 +8314,9 @@ function AutoCrudTable({ id, title, description, schema, resource, fields, table
 				pageCount: resource.tableData.pageCount,
 				pagination: paginationOptions,
 				...resource.tableData.total !== void 0 ? { total: resource.tableData.total } : {},
+				queryKeys: tableConfig?.queryKeys ?? resource.queryKeys,
+				enableRowSelection: tableConfig?.enableRowSelection,
+				initialColumnVisibility: tableConfig?.initialColumnVisibility,
 				getRowId: tableConfig?.getRowId,
 				expandedRow: tableConfig?.expandedRow,
 				defaultExpanded: tableConfig?.defaultExpanded,
@@ -9154,7 +9162,7 @@ function modalReducer(state, action$1) {
 /**
 * Hook 主函数
 */
-function useAutoCrudResource({ router, schema, query: queryTransform, fields, options = {} }) {
+function useAutoCrudResource({ router, queryKeys, schema, query: queryTransform, fields, options = {} }) {
 	const { idKey = "id", defaultVariant = "dialog", hooks, toast: toastAdapter, exportFetcher, defaultSort: defaultSortOption } = options;
 	const toast$1 = (0, react.useMemo)(() => toastAdapter === false ? noopToastAdapter : toastAdapter ?? defaultToastAdapter, [toastAdapter]);
 	const hooksRef = (0, react.useRef)(hooks);
@@ -9175,31 +9183,36 @@ function useAutoCrudResource({ router, schema, query: queryTransform, fields, op
 		fields,
 		metadataFields
 	]);
-	const [urlParams] = useQueryStates({
-		page: parseAsInteger.withDefault(1),
-		perPage: parseAsInteger.withDefault(10),
-		sort: getSortingStateParser().withDefault(defaultSorting),
-		joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"),
-		search: parseAsString.withDefault("")
-	}, { shallow: false });
-	const [filters] = useReadableFilters(columns, { shallow: false });
+	const [page] = useQueryState(queryKeys?.page ?? "page", parseAsInteger.withDefault(1));
+	const [perPage] = useQueryState(queryKeys?.perPage ?? "perPage", parseAsInteger.withDefault(10));
+	const [sort] = useQueryState(queryKeys?.sort ?? "sort", getSortingStateParser().withDefault(defaultSorting));
+	const [joinOperator] = useQueryState(queryKeys?.joinOperator ?? "joinOperator", parseAsStringEnum(["and", "or"]).withDefault("and"));
+	const [search] = useQueryState("search", parseAsString.withDefault(""), { shallow: false });
+	const [filters] = useReadableFilters(columns, {
+		shallow: false,
+		resetPageKey: queryKeys?.page ?? "page"
+	});
 	const metadataPending = Boolean(metadataQuery?.isPending);
 	const [filtersReady, setFiltersReady] = (0, react.useState)(!metadataPending);
 	(0, react.useEffect)(() => setFiltersReady(!metadataPending), [metadataPending]);
 	const listReady = !metadataPending && filtersReady;
 	const queryInput = (0, react.useMemo)(() => {
 		const autoParams = {
-			page: urlParams.page,
-			perPage: urlParams.perPage,
-			sort: urlParams.sort,
+			page,
+			perPage,
+			sort,
 			filters,
-			joinOperator: urlParams.joinOperator,
-			...urlParams.search.trim() ? { search: urlParams.search.trim() } : {}
+			joinOperator,
+			...search.trim() ? { search: search.trim() } : {}
 		};
 		return queryTransform ? queryTransform(autoParams) : autoParams;
 	}, [
-		urlParams,
+		page,
+		perPage,
+		sort,
 		filters,
+		joinOperator,
+		search,
 		queryTransform
 	]);
 	const hasReadyListData = (0, react.useRef)(false);
@@ -9475,6 +9488,7 @@ function useAutoCrudResource({ router, schema, query: queryTransform, fields, op
 	}, [listQuery, listReady]);
 	return {
 		idKey,
+		queryKeys,
 		tableData: {
 			data: tableRows,
 			pageCount: listData?.pageCount ?? 0,
@@ -9762,18 +9776,21 @@ function createMemoryDataSource(initialData = []) {
 			let filtered = [...data];
 			if (params.filters) filtered = filtered.filter((item) => {
 				return params.filters.every((filter) => {
-					return item[filter.id] === filter.value;
+					const value = item[filter.id];
+					if (filter.operator === "inArray") return Array.isArray(filter.value) && filter.value.includes(value);
+					if (!filter.operator || filter.operator === "eq") return value === filter.value;
+					throw new Error(`Unsupported memory filter operator: ${filter.operator}`);
 				});
 			});
-			if (params.sort && params.sort.length > 0) {
-				const sortItem = params.sort[0];
-				filtered.sort((a, b) => {
+			if (params.sort && params.sort.length > 0) filtered.sort((a, b) => {
+				for (const sortItem of params.sort) {
 					const aVal = a[sortItem.id];
 					const bVal = b[sortItem.id];
 					const result = aVal > bVal ? 1 : aVal < bVal ? -1 : 0;
-					return sortItem.desc ? -result : result;
-				});
-			}
+					if (result) return sortItem.desc ? -result : result;
+				}
+				return 0;
+			});
 			const start = (params.page - 1) * params.perPage;
 			const end = start + params.perPage;
 			return {

package/dist/index.d.cts

@@ -1,9 +1,9 @@
 import { a as positionActions, i as matchesPosition, n as actionPositionSchema, r as compareOrder, t as ActionPosition } from "./position-DoBV7yB6.cjs";
-import * as react_jsx_runtime8 from "react/jsx-runtime";
+import * as react_jsx_runtime9 from "react/jsx-runtime";
 import * as React$1 from "react";
 import { ComponentProps, ReactNode } from "react";
 import * as _tanstack_react_table0 from "@tanstack/react-table";
-import { Column, ColumnDef, ColumnMeta, ColumnSort, Row, RowData, Table, TableOptions, TableState } from "@tanstack/react-table";
+import { Column, ColumnDef, ColumnMeta, ColumnSort, Row, RowData, Table, TableOptions, TableState, VisibilityState } from "@tanstack/react-table";
 import { z } from "zod";
 import { JsonSchemaFormScope } from "@wordrhyme/formily-shadcn";
 import { ISchema } from "@formily/json-schema";
@@ -471,6 +471,7 @@ interface ImportResult {
  * Hook 返回值类型
  */
 interface UseAutoCrudResourceReturn<TSchema extends z.ZodObject<z.ZodRawShape>, TListItem> {
+  queryKeys?: Partial<QueryKeys>;
   /** 主键字段名（默认: "id"） */
   idKey?: keyof TListItem & string;
   tableData: {
@@ -574,6 +575,8 @@ interface AutoQueryParams {
 interface UseAutoCrudResourceParams<TSchema extends z.ZodObject<z.ZodRawShape>, TListItem> {
   /** tRPC router (如 trpc.tasks) */
   router: CrudRouter;
+  /** URL keys shared with the table, for multiple resources on one page. */
+  queryKeys?: Partial<QueryKeys>;
   /** Zod schema */
   schema: TSchema;
   /** Field filter configuration shared with AutoCrudTable. */
@@ -602,6 +605,7 @@ interface UseAutoCrudResourceParams<TSchema extends z.ZodObject<z.ZodRawShape>,
  */
 declare function useAutoCrudResource<TSchema extends z.ZodObject<z.ZodRawShape>, TListItem = z.output<TSchema>>({
   router,
+  queryKeys,
   schema,
   query: queryTransform,
   fields,
@@ -672,7 +676,7 @@ declare function DataTable<TData>({
   className,
   classNames,
   ...props
-}: DataTableProps<TData>): react_jsx_runtime8.JSX.Element;
+}: DataTableProps<TData>): react_jsx_runtime9.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/auto-table-action-bar.d.ts
 /** 批量更新字段配置 */
@@ -761,7 +765,7 @@ declare function AutoTableActionBar<TData>({
   extraActions,
   actions,
   deleteConfirmation
-}: AutoTableActionBarProps<TData>): react_jsx_runtime8.JSX.Element;
+}: AutoTableActionBarProps<TData>): react_jsx_runtime9.JSX.Element;
 //#endregion
 //#region src/lib/schema-bridge/types.d.ts
 /**
@@ -1016,6 +1020,10 @@ interface AutoTableProps<T extends z.ZodObject<z.ZodRawShape>> extends Pick<Data
   /** 按元素分组的全局表格类名 */
   classNames?: DataTableClassNames;
   enableRowSelection?: boolean;
+  /** URL keys shared with useAutoCrudResource. */
+  queryKeys?: Partial<QueryKeys>;
+  /** Initial visibility; users can still toggle columns in the view options. */
+  initialColumnVisibility?: VisibilityState;
   exclude?: (keyof z.infer<T>)[];
   filterOnly?: string[];
   actions?: ActionsColumnConfig<z.infer<T>>;
@@ -1078,6 +1086,8 @@ declare function AutoTable<T extends z.ZodObject<z.ZodRawShape>>({
   overrides,
   classNames,
   enableRowSelection,
+  queryKeys,
+  initialColumnVisibility,
   exclude,
   filterOnly,
   actions,
@@ -1099,7 +1109,7 @@ declare function AutoTable<T extends z.ZodObject<z.ZodRawShape>>({
   onSelectedRowsChange,
   getSelectedRows,
   exportTableRef
-}: AutoTableProps<T>): react_jsx_runtime8.JSX.Element;
+}: AutoTableProps<T>): react_jsx_runtime9.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/auto-form.d.ts
 type AutoFormProps<T extends z.ZodObject<z.ZodRawShape>> = {
@@ -1142,7 +1152,7 @@ declare function AutoFormInner<T extends z.ZodObject<z.ZodRawShape>>({
   labelAlign,
   labelWidth,
   showSubmitButton
-}: AutoFormProps<T>, ref: React.Ref<AutoFormRef>): react_jsx_runtime8.JSX.Element;
+}: AutoFormProps<T>, ref: React.Ref<AutoFormRef>): react_jsx_runtime9.JSX.Element;
 declare const AutoForm: <T extends z.ZodObject<z.ZodRawShape>>(props: AutoFormProps<T> & {
   ref?: React.Ref<AutoFormRef>;
 }) => ReturnType<typeof AutoFormInner>;
@@ -1481,7 +1491,7 @@ interface AutoCrudTableProps<TSchema extends z.ZodObject<z.ZodRawShape>> {
    * 支持共用配置（label, hidden）+ 表格/表单特定配置
    */
   fields?: Fields;
-  /** Detail presentation shares field formatting by default. */
+  /** Details share form layout and field formatting by default. */
   view?: {
     /** Explicitly reuse custom list cells with a separate, single-row table context. */
     presentation?: 'table';
@@ -1523,7 +1533,7 @@ interface AutoCrudTableProps<TSchema extends z.ZodObject<z.ZodRawShape>> {
     batchActions?: BatchActionConfig<z.output<TSchema>>;
     /** 默认排序 */
     defaultSort?: any[];
-  } & Pick<AutoTableProps<TSchema>, 'getRowId' | 'expandedRow' | 'defaultExpanded'>;
+  } & Pick<AutoTableProps<TSchema>, 'getRowId' | 'expandedRow' | 'defaultExpanded' | 'enableRowSelection' | 'initialColumnVisibility' | 'queryKeys'>;
   /** 表单配置 */
   form?: {
     /** 表单覆盖配置（兼容旧 API，优先级低于 fieldOverrides） */
@@ -1612,7 +1622,7 @@ declare function AutoCrudTable<TSchema extends z.ZodObject<z.ZodRawShape>>({
   locale: localeProp,
   onCreate,
   onExport
-}: AutoCrudTableProps<TSchema>): react_jsx_runtime8.JSX.Element;
+}: AutoCrudTableProps<TSchema>): react_jsx_runtime9.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/auto-table-simple-filters.d.ts
 interface AutoTableSimpleFiltersProps<TData> {
@@ -1628,7 +1638,7 @@ declare function AutoTableSimpleFilters<TData>({
   filters: externalFilters,
   onFiltersChange,
   leading
-}: AutoTableSimpleFiltersProps<TData>): react_jsx_runtime8.JSX.Element | null;
+}: AutoTableSimpleFiltersProps<TData>): react_jsx_runtime9.JSX.Element | null;
 //#endregion
 //#region src/components/auto-crud/form-modal.d.ts
 type ModalVariant = 'dialog' | 'sheet';
@@ -1677,7 +1687,7 @@ declare function CrudFormModal<T extends z.ZodObject<z.ZodRawShape>>({
   labelAlign,
   labelWidth,
   className
-}: CrudFormModalProps<T> & CrudFormModalMode<T>): react_jsx_runtime8.JSX.Element;
+}: CrudFormModalProps<T> & CrudFormModalMode<T>): react_jsx_runtime9.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/import-dialog.d.ts
 interface ImportDialogProps {
@@ -1699,7 +1709,7 @@ declare function ImportDialog({
   columns,
   title,
   locale
-}: ImportDialogProps): react_jsx_runtime8.JSX.Element;
+}: ImportDialogProps): react_jsx_runtime9.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/export-dialog.d.ts
 type ExportMode = 'selected' | 'filtered';
@@ -1719,7 +1729,7 @@ declare function ExportDialog({
   selectedCount,
   onExport,
   canExportFiltered
-}: ExportDialogProps): react_jsx_runtime8.JSX.Element;
+}: ExportDialogProps): react_jsx_runtime9.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-advanced-toolbar.d.ts
 interface DataTableAdvancedToolbarProps<TData> extends React$1.ComponentProps<'div'> {
@@ -1730,7 +1740,7 @@ declare function DataTableAdvancedToolbar<TData>({
   children,
   className,
   ...props
-}: DataTableAdvancedToolbarProps<TData>): react_jsx_runtime8.JSX.Element;
+}: DataTableAdvancedToolbarProps<TData>): react_jsx_runtime9.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-column-header.d.ts
 interface DataTableColumnHeaderProps<TData, TValue> extends React.ComponentProps<typeof DropdownMenuTrigger> {
@@ -1742,7 +1752,7 @@ declare function DataTableColumnHeader<TData, TValue>({
   label,
   className,
   ...props
-}: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime8.JSX.Element;
+}: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime9.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-faceted-filter.d.ts
 interface DataTableFacetedFilterProps<TData, TValue> {
@@ -1756,7 +1766,7 @@ declare function DataTableFacetedFilter<TData, TValue>({
   title,
   options,
   multiple
-}: DataTableFacetedFilterProps<TData, TValue>): react_jsx_runtime8.JSX.Element;
+}: DataTableFacetedFilterProps<TData, TValue>): react_jsx_runtime9.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-pagination.d.ts
 interface DataTablePaginationProps<TData> extends React.ComponentProps<'div'>, TablePaginationOptions {
@@ -1772,7 +1782,7 @@ declare function DataTablePagination<TData>({
   pageJumpLabel,
   className,
   ...props
-}: DataTablePaginationProps<TData>): react_jsx_runtime8.JSX.Element;
+}: DataTablePaginationProps<TData>): react_jsx_runtime9.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-toolbar.d.ts
 interface DataTableToolbarProps<TData> extends React$1.ComponentProps<'div'> {
@@ -1783,7 +1793,7 @@ declare function DataTableToolbar<TData>({
   children,
   className,
   ...props
-}: DataTableToolbarProps<TData>): react_jsx_runtime8.JSX.Element;
+}: DataTableToolbarProps<TData>): react_jsx_runtime9.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-view-options.d.ts
 interface DataTableViewOptionsProps<TData> extends PopoverContentProps {
@@ -1796,7 +1806,7 @@ declare function DataTableViewOptions<TData>({
   disabled,
   locale,
   ...props
-}: DataTableViewOptionsProps<TData>): react_jsx_runtime8.JSX.Element;
+}: DataTableViewOptionsProps<TData>): react_jsx_runtime9.JSX.Element;
 //#endregion
 //#region src/lib/crud-actions.d.ts
 type CrudActionZone = 'toolbar' | 'row' | 'batch';

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import { a as positionActions, i as matchesPosition, n as actionPositionSchema,
 import * as React$1 from "react";
 import { ComponentProps, ReactNode } from "react";
 import * as _tanstack_react_table0 from "@tanstack/react-table";
-import { Column, ColumnDef, ColumnMeta, ColumnSort, Row, RowData, Table, TableOptions, TableState } from "@tanstack/react-table";
+import { Column, ColumnDef, ColumnMeta, ColumnSort, Row, RowData, Table, TableOptions, TableState, VisibilityState } from "@tanstack/react-table";
 import { DropdownMenuTrigger, PopoverContentProps } from "@wordrhyme/shadcn";
 import { ClassValue } from "clsx";
 import * as react_jsx_runtime8 from "react/jsx-runtime";
@@ -471,6 +471,7 @@ interface ImportResult {
  * Hook 返回值类型
  */
 interface UseAutoCrudResourceReturn<TSchema extends z.ZodObject<z.ZodRawShape>, TListItem> {
+  queryKeys?: Partial<QueryKeys>;
   /** 主键字段名（默认: "id"） */
   idKey?: keyof TListItem & string;
   tableData: {
@@ -574,6 +575,8 @@ interface AutoQueryParams {
 interface UseAutoCrudResourceParams<TSchema extends z.ZodObject<z.ZodRawShape>, TListItem> {
   /** tRPC router (如 trpc.tasks) */
   router: CrudRouter;
+  /** URL keys shared with the table, for multiple resources on one page. */
+  queryKeys?: Partial<QueryKeys>;
   /** Zod schema */
   schema: TSchema;
   /** Field filter configuration shared with AutoCrudTable. */
@@ -602,6 +605,7 @@ interface UseAutoCrudResourceParams<TSchema extends z.ZodObject<z.ZodRawShape>,
  */
 declare function useAutoCrudResource<TSchema extends z.ZodObject<z.ZodRawShape>, TListItem = z.output<TSchema>>({
   router,
+  queryKeys,
   schema,
   query: queryTransform,
   fields,
@@ -1016,6 +1020,10 @@ interface AutoTableProps<T extends z.ZodObject<z.ZodRawShape>> extends Pick<Data
   /** 按元素分组的全局表格类名 */
   classNames?: DataTableClassNames;
   enableRowSelection?: boolean;
+  /** URL keys shared with useAutoCrudResource. */
+  queryKeys?: Partial<QueryKeys>;
+  /** Initial visibility; users can still toggle columns in the view options. */
+  initialColumnVisibility?: VisibilityState;
   exclude?: (keyof z.infer<T>)[];
   filterOnly?: string[];
   actions?: ActionsColumnConfig<z.infer<T>>;
@@ -1078,6 +1086,8 @@ declare function AutoTable<T extends z.ZodObject<z.ZodRawShape>>({
   overrides,
   classNames,
   enableRowSelection,
+  queryKeys,
+  initialColumnVisibility,
   exclude,
   filterOnly,
   actions,
@@ -1481,7 +1491,7 @@ interface AutoCrudTableProps<TSchema extends z.ZodObject<z.ZodRawShape>> {
    * 支持共用配置（label, hidden）+ 表格/表单特定配置
    */
   fields?: Fields;
-  /** Detail presentation shares field formatting by default. */
+  /** Details share form layout and field formatting by default. */
   view?: {
     /** Explicitly reuse custom list cells with a separate, single-row table context. */
     presentation?: 'table';
@@ -1523,7 +1533,7 @@ interface AutoCrudTableProps<TSchema extends z.ZodObject<z.ZodRawShape>> {
     batchActions?: BatchActionConfig<z.output<TSchema>>;
     /** 默认排序 */
     defaultSort?: any[];
-  } & Pick<AutoTableProps<TSchema>, 'getRowId' | 'expandedRow' | 'defaultExpanded'>;
+  } & Pick<AutoTableProps<TSchema>, 'getRowId' | 'expandedRow' | 'defaultExpanded' | 'enableRowSelection' | 'initialColumnVisibility' | 'queryKeys'>;
   /** 表单配置 */
   form?: {
     /** 表单覆盖配置（兼容旧 API，优先级低于 fieldOverrides） */

package/dist/index.js

@@ -5106,7 +5106,7 @@ function useDataTable(props) {
 			...tableProps.defaultColumn,
 			enableColumnFilter: false
 		},
-		enableRowSelection: true,
+		enableRowSelection: tableProps.enableRowSelection ?? true,
 		onRowSelectionChange: setRowSelection,
 		onPaginationChange,
 		onSortingChange,
@@ -5172,7 +5172,7 @@ const filterModeConfig = {
 		tooltip: "Linear-style command filters"
 	}
 };
-function AutoTable({ schema, data, getRowId, expandedRow, defaultExpanded = false, pageCount = 1, pagination, total, overrides, classNames, enableRowSelection = true, exclude, filterOnly, actions, pinnedColumns, filterMode, search = false, toolbarExtra, locale = enUSTableControls, onDeleteSelected, onUpdateSelected, batchUpdateFields, actionBarExtra, actionBarActions, deleteConfirmation, initialSorting, enableExport = true, showDefaultExport = true, onSelectedCountChange, onSelectedRowsChange, getSelectedRows, exportTableRef }) {
+function AutoTable({ schema, data, getRowId, expandedRow, defaultExpanded = false, pageCount = 1, pagination, total, overrides, classNames, enableRowSelection = true, queryKeys, initialColumnVisibility, exclude, filterOnly, actions, pinnedColumns, filterMode, search = false, toolbarExtra, locale = enUSTableControls, onDeleteSelected, onUpdateSelected, batchUpdateFields, actionBarExtra, actionBarActions, deleteConfirmation, initialSorting, enableExport = true, showDefaultExport = true, onSelectedCountChange, onSelectedRowsChange, getSelectedRows, exportTableRef }) {
 	if (expandedRow && !getRowId) throw new Error("AutoTable requires getRowId when expandedRow is provided.");
 	const enableExpansion = !!expandedRow;
 	const modes = filterMode ? Array.isArray(filterMode) ? filterMode : [filterMode] : DEFAULT_MODES;
@@ -5182,7 +5182,7 @@ function AutoTable({ schema, data, getRowId, expandedRow, defaultExpanded = fals
 		shallow: false,
 		clearOnDefault: true
 	});
-	const [, setSearchPage] = useUrlState("page", parseAsInteger.withDefault(1), {
+	const [, setSearchPage] = useUrlState(queryKeys?.page ?? "page", parseAsInteger.withDefault(1), {
 		shallow: false,
 		clearOnDefault: true
 	});
@@ -5249,6 +5249,7 @@ function AutoTable({ schema, data, getRowId, expandedRow, defaultExpanded = fals
 	]);
 	const stableInitialState = useMemo(() => ({
 		sorting: initialSorting,
+		columnVisibility: initialColumnVisibility,
 		expanded: enableExpansion && defaultExpanded ? true : {},
 		columnPinning: pinnedColumns ?? {
 			left: [...enableExpansion ? [expandColumnId] : [], ...enableRowSelection ? ["select"] : []],
@@ -5256,6 +5257,7 @@ function AutoTable({ schema, data, getRowId, expandedRow, defaultExpanded = fals
 		}
 	}), [
 		initialSorting,
+		initialColumnVisibility,
 		pinnedColumns,
 		enableRowSelection,
 		enableExpansion,
@@ -5267,6 +5269,8 @@ function AutoTable({ schema, data, getRowId, expandedRow, defaultExpanded = fals
 	const { table, shallow, debounceMs, throttleMs } = useDataTable({
 		data,
 		columns,
+		queryKeys,
+		enableRowSelection,
 		getRowId,
 		getRowCanExpand: () => enableExpansion,
 		getExpandedRowModel: enableExpansion ? expandedRowModel : void 0,
@@ -7801,12 +7805,13 @@ function ViewModalContent({ open, onOpenChange, variant, data, schema, fields: f
 	const detailSchema = React.useMemo(() => schema.omit(Object.fromEntries(excluded.map((key) => [key, true]))), [schema, excluded]);
 	const overrides = buildFormOverrides(fieldConfig, form?.overrides, denyFields, "view");
 	const renderers = {};
-	for (const [index$1, cell] of (table.getRowModel().rows[0]?.getAllCells() ?? []).entries()) {
+	for (const cell of table.getRowModel().rows[0]?.getAllCells() ?? []) {
 		const key = cell.column.id;
+		const index$1 = view?.overrides?.[key]?.index;
 		overrides[key] = {
 			...overrides[key],
 			title: cell.column.columnDef.meta?.label ?? humanize(key),
-			"x-index": index$1
+			...index$1 !== void 0 ? { "x-index": index$1 } : {}
 		};
 		renderers[key] = () => flexRender(cell.column.columnDef.cell, cell.getContext());
 		delete overrides[key]["x-data-source"];
@@ -8293,6 +8298,9 @@ function AutoCrudTable({ id, title, description, schema, resource, fields, table
 				pageCount: resource.tableData.pageCount,
 				pagination: paginationOptions,
 				...resource.tableData.total !== void 0 ? { total: resource.tableData.total } : {},
+				queryKeys: tableConfig?.queryKeys ?? resource.queryKeys,
+				enableRowSelection: tableConfig?.enableRowSelection,
+				initialColumnVisibility: tableConfig?.initialColumnVisibility,
 				getRowId: tableConfig?.getRowId,
 				expandedRow: tableConfig?.expandedRow,
 				defaultExpanded: tableConfig?.defaultExpanded,
@@ -9138,7 +9146,7 @@ function modalReducer(state, action$1) {
 /**
 * Hook 主函数
 */
-function useAutoCrudResource({ router, schema, query: queryTransform, fields, options = {} }) {
+function useAutoCrudResource({ router, queryKeys, schema, query: queryTransform, fields, options = {} }) {
 	const { idKey = "id", defaultVariant = "dialog", hooks, toast: toastAdapter, exportFetcher, defaultSort: defaultSortOption } = options;
 	const toast$1 = useMemo(() => toastAdapter === false ? noopToastAdapter : toastAdapter ?? defaultToastAdapter, [toastAdapter]);
 	const hooksRef = useRef(hooks);
@@ -9159,31 +9167,36 @@ function useAutoCrudResource({ router, schema, query: queryTransform, fields, op
 		fields,
 		metadataFields
 	]);
-	const [urlParams] = useQueryStates({
-		page: parseAsInteger.withDefault(1),
-		perPage: parseAsInteger.withDefault(10),
-		sort: getSortingStateParser().withDefault(defaultSorting),
-		joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"),
-		search: parseAsString.withDefault("")
-	}, { shallow: false });
-	const [filters] = useReadableFilters(columns, { shallow: false });
+	const [page] = useQueryState(queryKeys?.page ?? "page", parseAsInteger.withDefault(1));
+	const [perPage] = useQueryState(queryKeys?.perPage ?? "perPage", parseAsInteger.withDefault(10));
+	const [sort] = useQueryState(queryKeys?.sort ?? "sort", getSortingStateParser().withDefault(defaultSorting));
+	const [joinOperator] = useQueryState(queryKeys?.joinOperator ?? "joinOperator", parseAsStringEnum(["and", "or"]).withDefault("and"));
+	const [search] = useQueryState("search", parseAsString.withDefault(""), { shallow: false });
+	const [filters] = useReadableFilters(columns, {
+		shallow: false,
+		resetPageKey: queryKeys?.page ?? "page"
+	});
 	const metadataPending = Boolean(metadataQuery?.isPending);
 	const [filtersReady, setFiltersReady] = useState(!metadataPending);
 	useEffect(() => setFiltersReady(!metadataPending), [metadataPending]);
 	const listReady = !metadataPending && filtersReady;
 	const queryInput = useMemo(() => {
 		const autoParams = {
-			page: urlParams.page,
-			perPage: urlParams.perPage,
-			sort: urlParams.sort,
+			page,
+			perPage,
+			sort,
 			filters,
-			joinOperator: urlParams.joinOperator,
-			...urlParams.search.trim() ? { search: urlParams.search.trim() } : {}
+			joinOperator,
+			...search.trim() ? { search: search.trim() } : {}
 		};
 		return queryTransform ? queryTransform(autoParams) : autoParams;
 	}, [
-		urlParams,
+		page,
+		perPage,
+		sort,
 		filters,
+		joinOperator,
+		search,
 		queryTransform
 	]);
 	const hasReadyListData = useRef(false);
@@ -9459,6 +9472,7 @@ function useAutoCrudResource({ router, schema, query: queryTransform, fields, op
 	}, [listQuery, listReady]);
 	return {
 		idKey,
+		queryKeys,
 		tableData: {
 			data: tableRows,
 			pageCount: listData?.pageCount ?? 0,
@@ -9746,18 +9760,21 @@ function createMemoryDataSource(initialData = []) {
 			let filtered = [...data];
 			if (params.filters) filtered = filtered.filter((item) => {
 				return params.filters.every((filter) => {
-					return item[filter.id] === filter.value;
+					const value = item[filter.id];
+					if (filter.operator === "inArray") return Array.isArray(filter.value) && filter.value.includes(value);
+					if (!filter.operator || filter.operator === "eq") return value === filter.value;
+					throw new Error(`Unsupported memory filter operator: ${filter.operator}`);
 				});
 			});
-			if (params.sort && params.sort.length > 0) {
-				const sortItem = params.sort[0];
-				filtered.sort((a, b) => {
+			if (params.sort && params.sort.length > 0) filtered.sort((a, b) => {
+				for (const sortItem of params.sort) {
 					const aVal = a[sortItem.id];
 					const bVal = b[sortItem.id];
 					const result = aVal > bVal ? 1 : aVal < bVal ? -1 : 0;
-					return sortItem.desc ? -result : result;
-				});
-			}
+					if (result) return sortItem.desc ? -result : result;
+				}
+				return 0;
+			});
 			const start = (params.page - 1) * params.perPage;
 			const end = start + params.perPage;
 			return {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@wordrhyme/auto-crud",
   "type": "module",
-  "version": "1.13.0",
+  "version": "1.14.1",
   "description": "Schema-first CRUD components with auto-generated tables and forms",
   "author": "wordrhyme",
   "license": "MIT",
@@ -95,9 +95,9 @@
     "typescript": "^5.9.3",
     "vitest": "^3.2.4",
     "@internal/eslint-config": "0.3.0",
+    "@internal/tsconfig": "0.1.0",
     "@internal/prettier-config": "0.0.1",
     "@internal/tsdown-config": "0.1.0",
-    "@internal/tsconfig": "0.1.0",
     "@internal/vitest-config": "0.1.0"
   },
   "prettier": "@internal/prettier-config",