@wordrhyme/auto-crud 1.5.6 → 1.5.7

package/dist/index.cjs

@@ -525,104 +525,6 @@ function DataTable({ table, actionBar, children, className,...props }) {
 	});
 }
 
-//#endregion
-//#region src/lib/id.ts
-const prefixes = {};
-function generateId(prefixOrOptions, inputOptions = {}) {
-	const finalOptions = typeof prefixOrOptions === "object" ? prefixOrOptions : inputOptions;
-	const prefix = typeof prefixOrOptions === "object" ? void 0 : prefixOrOptions;
-	const { length = 12, separator = "_" } = finalOptions;
-	const id = (0, nanoid.customAlphabet)("0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", length)();
-	return prefix && prefix in prefixes ? `${prefixes[prefix]}${separator}${id}` : id;
-}
-
-//#endregion
-//#region src/lib/readable-filters.ts
-const OP_SUFFIX = "__op";
-const INDEX_SEPARATOR = "__";
-const RANGE_VARIANTS = new Set(["range", "dateRange"]);
-function getColumnId(column) {
-	if ("id" in column && column.id) return String(column.id);
-	if ("accessorKey" in column && column.accessorKey) return String(column.accessorKey);
-	return null;
-}
-function getColumnVariant(column) {
-	if ("columnDef" in column) return column.columnDef.meta?.variant;
-	return column.meta?.variant;
-}
-function splitKey(key) {
-	const match = key.match(/^(.*?)(?:__(\d+))?$/);
-	if (!match) return { base: key };
-	const index$1 = match[2] ? Number(match[2]) : void 0;
-	return {
-		base: match[1] ?? key,
-		index: index$1
-	};
-}
-function isFilterKey(key, columnIds) {
-	const { base } = splitKey(key.endsWith(OP_SUFFIX) ? key.slice(0, -4) : key);
-	return columnIds.has(base);
-}
-function parseValueByVariant(value, variant) {
-	if (variant === "multiSelect") return value ? value.split(",").filter(Boolean) : [];
-	if (RANGE_VARIANTS.has(variant)) {
-		const parts = value.split(",");
-		return [parts[0] ?? "", parts[1] ?? ""];
-	}
-	if (variant === "select") return value.split(",").filter(Boolean)[0] ?? "";
-	return value;
-}
-function serializeValue(value, variant) {
-	if (Array.isArray(value)) {
-		if (RANGE_VARIANTS.has(variant)) return [value[0] ?? "", value[1] ?? ""].join(",");
-		return value.join(",");
-	}
-	return value;
-}
-function parseReadableFilters(params, columns) {
-	const columnsById = /* @__PURE__ */ new Map();
-	for (const column of columns) {
-		const id = getColumnId(column);
-		if (id) columnsById.set(id, column);
-	}
-	const filters = [];
-	for (const [key, rawValue] of params.entries()) {
-		if (key.endsWith(OP_SUFFIX)) continue;
-		const { base } = splitKey(key);
-		const column = columnsById.get(base);
-		if (!column) continue;
-		const variant = getColumnVariant(column) ?? "text";
-		const opKey = `${key}${OP_SUFFIX}`;
-		const operator = params.get(opKey) ?? getDefaultFilterOperator(variant);
-		const parsedValue = operator === "isEmpty" || operator === "isNotEmpty" ? "" : parseValueByVariant(rawValue, variant);
-		filters.push({
-			id: base,
-			value: parsedValue,
-			variant,
-			operator,
-			filterId: key || generateId({ length: 8 })
-		});
-	}
-	return filters;
-}
-function applyReadableFilters(params, columns, filters) {
-	const columnIds = new Set(columns.map((column) => getColumnId(column)).filter(Boolean));
-	for (const key of Array.from(params.keys())) if (isFilterKey(key, columnIds)) params.delete(key);
-	const counters = /* @__PURE__ */ new Map();
-	for (const filter of filters) {
-		const columnId = String(filter.id);
-		const count = (counters.get(columnId) ?? 0) + 1;
-		counters.set(columnId, count);
-		const key = count === 1 ? columnId : `${columnId}${INDEX_SEPARATOR}${count}`;
-		const variant = filter.variant ?? "text";
-		const value = serializeValue(filter.value, variant);
-		params.set(key, filter.operator === "isEmpty" || filter.operator === "isNotEmpty" ? "" : value);
-		const defaultOperator = getDefaultFilterOperator(variant);
-		if (filter.operator !== defaultOperator) params.set(`${key}${OP_SUFFIX}`, filter.operator);
-	}
-	return params;
-}
-
 //#endregion
 //#region src/hooks/use-url-state.ts
 const parseAsInteger = {
@@ -873,15 +775,120 @@ function useQueryStates(parsers, options = {}) {
 	}, [setValues])];
 }
 
