@wordrhyme/auto-crud 1.9.0 → 1.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -264,6 +264,8 @@ interface AutoCrudTableProps<TSchema> {
264
264
  table?: {
265
265
  hidden?: string[]; // 隐藏的列
266
266
  overrides?: Record<string, any>; // 列覆盖配置
267
+ getRowId?: (record: z.output<TSchema>) => string; // 稳定行标识;展开时必填
268
+ expandedRow?: (record: z.output<TSchema>) => React.ReactNode; // 展开行内容
267
269
  filterModes?: FilterMode | FilterMode[]; // 过滤模式
268
270
  batchFields?: (string | BatchUpdateField)[]; // 批量更新字段
269
271
  /** @deprecated 新代码请使用 actions.batch */
@@ -294,6 +296,30 @@ interface AutoCrudTableProps<TSchema> {
294
296
  }
295
297
  ```
296
298
 
299
+ #### 展开行详情
300
+
301
+ 配置 `table.expandedRow` 后,表格自动添加展开箭头。默认全部收起,允许同时展开多行。
302
+ 必须提供 TanStack Table 的 `getRowId`,使用稳定且唯一的业务主键,避免分页、排序后展开错位。
303
+
304
+ ```tsx
305
+ <AutoCrudTable
306
+ schema={orderSchema}
307
+ resource={resource}
308
+ table={{
309
+ getRowId: (order) => order.id,
310
+ expandedRow: (order) => <OrderDetails orderId={order.id} />,
311
+ }}
312
+ />
313
+ ```
314
+
315
+ 回调接收当前行的原始记录,并同步返回 React 内容。详情组件只在展开时挂载,收起时卸载;
316
+ 可由详情组件按订单 ID 查询数据并处理加载、错误和重试,也可直接使用记录中已有的明细。
317
+ 明细数据及其字段权限由业务组件和现有服务负责。
318
+
319
+ 详情区域跨全部可见列,不计入分页条数,也不参与主表选择或导出。
320
+ 数据更新时,展开状态遵循 TanStack Table 默认重置行为。
321
+ `AutoTable` 同样支持 `getRowId` 和 `expandedRow`;直接使用 `DataTable` 时,需自行配置 TanStack 展开能力及触发按钮。
322
+
297
323
  ### `useAutoCrudResource()`
298
324
 
299
325
  连接数据源到组件的 Hook。
package/dist/index.cjs CHANGED
@@ -566,7 +566,7 @@ function formatDate(date, opts = {}, preset) {
566
566
 
567
567
  //#endregion
568
568
  //#region src/components/data-table/data-table.tsx
569
- function DataTable({ table, actionBar, pagination, children, className, classNames,...props }) {
569
+ function DataTable({ table, actionBar, pagination, expandedRow, children, className, classNames,...props }) {
570
570
  useDateFormatterVersion();
571
571
  const columns = [
572
572
  ...table.getLeftVisibleLeafColumns(),
@@ -606,7 +606,7 @@ function DataTable({ table, actionBar, pagination, children, className, classNam
606
606
  }),
607
607
  /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.TableBody, {
608
608
  className: classNames?.tbody,
609
- children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.TableRow, {
609
+ children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.TableRow, {
610
610
  className: classNames?.tr,
611
611
  "data-state": row.getIsSelected() && "selected",
612
612
  children: row.getVisibleCells().map((cell) => {
@@ -617,7 +617,14 @@ function DataTable({ table, actionBar, pagination, children, className, classNam
617
617
  children: (0, __tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
618
618
  }, cell.id);
619
619
  })
620
- }, row.id)) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.TableRow, {
620
+ }), expandedRow && row.getCanExpand() && row.getIsExpanded() && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.TableRow, {
621
+ className: classNames?.tr,
622
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.TableCell, {
623
+ colSpan: row.getVisibleCells().length,
624
+ className: classNames?.td,
625
+ children: expandedRow(row.original)
626
+ })
627
+ })] }, row.id)) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.TableRow, {
621
628
  className: classNames?.tr,
622
629
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.TableCell, {
623
630
  colSpan: table.getAllColumns().length,
@@ -3906,9 +3913,12 @@ function coerceRowValues(rows, schema) {
3906
3913
 
3907
3914
  //#endregion
3908
3915
  //#region src/lib/export.ts
3916
+ function getExportColumnIds(table) {
3917
+ return table.getAllLeafColumns().filter((column) => column.accessorFn).map((column) => column.id);
3918
+ }
3909
3919
  function exportTableToCSV(table, opts = {}) {
3910
3920
  const { filename = "table", excludeColumns = [], onlySelected = false } = opts;
3911
- const headers = table.getAllLeafColumns().map((column) => column.id).filter((id) => !excludeColumns.includes(id));
3921
+ const headers = getExportColumnIds(table).filter((id) => !excludeColumns.includes(id));
3912
3922
  downloadCSV([headers.join(","), ...(onlySelected ? table.getFilteredSelectedRowModel().rows : table.getRowModel().rows).map((row) => headers.map((header) => {
3913
3923
  const cellValue = row.getValue(header);
3914
3924
  return typeof cellValue === "string" ? `"${cellValue.replace(/"/g, "\"\"")}"` : cellValue;
@@ -4419,7 +4429,9 @@ const filterModeConfig = {
4419
4429
  tooltip: "Linear-style command filters"
4420
4430
  }
4421
4431
  };
