@wordrhyme/auto-crud 1.3.4 → 1.3.6

package/dist/index.cjs

@@ -2062,6 +2062,12 @@ function DataTableSortList({ table, disabled,...props }) {
 		window.addEventListener("keydown", onKeyDown);
 		return () => window.removeEventListener("keydown", onKeyDown);
 	}, []);
+	const onTriggerKeyDown = react.useCallback((event) => {
+		if (REMOVE_SORT_SHORTCUTS.includes(event.key.toLowerCase()) && sorting.length > 0) {
+			event.preventDefault();
+			onSortingReset();
+		}
+	}, [sorting.length, onSortingReset]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_shadcn_ui.Sortable, {
 		value: sorting,
 		onValueChange: onSortingChange,
@@ -2073,24 +2079,17 @@ function DataTableSortList({ table, disabled,...props }) {
 				asChild: true,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_shadcn.Button, {
 					variant: "outline",
-					size: "sm",
-					className: "font-normal",
-					onKeyDown: react.useCallback((event) => {
-						if (REMOVE_SORT_SHORTCUTS.includes(event.key.toLowerCase()) && sorting.length > 0) {
-							event.preventDefault();
-							onSortingReset();
-						}
-					}, [sorting.length, onSortingReset]),
+					size: "icon-sm",
+					"aria-label": "Sort rows",
+					title: "Sort rows",
+					className: cn(sorting.length > 0 && "w-auto gap-1 px-2"),
+					onKeyDown: onTriggerKeyDown,
 					disabled,
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowDownUp, { className: "text-muted-foreground" }),
-						"Sort",
-						sorting.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Badge, {
-							variant: "secondary",
-							className: "h-[18.24px] rounded-[3.2px] px-[5.12px] font-mono font-normal text-[10.4px]",
-							children: sorting.length
-						})
-					]
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowDownUp, { className: "text-muted-foreground" }), sorting.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Badge, {
+						variant: "secondary",
+						className: "h-[18.24px] rounded-[3.2px] px-[5.12px] font-mono font-normal text-[10.4px]",
+						children: sorting.length
+					})]
 				})
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_shadcn.PopoverContent, {
 				"aria-labelledby": labelId,
@@ -2260,14 +2259,15 @@ function DataTableViewOptions({ table, disabled,...props }) {
 	const columns = react.useMemo(() => table.getAllColumns().filter((column) => typeof column.accessorFn !== "undefined" && column.getCanHide()), [table]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_shadcn.Popover, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.PopoverTrigger, {
 		asChild: true,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__wordrhyme_shadcn.Button, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Button, {
 			"aria-label": "Toggle columns",
+			title: "Toggle columns",
 			role: "combobox",
 			variant: "outline",
-			size: "sm",
-			className: "ml-auto flex h-8 font-normal",
+			size: "icon-sm",
+			className: "ml-auto",
 			disabled,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Settings2, { className: "text-muted-foreground" }), "View"]
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Settings2, { className: "text-muted-foreground" })
 		})
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.PopoverContent, {
 		className: "w-44 p-0",
@@ -3974,7 +3974,7 @@ const filterModeConfig = {
 		tooltip: "Linear-style command filters"
 	}
 };