+//#endregion
+//#region src/lib/id.ts
+const prefixes = {};
+function generateId(prefixOrOptions, inputOptions = {}) {
+	const finalOptions = typeof prefixOrOptions === "object" ? prefixOrOptions : inputOptions;
+	const prefix = typeof prefixOrOptions === "object" ? void 0 : prefixOrOptions;
+	const { length = 12, separator = "_" } = finalOptions;
+	const id = (0, nanoid.customAlphabet)("0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", length)();
+	return prefix && prefix in prefixes ? `${prefixes[prefix]}${separator}${id}` : id;
+}
+
+//#endregion
+//#region src/lib/readable-filters.ts
+const OP_SUFFIX = "__op";
+const INDEX_SEPARATOR = "__";
+const RANGE_VARIANTS = new Set(["range", "dateRange"]);
+function getColumnId(column) {
+	if ("id" in column && column.id) return String(column.id);
+	if ("accessorKey" in column && column.accessorKey) return String(column.accessorKey);
+	return null;
+}
+function getColumnVariant(column) {
+	if ("columnDef" in column) return column.columnDef.meta?.variant;
+	return column.meta?.variant;
+}
+function splitKey(key) {
+	const match = key.match(/^(.*?)(?:__(\d+))?$/);
+	if (!match) return { base: key };
+	const index$1 = match[2] ? Number(match[2]) : void 0;
+	return {
+		base: match[1] ?? key,
+		index: index$1
+	};
+}
+function isFilterKey(key, columnIds) {
+	const { base } = splitKey(key.endsWith(OP_SUFFIX) ? key.slice(0, -4) : key);
+	return columnIds.has(base);
+}
+function parseValueByVariant(value, variant) {
+	if (variant === "multiSelect") return value ? value.split(",").filter(Boolean) : [];
+	if (RANGE_VARIANTS.has(variant)) {
+		const parts = value.split(",");
+		return [parts[0] ?? "", parts[1] ?? ""];
+	}
+	if (variant === "select") return value.split(",").filter(Boolean)[0] ?? "";
+	return value;
+}
+function serializeValue(value, variant) {
+	if (Array.isArray(value)) {
+		if (RANGE_VARIANTS.has(variant)) return [value[0] ?? "", value[1] ?? ""].join(",");
+		return value.join(",");
+	}
+	return value;
+}
+function parseReadableFilters(params, columns) {
+	const columnsById = /* @__PURE__ */ new Map();
+	for (const column of columns) {
+		const id = getColumnId(column);
+		if (id) columnsById.set(id, column);
+	}
+	const filters = [];
+	for (const [key, rawValue] of params.entries()) {
+		if (key.endsWith(OP_SUFFIX)) continue;
+		const { base } = splitKey(key);
+		const column = columnsById.get(base);
+		if (!column) continue;
+		const variant = getColumnVariant(column) ?? "text";
+		const opKey = `${key}${OP_SUFFIX}`;
+		const operator = params.get(opKey) ?? getDefaultFilterOperator(variant);
+		const parsedValue = operator === "isEmpty" || operator === "isNotEmpty" ? "" : parseValueByVariant(rawValue, variant);
+		filters.push({
+			id: base,
+			value: parsedValue,
+			variant,
+			operator,
+			filterId: key || generateId({ length: 8 })
+		});
+	}
+	return filters;
+}
+function applyReadableFilters(params, columns, filters) {
+	const columnIds = new Set(columns.map((column) => getColumnId(column)).filter(Boolean));
+	for (const key of Array.from(params.keys())) if (isFilterKey(key, columnIds)) params.delete(key);
+	const counters = /* @__PURE__ */ new Map();
+	for (const filter of filters) {
+		const columnId = String(filter.id);
+		const count = (counters.get(columnId) ?? 0) + 1;
+		counters.set(columnId, count);
+		const key = count === 1 ? columnId : `${columnId}${INDEX_SEPARATOR}${count}`;
+		const variant = filter.variant ?? "text";
+		const value = serializeValue(filter.value, variant);
+		params.set(key, filter.operator === "isEmpty" || filter.operator === "isNotEmpty" ? "" : value);
+		const defaultOperator = getDefaultFilterOperator(variant);
+		if (filter.operator !== defaultOperator) params.set(`${key}${OP_SUFFIX}`, filter.operator);
+	}
+	return params;
+}
+
 //#endregion
 //#region src/hooks/use-readable-filters.ts
 const URL_CHANGE_EVENT = "urlchange";
 function toSearchString(params) {
-	const queryString = params.toString().replace(/%2C/g, ",");
+	const queryString = params.toString().replace(/%2C/gu, ",");
 	return queryString ? `?${queryString}` : "";
 }