4422
- function AutoTable({ schema, data, pageCount = 1, pagination, total, overrides, classNames, enableRowSelection = true, exclude, filterOnly, actions, pinnedColumns, filterMode, search = false, onDeleteSelected, onUpdateSelected, batchUpdateFields, actionBarExtra, actionBarActions, deleteConfirmation, initialSorting, enableExport = true, showDefaultExport = true, onSelectedCountChange, onSelectedRowsChange, getSelectedRows }) {
4432
+ function AutoTable({ schema, data, getRowId, expandedRow, pageCount = 1, pagination, total, overrides, classNames, enableRowSelection = true, exclude, filterOnly, actions, pinnedColumns, filterMode, search = false, onDeleteSelected, onUpdateSelected, batchUpdateFields, actionBarExtra, actionBarActions, deleteConfirmation, initialSorting, enableExport = true, showDefaultExport = true, onSelectedCountChange, onSelectedRowsChange, getSelectedRows }) {
4433
+ if (expandedRow && !getRowId) throw new Error("AutoTable requires getRowId when expandedRow is provided.");
4434
+ const enableExpansion = !!expandedRow;
4423
4435
  const modes = filterMode ? Array.isArray(filterMode) ? filterMode : [filterMode] : DEFAULT_MODES;
4424
4436
  const [currentMode, setCurrentMode] = useQueryState("filterMode", parseAsStringEnum(modes).withDefault(modes[0] ?? "simple"));
4425
4437
  const showToggle = modes.length > 1;
@@ -4433,7 +4445,7 @@ function AutoTable({ schema, data, pageCount = 1, pagination, total, overrides,
4433
4445
  });
4434
4446
  const searchConfig = search && typeof search === "object" ? search : {};
4435
4447
  const enableAdvancedFilter = true;
4436
- const columns = (0, react.useMemo)(() => {
4448
+ const { columns, expandColumnId } = (0, react.useMemo)(() => {
4437
4449
  const columnOverrides = Object.assign({}, overrides);
4438
4450
  for (const key of filterOnly ?? []) {
4439
4451
  const field = key;
@@ -4454,12 +4466,39 @@ function AutoTable({ schema, data, pageCount = 1, pagination, total, overrides,
4454
4466
  } : column;
4455
4467
  });
4456
4468
  const result = enableRowSelection ? [createSelectColumn(), ...dataColumns] : dataColumns;
4469
+ let expandColumnId$1 = "expand";
4470
+ if (enableExpansion) {
4471
+ while (expandColumnId$1 in schema.shape || result.some((column) => column.id === expandColumnId$1)) expandColumnId$1 = `_${expandColumnId$1}`;
4472
+ result.unshift({
4473
+ id: expandColumnId$1,
4474
+ header: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
4475
+ className: "sr-only",
4476
+ children: "Row details"
4477
+ }),
4478
+ cell: ({ row }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__wordrhyme_shadcn.Button, {
4479
+ type: "button",
4480
+ variant: "ghost",
4481
+ size: "icon-sm",
4482
+ "aria-label": row.getIsExpanded() ? "Collapse row" : "Expand row",
4483
+ "aria-expanded": row.getIsExpanded(),
4484
+ onClick: row.getToggleExpandedHandler(),
4485
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRightIcon, { className: row.getIsExpanded() ? "size-4 rotate-90" : "size-4" })
4486
+ }),
4487
+ enableHiding: false,
4488
+ enableSorting: false,
4489
+ size: 40
4490
+ });
4491
+ }
4457
4492
  if (actions) result.push(createActionsColumn(actions));
4458
- return result;
4493
+ return {
4494
+ columns: result,
4495
+ expandColumnId: expandColumnId$1
4496
+ };
4459
4497
  }, [
4460
4498
  schema,
4461
4499
  overrides,
4462
4500
  enableRowSelection,
4501
+ enableExpansion,
4463
4502
  exclude,
4464
4503
  actions,
4465
4504
  filterOnly
@@ -4467,18 +4506,24 @@ function AutoTable({ schema, data, pageCount = 1, pagination, total, overrides,
4467
4506
  const stableInitialState = (0, react.useMemo)(() => ({
4468
4507
  sorting: initialSorting,
4469
4508
  columnPinning: pinnedColumns ?? {
4470
- left: enableRowSelection ? ["select"] : [],
4509
+ left: [...enableExpansion ? [expandColumnId] : [], ...enableRowSelection ? ["select"] : []],
4471
4510
  right: actions ? ["actions"] : []
4472
4511
  }
4473
4512
  }), [
4474
4513
  initialSorting,
4475
4514
  pinnedColumns,
4476
4515
  enableRowSelection,
4516
+ enableExpansion,
4517
+ expandColumnId,
4477
4518
  actions
4478
4519
  ]);
4520
+ const expandedRowModel = (0, react.useMemo)(() => (0, __tanstack_react_table.getExpandedRowModel)(), []);
4479
4521
  const { table, shallow, debounceMs, throttleMs } = useDataTable({
4480
4522
  data,
4481
4523
  columns,
4524
+ getRowId,
4525
+ getRowCanExpand: () => enableExpansion,
4526
+ getExpandedRowModel: enableExpansion ? expandedRowModel : void 0,
4482
4527
  pageCount,
4483
4528
  ...total !== void 0 ? { rowCount: total } : {},
4484
4529
  enableAdvancedFilter,
@@ -4610,7 +4655,8 @@ function AutoTable({ schema, data, pageCount = 1, pagination, total, overrides,
4610
4655
  /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTable, {
4611
4656
  pagination,
4612
4657
  table,
4613
- classNames
4658
+ classNames,
4659
+ expandedRow
4614
4660
  }),
4615
4661
  enableRowSelection && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutoTableActionBar, {
4616
4662
  table,
@@ -7553,7 +7599,7 @@ function AutoCrudTable({ id, title, description, schema, resource, fields, table
7553
7599
  return {
7554
7600
  ...action$1,
7555
7601
  onClick: (_rows, { table }) => {
7556
- const headers = table.getAllLeafColumns().map((column) => column.id).filter((key) => key !== "select" && key !== "actions" && !denyFields?.includes(key));
7602
+ const headers = getExportColumnIds(table).filter((key) => key !== "select" && key !== "actions" && !denyFields?.includes(key));
7557
7603
  exportAllToCSV(table.getFilteredSelectedRowModel().rows.map((row) => formatExportRow(row.original, resolvedFields, Object.fromEntries(headers.map((key) => [key, row.getValue(key)])))), {
7558
7604
  filename: "table",
7559
7605
  headers
@@ -7813,6 +7859,8 @@ function AutoCrudTable({ id, title, description, schema, resource, fields, table
7813
7859
  ...pagination
7814
7860
  } : void 0,
7815
7861
  ...resource.tableData.total !== void 0 ? { total: resource.tableData.total } : {},
7862
+ getRowId: tableConfig?.getRowId,
7863
+ expandedRow: tableConfig?.expandedRow,
7816
7864
  overrides: tableOverrides,
7817
7865
  classNames: tableConfig?.classNames,
7818
7866
  exclude: hiddenColumns.filter((key) => !filterOnly.includes(key)),
package/dist/index.d.cts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { a as positionActions, i as matchesPosition, n as actionPositionSchema, r as compareOrder, t as ActionPosition } from "./position-DoBV7yB6.cjs";
2
- import * as react_jsx_runtime4 from "react/jsx-runtime";
2
+ import * as react_jsx_runtime8 from "react/jsx-runtime";
3
3
  import * as React$1 from "react";
4
+ import { ComponentProps, ReactNode } from "react";
4
5
  import * as _tanstack_react_table0 from "@tanstack/react-table";
5
6
  import { Column, ColumnDef, ColumnMeta, ColumnSort, Row, RowData, Table, TableOptions, TableState } from "@tanstack/react-table";
6
7
  import { z } from "zod";
@@ -651,6 +652,26 @@ interface CrudPermissions {
651
652
  deny?: string[];
652
653
  }
653
654
  //#endregion
655
+ //#region src/components/data-table/data-table.d.ts
656
+ interface DataTableProps<TData> extends ComponentProps<'div'> {
657
+ table: Table<TData>;
658
+ pagination?: TablePaginationOptions;
659
+ classNames?: DataTableClassNames;
660
+ actionBar?: ReactNode;
661
+ /** Content mounted below an expanded row. */
662
+ expandedRow?: (record: TData) => ReactNode;
663
+ }
664
+ declare function DataTable<TData>({
665
+ table,
666
+ actionBar,
667
+ pagination,
668
+ expandedRow,
669
+ children,
670
+ className,
671
+ classNames,
672
+ ...props
673
+ }: DataTableProps<TData>): react_jsx_runtime8.JSX.Element;
674
+ //#endregion
654
675
  //#region src/components/auto-crud/auto-table-action-bar.d.ts
655
676
  /** 批量更新字段配置 */
656
677
  interface BatchUpdateField {
@@ -738,7 +759,7 @@ declare function AutoTableActionBar<TData>({
738
759
  extraActions,
739
760
  actions,
740
761
  deleteConfirmation
741
- }: AutoTableActionBarProps<TData>): react_jsx_runtime4.JSX.Element;
762
+ }: AutoTableActionBarProps<TData>): react_jsx_runtime8.JSX.Element;
742
763
  //#endregion
743
764
  //#region src/lib/schema-bridge/types.d.ts
744
765
  /**
@@ -847,9 +868,11 @@ declare function createActionsColumn<T>(items: ActionsColumnConfig<T>): ColumnDe
847
868
  //#region src/components/auto-crud/auto-table.d.ts
848
869
  /** 过滤模式类型 */
849
870
  type FilterMode = 'simple' | 'advanced' | 'command';
850
- interface AutoTableProps<T extends z.ZodObject<z.ZodRawShape>> {
871
+ interface AutoTableProps<T extends z.ZodObject<z.ZodRawShape>> extends Pick<DataTableProps<z.infer<T>>, 'expandedRow'> {
851
872
  schema: T;
852
873
  data: z.infer<T>[];
874
+ /** Stable row identity; required when expandedRow is provided. */
875
+ getRowId?: TableOptions<z.infer<T>>['getRowId'];
853
876
  pageCount?: number;
854
877
  pagination?: TablePaginationOptions;
855
878
  /** Total rows matching the current search and filters. */
@@ -905,6 +928,8 @@ interface AutoTableProps<T extends z.ZodObject<z.ZodRawShape>> {
905
928
  declare function AutoTable<T extends z.ZodObject<z.ZodRawShape>>({
906
929
  schema,
907
930
  data,
931
+ getRowId,
932
+ expandedRow,
908
933
  pageCount,
909
934
  pagination,
910
935
  total,
@@ -929,7 +954,7 @@ declare function AutoTable<T extends z.ZodObject<z.ZodRawShape>>({
929
954
  onSelectedCountChange,
930
955
  onSelectedRowsChange,
931
956
  getSelectedRows
932
- }: AutoTableProps<T>): react_jsx_runtime4.JSX.Element;
957
+ }: AutoTableProps<T>): react_jsx_runtime8.JSX.Element;
933
958
  //#endregion
934
959
  //#region src/lib/row-action-dialog.d.ts
935
960
  interface RowActionDialogProps {
@@ -1401,7 +1426,7 @@ interface AutoCrudTableProps<TSchema extends z.ZodObject<z.ZodRawShape>> {
1401
1426
  batchActions?: BatchActionConfig<z.output<TSchema>>;
1402
1427
  /** 默认排序 */
1403
1428
  defaultSort?: any[];
1404
- };
1429
+ } & Pick<AutoTableProps<TSchema>, 'getRowId' | 'expandedRow'>;
1405
1430
  /** 表单配置 */
1406
1431
  form?: {
1407
1432
  /** 表单覆盖配置(兼容旧 API,优先级低于 fieldOverrides) */
@@ -1483,7 +1508,7 @@ declare function AutoCrudTable<TSchema extends z.ZodObject<z.ZodRawShape>>({
1483
1508
  toolbarActions,
1484
1509
  locale: localeProp,
1485
1510
  onCreate
1486
- }: AutoCrudTableProps<TSchema>): react_jsx_runtime4.JSX.Element;
1511
+ }: AutoCrudTableProps<TSchema>): react_jsx_runtime8.JSX.Element;
1487
1512
  //#endregion
1488
1513
  //#region src/components/auto-crud/auto-form.d.ts
1489
1514
  interface AutoFormProps<T extends z.ZodObject<z.ZodRawShape>> {
@@ -1522,7 +1547,7 @@ declare function AutoFormInner<T extends z.ZodObject<z.ZodRawShape>>({
1522
1547
  labelAlign,
1523
1548
  labelWidth,
1524
1549
  showSubmitButton
1525
- }: AutoFormProps<T>, ref: React.Ref<AutoFormRef>): react_jsx_runtime4.JSX.Element;
1550
+ }: AutoFormProps<T>, ref: React.Ref<AutoFormRef>): react_jsx_runtime8.JSX.Element;
1526
1551
  declare const AutoForm: <T extends z.ZodObject<z.ZodRawShape>>(props: AutoFormProps<T> & {
1527
1552
  ref?: React.Ref<AutoFormRef>;
1528
1553
  }) => ReturnType<typeof AutoFormInner>;
@@ -1541,7 +1566,7 @@ declare function AutoTableSimpleFilters<TData>({
1541
1566
  filters: externalFilters,
1542
1567
  onFiltersChange,
1543
1568
  leading
1544
- }: AutoTableSimpleFiltersProps<TData>): react_jsx_runtime4.JSX.Element | null;
1569
+ }: AutoTableSimpleFiltersProps<TData>): react_jsx_runtime8.JSX.Element | null;
1545
1570
  //#endregion
1546
1571
  //#region src/components/auto-crud/form-modal.d.ts
1547
1572
  type ModalVariant = 'dialog' | 'sheet';
@@ -1585,7 +1610,7 @@ declare function CrudFormModal<T extends z.ZodObject<z.ZodRawShape>>({
1585
1610
  labelAlign,
1586
1611
  labelWidth,
1587
1612
  className
1588
- }: CrudFormModalProps<T>): react_jsx_runtime4.JSX.Element;
1613
+ }: CrudFormModalProps<T>): react_jsx_runtime8.JSX.Element;
1589
1614
  //#endregion
1590
1615
  //#region src/components/auto-crud/import-dialog.d.ts
1591
1616
  interface ImportDialogProps {
@@ -1607,7 +1632,7 @@ declare function ImportDialog({
1607
1632
  columns,
1608
1633
  title,
1609
1634
  locale
1610
- }: ImportDialogProps): react_jsx_runtime4.JSX.Element;
1635
+ }: ImportDialogProps): react_jsx_runtime8.JSX.Element;
1611
1636
  //#endregion
1612
1637
  //#region src/components/auto-crud/export-dialog.d.ts
1613
1638
  type ExportMode = 'selected' | 'filtered';
@@ -1627,24 +1652,7 @@ declare function ExportDialog({
1627
1652
  selectedCount,
1628
1653
  onExport,
1629
1654
  canExportFiltered
1630
- }: ExportDialogProps): react_jsx_runtime4.JSX.Element;
1631
- //#endregion
1632
- //#region src/components/data-table/data-table.d.ts
1633
- interface DataTableProps<TData> extends React$1.ComponentProps<'div'> {
1634
- table: Table<TData>;
1635
- pagination?: TablePaginationOptions;
1636
- classNames?: DataTableClassNames;
1637
- actionBar?: React$1.ReactNode;
1638
- }
1639
- declare function DataTable<TData>({
1640
- table,
1641
- actionBar,
1642
- pagination,
1643
- children,
1644
- className,
1645
- classNames,
1646
- ...props
1647
- }: DataTableProps<TData>): react_jsx_runtime4.JSX.Element;
1655
+ }: ExportDialogProps): react_jsx_runtime8.JSX.Element;
1648
1656
  //#endregion
1649
1657
  //#region src/components/data-table/data-table-advanced-toolbar.d.ts
1650
1658
  interface DataTableAdvancedToolbarProps<TData> extends React$1.ComponentProps<'div'> {
@@ -1655,7 +1663,7 @@ declare function DataTableAdvancedToolbar<TData>({
1655
1663
  children,
1656
1664
  className,
1657
1665
  ...props
1658
- }: DataTableAdvancedToolbarProps<TData>): react_jsx_runtime4.JSX.Element;
1666
+ }: DataTableAdvancedToolbarProps<TData>): react_jsx_runtime8.JSX.Element;
1659
1667
  //#endregion
1660
1668
  //#region src/components/data-table/data-table-column-header.d.ts
1661
1669
  interface DataTableColumnHeaderProps<TData, TValue> extends React.ComponentProps<typeof DropdownMenuTrigger> {
@@ -1667,7 +1675,7 @@ declare function DataTableColumnHeader<TData, TValue>({
1667
1675
  label,
1668
1676
  className,
1669
1677
  ...props
1670
- }: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime4.JSX.Element;
1678
+ }: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime8.JSX.Element;
1671
1679
  //#endregion
1672
1680
  //#region src/components/data-table/data-table-faceted-filter.d.ts
1673
1681
  interface DataTableFacetedFilterProps<TData, TValue> {
@@ -1681,7 +1689,7 @@ declare function DataTableFacetedFilter<TData, TValue>({
1681
1689
  title,
1682
1690
  options,
1683
1691
  multiple
1684
- }: DataTableFacetedFilterProps<TData, TValue>): react_jsx_runtime4.JSX.Element;
1692
+ }: DataTableFacetedFilterProps<TData, TValue>): react_jsx_runtime8.JSX.Element;
1685
1693
  //#endregion
1686
1694
  //#region src/components/data-table/data-table-pagination.d.ts
1687
1695
  interface DataTablePaginationProps<TData> extends React.ComponentProps<'div'>, TablePaginationOptions {
@@ -1697,7 +1705,7 @@ declare function DataTablePagination<TData>({
1697
1705
  pageJumpLabel,
1698
1706
  className,
1699
1707
  ...props
1700
- }: DataTablePaginationProps<TData>): react_jsx_runtime4.JSX.Element;
1708
+ }: DataTablePaginationProps<TData>): react_jsx_runtime8.JSX.Element;
1701
1709
  //#endregion
1702
1710
  //#region src/components/data-table/data-table-toolbar.d.ts
1703
1711
  interface DataTableToolbarProps<TData> extends React$1.ComponentProps<'div'> {
@@ -1708,7 +1716,7 @@ declare function DataTableToolbar<TData>({
1708
1716
  children,
1709
1717
  className,
1710
1718
  ...props
1711
- }: DataTableToolbarProps<TData>): react_jsx_runtime4.JSX.Element;
1719
+ }: DataTableToolbarProps<TData>): react_jsx_runtime8.JSX.Element;
1712
1720
  //#endregion
1713
1721
  //#region src/components/data-table/data-table-view-options.d.ts
1714
1722
  interface DataTableViewOptionsProps<TData> extends React$1.ComponentProps<typeof PopoverContent> {
@@ -1719,7 +1727,7 @@ declare function DataTableViewOptions<TData>({
1719
1727
  table,
1720
1728
  disabled,
1721
1729
  ...props
1722
- }: DataTableViewOptionsProps<TData>): react_jsx_runtime4.JSX.Element;
1730
+ }: DataTableViewOptionsProps<TData>): react_jsx_runtime8.JSX.Element;
1723
1731
  //#endregion
1724
1732
  //#region src/lib/crud-actions.d.ts
1725
1733
  type CrudActionZone = 'toolbar' | 'row' | 'batch';
@@ -2113,4 +2121,4 @@ declare function exportAllToCSV<T extends Record<string, unknown>>(data: T[], op
2113
2121
  */
2114
2122
  declare function downloadCSVTemplate(headers: string[], filename?: string): void;
2115
2123
  //#endregion
2116
- export { type ActionConfig, type ActionItem, type ActionPosition, type ActionsColumnConfig, type AutoCrudActionConfig, type AutoCrudActionsConfig, type AutoCrudDataSourceConfig, type AutoCrudDataSourceContext, type AutoCrudDataSourceEntry, type AutoCrudDataSourceLoader, type AutoCrudDataSourceRegistration, type AutoCrudFormComponentConfig, type AutoCrudLocale, type AutoCrudOption, type AutoCrudQueryCapabilities, type AutoCrudRowActionContext, type AutoCrudRowOpenOptions, AutoCrudTable, type AutoCrudTableProps, type AutoCrudToolbarContext, type AutoCrudToolbarResolver, AutoForm, type AutoFormProps, type AutoQueryParams, AutoTable, AutoTableActionBar, AutoTableSimpleFilters, type BatchActionConfig, type BatchActionContext, type BatchActionItem, type BatchBuiltinActionItem, type BatchBuiltinActionType, type BatchCustomActionItem, type BatchUpdateField, type ColumnOverrides, type CreateFormSchemaOptions, type CreateTableSchemaOptions, type CrudActionBase, type CrudActionEntry, type CrudActionRegistration, type CrudActionZone, CrudFormModal, type CrudHooks, type CrudOperationPermissions, type CrudPermissions, type DataSource, DataTable, DataTableAdvancedToolbar, DataTableClassNames, DataTableColumnHeader, DataTableFacetedFilter, DataTablePagination, DataTableRowAction, DataTableToolbar, DataTableViewOptions, type DateFormatPreset, type DateFormatter, type DateLocaleOptions, type EnumOption, ExportDialog, type ExportDialogProps, type ExportMode, ExtendedColumnFilter, ExtendedColumnSort, type Field, type FieldOption, type FieldTableDisplay, type FieldType, type Fields, type FilterConfig, FilterOperator, type FilterVariant, type FormSchemaOverrides, ImportDialog, type ImportDialogProps, type ImportResult, type JSONSchema, type JSONSchemaProperty, JoinOperator, type ListParams, type ListResult, type LocaleProp, MultiCombobox, type MultiComboboxOption, type MultiComboboxProps, type MultiComboboxTriggerRenderProps, Option, type ParsedImportData, type ParsedZodField, type Parser, QueryKeys, type RowActionConfig, type RowActionDialogProps, type RowActionItem, type RowBuiltinActionItem, type RowBuiltinActionType, type RowCustomActionItem, SchemaAdapter, Select, type SelectMode, type SelectOption, type SelectProps, type SelectSearchableDynamicProps, type SelectSearchableMultipleProps, type SelectSearchableProps, type SelectSearchableSingleProps, type SelectSimpleProps, type SelectTriggerRenderProps, type SimpleFieldConfig, type SimpleFieldsConfig, type TablePaginationOptions, type ToastAdapter, type ToolbarActionConfig, type ToolbarActionItem, type ToolbarBuiltinActionItem, type ToolbarBuiltinActionType, type ToolbarCustomActionItem, type UnifiedField, type UnifiedSchema, type UrlStateOptions, type UseAutoCrudResourceOptions, type UseAutoCrudResourceParams, type UseAutoCrudResourceReturn, actionPositionSchema, cn, coerceRowValues, compareOrder, components, createActionsColumn, createEditFormSchema, createFormSchema, createMemoryDataSource, createSelectColumn, createTRPCDataSource, createTableSchema, crudActions, dataSources, dataToCSV, deDE, downloadCSVTemplate, enUS, esES, exportAllToCSV, exportTableToCSV, formComponents, formatDate, frFR, generateCSVTemplate, getUrlParams, humanize, jaJP, koKR, matchesPosition, noopToastAdapter, normalizeDataSourceConfig, normalizeOptions, parseAsArrayOf, parseAsInteger, parseAsString, parseAsStringEnum, parseCSV, parseImportFile, parseJSON, parseZodField, positionActions, resolveLocale, setDateFormatter, setSearchParams, setToolbarResolver, tablePagination, useAutoCrudResource, useDataTable, useQueryState, useQueryStates, useReadableFilters, useUrlState, useUrlStates, zhCN };
2124
+ export { type ActionConfig, type ActionItem, type ActionPosition, type ActionsColumnConfig, type AutoCrudActionConfig, type AutoCrudActionsConfig, type AutoCrudDataSourceConfig, type AutoCrudDataSourceContext, type AutoCrudDataSourceEntry, type AutoCrudDataSourceLoader, type AutoCrudDataSourceRegistration, type AutoCrudFormComponentConfig, type AutoCrudLocale, type AutoCrudOption, type AutoCrudQueryCapabilities, type AutoCrudRowActionContext, type AutoCrudRowOpenOptions, AutoCrudTable, type AutoCrudTableProps, type AutoCrudToolbarContext, type AutoCrudToolbarResolver, AutoForm, type AutoFormProps, type AutoQueryParams, AutoTable, AutoTableActionBar, type AutoTableProps, AutoTableSimpleFilters, type BatchActionConfig, type BatchActionContext, type BatchActionItem, type BatchBuiltinActionItem, type BatchBuiltinActionType, type BatchCustomActionItem, type BatchUpdateField, type ColumnOverrides, type CreateFormSchemaOptions, type CreateTableSchemaOptions, type CrudActionBase, type CrudActionEntry, type CrudActionRegistration, type CrudActionZone, CrudFormModal, type CrudHooks, type CrudOperationPermissions, type CrudPermissions, type DataSource, DataTable, DataTableAdvancedToolbar, DataTableClassNames, DataTableColumnHeader, DataTableFacetedFilter, DataTablePagination, type DataTableProps, DataTableRowAction, DataTableToolbar, DataTableViewOptions, type DateFormatPreset, type DateFormatter, type DateLocaleOptions, type EnumOption, ExportDialog, type ExportDialogProps, type ExportMode, ExtendedColumnFilter, ExtendedColumnSort, type Field, type FieldOption, type FieldTableDisplay, type FieldType, type Fields, type FilterConfig, FilterOperator, type FilterVariant, type FormSchemaOverrides, ImportDialog, type ImportDialogProps, type ImportResult, type JSONSchema, type JSONSchemaProperty, JoinOperator, type ListParams, type ListResult, type LocaleProp, MultiCombobox, type MultiComboboxOption, type MultiComboboxProps, type MultiComboboxTriggerRenderProps, Option, type ParsedImportData, type ParsedZodField, type Parser, QueryKeys, type RowActionConfig, type RowActionDialogProps, type RowActionItem, type RowBuiltinActionItem, type RowBuiltinActionType, type RowCustomActionItem, SchemaAdapter, Select, type SelectMode, type SelectOption, type SelectProps, type SelectSearchableDynamicProps, type SelectSearchableMultipleProps, type SelectSearchableProps, type SelectSearchableSingleProps, type SelectSimpleProps, type SelectTriggerRenderProps, type SimpleFieldConfig, type SimpleFieldsConfig, type TablePaginationOptions, type ToastAdapter, type ToolbarActionConfig, type ToolbarActionItem, type ToolbarBuiltinActionItem, type ToolbarBuiltinActionType, type ToolbarCustomActionItem, type UnifiedField, type UnifiedSchema, type UrlStateOptions, type UseAutoCrudResourceOptions, type UseAutoCrudResourceParams, type UseAutoCrudResourceReturn, actionPositionSchema, cn, coerceRowValues, compareOrder, components, createActionsColumn, createEditFormSchema, createFormSchema, createMemoryDataSource, createSelectColumn, createTRPCDataSource, createTableSchema, crudActions, dataSources, dataToCSV, deDE, downloadCSVTemplate, enUS, esES, exportAllToCSV, exportTableToCSV, formComponents, formatDate, frFR, generateCSVTemplate, getUrlParams, humanize, jaJP, koKR, matchesPosition, noopToastAdapter, normalizeDataSourceConfig, normalizeOptions, parseAsArrayOf, parseAsInteger, parseAsString, parseAsStringEnum, parseCSV, parseImportFile, parseJSON, parseZodField, positionActions, resolveLocale, setDateFormatter, setSearchParams, setToolbarResolver, tablePagination, useAutoCrudResource, useDataTable, useQueryState, useQueryStates, useReadableFilters, useUrlState, useUrlStates, zhCN };
package/dist/index.d.ts CHANGED
@@ -1,10 +1,11 @@
1
1
  import { a as positionActions, i as matchesPosition, n as actionPositionSchema, r as compareOrder, t as ActionPosition } from "./position-mYekVBBH.js";
2
2
  import * as React$1 from "react";
3
+ import { ComponentProps, ReactNode } from "react";
3
4
  import * as _tanstack_react_table0 from "@tanstack/react-table";
4
5
  import { Column, ColumnDef, ColumnMeta, ColumnSort, Row, RowData, Table, TableOptions, TableState } from "@tanstack/react-table";
5
6
  import { DropdownMenuTrigger, PopoverContent } from "@wordrhyme/shadcn";
6
7
  import { ClassValue } from "clsx";
7
- import * as react_jsx_runtime2 from "react/jsx-runtime";
8
+ import * as react_jsx_runtime8 from "react/jsx-runtime";
8
9
  import { MultiCombobox, MultiComboboxOption, MultiComboboxProps, MultiComboboxTriggerRenderProps, Select, SelectMode, SelectOption, SelectProps, SelectSearchableDynamicProps, SelectSearchableMultipleProps, SelectSearchableProps, SelectSearchableSingleProps, SelectSimpleProps, SelectTriggerRenderProps } from "@wordrhyme/shadcn-ui";
9
10
  import { DropdownMenuItem as DropdownMenuItem$1 } from "@wordrhyme/ui";
10
11
  import { z } from "zod";
@@ -651,6 +652,26 @@ interface CrudPermissions {
651
652
  deny?: string[];
652
653
  }
653
654
  //#endregion
655
+ //#region src/components/data-table/data-table.d.ts
656
+ interface DataTableProps<TData> extends ComponentProps<'div'> {
657
+ table: Table<TData>;
658
+ pagination?: TablePaginationOptions;
659
+ classNames?: DataTableClassNames;
660
+ actionBar?: ReactNode;
661
+ /** Content mounted below an expanded row. */
662
+ expandedRow?: (record: TData) => ReactNode;
663
+ }
664
+ declare function DataTable<TData>({
665
+ table,
666
+ actionBar,
667
+ pagination,
668
+ expandedRow,
669
+ children,
670
+ className,
671
+ classNames,
672
+ ...props
673
+ }: DataTableProps<TData>): react_jsx_runtime8.JSX.Element;
674
+ //#endregion
654
675
  //#region src/components/auto-crud/auto-table-action-bar.d.ts
655
676
  /** 批量更新字段配置 */
656
677
  interface BatchUpdateField {
@@ -738,7 +759,7 @@ declare function AutoTableActionBar<TData>({
738
759
  extraActions,
739
760
  actions,
740
761
  deleteConfirmation
741
- }: AutoTableActionBarProps<TData>): react_jsx_runtime2.JSX.Element;
762
+ }: AutoTableActionBarProps<TData>): react_jsx_runtime8.JSX.Element;
742
763
  //#endregion
743
764
  //#region src/lib/schema-bridge/types.d.ts
744
765
  /**
@@ -847,9 +868,11 @@ declare function createActionsColumn<T>(items: ActionsColumnConfig<T>): ColumnDe
847
868
  //#region src/components/auto-crud/auto-table.d.ts
848
869
  /** 过滤模式类型 */
849
870
  type FilterMode = 'simple' | 'advanced' | 'command';
850
- interface AutoTableProps<T extends z.ZodObject<z.ZodRawShape>> {
871
+ interface AutoTableProps<T extends z.ZodObject<z.ZodRawShape>> extends Pick<DataTableProps<z.infer<T>>, 'expandedRow'> {
851
872
  schema: T;
852
873
  data: z.infer<T>[];
874
+ /** Stable row identity; required when expandedRow is provided. */
875
+ getRowId?: TableOptions<z.infer<T>>['getRowId'];
853
876
  pageCount?: number;
854
877
  pagination?: TablePaginationOptions;
855
878
  /** Total rows matching the current search and filters. */
@@ -905,6 +928,8 @@ interface AutoTableProps<T extends z.ZodObject<z.ZodRawShape>> {
905
928
  declare function AutoTable<T extends z.ZodObject<z.ZodRawShape>>({
906
929
  schema,
907
930
  data,
931
+ getRowId,
932
+ expandedRow,
908
933
  pageCount,
909
934
  pagination,
910
935
  total,
@@ -929,7 +954,7 @@ declare function AutoTable<T extends z.ZodObject<z.ZodRawShape>>({
929
954
  onSelectedCountChange,
930
955
  onSelectedRowsChange,
931
956
  getSelectedRows
932
- }: AutoTableProps<T>): react_jsx_runtime2.JSX.Element;
957
+ }: AutoTableProps<T>): react_jsx_runtime8.JSX.Element;
933
958
  //#endregion
934
959
  //#region src/lib/row-action-dialog.d.ts
935
960
  interface RowActionDialogProps {
@@ -1401,7 +1426,7 @@ interface AutoCrudTableProps<TSchema extends z.ZodObject<z.ZodRawShape>> {
1401
1426
  batchActions?: BatchActionConfig<z.output<TSchema>>;
1402
1427
  /** 默认排序 */
1403
1428
  defaultSort?: any[];
1404
- };
1429
+ } & Pick<AutoTableProps<TSchema>, 'getRowId' | 'expandedRow'>;
1405
1430
  /** 表单配置 */
1406
1431
  form?: {
1407
1432
  /** 表单覆盖配置(兼容旧 API,优先级低于 fieldOverrides) */
@@ -1483,7 +1508,7 @@ declare function AutoCrudTable<TSchema extends z.ZodObject<z.ZodRawShape>>({
1483
1508
  toolbarActions,
1484
1509
  locale: localeProp,
1485
1510
  onCreate
1486
- }: AutoCrudTableProps<TSchema>): react_jsx_runtime2.JSX.Element;
1511
+ }: AutoCrudTableProps<TSchema>): react_jsx_runtime8.JSX.Element;
1487
1512
  //#endregion
1488
1513
  //#region src/components/auto-crud/auto-form.d.ts
1489
1514
  interface AutoFormProps<T extends z.ZodObject<z.ZodRawShape>> {
@@ -1522,7 +1547,7 @@ declare function AutoFormInner<T extends z.ZodObject<z.ZodRawShape>>({
1522
1547
  labelAlign,
1523
1548
  labelWidth,
1524
1549
  showSubmitButton
1525
- }: AutoFormProps<T>, ref: React.Ref<AutoFormRef>): react_jsx_runtime2.JSX.Element;
1550
+ }: AutoFormProps<T>, ref: React.Ref<AutoFormRef>): react_jsx_runtime8.JSX.Element;
1526
1551
  declare const AutoForm: <T extends z.ZodObject<z.ZodRawShape>>(props: AutoFormProps<T> & {
1527
1552
  ref?: React.Ref<AutoFormRef>;
1528
1553
  }) => ReturnType<typeof AutoFormInner>;
@@ -1541,7 +1566,7 @@ declare function AutoTableSimpleFilters<TData>({
1541
1566
  filters: externalFilters,
1542
1567
  onFiltersChange,
1543
1568
  leading
1544
- }: AutoTableSimpleFiltersProps<TData>): react_jsx_runtime2.JSX.Element | null;
1569
+ }: AutoTableSimpleFiltersProps<TData>): react_jsx_runtime8.JSX.Element | null;
1545
1570
  //#endregion
1546
1571
  //#region src/components/auto-crud/form-modal.d.ts
1547
1572
  type ModalVariant = 'dialog' | 'sheet';
@@ -1585,7 +1610,7 @@ declare function CrudFormModal<T extends z.ZodObject<z.ZodRawShape>>({
1585
1610
  labelAlign,
1586
1611
  labelWidth,
1587
1612
  className
1588
- }: CrudFormModalProps<T>): react_jsx_runtime2.JSX.Element;
1613
+ }: CrudFormModalProps<T>): react_jsx_runtime8.JSX.Element;
1589
1614
  //#endregion
1590
1615
  //#region src/components/auto-crud/import-dialog.d.ts
1591
1616
  interface ImportDialogProps {
@@ -1607,7 +1632,7 @@ declare function ImportDialog({
1607
1632
  columns,
1608
1633
  title,
1609
1634
  locale
1610
- }: ImportDialogProps): react_jsx_runtime2.JSX.Element;
1635
+ }: ImportDialogProps): react_jsx_runtime8.JSX.Element;
1611
1636
  //#endregion
1612
1637
  //#region src/components/auto-crud/export-dialog.d.ts
1613
1638
  type ExportMode = 'selected' | 'filtered';
@@ -1627,24 +1652,7 @@ declare function ExportDialog({
1627
1652
  selectedCount,
1628
1653
  onExport,
1629
1654
  canExportFiltered
1630
- }: ExportDialogProps): react_jsx_runtime2.JSX.Element;
1631
- //#endregion
1632
- //#region src/components/data-table/data-table.d.ts
1633
- interface DataTableProps<TData> extends React$1.ComponentProps<'div'> {
1634
- table: Table<TData>;
1635
- pagination?: TablePaginationOptions;
1636
- classNames?: DataTableClassNames;
1637
- actionBar?: React$1.ReactNode;
1638
- }
1639
- declare function DataTable<TData>({
1640
- table,
1641
- actionBar,
1642
- pagination,
1643
- children,
1644
- className,
1645
- classNames,
1646
- ...props
1647
- }: DataTableProps<TData>): react_jsx_runtime2.JSX.Element;
1655
+ }: ExportDialogProps): react_jsx_runtime8.JSX.Element;
1648
1656
  //#endregion