-function AutoTable({ schema, data, pageCount = 1, overrides, enableRowSelection = true, exclude, actions, pinnedColumns, filterMode = "simple", search = false, onDeleteSelected, onUpdateSelected, batchUpdateFields, actionBarExtra, actionBarActions, deleteConfirmation, initialSorting, enableExport = true, showDefaultExport = true, onSelectedCountChange, onSelectedRowsChange, getSelectedRows }) {
+function AutoTable({ schema, data, pageCount = 1, overrides, enableRowSelection = true, exclude, actions, pinnedColumns, filterMode, search = false, onDeleteSelected, onUpdateSelected, batchUpdateFields, actionBarExtra, actionBarActions, deleteConfirmation, initialSorting, enableExport = true, showDefaultExport = true, onSelectedCountChange, onSelectedRowsChange, getSelectedRows }) {
 	const modes = filterMode ? Array.isArray(filterMode) ? filterMode : [filterMode] : DEFAULT_MODES;
 	const [currentMode, setCurrentMode] = useQueryState("filterMode", parseAsStringEnum(modes).withDefault(modes[0] ?? "simple"));
 	const showToggle = modes.length > 1;
@@ -4049,9 +4049,9 @@ function AutoTable({ schema, data, pageCount = 1, overrides, enableRowSelection
 		asChild: true,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Button, {
 			variant: "outline",
-			size: "sm",
-			className: "h-8 w-8 p-0",
+			size: "icon-sm",
 			"aria-label": `Switch filter mode, current: ${filterModeConfig[currentMode].label}`,
+			title: filterModeConfig[currentMode].tooltip,
 			children: (() => {
 				const Icon = filterModeConfig[currentMode].icon;
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "size-4 text-muted-foreground" });
@@ -4118,22 +4118,15 @@ function AutoTable({ schema, data, pageCount = 1, overrides, enableRowSelection
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "flex min-h-[40px] min-w-0 flex-1 items-start gap-2",
 					"data-filter-parent": true,
-					children: [
-						currentMode !== "simple" && searchInput,
-						currentMode !== "simple" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableSortList, {
-							table,
-							align: "start"
-						}),
-						filtersContent
-					]
+					children: [currentMode !== "simple" && searchInput, filtersContent]
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "flex items-center gap-2",
 					children: [
-						currentMode === "simple" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableSortList, {
+						FilterModeSelect,
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableSortList, {
 							table,
 							align: "end"
 						}),
-						FilterModeSelect,
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableViewOptions, {
 							table,
 							align: "end"

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { z } from "zod";
 import { JsonSchemaFormScope } from "@wordrhyme/formily-shadcn";
 import * as _tanstack_react_table0 from "@tanstack/react-table";
@@ -381,7 +381,7 @@ declare function AutoTableActionBar<TData>({
   extraActions,
   actions,
   deleteConfirmation
-}: AutoTableActionBarProps<TData>): react_jsx_runtime3.JSX.Element;
+}: AutoTableActionBarProps<TData>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/lib/schema-bridge/types.d.ts
 /**
@@ -557,7 +557,7 @@ declare function AutoTable<T extends z.ZodObject<z.ZodRawShape>>({
   onSelectedCountChange,
   onSelectedRowsChange,
   getSelectedRows
-}: AutoTableProps<T>): react_jsx_runtime3.JSX.Element;
+}: AutoTableProps<T>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/i18n/locale.d.ts
 /**
@@ -1037,7 +1037,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_runtime0.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/auto-form.d.ts
 interface AutoFormProps<T extends z.ZodObject<z.ZodRawShape>> {
@@ -1076,7 +1076,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_runtime0.JSX.Element;
 declare const AutoForm: <T extends z.ZodObject<z.ZodRawShape>>(props: AutoFormProps<T> & {
   ref?: React.Ref<AutoFormRef>;
 }) => ReturnType<typeof AutoFormInner>;
@@ -1392,7 +1392,7 @@ declare function AutoTableSimpleFilters<TData>({
   filters: externalFilters,
   onFiltersChange,
   leading
-}: AutoTableSimpleFiltersProps<TData>): react_jsx_runtime3.JSX.Element | null;
+}: AutoTableSimpleFiltersProps<TData>): react_jsx_runtime0.JSX.Element | null;
 //#endregion
 //#region src/components/auto-crud/form-modal.d.ts
 type ModalVariant = "dialog" | "sheet";
@@ -1436,7 +1436,7 @@ declare function CrudFormModal<T extends z.ZodObject<z.ZodRawShape>>({
   labelAlign,
   labelWidth,
   className
-}: CrudFormModalProps<T>): react_jsx_runtime3.JSX.Element;
+}: CrudFormModalProps<T>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/import-dialog.d.ts
 interface ImportDialogProps {
@@ -1458,7 +1458,7 @@ declare function ImportDialog({
   columns,
   title,
   locale
-}: ImportDialogProps): react_jsx_runtime3.JSX.Element;
+}: ImportDialogProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/export-dialog.d.ts
 type ExportMode = "selected" | "filtered";
@@ -1478,7 +1478,7 @@ declare function ExportDialog({
   selectedCount,
   onExport,
   canExportFiltered
-}: ExportDialogProps): react_jsx_runtime3.JSX.Element;
+}: ExportDialogProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table.d.ts
 interface DataTableProps<TData> extends React$1.ComponentProps<"div"> {
@@ -1491,7 +1491,7 @@ declare function DataTable<TData>({
   children,
   className,
   ...props
-}: DataTableProps<TData>): react_jsx_runtime3.JSX.Element;
+}: DataTableProps<TData>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-advanced-toolbar.d.ts
 interface DataTableAdvancedToolbarProps<TData> extends React$1.ComponentProps<"div"> {
@@ -1502,7 +1502,7 @@ declare function DataTableAdvancedToolbar<TData>({
   children,
   className,
   ...props
-}: DataTableAdvancedToolbarProps<TData>): react_jsx_runtime3.JSX.Element;
+}: DataTableAdvancedToolbarProps<TData>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-column-header.d.ts
 interface DataTableColumnHeaderProps<TData, TValue> extends React.ComponentProps<typeof DropdownMenuTrigger> {
@@ -1514,7 +1514,7 @@ declare function DataTableColumnHeader<TData, TValue>({
   label,
   className,
   ...props
-}: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime3.JSX.Element;
+}: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-faceted-filter.d.ts
 interface DataTableFacetedFilterProps<TData, TValue> {
@@ -1528,7 +1528,7 @@ declare function DataTableFacetedFilter<TData, TValue>({
   title,
   options,
   multiple
-}: DataTableFacetedFilterProps<TData, TValue>): react_jsx_runtime3.JSX.Element;
+}: DataTableFacetedFilterProps<TData, TValue>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-pagination.d.ts
 interface DataTablePaginationProps<TData> extends React.ComponentProps<"div"> {
@@ -1540,7 +1540,7 @@ declare function DataTablePagination<TData>({
   pageSizeOptions,
   className,
   ...props
-}: DataTablePaginationProps<TData>): react_jsx_runtime3.JSX.Element;
+}: DataTablePaginationProps<TData>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-toolbar.d.ts
 interface DataTableToolbarProps<TData> extends React$1.ComponentProps<"div"> {
@@ -1551,7 +1551,7 @@ declare function DataTableToolbar<TData>({
   children,
   className,
   ...props
-}: DataTableToolbarProps<TData>): react_jsx_runtime3.JSX.Element;
+}: DataTableToolbarProps<TData>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-view-options.d.ts
 interface DataTableViewOptionsProps<TData> extends React$1.ComponentProps<typeof PopoverContent> {
@@ -1562,7 +1562,7 @@ declare function DataTableViewOptions<TData>({
   table,
   disabled,
   ...props
-}: DataTableViewOptionsProps<TData>): react_jsx_runtime3.JSX.Element;
+}: DataTableViewOptionsProps<TData>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/lib/crud-actions.d.ts
 type CrudActionZone = 'toolbar' | 'row' | 'batch';

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_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime0 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";
@@ -381,7 +381,7 @@ declare function AutoTableActionBar<TData>({
   extraActions,
   actions,
   deleteConfirmation
-}: AutoTableActionBarProps<TData>): react_jsx_runtime2.JSX.Element;
+}: AutoTableActionBarProps<TData>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/lib/schema-bridge/types.d.ts
 /**
@@ -557,7 +557,7 @@ declare function AutoTable<T extends z.ZodObject<z.ZodRawShape>>({
   onSelectedCountChange,
   onSelectedRowsChange,
   getSelectedRows
-}: AutoTableProps<T>): react_jsx_runtime2.JSX.Element;
+}: AutoTableProps<T>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/i18n/locale.d.ts
 /**
@@ -1037,7 +1037,7 @@ declare function AutoCrudTable<TSchema extends z.ZodObject<z.ZodRawShape>>({
   toolbarActions,
   locale: localeProp,
   onCreate
-}: AutoCrudTableProps<TSchema>): react_jsx_runtime2.JSX.Element;
+}: AutoCrudTableProps<TSchema>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/auto-form.d.ts
 interface AutoFormProps<T extends z.ZodObject<z.ZodRawShape>> {
@@ -1076,7 +1076,7 @@ declare function AutoFormInner<T extends z.ZodObject<z.ZodRawShape>>({
   labelAlign,
   labelWidth,
   showSubmitButton
-}: AutoFormProps<T>, ref: React.Ref<AutoFormRef>): react_jsx_runtime2.JSX.Element;
+}: AutoFormProps<T>, ref: React.Ref<AutoFormRef>): react_jsx_runtime0.JSX.Element;
 declare const AutoForm: <T extends z.ZodObject<z.ZodRawShape>>(props: AutoFormProps<T> & {
   ref?: React.Ref<AutoFormRef>;
 }) => ReturnType<typeof AutoFormInner>;
@@ -1392,7 +1392,7 @@ declare function AutoTableSimpleFilters<TData>({
   filters: externalFilters,
   onFiltersChange,
   leading
-}: AutoTableSimpleFiltersProps<TData>): react_jsx_runtime2.JSX.Element | null;
+}: AutoTableSimpleFiltersProps<TData>): react_jsx_runtime0.JSX.Element | null;
 //#endregion
 //#region src/components/auto-crud/form-modal.d.ts
 type ModalVariant = "dialog" | "sheet";
@@ -1436,7 +1436,7 @@ declare function CrudFormModal<T extends z.ZodObject<z.ZodRawShape>>({
   labelAlign,
   labelWidth,
   className
-}: CrudFormModalProps<T>): react_jsx_runtime2.JSX.Element;
+}: CrudFormModalProps<T>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/import-dialog.d.ts
 interface ImportDialogProps {
@@ -1458,7 +1458,7 @@ declare function ImportDialog({
   columns,
   title,
   locale
-}: ImportDialogProps): react_jsx_runtime2.JSX.Element;
+}: ImportDialogProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/export-dialog.d.ts
 type ExportMode = "selected" | "filtered";
@@ -1478,7 +1478,7 @@ declare function ExportDialog({
   selectedCount,
   onExport,
   canExportFiltered
-}: ExportDialogProps): react_jsx_runtime2.JSX.Element;
+}: ExportDialogProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table.d.ts
 interface DataTableProps<TData> extends React$1.ComponentProps<"div"> {
@@ -1491,7 +1491,7 @@ declare function DataTable<TData>({
   children,
   className,
   ...props
-}: DataTableProps<TData>): react_jsx_runtime2.JSX.Element;
+}: DataTableProps<TData>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-advanced-toolbar.d.ts
 interface DataTableAdvancedToolbarProps<TData> extends React$1.ComponentProps<"div"> {
@@ -1502,7 +1502,7 @@ declare function DataTableAdvancedToolbar<TData>({
   children,
   className,
   ...props
-}: DataTableAdvancedToolbarProps<TData>): react_jsx_runtime2.JSX.Element;
+}: DataTableAdvancedToolbarProps<TData>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-column-header.d.ts
 interface DataTableColumnHeaderProps<TData, TValue> extends React.ComponentProps<typeof DropdownMenuTrigger> {
@@ -1514,7 +1514,7 @@ declare function DataTableColumnHeader<TData, TValue>({
   label,
   className,
   ...props
-}: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime2.JSX.Element;
+}: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-faceted-filter.d.ts
 interface DataTableFacetedFilterProps<TData, TValue> {
@@ -1528,7 +1528,7 @@ declare function DataTableFacetedFilter<TData, TValue>({
   title,
   options,
   multiple
-}: DataTableFacetedFilterProps<TData, TValue>): react_jsx_runtime2.JSX.Element;
+}: DataTableFacetedFilterProps<TData, TValue>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-pagination.d.ts
 interface DataTablePaginationProps<TData> extends React.ComponentProps<"div"> {
@@ -1540,7 +1540,7 @@ declare function DataTablePagination<TData>({
   pageSizeOptions,
   className,
   ...props
-}: DataTablePaginationProps<TData>): react_jsx_runtime2.JSX.Element;
+}: DataTablePaginationProps<TData>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-toolbar.d.ts
 interface DataTableToolbarProps<TData> extends React$1.ComponentProps<"div"> {
@@ -1551,7 +1551,7 @@ declare function DataTableToolbar<TData>({
   children,
   className,
   ...props
-}: DataTableToolbarProps<TData>): react_jsx_runtime2.JSX.Element;
+}: DataTableToolbarProps<TData>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-view-options.d.ts
 interface DataTableViewOptionsProps<TData> extends React$1.ComponentProps<typeof PopoverContent> {
@@ -1562,7 +1562,7 @@ declare function DataTableViewOptions<TData>({
   table,
   disabled,
   ...props
-}: DataTableViewOptionsProps<TData>): react_jsx_runtime2.JSX.Element;
+}: DataTableViewOptionsProps<TData>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/lib/crud-actions.d.ts
 type CrudActionZone = 'toolbar' | 'row' | 'batch';

package/dist/index.js

@@ -2025,6 +2025,12 @@ function DataTableSortList({ table, disabled,...props }) {
 		window.addEventListener("keydown", onKeyDown);
 		return () => window.removeEventListener("keydown", onKeyDown);
 	}, []);
+	const onTriggerKeyDown = React.useCallback((event) => {
+		if (REMOVE_SORT_SHORTCUTS.includes(event.key.toLowerCase()) && sorting.length > 0) {
+			event.preventDefault();
+			onSortingReset();
+		}
+	}, [sorting.length, onSortingReset]);
 	return /* @__PURE__ */ jsxs(Sortable, {
 		value: sorting,
 		onValueChange: onSortingChange,
@@ -2036,24 +2042,17 @@ function DataTableSortList({ table, disabled,...props }) {
 				asChild: true,
 				children: /* @__PURE__ */ jsxs(Button, {
 					variant: "outline",
-					size: "sm",
-					className: "font-normal",
-					onKeyDown: React.useCallback((event) => {
-						if (REMOVE_SORT_SHORTCUTS.includes(event.key.toLowerCase()) && sorting.length > 0) {
-							event.preventDefault();
-							onSortingReset();
-						}
-					}, [sorting.length, onSortingReset]),
+					size: "icon-sm",
+					"aria-label": "Sort rows",
+					title: "Sort rows",
+					className: cn(sorting.length > 0 && "w-auto gap-1 px-2"),
+					onKeyDown: onTriggerKeyDown,
 					disabled,
-					children: [
-						/* @__PURE__ */ jsx(ArrowDownUp, { className: "text-muted-foreground" }),
-						"Sort",
-						sorting.length > 0 && /* @__PURE__ */ jsx(Badge, {
-							variant: "secondary",
-							className: "h-[18.24px] rounded-[3.2px] px-[5.12px] font-mono font-normal text-[10.4px]",
-							children: sorting.length
-						})
-					]
+					children: [/* @__PURE__ */ jsx(ArrowDownUp, { className: "text-muted-foreground" }), sorting.length > 0 && /* @__PURE__ */ jsx(Badge, {
+						variant: "secondary",
+						className: "h-[18.24px] rounded-[3.2px] px-[5.12px] font-mono font-normal text-[10.4px]",
+						children: sorting.length
+					})]
 				})
 			}), /* @__PURE__ */ jsxs(PopoverContent, {
 				"aria-labelledby": labelId,
@@ -2223,14 +2222,15 @@ function DataTableViewOptions({ table, disabled,...props }) {
 	const columns = React.useMemo(() => table.getAllColumns().filter((column) => typeof column.accessorFn !== "undefined" && column.getCanHide()), [table]);
 	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
 		asChild: true,
-		children: /* @__PURE__ */ jsxs(Button, {
+		children: /* @__PURE__ */ jsx(Button, {
 			"aria-label": "Toggle columns",
+			title: "Toggle columns",
 			role: "combobox",
 			variant: "outline",
-			size: "sm",
-			className: "ml-auto flex h-8 font-normal",
+			size: "icon-sm",
+			className: "ml-auto",
 			disabled,
-			children: [/* @__PURE__ */ jsx(Settings2, { className: "text-muted-foreground" }), "View"]
+			children: /* @__PURE__ */ jsx(Settings2, { className: "text-muted-foreground" })
 		})
 	}), /* @__PURE__ */ jsx(PopoverContent, {
 		className: "w-44 p-0",
@@ -3937,7 +3937,7 @@ const filterModeConfig = {
 		tooltip: "Linear-style command filters"
 	}
 };
-function AutoTable({ schema, data, pageCount = 1, overrides, enableRowSelection = true, exclude, actions, pinnedColumns, filterMode = "simple", search = false, onDeleteSelected, onUpdateSelected, batchUpdateFields, actionBarExtra, actionBarActions, deleteConfirmation, initialSorting, enableExport = true, showDefaultExport = true, onSelectedCountChange, onSelectedRowsChange, getSelectedRows }) {
+function AutoTable({ schema, data, pageCount = 1, overrides, enableRowSelection = true, exclude, actions, pinnedColumns, filterMode, search = false, onDeleteSelected, onUpdateSelected, batchUpdateFields, actionBarExtra, actionBarActions, deleteConfirmation, initialSorting, enableExport = true, showDefaultExport = true, onSelectedCountChange, onSelectedRowsChange, getSelectedRows }) {
 	const modes = filterMode ? Array.isArray(filterMode) ? filterMode : [filterMode] : DEFAULT_MODES;
 	const [currentMode, setCurrentMode] = useQueryState("filterMode", parseAsStringEnum(modes).withDefault(modes[0] ?? "simple"));
 	const showToggle = modes.length > 1;
@@ -4012,9 +4012,9 @@ function AutoTable({ schema, data, pageCount = 1, overrides, enableRowSelection
 		asChild: true,
 		children: /* @__PURE__ */ jsx(Button, {
 			variant: "outline",
-			size: "sm",
-			className: "h-8 w-8 p-0",
+			size: "icon-sm",
 			"aria-label": `Switch filter mode, current: ${filterModeConfig[currentMode].label}`,
+			title: filterModeConfig[currentMode].tooltip,
 			children: (() => {
 				const Icon = filterModeConfig[currentMode].icon;
 				return /* @__PURE__ */ jsx(Icon, { className: "size-4 text-muted-foreground" });
@@ -4081,22 +4081,15 @@ function AutoTable({ schema, data, pageCount = 1, overrides, enableRowSelection
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: "flex min-h-[40px] min-w-0 flex-1 items-start gap-2",
 					"data-filter-parent": true,
-					children: [
-						currentMode !== "simple" && searchInput,
-						currentMode !== "simple" && /* @__PURE__ */ jsx(DataTableSortList, {
-							table,
-							align: "start"
-						}),
-						filtersContent
-					]
+					children: [currentMode !== "simple" && searchInput, filtersContent]
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-2",
 					children: [
-						currentMode === "simple" && /* @__PURE__ */ jsx(DataTableSortList, {
+						FilterModeSelect,
+						/* @__PURE__ */ jsx(DataTableSortList, {
 							table,
 							align: "end"
 						}),
-						FilterModeSelect,
 						/* @__PURE__ */ jsx(DataTableViewOptions, {
 							table,
 							align: "end"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@wordrhyme/auto-crud",
   "type": "module",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "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/shadcn": "1.3.2",
-    "@wordrhyme/shadcn-ui": "1.32.3",
-    "@wordrhyme/formily-shadcn": "1.12.9"
+    "@wordrhyme/formily-shadcn": "1.12.9",
+    "@wordrhyme/shadcn-ui": "1.32.4",
+    "@wordrhyme/shadcn": "1.3.2"
   },
   "devDependencies": {
     "@tanstack/react-query": "^5.90.15",
@@ -82,11 +82,11 @@
     "tsdown": "^0.15.12",
     "typescript": "^5.9.3",
     "vitest": "^3.2.4",
-    "@internal/prettier-config": "0.0.1",
     "@internal/eslint-config": "0.3.0",
+    "@internal/prettier-config": "0.0.1",
     "@internal/tsconfig": "0.1.0",
-    "@internal/vitest-config": "0.1.0",
-    "@internal/tsdown-config": "0.1.0"
+    "@internal/tsdown-config": "0.1.0",
+    "@internal/vitest-config": "0.1.0"
   },
   "prettier": "@internal/prettier-config",
   "scripts": {