@datum-cloud/datum-ui 1.1.0 → 1.2.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/dist/components/features/grouped-table/components/grouped-toolbar.d.ts.map +1 -1
- package/dist/components/features/grouped-table/grouped-table.d.ts.map +1 -1
- package/dist/components/features/grouped-table/types.d.ts +18 -1
- package/dist/components/features/grouped-table/types.d.ts.map +1 -1
- package/dist/grouped-table/index.mjs +34 -21
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grouped-toolbar.d.ts","sourceRoot":"","sources":["../../../../../src/components/features/grouped-table/components/grouped-toolbar.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"grouped-toolbar.d.ts","sourceRoot":"","sources":["../../../../../src/components/features/grouped-table/components/grouped-toolbar.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,MAAM,CAAA;IACd,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,cAAc,EACd,WAAyB,EACzB,UAAgC,EAChC,SAAS,GACV,EAAE,mBAAmB,+BA0BrB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grouped-table.d.ts","sourceRoot":"","sources":["../../../../src/components/features/grouped-table/grouped-table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"grouped-table.d.ts","sourceRoot":"","sources":["../../../../src/components/features/grouped-table/grouped-table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAoDhD,wBAAgB,YAAY,CAAC,KAAK,EAAE,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,+BAyLlE"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ColumnDef, RowSelectionState, SortingState } from '@tanstack/react-table';
|
|
1
|
+
import type { Cell, ColumnDef, Row, RowSelectionState, SortingState } from '@tanstack/react-table';
|
|
2
2
|
import type { ReactNode } from 'react';
|
|
3
3
|
import type { SelectionColumnOptions } from '../data-table/types';
|
|
4
4
|
import type { ActionItem } from '../more-actions/types';
|
|
@@ -52,6 +52,23 @@ export interface GroupedTableProps<TData> {
|
|
|
52
52
|
isLoading?: boolean;
|
|
53
53
|
/** Rendered when there are no groups, every group is empty, or search clears everything. */
|
|
54
54
|
empty?: ReactNode;
|
|
55
|
+
/** Root wrapper. */
|
|
55
56
|
className?: string;
|
|
57
|
+
/** Search toolbar wrapper (when `enableSearch`). */
|
|
58
|
+
toolbarClassName?: string;
|
|
59
|
+
/** Every `<table>` element (shared header + each group body). */
|
|
60
|
+
tableClassName?: string;
|
|
61
|
+
/** The column-header `<tr>`. */
|
|
62
|
+
headerRowClassName?: string;
|
|
63
|
+
/** Each column-header `<th>`. */
|
|
64
|
+
headerCellClassName?: string;
|
|
65
|
+
/** Each group's collapsible header band; receives the group for per-group styling. */
|
|
66
|
+
groupHeaderClassName?: string | ((group: GroupedTableGroup<TData>) => string);
|
|
67
|
+
/** Each group's `<tbody>`. */
|
|
68
|
+
bodyClassName?: string;
|
|
69
|
+
/** Each data `<tr>`; receives the row for per-row styling. */
|
|
70
|
+
rowClassName?: string | ((row: Row<TData>) => string);
|
|
71
|
+
/** Each data `<td>`; receives the cell for per-cell styling. */
|
|
72
|
+
cellClassName?: string | ((cell: Cell<TData, unknown>) => string);
|
|
56
73
|
}
|
|
57
74
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/features/grouped-table/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/features/grouped-table/types.ts"],"names":[],"mappings":"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"}
|
|
@@ -44,14 +44,13 @@ function GroupedToolbar({ search, onSearchChange, placeholder = "Search...", deb
|
|
|
44
44
|
onSearchChange
|
|
45
45
|
]);
|
|
46
46
|
return /* @__PURE__ */ jsx("div", {
|
|
47
|
-
className: "pb-3",
|
|
47
|
+
className: cn("pb-3", className),
|
|
48
48
|
"data-slot": "gt-toolbar",
|
|
49
49
|
children: /* @__PURE__ */ jsx(Input, {
|
|
50
50
|
placeholder,
|
|
51
51
|
value,
|
|
52
52
|
onChange: (e) => setValue(e.target.value),
|
|
53
53
|
"aria-label": placeholder,
|
|
54
|
-
className,
|
|
55
54
|
"data-slot": "gt-search"
|
|
56
55
|
})
|
|
57
56
|
});
|
|
@@ -210,8 +209,12 @@ function trackMinWidth(resolvedColumns) {
|
|
|
210
209
|
function renderColGroup(resolvedColumns) {
|
|
211
210
|
return /* @__PURE__ */ jsx("colgroup", { children: resolvedColumns.map((col, i) => /* @__PURE__ */ jsx("col", { style: { width: columnWidth(col) } }, `col-${i}`)) });
|
|
212
211
|
}
|
|
212
|
+
/** Resolve a static or per-item className override (mirrors data-table). */
|
|
213
|
+
function resolveClassName(value, item) {
|
|
214
|
+
return typeof value === "function" ? value(item) : value;
|
|
215
|
+
}
|
|
213
216
|
function GroupedTable(props) {
|
|
214
|
-
const { columns, groups, defaultExpanded, expanded, onExpandedChange, getRowId, enableRowSelection, rowSelection: rowSelectionProp, onRowSelectionChange, rowActions, rowActionsSheetTitle, enableSorting, sorting: sortingProp, onSortingChange, enableSearch, searchPlaceholder, searchableColumns, searchFn, search: searchProp, onSearchChange, searchDebounceMs, isLoading, empty, className } = props;
|
|
217
|
+
const { columns, groups, defaultExpanded, expanded, onExpandedChange, getRowId, enableRowSelection, rowSelection: rowSelectionProp, onRowSelectionChange, rowActions, rowActionsSheetTitle, enableSorting, sorting: sortingProp, onSortingChange, enableSearch, searchPlaceholder, searchableColumns, searchFn, search: searchProp, onSearchChange, searchDebounceMs, isLoading, empty, className, toolbarClassName, tableClassName, headerRowClassName, headerCellClassName, groupHeaderClassName, bodyClassName, rowClassName, cellClassName } = props;
|
|
215
218
|
const [sorting, setSorting] = useControllableState(sortingProp, [], onSortingChange);
|
|
216
219
|
const [rowSelection, setRowSelection] = useControllableState(rowSelectionProp, {}, onRowSelectionChange);
|
|
217
220
|
const [search, setSearch] = useControllableState(searchProp, "", onSearchChange);
|
|
@@ -266,6 +269,7 @@ function GroupedTable(props) {
|
|
|
266
269
|
filteredRows
|
|
267
270
|
]);
|
|
268
271
|
const slices = useMemo(() => groups.map((g) => ({
|
|
272
|
+
group: g,
|
|
269
273
|
id: g.id,
|
|
270
274
|
title: g.title,
|
|
271
275
|
meta: g.meta,
|
|
@@ -282,7 +286,8 @@ function GroupedTable(props) {
|
|
|
282
286
|
search,
|
|
283
287
|
onSearchChange: setSearch,
|
|
284
288
|
placeholder: searchPlaceholder,
|
|
285
|
-
debounceMs: searchDebounceMs
|
|
289
|
+
debounceMs: searchDebounceMs,
|
|
290
|
+
className: toolbarClassName
|
|
286
291
|
}), /* @__PURE__ */ jsx("div", {
|
|
287
292
|
className: cn("w-full rounded-md border", scrollable ? "overflow-x-auto" : "overflow-hidden"),
|
|
288
293
|
children: scrollable ? /* @__PURE__ */ jsx("div", {
|
|
@@ -294,42 +299,50 @@ function GroupedTable(props) {
|
|
|
294
299
|
if (isLoading) return renderShell(/* @__PURE__ */ jsx(GroupedSkeleton, { columns: resolvedColumns.length }), false);
|
|
295
300
|
if (flatData.length === 0 || isSearching && visibleSlices.length === 0) return renderShell(empty ?? null, false);
|
|
296
301
|
return renderShell(/* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("table", {
|
|
297
|
-
className: "w-full table-fixed text-sm",
|
|
298
|
-
children: [renderColGroup(resolvedColumns), /* @__PURE__ */ jsx(TableHeader, { children: headerGroups.map((hg) => /* @__PURE__ */ jsx(TableRow, {
|
|
299
|
-
|
|
300
|
-
children: header
|
|
301
|
-
|
|
302
|
-
|
|
302
|
+
className: cn("w-full table-fixed text-sm", tableClassName),
|
|
303
|
+
children: [renderColGroup(resolvedColumns), /* @__PURE__ */ jsx(TableHeader, { children: headerGroups.map((hg) => /* @__PURE__ */ jsx(TableRow, {
|
|
304
|
+
className: headerRowClassName,
|
|
305
|
+
children: hg.headers.map((header) => /* @__PURE__ */ jsx(TableHead, {
|
|
306
|
+
scope: "col",
|
|
307
|
+
className: headerCellClassName,
|
|
308
|
+
children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
|
|
309
|
+
}, header.id))
|
|
310
|
+
}, hg.id)) })]
|
|
311
|
+
}), visibleSlices.map((slice) => {
|
|
303
312
|
const open = isSearching ? true : isOpen(slice.id);
|
|
304
313
|
return /* @__PURE__ */ jsxs(Collapsible, {
|
|
305
314
|
open,
|
|
306
315
|
onOpenChange: () => toggle(slice.id),
|
|
307
316
|
children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
|
|
308
|
-
className: cn("flex w-full items-center gap-2 bg-muted/40 px-
|
|
317
|
+
className: cn("flex h-10 w-full items-center gap-2 border-b bg-muted/40 px-2 text-left align-middle text-sm font-medium text-muted-foreground transition-colors hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", resolveClassName(groupHeaderClassName, slice.group)),
|
|
309
318
|
children: [
|
|
310
319
|
/* @__PURE__ */ jsx(Icon, {
|
|
311
320
|
icon: ChevronRight,
|
|
312
321
|
"aria-hidden": true,
|
|
313
|
-
className: cn("size-4 shrink-0
|
|
322
|
+
className: cn("size-4 shrink-0 transition-transform", open && "rotate-90")
|
|
314
323
|
}),
|
|
315
324
|
/* @__PURE__ */ jsx("span", { children: slice.title }),
|
|
316
325
|
slice.meta != null && /* @__PURE__ */ jsx("span", {
|
|
317
|
-
className: "ml-auto flex items-center gap-2 font-medium
|
|
326
|
+
className: "ml-auto flex items-center gap-2 font-medium",
|
|
318
327
|
children: slice.meta
|
|
319
328
|
})
|
|
320
329
|
]
|
|
321
330
|
}), /* @__PURE__ */ jsx(CollapsibleContent, {
|
|
322
331
|
className: "overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down",
|
|
323
332
|
children: /* @__PURE__ */ jsxs("table", {
|
|
324
|
-
className: "w-full table-fixed
|
|
333
|
+
className: cn("w-full table-fixed text-sm", tableClassName),
|
|
325
334
|
"aria-label": typeof slice.title === "string" ? slice.title : void 0,
|
|
326
|
-
children: [renderColGroup(resolvedColumns), /* @__PURE__ */ jsx(TableBody, {
|
|
327
|
-
|
|
328
|
-
children:
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
335
|
+
children: [renderColGroup(resolvedColumns), /* @__PURE__ */ jsx(TableBody, {
|
|
336
|
+
className: bodyClassName,
|
|
337
|
+
children: slice.rows.map((row) => /* @__PURE__ */ jsx(TableRow, {
|
|
338
|
+
"data-state": row.getIsSelected() ? "selected" : void 0,
|
|
339
|
+
className: resolveClassName(rowClassName, row),
|
|
340
|
+
children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, {
|
|
341
|
+
className: resolveClassName(cellClassName, cell),
|
|
342
|
+
children: flexRender(cell.column.columnDef.cell, cell.getContext())
|
|
343
|
+
}, cell.id))
|
|
344
|
+
}, row.id))
|
|
345
|
+
})]
|
|
333
346
|
})
|
|
334
347
|
})]
|
|
335
348
|
}, slice.id);
|