1649
1657
  //#region src/components/data-table/data-table-advanced-toolbar.d.ts
1650
1658
  interface DataTableAdvancedToolbarProps<TData> extends React$1.ComponentProps<'div'> {
@@ -1655,7 +1663,7 @@ declare function DataTableAdvancedToolbar<TData>({
1655
1663
  children,
1656
1664
  className,
1657
1665
  ...props
1658
- }: DataTableAdvancedToolbarProps<TData>): react_jsx_runtime2.JSX.Element;
1666
+ }: DataTableAdvancedToolbarProps<TData>): react_jsx_runtime8.JSX.Element;
1659
1667
  //#endregion
1660
1668
  //#region src/components/data-table/data-table-column-header.d.ts
1661
1669
  interface DataTableColumnHeaderProps<TData, TValue> extends React.ComponentProps<typeof DropdownMenuTrigger> {
@@ -1667,7 +1675,7 @@ declare function DataTableColumnHeader<TData, TValue>({
1667
1675
  label,
1668
1676
  className,
1669
1677
  ...props
1670
- }: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime2.JSX.Element;
1678
+ }: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime8.JSX.Element;
1671
1679
  //#endregion
1672
1680
  //#region src/components/data-table/data-table-faceted-filter.d.ts
1673
1681
  interface DataTableFacetedFilterProps<TData, TValue> {
@@ -1681,7 +1689,7 @@ declare function DataTableFacetedFilter<TData, TValue>({
1681
1689
  title,
1682
1690
  options,
1683
1691
  multiple
1684
- }: DataTableFacetedFilterProps<TData, TValue>): react_jsx_runtime2.JSX.Element;
1692
+ }: DataTableFacetedFilterProps<TData, TValue>): react_jsx_runtime8.JSX.Element;
1685
1693
  //#endregion