+function filterSignature(filters) {
+	return JSON.stringify(filters.map(({ id, operator, value, variant }) => JSON.stringify([
+		id,
+		operator,
+		variant === "multiSelect" && Array.isArray(value) ? [...value].sort() : value
+	])).sort());
+}
 function useReadableFilters(columns, options = {}) {
-	const { history = "replace", scroll = false } = options;
+	const { history = "replace", scroll = false, resetPageKey = "page" } = options;
 	const columnSnapshot = react.useMemo(() => columns, [columns]);
 	const lastWrittenUrlRef = react.useRef(null);
 	const filtersRef = react.useRef(null);
@@ -909,7 +916,10 @@ function useReadableFilters(columns, options = {}) {
 	}, [columnSnapshot]);
 	const writeToUrl = react.useCallback((next) => {
 		const params = getUrlParams();
+		const previousFilters = parseReadableFilters(params, columnSnapshot);
 		applyReadableFilters(params, columnSnapshot, next);
+		const nextFilters = parseReadableFilters(params, columnSnapshot);
+		if (resetPageKey !== false && resetPageKey.length > 0 && filterSignature(previousFilters) !== filterSignature(nextFilters)) params.delete(resetPageKey);
 		lastWrittenUrlRef.current = toSearchString(params);
 		setSearchParams(params, {
 			history,
@@ -918,6 +928,7 @@ function useReadableFilters(columns, options = {}) {
 	}, [
 		columnSnapshot,
 		history,
+		resetPageKey,
 		scroll
 	]);
 	return [filters, react.useCallback((updater) => {
@@ -1053,7 +1064,10 @@ function DataTableFilterList({ table, debounceMs = DEBOUNCE_MS$2, throttleMs = T
 			return true;
 		});
 	}, [table, columnDefs]);
-	const [filters, setFilters] = useReadableFilters(columns, { debounceMs });
+	const [filters, setFilters] = useReadableFilters(columns, {
+		debounceMs,
+		resetPageKey: table.options.meta?.queryKeys?.page ?? "page"
+	});
 	const debouncedSetFilters = useDebouncedCallback(setFilters, debounceMs);
 	const [joinOperator, setJoinOperator] = useQueryState(table.options.meta?.queryKeys?.joinOperator ?? "", parseAsStringEnum(["and", "or"]).withDefault("and"));
 	const onFilterAdd = react.useCallback(() => {
@@ -1591,7 +1605,10 @@ function DataTableFilterMenu({ table, debounceMs = DEBOUNCE_MS$1, throttleMs = T
 			setSelectedColumn(null);
 		}
 	}, [inputValue, selectedColumn]);
-	const [filters, setFilters] = useReadableFilters(columns, { debounceMs });
+	const [filters, setFilters] = useReadableFilters(columns, {
+		debounceMs,
+		resetPageKey: table.options.meta?.queryKeys?.page ?? "page"
+	});
 	const debouncedSetFilters = useDebouncedCallback(setFilters, debounceMs);
 	const onFilterAdd = react.useCallback((column, value) => {
 		if (!value.trim() && column.columnDef.meta?.variant !== "boolean") return;
@@ -2397,6 +2414,7 @@ function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilte
 	const queryStateOptions = table.options.meta?.queryStateOptions;
 	const [queryFilters, setQueryFilters] = useReadableFilters(columns, {
 		...queryStateOptions,
+		resetPageKey: table.options.meta?.queryKeys?.page ?? "page",
 		shallow
 	});
 	const filters = externalFilters ?? queryFilters;

package/dist/index.d.cts

@@ -1346,12 +1346,12 @@ declare const filterItemSchema: z.ZodObject<{
   variant: z.ZodEnum<{
     number: "number";
     boolean: "boolean";
-    date: "date";
     text: "text";
+    range: "range";
+    date: "date";
+    dateRange: "dateRange";
     select: "select";
     multiSelect: "multiSelect";
-    dateRange: "dateRange";
-    range: "range";
   }>;
   operator: z.ZodEnum<{
     iLike: "iLike";
@@ -1691,6 +1691,8 @@ type ColumnLike<TData> = Column<TData> | ColumnDef<TData, unknown> | {
 };
 interface UseReadableFiltersOptions extends UrlStateOptions {
   debounceMs?: number;
+  /** Reset server-side pagination when effective filters change. */
+  resetPageKey?: string | false;
 }
 declare function useReadableFilters<TData>(columns: ColumnLike<TData>[], options?: UseReadableFiltersOptions): [ExtendedColumnFilter<TData>[], (value: ExtendedColumnFilter<TData>[] | ((prev: ExtendedColumnFilter<TData>[]) => ExtendedColumnFilter<TData>[])) => void];
 //#endregion

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import * as _tanstack_react_table0 from "@tanstack/react-table";
 import { Column, ColumnDef, ColumnSort, Row, RowData, Table, TableOptions, TableState } from "@tanstack/react-table";
 import { DropdownMenuTrigger, PopoverContent } from "@wordrhyme/shadcn";
 import { ClassValue } from "clsx";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 import { MultiCombobox, MultiComboboxOption, MultiComboboxProps, MultiComboboxTriggerRenderProps, Select, SelectMode, SelectOption, SelectProps, SelectSearchableDynamicProps, SelectSearchableMultipleProps, SelectSearchableProps, SelectSearchableSingleProps, SelectSimpleProps, SelectTriggerRenderProps } from "@wordrhyme/shadcn-ui";
 import { z } from "zod";
 import { JsonSchemaFormScope } from "@wordrhyme/formily-shadcn";
@@ -413,7 +413,7 @@ declare function AutoTableActionBar<TData>({
   extraActions,
   actions,
   deleteConfirmation
-}: AutoTableActionBarProps<TData>): react_jsx_runtime3.JSX.Element;
+}: AutoTableActionBarProps<TData>): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/lib/schema-bridge/types.d.ts
 /**
@@ -592,7 +592,7 @@ declare function AutoTable<T extends z.ZodObject<z.ZodRawShape>>({
   onSelectedCountChange,
   onSelectedRowsChange,
   getSelectedRows
-}: AutoTableProps<T>): react_jsx_runtime3.JSX.Element;
+}: AutoTableProps<T>): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/i18n/locale.d.ts
 /**
@@ -1093,7 +1093,7 @@ declare function AutoCrudTable<TSchema extends z.ZodObject<z.ZodRawShape>>({
   toolbarActions,
   locale: localeProp,
   onCreate
-}: AutoCrudTableProps<TSchema>): react_jsx_runtime3.JSX.Element;
+}: AutoCrudTableProps<TSchema>): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/auto-form.d.ts
 interface AutoFormProps<T extends z.ZodObject<z.ZodRawShape>> {
@@ -1132,7 +1132,7 @@ declare function AutoFormInner<T extends z.ZodObject<z.ZodRawShape>>({
   labelAlign,
   labelWidth,
   showSubmitButton
-}: AutoFormProps<T>, ref: React.Ref<AutoFormRef>): react_jsx_runtime3.JSX.Element;
+}: AutoFormProps<T>, ref: React.Ref<AutoFormRef>): react_jsx_runtime2.JSX.Element;
 declare const AutoForm: <T extends z.ZodObject<z.ZodRawShape>>(props: AutoFormProps<T> & {
   ref?: React.Ref<AutoFormRef>;
 }) => ReturnType<typeof AutoFormInner>;
@@ -1346,12 +1346,12 @@ declare const filterItemSchema: z.ZodObject<{
   variant: z.ZodEnum<{
     number: "number";
     boolean: "boolean";
-    date: "date";
     text: "text";
+    range: "range";
+    date: "date";
+    dateRange: "dateRange";
     select: "select";
     multiSelect: "multiSelect";
-    dateRange: "dateRange";
-    range: "range";
   }>;
   operator: z.ZodEnum<{
     iLike: "iLike";
@@ -1448,7 +1448,7 @@ declare function AutoTableSimpleFilters<TData>({
   filters: externalFilters,
   onFiltersChange,
   leading
-}: AutoTableSimpleFiltersProps<TData>): react_jsx_runtime3.JSX.Element | null;
+}: AutoTableSimpleFiltersProps<TData>): react_jsx_runtime2.JSX.Element | null;
 //#endregion
 //#region src/components/auto-crud/form-modal.d.ts
 type ModalVariant = 'dialog' | 'sheet';
@@ -1492,7 +1492,7 @@ declare function CrudFormModal<T extends z.ZodObject<z.ZodRawShape>>({
   labelAlign,
   labelWidth,
   className
-}: CrudFormModalProps<T>): react_jsx_runtime3.JSX.Element;
+}: CrudFormModalProps<T>): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/import-dialog.d.ts
 interface ImportDialogProps {
@@ -1514,7 +1514,7 @@ declare function ImportDialog({
   columns,
   title,
   locale
-}: ImportDialogProps): react_jsx_runtime3.JSX.Element;
+}: ImportDialogProps): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/export-dialog.d.ts
 type ExportMode = 'selected' | 'filtered';
@@ -1534,7 +1534,7 @@ declare function ExportDialog({
   selectedCount,
   onExport,
   canExportFiltered
-}: ExportDialogProps): react_jsx_runtime3.JSX.Element;
+}: ExportDialogProps): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table.d.ts
 interface DataTableProps<TData> extends React$1.ComponentProps<'div'> {
@@ -1547,7 +1547,7 @@ declare function DataTable<TData>({
   children,
   className,
   ...props
-}: DataTableProps<TData>): react_jsx_runtime3.JSX.Element;
+}: DataTableProps<TData>): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-advanced-toolbar.d.ts
 interface DataTableAdvancedToolbarProps<TData> extends React$1.ComponentProps<'div'> {
@@ -1558,7 +1558,7 @@ declare function DataTableAdvancedToolbar<TData>({
   children,
   className,
   ...props
-}: DataTableAdvancedToolbarProps<TData>): react_jsx_runtime3.JSX.Element;
+}: DataTableAdvancedToolbarProps<TData>): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-column-header.d.ts
 interface DataTableColumnHeaderProps<TData, TValue> extends React.ComponentProps<typeof DropdownMenuTrigger> {
@@ -1570,7 +1570,7 @@ declare function DataTableColumnHeader<TData, TValue>({
   label,
   className,
   ...props
-}: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime3.JSX.Element;
+}: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-faceted-filter.d.ts
 interface DataTableFacetedFilterProps<TData, TValue> {
@@ -1584,7 +1584,7 @@ declare function DataTableFacetedFilter<TData, TValue>({
   title,
   options,
   multiple
-}: DataTableFacetedFilterProps<TData, TValue>): react_jsx_runtime3.JSX.Element;
+}: DataTableFacetedFilterProps<TData, TValue>): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-pagination.d.ts
 interface DataTablePaginationProps<TData> extends React.ComponentProps<'div'> {
@@ -1596,7 +1596,7 @@ declare function DataTablePagination<TData>({
   pageSizeOptions,
   className,
   ...props
-}: DataTablePaginationProps<TData>): react_jsx_runtime3.JSX.Element;
+}: DataTablePaginationProps<TData>): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-toolbar.d.ts
 interface DataTableToolbarProps<TData> extends React$1.ComponentProps<'div'> {
@@ -1607,7 +1607,7 @@ declare function DataTableToolbar<TData>({
   children,
   className,
   ...props
-}: DataTableToolbarProps<TData>): react_jsx_runtime3.JSX.Element;
+}: DataTableToolbarProps<TData>): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-view-options.d.ts
 interface DataTableViewOptionsProps<TData> extends React$1.ComponentProps<typeof PopoverContent> {
@@ -1618,7 +1618,7 @@ declare function DataTableViewOptions<TData>({
   table,
   disabled,
   ...props
-}: DataTableViewOptionsProps<TData>): react_jsx_runtime3.JSX.Element;
+}: DataTableViewOptionsProps<TData>): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/lib/crud-actions.d.ts
 type CrudActionZone = 'toolbar' | 'row' | 'batch';
@@ -1691,6 +1691,8 @@ type ColumnLike<TData> = Column<TData> | ColumnDef<TData, unknown> | {
 };
 interface UseReadableFiltersOptions extends UrlStateOptions {
   debounceMs?: number;
+  /** Reset server-side pagination when effective filters change. */
+  resetPageKey?: string | false;
 }
 declare function useReadableFilters<TData>(columns: ColumnLike<TData>[], options?: UseReadableFiltersOptions): [ExtendedColumnFilter<TData>[], (value: ExtendedColumnFilter<TData>[] | ((prev: ExtendedColumnFilter<TData>[]) => ExtendedColumnFilter<TData>[])) => void];
 //#endregion

package/dist/index.js

@@ -488,104 +488,6 @@ function DataTable({ table, actionBar, children, className,...props }) {
 	});
 }
 
-//#endregion
-//#region src/lib/id.ts
-const prefixes = {};
-function generateId(prefixOrOptions, inputOptions = {}) {
-	const finalOptions = typeof prefixOrOptions === "object" ? prefixOrOptions : inputOptions;
-	const prefix = typeof prefixOrOptions === "object" ? void 0 : prefixOrOptions;
-	const { length = 12, separator = "_" } = finalOptions;
-	const id = customAlphabet("0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", length)();
-	return prefix && prefix in prefixes ? `${prefixes[prefix]}${separator}${id}` : id;
-}
-
-//#endregion
-//#region src/lib/readable-filters.ts
-const OP_SUFFIX = "__op";
-const INDEX_SEPARATOR = "__";
-const RANGE_VARIANTS = new Set(["range", "dateRange"]);
-function getColumnId(column) {
-	if ("id" in column && column.id) return String(column.id);
-	if ("accessorKey" in column && column.accessorKey) return String(column.accessorKey);
-	return null;
-}
-function getColumnVariant(column) {
-	if ("columnDef" in column) return column.columnDef.meta?.variant;
-	return column.meta?.variant;
-}
-function splitKey(key) {
-	const match = key.match(/^(.*?)(?:__(\d+))?$/);
-	if (!match) return { base: key };
-	const index$1 = match[2] ? Number(match[2]) : void 0;
-	return {
-		base: match[1] ?? key,
-		index: index$1
-	};
-}
-function isFilterKey(key, columnIds) {
-	const { base } = splitKey(key.endsWith(OP_SUFFIX) ? key.slice(0, -4) : key);
-	return columnIds.has(base);
-}
-function parseValueByVariant(value, variant) {
-	if (variant === "multiSelect") return value ? value.split(",").filter(Boolean) : [];
-	if (RANGE_VARIANTS.has(variant)) {
-		const parts = value.split(",");
-		return [parts[0] ?? "", parts[1] ?? ""];
-	}
-	if (variant === "select") return value.split(",").filter(Boolean)[0] ?? "";
-	return value;
-}
-function serializeValue(value, variant) {
-	if (Array.isArray(value)) {
-		if (RANGE_VARIANTS.has(variant)) return [value[0] ?? "", value[1] ?? ""].join(",");
-		return value.join(",");
-	}
-	return value;
-}
-function parseReadableFilters(params, columns) {
-	const columnsById = /* @__PURE__ */ new Map();
-	for (const column of columns) {
-		const id = getColumnId(column);
-		if (id) columnsById.set(id, column);
-	}
-	const filters = [];
-	for (const [key, rawValue] of params.entries()) {
-		if (key.endsWith(OP_SUFFIX)) continue;
-		const { base } = splitKey(key);
-		const column = columnsById.get(base);
-		if (!column) continue;
-		const variant = getColumnVariant(column) ?? "text";
-		const opKey = `${key}${OP_SUFFIX}`;
-		const operator = params.get(opKey) ?? getDefaultFilterOperator(variant);
-		const parsedValue = operator === "isEmpty" || operator === "isNotEmpty" ? "" : parseValueByVariant(rawValue, variant);
-		filters.push({
-			id: base,
-			value: parsedValue,
-			variant,
-			operator,
-			filterId: key || generateId({ length: 8 })
-		});
-	}
-	return filters;
-}
-function applyReadableFilters(params, columns, filters) {
-	const columnIds = new Set(columns.map((column) => getColumnId(column)).filter(Boolean));
-	for (const key of Array.from(params.keys())) if (isFilterKey(key, columnIds)) params.delete(key);
-	const counters = /* @__PURE__ */ new Map();
-	for (const filter of filters) {
-		const columnId = String(filter.id);
-		const count = (counters.get(columnId) ?? 0) + 1;
-		counters.set(columnId, count);
-		const key = count === 1 ? columnId : `${columnId}${INDEX_SEPARATOR}${count}`;
-		const variant = filter.variant ?? "text";
-		const value = serializeValue(filter.value, variant);
-		params.set(key, filter.operator === "isEmpty" || filter.operator === "isNotEmpty" ? "" : value);
-		const defaultOperator = getDefaultFilterOperator(variant);
-		if (filter.operator !== defaultOperator) params.set(`${key}${OP_SUFFIX}`, filter.operator);
-	}
-	return params;
-}
-
 //#endregion
 //#region src/hooks/use-url-state.ts
 const parseAsInteger = {
@@ -836,15 +738,120 @@ function useQueryStates(parsers, options = {}) {
 	}, [setValues])];
 }
 
+//#endregion
+//#region src/lib/id.ts
+const prefixes = {};
+function generateId(prefixOrOptions, inputOptions = {}) {
+	const finalOptions = typeof prefixOrOptions === "object" ? prefixOrOptions : inputOptions;
+	const prefix = typeof prefixOrOptions === "object" ? void 0 : prefixOrOptions;
+	const { length = 12, separator = "_" } = finalOptions;
+	const id = customAlphabet("0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz", length)();
+	return prefix && prefix in prefixes ? `${prefixes[prefix]}${separator}${id}` : id;
+}
+
+//#endregion
+//#region src/lib/readable-filters.ts
+const OP_SUFFIX = "__op";
+const INDEX_SEPARATOR = "__";
+const RANGE_VARIANTS = new Set(["range", "dateRange"]);
+function getColumnId(column) {
+	if ("id" in column && column.id) return String(column.id);
+	if ("accessorKey" in column && column.accessorKey) return String(column.accessorKey);
+	return null;
+}
+function getColumnVariant(column) {
+	if ("columnDef" in column) return column.columnDef.meta?.variant;
+	return column.meta?.variant;
+}
+function splitKey(key) {
+	const match = key.match(/^(.*?)(?:__(\d+))?$/);
+	if (!match) return { base: key };
+	const index$1 = match[2] ? Number(match[2]) : void 0;
+	return {
+		base: match[1] ?? key,
+		index: index$1
+	};
+}
+function isFilterKey(key, columnIds) {
+	const { base } = splitKey(key.endsWith(OP_SUFFIX) ? key.slice(0, -4) : key);
+	return columnIds.has(base);
+}
+function parseValueByVariant(value, variant) {
+	if (variant === "multiSelect") return value ? value.split(",").filter(Boolean) : [];
+	if (RANGE_VARIANTS.has(variant)) {
+		const parts = value.split(",");
+		return [parts[0] ?? "", parts[1] ?? ""];
+	}
+	if (variant === "select") return value.split(",").filter(Boolean)[0] ?? "";
+	return value;
+}
+function serializeValue(value, variant) {
+	if (Array.isArray(value)) {
+		if (RANGE_VARIANTS.has(variant)) return [value[0] ?? "", value[1] ?? ""].join(",");
+		return value.join(",");
+	}
+	return value;
+}
+function parseReadableFilters(params, columns) {
+	const columnsById = /* @__PURE__ */ new Map();
+	for (const column of columns) {
+		const id = getColumnId(column);
+		if (id) columnsById.set(id, column);
+	}
+	const filters = [];
+	for (const [key, rawValue] of params.entries()) {
+		if (key.endsWith(OP_SUFFIX)) continue;
+		const { base } = splitKey(key);
+		const column = columnsById.get(base);
+		if (!column) continue;
+		const variant = getColumnVariant(column) ?? "text";
+		const opKey = `${key}${OP_SUFFIX}`;
+		const operator = params.get(opKey) ?? getDefaultFilterOperator(variant);
+		const parsedValue = operator === "isEmpty" || operator === "isNotEmpty" ? "" : parseValueByVariant(rawValue, variant);
+		filters.push({
+			id: base,
+			value: parsedValue,
+			variant,
+			operator,
+			filterId: key || generateId({ length: 8 })
+		});
+	}
+	return filters;
+}
+function applyReadableFilters(params, columns, filters) {
+	const columnIds = new Set(columns.map((column) => getColumnId(column)).filter(Boolean));
+	for (const key of Array.from(params.keys())) if (isFilterKey(key, columnIds)) params.delete(key);
+	const counters = /* @__PURE__ */ new Map();
+	for (const filter of filters) {
+		const columnId = String(filter.id);
+		const count = (counters.get(columnId) ?? 0) + 1;
+		counters.set(columnId, count);
+		const key = count === 1 ? columnId : `${columnId}${INDEX_SEPARATOR}${count}`;
+		const variant = filter.variant ?? "text";
+		const value = serializeValue(filter.value, variant);
+		params.set(key, filter.operator === "isEmpty" || filter.operator === "isNotEmpty" ? "" : value);
+		const defaultOperator = getDefaultFilterOperator(variant);
+		if (filter.operator !== defaultOperator) params.set(`${key}${OP_SUFFIX}`, filter.operator);
+	}
+	return params;
+}
+
 //#endregion
 //#region src/hooks/use-readable-filters.ts
 const URL_CHANGE_EVENT = "urlchange";
 function toSearchString(params) {
-	const queryString = params.toString().replace(/%2C/g, ",");
+	const queryString = params.toString().replace(/%2C/gu, ",");
 	return queryString ? `?${queryString}` : "";
 }
+function filterSignature(filters) {
+	return JSON.stringify(filters.map(({ id, operator, value, variant }) => JSON.stringify([
+		id,
+		operator,
+		variant === "multiSelect" && Array.isArray(value) ? [...value].sort() : value
+	])).sort());
+}
 function useReadableFilters(columns, options = {}) {
-	const { history = "replace", scroll = false } = options;
+	const { history = "replace", scroll = false, resetPageKey = "page" } = options;
 	const columnSnapshot = React.useMemo(() => columns, [columns]);
 	const lastWrittenUrlRef = React.useRef(null);
 	const filtersRef = React.useRef(null);
@@ -872,7 +879,10 @@ function useReadableFilters(columns, options = {}) {
 	}, [columnSnapshot]);
 	const writeToUrl = React.useCallback((next) => {
 		const params = getUrlParams();
+		const previousFilters = parseReadableFilters(params, columnSnapshot);
 		applyReadableFilters(params, columnSnapshot, next);
+		const nextFilters = parseReadableFilters(params, columnSnapshot);
+		if (resetPageKey !== false && resetPageKey.length > 0 && filterSignature(previousFilters) !== filterSignature(nextFilters)) params.delete(resetPageKey);
 		lastWrittenUrlRef.current = toSearchString(params);
 		setSearchParams(params, {
 			history,
@@ -881,6 +891,7 @@ function useReadableFilters(columns, options = {}) {
 	}, [
 		columnSnapshot,
 		history,
+		resetPageKey,
 		scroll
 	]);
 	return [filters, React.useCallback((updater) => {
@@ -1016,7 +1027,10 @@ function DataTableFilterList({ table, debounceMs = DEBOUNCE_MS$2, throttleMs = T
 			return true;
 		});
 	}, [table, columnDefs]);
-	const [filters, setFilters] = useReadableFilters(columns, { debounceMs });
+	const [filters, setFilters] = useReadableFilters(columns, {
+		debounceMs,
+		resetPageKey: table.options.meta?.queryKeys?.page ?? "page"
+	});
 	const debouncedSetFilters = useDebouncedCallback(setFilters, debounceMs);
 	const [joinOperator, setJoinOperator] = useQueryState(table.options.meta?.queryKeys?.joinOperator ?? "", parseAsStringEnum(["and", "or"]).withDefault("and"));
 	const onFilterAdd = React.useCallback(() => {
@@ -1554,7 +1568,10 @@ function DataTableFilterMenu({ table, debounceMs = DEBOUNCE_MS$1, throttleMs = T
 			setSelectedColumn(null);
 		}
 	}, [inputValue, selectedColumn]);
-	const [filters, setFilters] = useReadableFilters(columns, { debounceMs });
+	const [filters, setFilters] = useReadableFilters(columns, {
+		debounceMs,
+		resetPageKey: table.options.meta?.queryKeys?.page ?? "page"
+	});
 	const debouncedSetFilters = useDebouncedCallback(setFilters, debounceMs);
 	const onFilterAdd = React.useCallback((column, value) => {
 		if (!value.trim() && column.columnDef.meta?.variant !== "boolean") return;
@@ -2360,6 +2377,7 @@ function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilte
 	const queryStateOptions = table.options.meta?.queryStateOptions;
 	const [queryFilters, setQueryFilters] = useReadableFilters(columns, {
 		...queryStateOptions,
+		resetPageKey: table.options.meta?.queryKeys?.page ?? "page",
 		shallow
 	});
 	const filters = externalFilters ?? queryFilters;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@wordrhyme/auto-crud",
   "type": "module",
-  "version": "1.5.6",
+  "version": "1.5.7",
   "description": "Schema-first CRUD components with auto-generated tables and forms",
   "author": "wordrhyme",
   "license": "MIT",
@@ -62,9 +62,9 @@
     "nanoid": "^5.1.6",
     "tailwind-merge": "^3.5.0",
     "vaul": "^1.1.2",
-    "@wordrhyme/formily-shadcn": "1.13.4",
+    "@wordrhyme/shadcn": "1.3.4",
     "@wordrhyme/shadcn-ui": "1.32.9",
-    "@wordrhyme/shadcn": "1.3.4"
+    "@wordrhyme/formily-shadcn": "1.13.4"
   },
   "devDependencies": {
     "@storybook/react": "^8.6.18",
@@ -85,8 +85,8 @@
     "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/tsconfig": "0.1.0",
     "@internal/tsdown-config": "0.1.0",
     "@internal/vitest-config": "0.1.0"
   },