@wordrhyme/auto-crud 1.5.2 → 1.5.4

package/dist/index.cjs

@@ -66,18 +66,19 @@ function DataTablePagination({ table, pageSizeOptions = [
 	40,
 	50
 ], className,...props }) {
+	const total = table.options.rowCount ?? (table.options.manualPagination ? void 0 : table.getRowCount());
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: cn("flex w-full flex-col-reverse items-center justify-between gap-4 overflow-auto p-1 sm:flex-row sm:gap-8", className),
 		...props,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex-1 whitespace-nowrap text-muted-foreground text-sm",
-			children: [
+			className: "flex flex-1 items-center gap-6 whitespace-nowrap text-muted-foreground text-sm",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
 				table.getFilteredSelectedRowModel().rows.length,
 				" of",
 				" ",
 				table.getFilteredRowModel().rows.length,
 				" row(s) selected."
-			]
+			] }), total !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: ["Total: ", total] })]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex flex-col-reverse items-center gap-4 sm:flex-row sm:gap-6 lg:gap-8",
 			children: [
@@ -4025,7 +4026,7 @@ const filterModeConfig = {
 		tooltip: "Linear-style command filters"
 	}
 };
-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 }) {
+function AutoTable({ schema, data, pageCount = 1, total, 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;
@@ -4054,23 +4055,25 @@ function AutoTable({ schema, data, pageCount = 1, overrides, enableRowSelection
 		exclude,
 		actions
 	]);
+	const stableInitialState = (0, react.useMemo)(() => ({
+		sorting: initialSorting,
+		columnPinning: pinnedColumns ?? {
+			left: enableRowSelection ? ["select"] : [],
+			right: actions ? ["actions"] : []
+		}
+	}), [
+		initialSorting,
+		pinnedColumns,
+		enableRowSelection,
+		actions
+	]);
 	const { table, shallow, debounceMs, throttleMs } = useDataTable({
 		data,
 		columns,
 		pageCount,
+		...total !== void 0 ? { rowCount: total } : {},
 		enableAdvancedFilter,
-		initialState: (0, react.useMemo)(() => ({
-			sorting: initialSorting,
-			columnPinning: pinnedColumns ?? {
-				left: enableRowSelection ? ["select"] : [],
-				right: actions ? ["actions"] : []
-			}
-		}), [
-			initialSorting,
-			pinnedColumns,
-			enableRowSelection,
-			actions
-		]),
+		initialState: stableInitialState,
 		shallow: false,
 		clearOnDefault: true
 	});
@@ -7081,6 +7084,7 @@ function AutoCrudTable({ id, title, description, schema, resource, fields, table
 				data: resource.tableData.data,
 				schema: resolvedSchema,
 				pageCount: resource.tableData.pageCount,
+				...resource.tableData.total !== void 0 ? { total: resource.tableData.total } : {},
 				overrides: tableOverrides,
 				exclude: hiddenColumns,
 				filterMode: tableConfig?.filterModes,
@@ -8192,6 +8196,7 @@ function useAutoCrudResource({ router, schema, query: queryTransform, options =
 		tableData: {
 			data: tableRows,
 			pageCount: listQuery.data?.pageCount ?? 0,
+			...typeof listQuery.data?.total === "number" ? { total: listQuery.data.total } : {},
 			isLoading: listQuery.isLoading,
 			isFetching: listQuery.isFetching
 		},

package/dist/index.d.cts

@@ -151,6 +151,8 @@ interface UseAutoCrudResourceReturn<TSchema extends z.ZodObject<z.ZodRawShape>,
   tableData: {
     data: TListItem[];
     pageCount: number;
+    /** Total rows matching the current search and filters. */
+    total?: number;
     isLoading: boolean;
     /** 是否正在获取数据（用于显示微妙的加载指示器） */
     isFetching: boolean;
@@ -519,6 +521,8 @@ interface AutoTableProps<T extends z.ZodObject<z.ZodRawShape>> {
   schema: T;
   data: z.infer<T>[];
   pageCount?: number;
+  /** Total rows matching the current search and filters. */
+  total?: number;
   overrides?: ColumnOverrides<z.infer<T>>;
   enableRowSelection?: boolean;
   exclude?: (keyof z.infer<T>)[];
@@ -568,6 +572,7 @@ declare function AutoTable<T extends z.ZodObject<z.ZodRawShape>>({
   schema,
   data,
   pageCount,
+  total,
   overrides,
   enableRowSelection,
   exclude,

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";
@@ -151,6 +151,8 @@ interface UseAutoCrudResourceReturn<TSchema extends z.ZodObject<z.ZodRawShape>,
   tableData: {
     data: TListItem[];
     pageCount: number;
+    /** Total rows matching the current search and filters. */
+    total?: number;
     isLoading: boolean;
     /** 是否正在获取数据（用于显示微妙的加载指示器） */
     isFetching: boolean;
@@ -411,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
 /**
@@ -519,6 +521,8 @@ interface AutoTableProps<T extends z.ZodObject<z.ZodRawShape>> {
   schema: T;
   data: z.infer<T>[];
   pageCount?: number;
+  /** Total rows matching the current search and filters. */
+  total?: number;
   overrides?: ColumnOverrides<z.infer<T>>;
   enableRowSelection?: boolean;
   exclude?: (keyof z.infer<T>)[];
@@ -568,6 +572,7 @@ declare function AutoTable<T extends z.ZodObject<z.ZodRawShape>>({
   schema,
   data,
   pageCount,
+  total,
   overrides,
   enableRowSelection,
   exclude,
@@ -587,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
 /**
@@ -1079,7 +1084,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>> {
@@ -1118,7 +1123,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>;
@@ -1434,7 +1439,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';
@@ -1478,7 +1483,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 {
@@ -1500,7 +1505,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';
@@ -1520,7 +1525,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'> {
@@ -1533,7 +1538,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'> {
@@ -1544,7 +1549,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> {
@@ -1556,7 +1561,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> {
@@ -1570,7 +1575,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'> {
@@ -1582,7 +1587,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'> {
@@ -1593,7 +1598,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> {
@@ -1604,7 +1609,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';

package/dist/index.js

@@ -29,18 +29,19 @@ function DataTablePagination({ table, pageSizeOptions = [
 	40,
 	50
 ], className,...props }) {
+	const total = table.options.rowCount ?? (table.options.manualPagination ? void 0 : table.getRowCount());
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("flex w-full flex-col-reverse items-center justify-between gap-4 overflow-auto p-1 sm:flex-row sm:gap-8", className),
 		...props,
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex-1 whitespace-nowrap text-muted-foreground text-sm",
-			children: [
+			className: "flex flex-1 items-center gap-6 whitespace-nowrap text-muted-foreground text-sm",
+			children: [/* @__PURE__ */ jsxs("span", { children: [
 				table.getFilteredSelectedRowModel().rows.length,
 				" of",
 				" ",
 				table.getFilteredRowModel().rows.length,
 				" row(s) selected."
-			]
+			] }), total !== void 0 && /* @__PURE__ */ jsxs("span", { children: ["Total: ", total] })]
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col-reverse items-center gap-4 sm:flex-row sm:gap-6 lg:gap-8",
 			children: [
@@ -3988,7 +3989,7 @@ const filterModeConfig = {
 		tooltip: "Linear-style command filters"
 	}
 };
-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 }) {
+function AutoTable({ schema, data, pageCount = 1, total, 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;
@@ -4017,23 +4018,25 @@ function AutoTable({ schema, data, pageCount = 1, overrides, enableRowSelection
 		exclude,
 		actions
 	]);
+	const stableInitialState = useMemo(() => ({
+		sorting: initialSorting,
+		columnPinning: pinnedColumns ?? {
+			left: enableRowSelection ? ["select"] : [],
+			right: actions ? ["actions"] : []
+		}
+	}), [
+		initialSorting,
+		pinnedColumns,
+		enableRowSelection,
+		actions
+	]);
 	const { table, shallow, debounceMs, throttleMs } = useDataTable({
 		data,
 		columns,
 		pageCount,
+		...total !== void 0 ? { rowCount: total } : {},
 		enableAdvancedFilter,
-		initialState: useMemo(() => ({
-			sorting: initialSorting,
-			columnPinning: pinnedColumns ?? {
-				left: enableRowSelection ? ["select"] : [],
-				right: actions ? ["actions"] : []
-			}
-		}), [
-			initialSorting,
-			pinnedColumns,
-			enableRowSelection,
-			actions
-		]),
+		initialState: stableInitialState,
 		shallow: false,
 		clearOnDefault: true
 	});
@@ -7044,6 +7047,7 @@ function AutoCrudTable({ id, title, description, schema, resource, fields, table
 				data: resource.tableData.data,
 				schema: resolvedSchema,
 				pageCount: resource.tableData.pageCount,
+				...resource.tableData.total !== void 0 ? { total: resource.tableData.total } : {},
 				overrides: tableOverrides,
 				exclude: hiddenColumns,
 				filterMode: tableConfig?.filterModes,
@@ -8155,6 +8159,7 @@ function useAutoCrudResource({ router, schema, query: queryTransform, options =
 		tableData: {
 			data: tableRows,
 			pageCount: listQuery.data?.pageCount ?? 0,
+			...typeof listQuery.data?.total === "number" ? { total: listQuery.data.total } : {},
 			isLoading: listQuery.isLoading,
 			isFetching: listQuery.isFetching
 		},

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@wordrhyme/auto-crud",
   "type": "module",
-  "version": "1.5.2",
+  "version": "1.5.4",
   "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.3",
-    "@wordrhyme/shadcn-ui": "1.32.8",
-    "@wordrhyme/formily-shadcn": "1.13.3"
+    "@wordrhyme/formily-shadcn": "1.13.4",
+    "@wordrhyme/shadcn-ui": "1.32.9",
+    "@wordrhyme/shadcn": "1.3.4"
   },
   "devDependencies": {
     "@storybook/react": "^8.6.18",