1686
1694
  //#region src/components/data-table/data-table-pagination.d.ts
1687
1695
  interface DataTablePaginationProps<TData> extends React.ComponentProps<'div'>, TablePaginationOptions {
@@ -1697,7 +1705,7 @@ declare function DataTablePagination<TData>({
1697
1705
  pageJumpLabel,
1698
1706
  className,
1699
1707
  ...props
1700
- }: DataTablePaginationProps<TData>): react_jsx_runtime2.JSX.Element;
1708
+ }: DataTablePaginationProps<TData>): react_jsx_runtime8.JSX.Element;
1701
1709
  //#endregion
1702
1710
  //#region src/components/data-table/data-table-toolbar.d.ts
1703
1711
  interface DataTableToolbarProps<TData> extends React$1.ComponentProps<'div'> {
@@ -1708,7 +1716,7 @@ declare function DataTableToolbar<TData>({
1708
1716
  children,
1709
1717
  className,
1710
1718
  ...props
1711
- }: DataTableToolbarProps<TData>): react_jsx_runtime2.JSX.Element;
1719
+ }: DataTableToolbarProps<TData>): react_jsx_runtime8.JSX.Element;
1712
1720
  //#endregion
1713
1721
  //#region src/components/data-table/data-table-view-options.d.ts
1714
1722
  interface DataTableViewOptionsProps<TData> extends React$1.ComponentProps<typeof PopoverContent> {
@@ -1719,7 +1727,7 @@ declare function DataTableViewOptions<TData>({
1719
1727
  table,
1720
1728
  disabled,
1721
1729
  ...props
1722
- }: DataTableViewOptionsProps<TData>): react_jsx_runtime2.JSX.Element;
1730
+ }: DataTableViewOptionsProps<TData>): react_jsx_runtime8.JSX.Element;
1723
1731
  //#endregion
1724
1732
  //#region src/lib/crud-actions.d.ts
1725
1733
  type CrudActionZone = 'toolbar' | 'row' | 'batch';
@@ -2113,4 +2121,4 @@ declare function exportAllToCSV<T extends Record<string, unknown>>(data: T[], op
2113
2121
  */
2114
2122
  declare function downloadCSVTemplate(headers: string[], filename?: string): void;
2115
2123
  //#endregion
2116
- export { type ActionConfig, type ActionItem, type ActionPosition, type ActionsColumnConfig, type AutoCrudActionConfig, type AutoCrudActionsConfig, type AutoCrudDataSourceConfig, type AutoCrudDataSourceContext, type AutoCrudDataSourceEntry, type AutoCrudDataSourceLoader, type AutoCrudDataSourceRegistration, type AutoCrudFormComponentConfig, type AutoCrudLocale, type AutoCrudOption, type AutoCrudQueryCapabilities, type AutoCrudRowActionContext, type AutoCrudRowOpenOptions, AutoCrudTable, type AutoCrudTableProps, type AutoCrudToolbarContext, type AutoCrudToolbarResolver, AutoForm, type AutoFormProps, type AutoQueryParams, AutoTable, AutoTableActionBar, AutoTableSimpleFilters, type BatchActionConfig, type BatchActionContext, type BatchActionItem, type BatchBuiltinActionItem, type BatchBuiltinActionType, type BatchCustomActionItem, type BatchUpdateField, type ColumnOverrides, type CreateFormSchemaOptions, type CreateTableSchemaOptions, type CrudActionBase, type CrudActionEntry, type CrudActionRegistration, type CrudActionZone, CrudFormModal, type CrudHooks, type CrudOperationPermissions, type CrudPermissions, type DataSource, DataTable, DataTableAdvancedToolbar, DataTableClassNames, DataTableColumnHeader, DataTableFacetedFilter, DataTablePagination, DataTableRowAction, DataTableToolbar, DataTableViewOptions, type DateFormatPreset, type DateFormatter, type DateLocaleOptions, type EnumOption, ExportDialog, type ExportDialogProps, type ExportMode, ExtendedColumnFilter, ExtendedColumnSort, type Field, type FieldOption, type FieldTableDisplay, type FieldType, type Fields, type FilterConfig, FilterOperator, type FilterVariant, type FormSchemaOverrides, ImportDialog, type ImportDialogProps, type ImportResult, type JSONSchema, type JSONSchemaProperty, JoinOperator, type ListParams, type ListResult, type LocaleProp, MultiCombobox, type MultiComboboxOption, type MultiComboboxProps, type MultiComboboxTriggerRenderProps, Option, type ParsedImportData, type ParsedZodField, type Parser, QueryKeys, type RowActionConfig, type RowActionDialogProps, type RowActionItem, type RowBuiltinActionItem, type RowBuiltinActionType, type RowCustomActionItem, SchemaAdapter, Select, type SelectMode, type SelectOption, type SelectProps, type SelectSearchableDynamicProps, type SelectSearchableMultipleProps, type SelectSearchableProps, type SelectSearchableSingleProps, type SelectSimpleProps, type SelectTriggerRenderProps, type SimpleFieldConfig, type SimpleFieldsConfig, type TablePaginationOptions, type ToastAdapter, type ToolbarActionConfig, type ToolbarActionItem, type ToolbarBuiltinActionItem, type ToolbarBuiltinActionType, type ToolbarCustomActionItem, type UnifiedField, type UnifiedSchema, type UrlStateOptions, type UseAutoCrudResourceOptions, type UseAutoCrudResourceParams, type UseAutoCrudResourceReturn, actionPositionSchema, cn, coerceRowValues, compareOrder, components, createActionsColumn, createEditFormSchema, createFormSchema, createMemoryDataSource, createSelectColumn, createTRPCDataSource, createTableSchema, crudActions, dataSources, dataToCSV, deDE, downloadCSVTemplate, enUS, esES, exportAllToCSV, exportTableToCSV, formComponents, formatDate, frFR, generateCSVTemplate, getUrlParams, humanize, jaJP, koKR, matchesPosition, noopToastAdapter, normalizeDataSourceConfig, normalizeOptions, parseAsArrayOf, parseAsInteger, parseAsString, parseAsStringEnum, parseCSV, parseImportFile, parseJSON, parseZodField, positionActions, resolveLocale, setDateFormatter, setSearchParams, setToolbarResolver, tablePagination, useAutoCrudResource, useDataTable, useQueryState, useQueryStates, useReadableFilters, useUrlState, useUrlStates, zhCN };
2124
+ export { type ActionConfig, type ActionItem, type ActionPosition, type ActionsColumnConfig, type AutoCrudActionConfig, type AutoCrudActionsConfig, type AutoCrudDataSourceConfig, type AutoCrudDataSourceContext, type AutoCrudDataSourceEntry, type AutoCrudDataSourceLoader, type AutoCrudDataSourceRegistration, type AutoCrudFormComponentConfig, type AutoCrudLocale, type AutoCrudOption, type AutoCrudQueryCapabilities, type AutoCrudRowActionContext, type AutoCrudRowOpenOptions, AutoCrudTable, type AutoCrudTableProps, type AutoCrudToolbarContext, type AutoCrudToolbarResolver, AutoForm, type AutoFormProps, type AutoQueryParams, AutoTable, AutoTableActionBar, type AutoTableProps, AutoTableSimpleFilters, type BatchActionConfig, type BatchActionContext, type BatchActionItem, type BatchBuiltinActionItem, type BatchBuiltinActionType, type BatchCustomActionItem, type BatchUpdateField, type ColumnOverrides, type CreateFormSchemaOptions, type CreateTableSchemaOptions, type CrudActionBase, type CrudActionEntry, type CrudActionRegistration, type CrudActionZone, CrudFormModal, type CrudHooks, type CrudOperationPermissions, type CrudPermissions, type DataSource, DataTable, DataTableAdvancedToolbar, DataTableClassNames, DataTableColumnHeader, DataTableFacetedFilter, DataTablePagination, type DataTableProps, DataTableRowAction, DataTableToolbar, DataTableViewOptions, type DateFormatPreset, type DateFormatter, type DateLocaleOptions, type EnumOption, ExportDialog, type ExportDialogProps, type ExportMode, ExtendedColumnFilter, ExtendedColumnSort, type Field, type FieldOption, type FieldTableDisplay, type FieldType, type Fields, type FilterConfig, FilterOperator, type FilterVariant, type FormSchemaOverrides, ImportDialog, type ImportDialogProps, type ImportResult, type JSONSchema, type JSONSchemaProperty, JoinOperator, type ListParams, type ListResult, type LocaleProp, MultiCombobox, type MultiComboboxOption, type MultiComboboxProps, type MultiComboboxTriggerRenderProps, Option, type ParsedImportData, type ParsedZodField, type Parser, QueryKeys, type RowActionConfig, type RowActionDialogProps, type RowActionItem, type RowBuiltinActionItem, type RowBuiltinActionType, type RowCustomActionItem, SchemaAdapter, Select, type SelectMode, type SelectOption, type SelectProps, type SelectSearchableDynamicProps, type SelectSearchableMultipleProps, type SelectSearchableProps, type SelectSearchableSingleProps, type SelectSimpleProps, type SelectTriggerRenderProps, type SimpleFieldConfig, type SimpleFieldsConfig, type TablePaginationOptions, type ToastAdapter, type ToolbarActionConfig, type ToolbarActionItem, type ToolbarBuiltinActionItem, type ToolbarBuiltinActionType, type ToolbarCustomActionItem, type UnifiedField, type UnifiedSchema, type UrlStateOptions, type UseAutoCrudResourceOptions, type UseAutoCrudResourceParams, type UseAutoCrudResourceReturn, actionPositionSchema, cn, coerceRowValues, compareOrder, components, createActionsColumn, createEditFormSchema, createFormSchema, createMemoryDataSource, createSelectColumn, createTRPCDataSource, createTableSchema, crudActions, dataSources, dataToCSV, deDE, downloadCSVTemplate, enUS, esES, exportAllToCSV, exportTableToCSV, formComponents, formatDate, frFR, generateCSVTemplate, getUrlParams, humanize, jaJP, koKR, matchesPosition, noopToastAdapter, normalizeDataSourceConfig, normalizeOptions, parseAsArrayOf, parseAsInteger, parseAsString, parseAsStringEnum, parseCSV, parseImportFile, parseJSON, parseZodField, positionActions, resolveLocale, setDateFormatter, setSearchParams, setToolbarResolver, tablePagination, useAutoCrudResource, useDataTable, useQueryState, useQueryStates, useReadableFilters, useUrlState, useUrlStates, zhCN };
package/dist/index.js CHANGED
@@ -1,12 +1,12 @@
1
1
  import { i as positionActions, n as compareOrder, r as matchesPosition, t as actionPositionSchema } from "./position--p6kJnYA.js";
2
2
  import * as React from "react";
3
- import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useReducer, useRef, useState, useSyncExternalStore } from "react";
4
- import { ArrowDownUp, BadgeCheck, CalendarIcon, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsLeft, ChevronsRight, ChevronsUpDown, CommandIcon, Download, Ellipsis, EyeOff, FileDown, FileSpreadsheetIcon, GripVertical, ListFilter, ListFilterIcon, Loader2, PlusCircle, RefreshCw, Settings2, Text, Trash2, Upload, X, XCircle } from "lucide-react";
5
- import { flexRender, getCoreRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
3
+ import { Fragment, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useReducer, useRef, useState, useSyncExternalStore } from "react";
4
+ import { ArrowDownUp, BadgeCheck, CalendarIcon, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, ChevronRightIcon, ChevronUp, ChevronsLeft, ChevronsRight, ChevronsUpDown, CommandIcon, Download, Ellipsis, EyeOff, FileDown, FileSpreadsheetIcon, GripVertical, ListFilter, ListFilterIcon, Loader2, PlusCircle, RefreshCw, Settings2, Text, Trash2, Upload, X, XCircle } from "lucide-react";
5
+ import { flexRender, getCoreRowModel, getExpandedRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
6
6
  import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, Badge, Button, Calendar, Checkbox, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, Input, Label, Popover, PopoverContent, PopoverTrigger, Select as Select$1, SelectContent, SelectItem, SelectTrigger, SelectValue, Separator, Slider, Switch, Table as Table$1, TableBody, TableCell, TableHead, TableHeader, TableRow, cn as cn$1 } from "@wordrhyme/shadcn";
7
7
  import { clsx } from "clsx";
8
8
  import { twMerge } from "tailwind-merge";
9
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
9
+ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
10
10
  import { customAlphabet } from "nanoid";
11
11
  import { ActionBar, ActionBarClose, ActionBarGroup, ActionBarItem, ActionBarSelection, ActionBarSeparator, Faceted, FacetedBadgeList, FacetedContent, FacetedEmpty, FacetedGroup, FacetedInput, FacetedItem, FacetedList, FacetedTrigger, MultiCombobox, Select, Select as Select$2, Sortable, SortableContent, SortableItem, SortableItemHandle, SortableOverlay } from "@wordrhyme/shadcn-ui";
12
12
  import { AlertDialog as AlertDialog$1, AlertDialogAction as AlertDialogAction$1, AlertDialogCancel as AlertDialogCancel$1, AlertDialogContent as AlertDialogContent$1, AlertDialogDescription as AlertDialogDescription$1, AlertDialogFooter as AlertDialogFooter$1, AlertDialogHeader as AlertDialogHeader$1, AlertDialogTitle as AlertDialogTitle$1, Button as Button$1, Calendar as Calendar$1, Dialog as Dialog$1, DialogContent as DialogContent$1, DialogDescription as DialogDescription$1, DialogHeader as DialogHeader$1, DialogTitle as DialogTitle$1, DropdownMenu as DropdownMenu$1, DropdownMenuContent as DropdownMenuContent$1, DropdownMenuItem as DropdownMenuItem$1, DropdownMenuSeparator, DropdownMenuTrigger as DropdownMenuTrigger$1, Popover as Popover$1, PopoverContent as PopoverContent$1, PopoverTrigger as PopoverTrigger$1, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@wordrhyme/ui";
@@ -551,7 +551,7 @@ function formatDate(date, opts = {}, preset) {
551
551
 
552
552
  //#endregion
553
553
  //#region src/components/data-table/data-table.tsx
554
- function DataTable({ table, actionBar, pagination, children, className, classNames,...props }) {
554
+ function DataTable({ table, actionBar, pagination, expandedRow, children, className, classNames,...props }) {
555
555
  useDateFormatterVersion();
556
556
  const columns = [
557
557
  ...table.getLeftVisibleLeafColumns(),
@@ -591,7 +591,7 @@ function DataTable({ table, actionBar, pagination, children, className, classNam
591
591
  }),
592
592
  /* @__PURE__ */ jsx(TableBody, {
593
593
  className: classNames?.tbody,
594
- children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(TableRow, {
594
+ children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TableRow, {
595
595
  className: classNames?.tr,
596
596
  "data-state": row.getIsSelected() && "selected",
597
597
  children: row.getVisibleCells().map((cell) => {
@@ -602,7 +602,14 @@ function DataTable({ table, actionBar, pagination, children, className, classNam
602
602
  children: flexRender(cell.column.columnDef.cell, cell.getContext())
603
603
  }, cell.id);
604
604
  })
605
- }, row.id)) : /* @__PURE__ */ jsx(TableRow, {
605
+ }), expandedRow && row.getCanExpand() && row.getIsExpanded() && /* @__PURE__ */ jsx(TableRow, {
606
+ className: classNames?.tr,
607
+ children: /* @__PURE__ */ jsx(TableCell, {
608
+ colSpan: row.getVisibleCells().length,
609
+ className: classNames?.td,
610
+ children: expandedRow(row.original)
611
+ })
612
+ })] }, row.id)) : /* @__PURE__ */ jsx(TableRow, {
606
613
  className: classNames?.tr,
607
614
  children: /* @__PURE__ */ jsx(TableCell, {
608
615
  colSpan: table.getAllColumns().length,
@@ -1959,7 +1966,7 @@ function DataTableFilterMenu({ table, debounceMs = DEBOUNCE_MS$1, throttleMs = T
1959
1966
  onKeyDown: onInputKeyDown
1960
1967
  }), /* @__PURE__ */ jsx(CommandList, {
1961
1968
  onScroll: selectedColumnMeta?.autoCrudFilterOnPopupScroll,
1962
- children: selectedColumn ? /* @__PURE__ */ jsxs(Fragment, { children: [
1969
+ children: selectedColumn ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
1963
1970
  selectedColumn.columnDef.meta?.options && /* @__PURE__ */ jsx(CommandEmpty, { children: "No options found." }),
1964
1971
  /* @__PURE__ */ jsx(FilterValueSelector, {
1965
1972
  column: selectedColumn,
@@ -1978,7 +1985,7 @@ function DataTableFilterMenu({ table, debounceMs = DEBOUNCE_MS$1, throttleMs = T
1978
1985
  className: "sr-only",
1979
1986
  children: "Load more"
1980
1987
  })
1981
- ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CommandEmpty, { children: "No fields found." }), /* @__PURE__ */ jsx(CommandGroup, { children: columns.map((column) => /* @__PURE__ */ jsxs(CommandItem, {
1988
+ ] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CommandEmpty, { children: "No fields found." }), /* @__PURE__ */ jsx(CommandGroup, { children: columns.map((column) => /* @__PURE__ */ jsxs(CommandItem, {
1982
1989
  value: column.id,
1983
1990
  onSelect: () => {
1984
1991
  setSelectedColumn(column);
@@ -2162,7 +2169,7 @@ function FilterValueSelector({ column, value, onSelect }) {
2162
2169
  value,
2163
2170
  onSelect: () => onSelect(value),
2164
2171
  disabled: isEmpty,
2165
- children: isEmpty ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Text, {}), /* @__PURE__ */ jsx("span", { children: "Type to add filter..." })] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(BadgeCheck, {}), /* @__PURE__ */ jsxs("span", {
2172
+ children: isEmpty ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Text, {}), /* @__PURE__ */ jsx("span", { children: "Type to add filter..." })] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(BadgeCheck, {}), /* @__PURE__ */ jsxs("span", {
2166
2173
  className: "truncate",
2167
2174
  children: [
2168
2175
  "Filter by \"",
@@ -2248,7 +2255,7 @@ function onFilterInputRender({ today, filter, column, inputId, onFilterUpdate, s
2248
2255
  variant: "ghost",
2249
2256
  size: "sm",
2250
2257
  className: "h-full min-w-16 rounded-none border px-1.5 font-normal dark:bg-input/30",
2251
- children: selectedOptions.length === 0 ? filter.variant === "multiSelect" ? "Select options..." : "Select option..." : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
2258
+ children: selectedOptions.length === 0 ? filter.variant === "multiSelect" ? "Select options..." : "Select option..." : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
2252
2259
  className: "flex items-center -space-x-2 rtl:space-x-reverse",
2253
2260
  children: selectedOptions.map((selectedOption) => selectedOption.icon ? /* @__PURE__ */ jsx("div", {
2254
2261
  className: "rounded-full border bg-background p-0.5",
@@ -2961,7 +2968,7 @@ function SimpleFacetedFilter({ title, options, multiple, value, hasMore, loading
2961
2968
  children: /* @__PURE__ */ jsx(XCircle, {})
2962
2969
  }) : /* @__PURE__ */ jsx(PlusCircle, {}),
2963
2970
  title,
2964
- selectedValues.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
2971
+ selectedValues.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
2965
2972
  /* @__PURE__ */ jsx(Separator, {
2966
2973
  orientation: "vertical",
2967
2974
  className: "mx-0.5 h-4"
@@ -3035,7 +3042,7 @@ function SimpleSliderFilter({ title, range, unit, value, onChange }) {
3035
3042
  children: /* @__PURE__ */ jsx(XCircle, {})
3036
3043
  }) : /* @__PURE__ */ jsx(PlusCircle, {}),
3037
3044
  /* @__PURE__ */ jsx("span", { children: title }),
3038
- value && /* @__PURE__ */ jsxs(Fragment, { children: [
3045
+ value && /* @__PURE__ */ jsxs(Fragment$1, { children: [
3039
3046
  /* @__PURE__ */ jsx(Separator, {
3040
3047
  orientation: "vertical",
3041
3048
  className: "mx-0.5 h-4"
@@ -3175,7 +3182,7 @@ function SimpleDateFilter({ title, maxDate, multiple, value, onChange }) {
3175
3182
  children: /* @__PURE__ */ jsx(XCircle, {})
3176
3183
  }) : /* @__PURE__ */ jsx(CalendarIcon, {}),
3177
3184
  /* @__PURE__ */ jsx("span", { children: title }),
3178
- label && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Separator, {
3185
+ label && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Separator, {
3179
3186
  orientation: "vertical",
3180
3187
  className: "mx-0.5 h-4"
3181
3188
  }), /* @__PURE__ */ jsx("span", { children: label })] })
@@ -3277,7 +3284,7 @@ function DataTableColumnHeader({ column, label, className,...props }) {
3277
3284
  }), /* @__PURE__ */ jsxs(DropdownMenuContent, {
3278
3285
  align: "start",
3279
3286
  className: "w-28",
3280
- children: [column.getCanSort() && /* @__PURE__ */ jsxs(Fragment, { children: [
3287
+ children: [column.getCanSort() && /* @__PURE__ */ jsxs(Fragment$1, { children: [
3281
3288
  /* @__PURE__ */ jsxs(DropdownMenuCheckboxItem, {
3282
3289
  className: "relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground",
3283
3290
  checked: column.getIsSorted() === "asc",
@@ -3891,9 +3898,12 @@ function coerceRowValues(rows, schema) {
3891
3898
 
3892
3899
  //#endregion
3893
3900
  //#region src/lib/export.ts
3901
+ function getExportColumnIds(table) {
3902
+ return table.getAllLeafColumns().filter((column) => column.accessorFn).map((column) => column.id);
3903
+ }
3894
3904
  function exportTableToCSV(table, opts = {}) {
3895
3905
  const { filename = "table", excludeColumns = [], onlySelected = false } = opts;
3896
- const headers = table.getAllLeafColumns().map((column) => column.id).filter((id) => !excludeColumns.includes(id));
3906
+ const headers = getExportColumnIds(table).filter((id) => !excludeColumns.includes(id));
3897
3907
  downloadCSV([headers.join(","), ...(onlySelected ? table.getFilteredSelectedRowModel().rows : table.getRowModel().rows).map((row) => headers.map((header) => {
3898
3908
  const cellValue = row.getValue(header);
3899
3909
  return typeof cellValue === "string" ? `"${cellValue.replace(/"/g, "\"\"")}"` : cellValue;
@@ -4081,7 +4091,7 @@ function AutoTableActionBar({ table, onDeleteSelected, onUpdateSelected, batchUp
4081
4091
  { type: "delete" }
4082
4092
  ]) : actions;
4083
4093
  let resolvedActions = configuredActions?.filter((action$1) => !action$1.hidden);
4084
- if (configuredActions === void 0) return /* @__PURE__ */ jsxs(Fragment, { children: [
4094
+ if (configuredActions === void 0) return /* @__PURE__ */ jsxs(Fragment$1, { children: [
4085
4095
  renderBuiltinAction({ type: "batchUpdate" }),
4086
4096
  extraActions,
4087
4097
  showDefaultExport && renderBuiltinAction({ type: "export" }),
@@ -4104,7 +4114,7 @@ function AutoTableActionBar({ table, onDeleteSelected, onUpdateSelected, batchUp
4104
4114
  if (!hasBuiltin) {
4105
4115
  const startNodes = resolvedActions.filter(isBatchCustomAction).filter((action$1) => action$1.position === "start").map((action$1, index$1) => renderCustomAction(action$1, index$1));
4106
4116
  const endNodes = resolvedActions.filter(isBatchCustomAction).filter((action$1) => action$1.position !== "start").map((action$1, index$1) => renderCustomAction(action$1, index$1));
4107
- return /* @__PURE__ */ jsxs(Fragment, { children: [
4117
+ return /* @__PURE__ */ jsxs(Fragment$1, { children: [
4108
4118
  startNodes,
4109
4119
  renderBuiltinAction({ type: "batchUpdate" }),
4110
4120
  extraActions,
@@ -4404,7 +4414,9 @@ const filterModeConfig = {
4404
4414
  tooltip: "Linear-style command filters"
4405
4415
  }
4406
4416
  };
4407
- function AutoTable({ schema, data, pageCount = 1, pagination, total, overrides, classNames, enableRowSelection = true, exclude, filterOnly, actions, pinnedColumns, filterMode, search = false, onDeleteSelected, onUpdateSelected, batchUpdateFields, actionBarExtra, actionBarActions, deleteConfirmation, initialSorting, enableExport = true, showDefaultExport = true, onSelectedCountChange, onSelectedRowsChange, getSelectedRows }) {
4417
+ function AutoTable({ schema, data, getRowId, expandedRow, pageCount = 1, pagination, total, overrides, classNames, enableRowSelection = true, exclude, filterOnly, actions, pinnedColumns, filterMode, search = false, onDeleteSelected, onUpdateSelected, batchUpdateFields, actionBarExtra, actionBarActions, deleteConfirmation, initialSorting, enableExport = true, showDefaultExport = true, onSelectedCountChange, onSelectedRowsChange, getSelectedRows }) {
4418
+ if (expandedRow && !getRowId) throw new Error("AutoTable requires getRowId when expandedRow is provided.");
4419
+ const enableExpansion = !!expandedRow;
4408
4420
  const modes = filterMode ? Array.isArray(filterMode) ? filterMode : [filterMode] : DEFAULT_MODES;
4409
4421
  const [currentMode, setCurrentMode] = useQueryState("filterMode", parseAsStringEnum(modes).withDefault(modes[0] ?? "simple"));
4410
4422
  const showToggle = modes.length > 1;
@@ -4418,7 +4430,7 @@ function AutoTable({ schema, data, pageCount = 1, pagination, total, overrides,
4418
4430
  });
4419
4431
  const searchConfig = search && typeof search === "object" ? search : {};
4420
4432
  const enableAdvancedFilter = true;
4421
- const columns = useMemo(() => {
4433
+ const { columns, expandColumnId } = useMemo(() => {
4422
4434
  const columnOverrides = Object.assign({}, overrides);
4423
4435
  for (const key of filterOnly ?? []) {
4424
4436
  const field = key;
@@ -4439,12 +4451,39 @@ function AutoTable({ schema, data, pageCount = 1, pagination, total, overrides,
4439
4451
  } : column;
4440
4452
  });
4441
4453
  const result = enableRowSelection ? [createSelectColumn(), ...dataColumns] : dataColumns;
4454
+ let expandColumnId$1 = "expand";
4455
+ if (enableExpansion) {
4456
+ while (expandColumnId$1 in schema.shape || result.some((column) => column.id === expandColumnId$1)) expandColumnId$1 = `_${expandColumnId$1}`;
4457
+ result.unshift({
4458
+ id: expandColumnId$1,
4459
+ header: () => /* @__PURE__ */ jsx("span", {
4460
+ className: "sr-only",
4461
+ children: "Row details"
4462
+ }),
4463
+ cell: ({ row }) => /* @__PURE__ */ jsx(Button, {
4464
+ type: "button",
4465
+ variant: "ghost",
4466
+ size: "icon-sm",
4467
+ "aria-label": row.getIsExpanded() ? "Collapse row" : "Expand row",
4468
+ "aria-expanded": row.getIsExpanded(),
4469
+ onClick: row.getToggleExpandedHandler(),
4470
+ children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: row.getIsExpanded() ? "size-4 rotate-90" : "size-4" })
4471
+ }),
4472
+ enableHiding: false,
4473
+ enableSorting: false,
4474
+ size: 40
4475
+ });
4476
+ }
4442
4477
  if (actions) result.push(createActionsColumn(actions));
4443
- return result;
4478
+ return {
4479
+ columns: result,
4480
+ expandColumnId: expandColumnId$1
4481
+ };
4444
4482
  }, [
4445
4483
  schema,
4446
4484
  overrides,
4447
4485
  enableRowSelection,
4486
+ enableExpansion,
4448
4487
  exclude,
4449
4488
  actions,
4450
4489
  filterOnly
@@ -4452,18 +4491,24 @@ function AutoTable({ schema, data, pageCount = 1, pagination, total, overrides,
4452
4491
  const stableInitialState = useMemo(() => ({
4453
4492
  sorting: initialSorting,
4454
4493
  columnPinning: pinnedColumns ?? {
4455
- left: enableRowSelection ? ["select"] : [],
4494
+ left: [...enableExpansion ? [expandColumnId] : [], ...enableRowSelection ? ["select"] : []],
4456
4495
  right: actions ? ["actions"] : []
4457
4496
  }
4458
4497
  }), [
4459
4498
  initialSorting,
4460
4499
  pinnedColumns,
4461
4500
  enableRowSelection,
4501
+ enableExpansion,
4502
+ expandColumnId,
4462
4503
  actions
4463
4504
  ]);
4505
+ const expandedRowModel = useMemo(() => getExpandedRowModel(), []);
4464
4506
  const { table, shallow, debounceMs, throttleMs } = useDataTable({
4465
4507
  data,
4466
4508
  columns,
4509
+ getRowId,
4510
+ getRowCanExpand: () => enableExpansion,
4511
+ getExpandedRowModel: enableExpansion ? expandedRowModel : void 0,
4467
4512
  pageCount,
4468
4513
  ...total !== void 0 ? { rowCount: total } : {},
4469
4514
  enableAdvancedFilter,
@@ -4595,7 +4640,8 @@ function AutoTable({ schema, data, pageCount = 1, pagination, total, overrides,
4595
4640
  /* @__PURE__ */ jsx(DataTable, {
4596
4641
  pagination,
4597
4642
  table,
4598
- classNames
4643
+ classNames,
4644
+ expandedRow
4599
4645
  }),
4600
4646
  enableRowSelection && /* @__PURE__ */ jsx(AutoTableActionBar, {
4601
4647
  table,
@@ -6041,7 +6087,7 @@ function ImportDialog({ open, onOpenChange, onImport, columns = [], title, local
6041
6087
  ] })] }), /* @__PURE__ */ jsxs("div", {
6042
6088
  className: "space-y-4",
6043
6089
  children: [
6044
- step === "upload" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
6090
+ step === "upload" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
6045
6091
  className: `border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors ${isDragging ? "border-primary bg-primary/5" : "border-muted-foreground/25 hover:border-muted-foreground/50"}`,
6046
6092
  onDragOver: (e) => {
6047
6093
  e.preventDefault();
@@ -6089,7 +6135,7 @@ function ImportDialog({ open, onOpenChange, onImport, columns = [], title, local
6089
6135
  onClick: handleDownloadTemplate,
6090
6136
  children: locale.downloadTemplate
6091
6137
  })] }),
6092
- step === "preview" && parsedData && /* @__PURE__ */ jsxs(Fragment, { children: [
6138
+ step === "preview" && parsedData && /* @__PURE__ */ jsxs(Fragment$1, { children: [
6093
6139
  /* @__PURE__ */ jsx("div", {
6094
6140
  className: "rounded-md border",
6095
6141
  children: /* @__PURE__ */ jsx("div", {
@@ -6144,7 +6190,7 @@ function ImportDialog({ open, onOpenChange, onImport, columns = [], title, local
6144
6190
  children: locale.importingRows(parsedData?.rows.length ?? 0)
6145
6191
  })]
6146
6192
  }),
6147
- step === "result" && result && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
6193
+ step === "result" && result && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
6148
6194
  className: "space-y-3",
6149
6195
  children: [/* @__PURE__ */ jsxs("div", {
6150
6196
  className: "flex gap-4",
@@ -7538,7 +7584,7 @@ function AutoCrudTable({ id, title, description, schema, resource, fields, table
7538
7584
  return {
7539
7585
  ...action$1,
7540
7586
  onClick: (_rows, { table }) => {
7541
- const headers = table.getAllLeafColumns().map((column) => column.id).filter((key) => key !== "select" && key !== "actions" && !denyFields?.includes(key));
7587
+ const headers = getExportColumnIds(table).filter((key) => key !== "select" && key !== "actions" && !denyFields?.includes(key));
7542
7588
  exportAllToCSV(table.getFilteredSelectedRowModel().rows.map((row) => formatExportRow(row.original, resolvedFields, Object.fromEntries(headers.map((key) => [key, row.getValue(key)])))), {
7543
7589
  filename: "table",
7544
7590
  headers
@@ -7798,6 +7844,8 @@ function AutoCrudTable({ id, title, description, schema, resource, fields, table
7798
7844
  ...pagination
7799
7845
  } : void 0,
7800
7846
  ...resource.tableData.total !== void 0 ? { total: resource.tableData.total } : {},
7847
+ getRowId: tableConfig?.getRowId,
7848
+ expandedRow: tableConfig?.expandedRow,
7801
7849
  overrides: tableOverrides,
7802
7850
  classNames: tableConfig?.classNames,
7803
7851
  exclude: hiddenColumns.filter((key) => !filterOnly.includes(key)),
@@ -8009,7 +8057,7 @@ function DataTableFacetedFilter({ column, title, options, multiple }) {
8009
8057
  children: /* @__PURE__ */ jsx(XCircle, {})
8010
8058
  }) : /* @__PURE__ */ jsx(PlusCircle, {}),
8011
8059
  title,
8012
- selectedValues$1.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
8060
+ selectedValues$1.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
8013
8061
  /* @__PURE__ */ jsx(Separator, {
8014
8062
  orientation: "vertical",
8015
8063
  className: "mx-0.5 data-[orientation=vertical]:h-4"
@@ -8168,7 +8216,7 @@ function DataTableDateFilter({ column, title, multiple }) {
8168
8216
  const dateText$1 = hasSelectedDates ? formatDateRange(selectedDates) : "Select date range";
8169
8217
  return /* @__PURE__ */ jsxs("span", {
8170
8218
  className: "flex items-center gap-2",
8171
- children: [/* @__PURE__ */ jsx("span", { children: title }), hasSelectedDates && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Separator, {
8219
+ children: [/* @__PURE__ */ jsx("span", { children: title }), hasSelectedDates && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Separator, {
8172
8220
  orientation: "vertical",
8173
8221
  className: "mx-0.5 data-[orientation=vertical]:h-4"
8174
8222
  }), /* @__PURE__ */ jsx("span", { children: dateText$1 })] })]
@@ -8179,7 +8227,7 @@ function DataTableDateFilter({ column, title, multiple }) {
8179
8227
  const dateText = hasSelectedDate ? formatDate$1(selectedDates[0]) : "Select date";
8180
8228
  return /* @__PURE__ */ jsxs("span", {
8181
8229
  className: "flex items-center gap-2",
8182
- children: [/* @__PURE__ */ jsx("span", { children: title }), hasSelectedDate && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Separator, {
8230
+ children: [/* @__PURE__ */ jsx("span", { children: title }), hasSelectedDate && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Separator, {
8183
8231
  orientation: "vertical",
8184
8232
  className: "mx-0.5 data-[orientation=vertical]:h-4"
8185
8233
  }), /* @__PURE__ */ jsx("span", { children: dateText })] })]
@@ -8335,7 +8383,7 @@ function DataTableSliderFilter({ column, title }) {
8335
8383
  children: /* @__PURE__ */ jsx(XCircle, {})
8336
8384
  }) : /* @__PURE__ */ jsx(PlusCircle, {}),
8337
8385
  /* @__PURE__ */ jsx("span", { children: title }),
8338
- columnFilterValue ? /* @__PURE__ */ jsxs(Fragment, { children: [
8386
+ columnFilterValue ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
8339
8387
  /* @__PURE__ */ jsx(Separator, {
8340
8388
  orientation: "vertical",
8341
8389
  className: "mx-0.5 data-[orientation=vertical]:h-4"
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@wordrhyme/auto-crud",
3
3
  "type": "module",
4
- "version": "1.9.0",
4
+ "version": "1.10.0",
5
5
  "description": "Schema-first CRUD components with auto-generated tables and forms",
6
6
  "author": "wordrhyme",
7
7
  "license": "MIT",
@@ -70,9 +70,9 @@
70
70
  "nanoid": "^5.1.6",
71
71
  "tailwind-merge": "^3.5.0",
72
72
  "vaul": "^1.1.2",
73
- "@wordrhyme/shadcn": "2.0.1",
73
+ "@wordrhyme/formily-shadcn": "2.1.1",
74
74
  "@wordrhyme/shadcn-ui": "2.1.1",
75
- "@wordrhyme/formily-shadcn": "2.1.1"
75
+ "@wordrhyme/shadcn": "2.0.1"
76
76
  },
77
77
  "devDependencies": {
78
78
  "@storybook/react": "^8.6.18",
@@ -93,11 +93,11 @@
93
93
  "tsdown": "^0.15.12",
94
94
  "typescript": "^5.9.3",
95
95
  "vitest": "^3.2.4",
96
+ "@internal/eslint-config": "0.3.0",
96
97
  "@internal/prettier-config": "0.0.1",
97
- "@internal/tsdown-config": "0.1.0",
98
- "@internal/tsconfig": "0.1.0",
99
98
  "@internal/vitest-config": "0.1.0",
100
- "@internal/eslint-config": "0.3.0"
99
+ "@internal/tsdown-config": "0.1.0",
100
+ "@internal/tsconfig": "0.1.0"
101
101
  },
102
102
  "prettier": "@internal/prettier-config",
103
103
  "scripts": {