@devalok/shilp-sutra 0.30.0 → 0.32.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 +82 -239
- package/dist/_chunks/badge-group.js +123 -171
- package/dist/_chunks/document-preview.js +92 -0
- package/dist/_chunks/file-preview.js +511 -0
- package/dist/_chunks/image-preview.js +90 -0
- package/dist/_chunks/primitives.js +109 -109
- package/dist/_chunks/stat-row.js +144 -124
- package/dist/_chunks/use-calendar.js +558 -490
- package/dist/ai/block-renderer.d.ts +2 -1
- package/dist/ai/block-renderer.d.ts.map +1 -1
- package/dist/ai/block-renderer.js +30 -29
- package/dist/ai/blocks/block-table.d.ts.map +1 -1
- package/dist/ai/blocks/confirm.d.ts.map +1 -1
- package/dist/ai/blocks/divider.d.ts.map +1 -1
- package/dist/ai/blocks/error.d.ts.map +1 -1
- package/dist/ai/blocks/info.d.ts.map +1 -1
- package/dist/ai/blocks/loading.d.ts.map +1 -1
- package/dist/ai/blocks/stat-row.d.ts.map +1 -1
- package/dist/ai/blocks/success.d.ts.map +1 -1
- package/dist/ai/blocks/text.d.ts.map +1 -1
- package/dist/ai/command-bar.d.ts +18 -0
- package/dist/ai/command-bar.d.ts.map +1 -1
- package/dist/ai/command-bar.js +126 -125
- package/dist/ai/conversation.d.ts +13 -1
- package/dist/ai/conversation.d.ts.map +1 -1
- package/dist/ai/conversation.js +78 -78
- package/dist/ai/types.d.ts +0 -1
- package/dist/ai/types.d.ts.map +1 -1
- package/dist/ai/types.js +1 -0
- package/dist/composed/bulk-action-bar.d.ts +6 -4
- package/dist/composed/bulk-action-bar.d.ts.map +1 -1
- package/dist/composed/bulk-action-bar.js +102 -58
- package/dist/composed/command-palette.d.ts +9 -0
- package/dist/composed/command-palette.d.ts.map +1 -1
- package/dist/composed/command-palette.js +68 -68
- package/dist/composed/confirm-dialog.d.ts +1 -1
- package/dist/composed/confirm-dialog.d.ts.map +1 -1
- package/dist/composed/confirm-dialog.js +10 -10
- package/dist/composed/content-card.d.ts.map +1 -1
- package/dist/composed/date-picker/date-picker.d.ts +11 -1
- package/dist/composed/date-picker/date-picker.d.ts.map +1 -1
- package/dist/composed/date-picker/month-picker.d.ts.map +1 -1
- package/dist/composed/date-picker/year-picker.d.ts.map +1 -1
- package/dist/composed/deadline-indicator.d.ts +1 -1
- package/dist/composed/deadline-indicator.d.ts.map +1 -1
- package/dist/composed/deadline-indicator.js +39 -36
- package/dist/composed/emoji-picker.d.ts +6 -0
- package/dist/composed/emoji-picker.d.ts.map +1 -1
- package/dist/composed/emoji-picker.js +22 -20
- package/dist/composed/error-boundary.d.ts +21 -1
- package/dist/composed/error-boundary.d.ts.map +1 -1
- package/dist/composed/error-boundary.js +47 -32
- package/dist/composed/file-preview/audio-preview.d.ts +7 -0
- package/dist/composed/file-preview/audio-preview.d.ts.map +1 -0
- package/dist/composed/file-preview/document-preview.d.ts +7 -0
- package/dist/composed/file-preview/document-preview.d.ts.map +1 -0
- package/dist/composed/file-preview/embed-preview.d.ts +7 -0
- package/dist/composed/file-preview/embed-preview.d.ts.map +1 -0
- package/dist/composed/file-preview/image-preview.d.ts +7 -0
- package/dist/composed/file-preview/image-preview.d.ts.map +1 -0
- package/dist/composed/file-preview/shared.d.ts +20 -0
- package/dist/composed/file-preview/shared.d.ts.map +1 -0
- package/dist/composed/file-preview/video-preview.d.ts +6 -0
- package/dist/composed/file-preview/video-preview.d.ts.map +1 -0
- package/dist/composed/file-preview.d.ts.map +1 -1
- package/dist/composed/file-preview.js +10 -662
- package/dist/composed/filter-bar.d.ts +10 -2
- package/dist/composed/filter-bar.d.ts.map +1 -1
- package/dist/composed/filter-bar.js +42 -43
- package/dist/composed/form-section.d.ts +1 -1
- package/dist/composed/form-section.d.ts.map +1 -1
- package/dist/composed/form-section.js +22 -21
- package/dist/composed/index.d.ts +2 -2
- package/dist/composed/index.d.ts.map +1 -1
- package/dist/composed/index.js +58 -57
- package/dist/composed/inline-edit.d.ts +1 -1
- package/dist/composed/inline-edit.d.ts.map +1 -1
- package/dist/composed/inline-edit.js +33 -32
- package/dist/composed/lib/string-utils.d.ts.map +1 -1
- package/dist/composed/loading-skeleton.d.ts.map +1 -1
- package/dist/composed/markdown-viewer.d.ts +1 -1
- package/dist/composed/markdown-viewer.d.ts.map +1 -1
- package/dist/composed/markdown-viewer.js +60 -59
- package/dist/composed/master-detail.d.ts +11 -7
- package/dist/composed/master-detail.d.ts.map +1 -1
- package/dist/composed/master-detail.js +123 -84
- package/dist/composed/page-header.d.ts.map +1 -1
- package/dist/composed/page-skeletons.d.ts.map +1 -1
- package/dist/composed/priority-indicator.d.ts +1 -0
- package/dist/composed/priority-indicator.js +1 -0
- package/dist/composed/responsive-overlay.d.ts +8 -0
- package/dist/composed/responsive-overlay.d.ts.map +1 -1
- package/dist/composed/rich-text-editor.d.ts +11 -3
- package/dist/composed/rich-text-editor.d.ts.map +1 -1
- package/dist/composed/rich-text-editor.js +21 -20
- package/dist/composed/schedule-view.d.ts +9 -1
- package/dist/composed/schedule-view.d.ts.map +1 -1
- package/dist/hooks/index.d.ts +2 -0
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +8 -4
- package/dist/hooks/use-touch-device.d.ts +12 -0
- package/dist/hooks/use-touch-device.d.ts.map +1 -0
- package/dist/hooks/use-touch-device.js +13 -0
- package/dist/hooks/use-viewport-height.d.ts +11 -0
- package/dist/hooks/use-viewport-height.d.ts.map +1 -0
- package/dist/hooks/use-viewport-height.js +16 -0
- package/dist/shell/bottom-navbar.d.ts.map +1 -1
- package/dist/shell/bottom-navbar.js +72 -63
- package/dist/shell/command-registry.d.ts.map +1 -1
- package/dist/shell/notification-center.d.ts.map +1 -1
- package/dist/shell/notification-center.js +77 -77
- package/dist/shell/top-bar.d.ts +2 -2
- package/dist/shell/top-bar.d.ts.map +1 -1
- package/dist/shell/top-bar.js +61 -60
- package/dist/tailwind/index.cjs +51 -7
- package/dist/tailwind/preset.d.ts.map +1 -1
- package/dist/tailwind/preset.js +51 -7
- package/dist/tokens/primitives.css +3 -1
- package/dist/tokens/semantic.css +16 -13
- package/dist/tokens/typography.css +33 -4
- package/dist/ui/alert.d.ts +1 -0
- package/dist/ui/alert.d.ts.map +1 -1
- package/dist/ui/alert.js +42 -37
- package/dist/ui/autocomplete.d.ts.map +1 -1
- package/dist/ui/autocomplete.js +38 -39
- package/dist/ui/badge.d.ts +110 -2
- package/dist/ui/badge.d.ts.map +1 -1
- package/dist/ui/banner.d.ts.map +1 -1
- package/dist/ui/banner.js +8 -7
- package/dist/ui/button.d.ts +2 -2
- package/dist/ui/button.d.ts.map +1 -1
- package/dist/ui/button.js +54 -74
- package/dist/ui/card.d.ts +5 -1
- package/dist/ui/card.d.ts.map +1 -1
- package/dist/ui/card.js +111 -79
- package/dist/ui/charts/area-chart.d.ts +2 -0
- package/dist/ui/charts/area-chart.d.ts.map +1 -1
- package/dist/ui/charts/bar-chart.d.ts +2 -0
- package/dist/ui/charts/bar-chart.d.ts.map +1 -1
- package/dist/ui/charts/chart-container.d.ts +2 -0
- package/dist/ui/charts/chart-container.d.ts.map +1 -1
- package/dist/ui/charts/index.js +583 -577
- package/dist/ui/charts/line-chart.d.ts +2 -0
- package/dist/ui/charts/line-chart.d.ts.map +1 -1
- package/dist/ui/charts/pie-chart.d.ts +2 -0
- package/dist/ui/charts/pie-chart.d.ts.map +1 -1
- package/dist/ui/charts/radar-chart.d.ts +2 -0
- package/dist/ui/charts/radar-chart.d.ts.map +1 -1
- package/dist/ui/checkbox.d.ts +2 -0
- package/dist/ui/checkbox.d.ts.map +1 -1
- package/dist/ui/checkbox.js +36 -27
- package/dist/ui/code.d.ts.map +1 -1
- package/dist/ui/color-input.js +5 -5
- package/dist/ui/combobox.d.ts +6 -1
- package/dist/ui/combobox.d.ts.map +1 -1
- package/dist/ui/combobox.js +1 -1
- package/dist/ui/container.d.ts.map +1 -1
- package/dist/ui/context-menu.js +1 -1
- package/dist/ui/data-table-body.d.ts +12 -0
- package/dist/ui/data-table-body.d.ts.map +1 -0
- package/dist/ui/data-table-body.js +219 -0
- package/dist/ui/data-table-bulk-actions.d.ts +19 -0
- package/dist/ui/data-table-bulk-actions.d.ts.map +1 -0
- package/dist/ui/data-table-bulk-actions.js +61 -0
- package/dist/ui/data-table-card.d.ts +9 -0
- package/dist/ui/data-table-card.d.ts.map +1 -0
- package/dist/ui/data-table-card.js +73 -0
- package/dist/ui/data-table-context.d.ts +62 -0
- package/dist/ui/data-table-context.d.ts.map +1 -0
- package/dist/ui/data-table-context.js +48 -0
- package/dist/ui/data-table-header.d.ts +10 -0
- package/dist/ui/data-table-header.d.ts.map +1 -0
- package/dist/ui/data-table-header.js +141 -0
- package/dist/ui/data-table-pagination.d.ts +13 -0
- package/dist/ui/data-table-pagination.d.ts.map +1 -0
- package/dist/ui/data-table-pagination.js +84 -0
- package/dist/ui/data-table.d.ts +11 -9
- package/dist/ui/data-table.d.ts.map +1 -1
- package/dist/ui/data-table.js +258 -573
- package/dist/ui/dialog.d.ts +6 -2
- package/dist/ui/dialog.d.ts.map +1 -1
- package/dist/ui/dialog.js +84 -82
- package/dist/ui/dropdown-menu.js +1 -1
- package/dist/ui/hover-card.d.ts +7 -0
- package/dist/ui/hover-card.d.ts.map +1 -1
- package/dist/ui/hover-card.js +3 -3
- package/dist/ui/icon-group.d.ts +2 -4
- package/dist/ui/icon-group.d.ts.map +1 -1
- package/dist/ui/icon-group.js +22 -23
- package/dist/ui/index.d.ts +1 -2
- package/dist/ui/index.d.ts.map +1 -1
- package/dist/ui/index.js +94 -99
- package/dist/ui/label.js +1 -1
- package/dist/ui/lib/bottom-sheet.d.ts +16 -0
- package/dist/ui/lib/bottom-sheet.d.ts.map +1 -0
- package/dist/ui/lib/date-utils.d.ts.map +1 -1
- package/dist/ui/lib/motion.d.ts.map +1 -1
- package/dist/ui/lib/utils.d.ts.map +1 -1
- package/dist/ui/menubar.d.ts.map +1 -1
- package/dist/ui/menubar.js +64 -73
- package/dist/ui/navigation-menu.d.ts.map +1 -1
- package/dist/ui/navigation-menu.js +40 -44
- package/dist/ui/number-input.d.ts.map +1 -1
- package/dist/ui/number-input.js +19 -17
- package/dist/ui/popover.d.ts.map +1 -1
- package/dist/ui/popover.js +107 -32
- package/dist/ui/progress-ring.d.ts.map +1 -1
- package/dist/ui/progress-ring.js +80 -80
- package/dist/ui/progress.js +4 -4
- package/dist/ui/radio.d.ts +5 -2
- package/dist/ui/radio.d.ts.map +1 -1
- package/dist/ui/radio.js +29 -20
- package/dist/ui/search-input.d.ts.map +1 -1
- package/dist/ui/search-input.js +13 -12
- package/dist/ui/segmented-control.d.ts +6 -108
- package/dist/ui/segmented-control.d.ts.map +1 -1
- package/dist/ui/segmented-control.js +86 -272
- package/dist/ui/select.d.ts +3 -1
- package/dist/ui/select.d.ts.map +1 -1
- package/dist/ui/select.js +83 -71
- package/dist/ui/separator.js +5 -5
- package/dist/ui/sheet.d.ts +2 -0
- package/dist/ui/sheet.d.ts.map +1 -1
- package/dist/ui/sheet.js +102 -84
- package/dist/ui/sidebar.d.ts.map +1 -1
- package/dist/ui/sidebar.js +200 -175
- package/dist/ui/skeleton.d.ts.map +1 -1
- package/dist/ui/slider.js +14 -14
- package/dist/ui/stack.d.ts.map +1 -1
- package/dist/ui/status-dot.js +8 -8
- package/dist/ui/stepper.d.ts.map +1 -1
- package/dist/ui/stepper.js +33 -31
- package/dist/ui/switch.js +3 -3
- package/dist/ui/table.d.ts.map +1 -1
- package/dist/ui/tabs.d.ts +7 -0
- package/dist/ui/tabs.d.ts.map +1 -1
- package/dist/ui/tabs.js +102 -76
- package/dist/ui/text.d.ts.map +1 -1
- package/dist/ui/toast-types.d.ts +0 -1
- package/dist/ui/toast-types.d.ts.map +1 -1
- package/dist/ui/toast-types.js +0 -1
- package/dist/ui/toast.d.ts.map +1 -1
- package/dist/ui/toast.js +156 -150
- package/dist/ui/toggle-group.js +1 -1
- package/dist/ui/toggle.js +1 -1
- package/dist/ui/tooltip.js +3 -3
- package/dist/ui/visually-hidden.d.ts.map +1 -1
- package/docs/components/ui/alert.md +3 -0
- package/docs/components/ui/badge.md +3 -0
- package/docs/components/ui/card.md +4 -0
- package/docs/components/ui/data-table-body.md +13 -0
- package/docs/components/ui/data-table-bulk-actions.md +13 -0
- package/docs/components/ui/data-table-card.md +13 -0
- package/docs/components/ui/data-table-context.md +13 -0
- package/docs/components/ui/data-table-header.md +13 -0
- package/docs/components/ui/data-table-pagination.md +13 -0
- package/docs/components/ui/select.md +4 -0
- package/docs/components/ui/tabs.md +4 -0
- package/llms-full.txt +97 -48
- package/llms.txt +46 -1
- package/package.json +37 -7
- package/dist/ui/chip.d.ts +0 -19
- package/dist/ui/chip.d.ts.map +0 -1
- package/dist/ui/chip.js +0 -14
- package/dist/ui/lib/use-ripple.d.ts +0 -14
- package/dist/ui/lib/use-ripple.d.ts.map +0 -1
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as s, jsxs as l } from "react/jsx-runtime";
|
|
3
|
+
import { flexRender as u } from "@tanstack/react-table";
|
|
4
|
+
import { Checkbox as C } from "./checkbox.js";
|
|
5
|
+
import { Skeleton as a } from "./skeleton.js";
|
|
6
|
+
import { cn as g } from "./lib/utils.js";
|
|
7
|
+
import { useDataTableContext as w } from "./data-table-context.js";
|
|
8
|
+
function B({
|
|
9
|
+
loading: h,
|
|
10
|
+
skeletonRowCount: x,
|
|
11
|
+
noResultsText: p,
|
|
12
|
+
emptyState: n
|
|
13
|
+
}) {
|
|
14
|
+
const { table: b, selectable: N } = w(), c = b.getRowModel().rows;
|
|
15
|
+
return h ? /* @__PURE__ */ s("div", { className: "flex flex-col gap-ds-03", children: Array.from({ length: x }, (t, d) => /* @__PURE__ */ l(
|
|
16
|
+
"div",
|
|
17
|
+
{
|
|
18
|
+
className: "rounded-ds-lg border border-surface-border bg-surface-raised p-ds-04",
|
|
19
|
+
children: [
|
|
20
|
+
/* @__PURE__ */ s(a, { variant: "text", className: "mb-ds-03 h-5 w-2/3", animation: "pulse" }),
|
|
21
|
+
/* @__PURE__ */ l("div", { className: "flex flex-col gap-ds-02", children: [
|
|
22
|
+
/* @__PURE__ */ s(a, { variant: "text", className: "h-4 w-full", animation: "pulse" }),
|
|
23
|
+
/* @__PURE__ */ s(a, { variant: "text", className: "h-4 w-3/4", animation: "pulse" }),
|
|
24
|
+
/* @__PURE__ */ s(a, { variant: "text", className: "h-4 w-1/2", animation: "pulse" })
|
|
25
|
+
] })
|
|
26
|
+
]
|
|
27
|
+
},
|
|
28
|
+
`card-skeleton-${d}`
|
|
29
|
+
)) }) : c.length ? /* @__PURE__ */ s("div", { className: "flex flex-col gap-ds-03", role: "list", children: c.map((t) => {
|
|
30
|
+
const i = t.getVisibleCells().filter(
|
|
31
|
+
(e) => e.column.id !== "_select" && e.column.id !== "_expand"
|
|
32
|
+
), r = i[0], o = i.slice(1), m = t.getIsSelected();
|
|
33
|
+
return /* @__PURE__ */ l(
|
|
34
|
+
"div",
|
|
35
|
+
{
|
|
36
|
+
role: "listitem",
|
|
37
|
+
className: g(
|
|
38
|
+
"rounded-ds-lg border border-surface-border bg-surface-raised p-ds-04",
|
|
39
|
+
m && "ring-2 ring-accent-9"
|
|
40
|
+
),
|
|
41
|
+
children: [
|
|
42
|
+
/* @__PURE__ */ l("div", { className: "flex items-start justify-between gap-ds-03 mb-ds-02", children: [
|
|
43
|
+
/* @__PURE__ */ s("div", { className: "min-w-0 flex-1 font-medium text-surface-fg", children: r && u(r.column.columnDef.cell, r.getContext()) }),
|
|
44
|
+
N && /* @__PURE__ */ s(
|
|
45
|
+
C,
|
|
46
|
+
{
|
|
47
|
+
size: "sm",
|
|
48
|
+
checked: m,
|
|
49
|
+
disabled: !t.getCanSelect(),
|
|
50
|
+
onCheckedChange: (e) => t.toggleSelected(!!e),
|
|
51
|
+
"aria-label": "Select row",
|
|
52
|
+
className: "shrink-0"
|
|
53
|
+
}
|
|
54
|
+
)
|
|
55
|
+
] }),
|
|
56
|
+
o.length > 0 && /* @__PURE__ */ s("div", { className: "flex flex-col gap-ds-01 border-t border-surface-border pt-ds-02", children: o.map((e) => {
|
|
57
|
+
const f = e.column.columnDef.meta;
|
|
58
|
+
f?.hideBelow === "md" || f?.hideBelow;
|
|
59
|
+
const v = typeof e.column.columnDef.header == "string" ? e.column.columnDef.header : e.column.id;
|
|
60
|
+
return /* @__PURE__ */ l("div", { className: "flex justify-between gap-ds-03 text-ds-sm", children: [
|
|
61
|
+
/* @__PURE__ */ s("span", { className: "shrink-0 text-surface-fg-muted", children: v }),
|
|
62
|
+
/* @__PURE__ */ s("span", { className: "min-w-0 text-right text-surface-fg", children: u(e.column.columnDef.cell, e.getContext()) })
|
|
63
|
+
] }, e.id);
|
|
64
|
+
}) })
|
|
65
|
+
]
|
|
66
|
+
},
|
|
67
|
+
t.id
|
|
68
|
+
);
|
|
69
|
+
}) }) : /* @__PURE__ */ s("div", { className: g("py-ds-07 text-center", !n && "text-surface-fg-subtle"), children: n || p || "No results." });
|
|
70
|
+
}
|
|
71
|
+
export {
|
|
72
|
+
B as DataTableCards
|
|
73
|
+
};
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { default as React } from 'react';
|
|
3
|
+
import { ColumnPinningState, Table } from '@tanstack/react-table';
|
|
4
|
+
import { Density } from './data-table-toolbar';
|
|
5
|
+
/** Editing state: which cell is currently in edit mode */
|
|
6
|
+
export type EditingCell = {
|
|
7
|
+
rowIndex: number;
|
|
8
|
+
columnId: string;
|
|
9
|
+
} | null;
|
|
10
|
+
export declare function getColumnMetaClasses(meta?: Record<string, unknown>): string;
|
|
11
|
+
export declare const densityPaddingMap: Record<Density, string>;
|
|
12
|
+
/** Interactive element selectors for row click filtering */
|
|
13
|
+
export declare const INTERACTIVE_SELECTOR = "button, a, input, select, textarea, [role=\"checkbox\"]";
|
|
14
|
+
export interface DataTableContextValue<TData = unknown> {
|
|
15
|
+
table: Table<TData>;
|
|
16
|
+
/** All assembled columns (including _select, _expand) */
|
|
17
|
+
allColumns: {
|
|
18
|
+
id?: string;
|
|
19
|
+
header?: unknown;
|
|
20
|
+
}[];
|
|
21
|
+
/** Current cell padding class based on density */
|
|
22
|
+
cellPadding: string;
|
|
23
|
+
/** Column pinning state for sticky positioning */
|
|
24
|
+
columnPinningState: ColumnPinningState;
|
|
25
|
+
/** Whether sorting is enabled */
|
|
26
|
+
sortable: boolean;
|
|
27
|
+
/** Whether per-column filters are enabled */
|
|
28
|
+
filterable: boolean;
|
|
29
|
+
/** Whether inline editing is enabled */
|
|
30
|
+
editable: boolean;
|
|
31
|
+
/** Whether row expansion is enabled */
|
|
32
|
+
expandable: boolean;
|
|
33
|
+
/** Whether virtual rows are enabled */
|
|
34
|
+
virtualRows: boolean;
|
|
35
|
+
/** Whether row selection is enabled */
|
|
36
|
+
selectable: boolean;
|
|
37
|
+
/** Mobile view mode */
|
|
38
|
+
mobileView: 'card' | 'table';
|
|
39
|
+
/** Current editing cell */
|
|
40
|
+
editingCell: EditingCell;
|
|
41
|
+
/** Set editing cell */
|
|
42
|
+
setEditingCell: (cell: EditingCell) => void;
|
|
43
|
+
/** Callback when a cell value is edited */
|
|
44
|
+
onCellEdit?: (rowIndex: number, columnId: string, value: unknown) => void;
|
|
45
|
+
/** Render function for expanded row content */
|
|
46
|
+
renderExpanded?: (row: TData) => React.ReactNode;
|
|
47
|
+
/** Row click handler */
|
|
48
|
+
onRowClick?: (row: TData) => void;
|
|
49
|
+
}
|
|
50
|
+
export declare function DataTableProvider<TData>({ children, value, }: {
|
|
51
|
+
children: React.ReactNode;
|
|
52
|
+
value: DataTableContextValue<TData>;
|
|
53
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
54
|
+
export declare function useDataTableContext<TData = unknown>(): DataTableContextValue<TData>;
|
|
55
|
+
/** Compute sticky positioning styles for pinned columns */
|
|
56
|
+
export declare function getPinnedCellStyle(columnId: string, columnPinningState: ColumnPinningState): {
|
|
57
|
+
className: string;
|
|
58
|
+
style: React.CSSProperties;
|
|
59
|
+
};
|
|
60
|
+
/** Check if a column allows editing */
|
|
61
|
+
export declare function isColumnEditable<TData>(columnId: string, editable: boolean, table: Table<TData>): boolean;
|
|
62
|
+
//# sourceMappingURL=data-table-context.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"data-table-context.d.ts","sourceRoot":"","sources":["../../src/ui/data-table-context.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,KAAK,kBAAkB,EAAE,KAAK,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAE3E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAInD,0DAA0D;AAC1D,MAAM,MAAM,WAAW,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAA;AAIvE,wBAAgB,oBAAoB,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAS3E;AAED,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,OAAO,EAAE,MAAM,CAIrD,CAAA;AAED,4DAA4D;AAC5D,eAAO,MAAM,oBAAoB,4DACwB,CAAA;AAIzD,MAAM,WAAW,qBAAqB,CAAC,KAAK,GAAG,OAAO;IACpD,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;IACnB,yDAAyD;IACzD,UAAU,EAAE;QAAE,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,EAAE,CAAA;IAC/C,kDAAkD;IAClD,WAAW,EAAE,MAAM,CAAA;IACnB,kDAAkD;IAClD,kBAAkB,EAAE,kBAAkB,CAAA;IACtC,iCAAiC;IACjC,QAAQ,EAAE,OAAO,CAAA;IACjB,6CAA6C;IAC7C,UAAU,EAAE,OAAO,CAAA;IACnB,wCAAwC;IACxC,QAAQ,EAAE,OAAO,CAAA;IACjB,uCAAuC;IACvC,UAAU,EAAE,OAAO,CAAA;IACnB,uCAAuC;IACvC,WAAW,EAAE,OAAO,CAAA;IACpB,uCAAuC;IACvC,UAAU,EAAE,OAAO,CAAA;IACnB,uBAAuB;IACvB,UAAU,EAAE,MAAM,GAAG,OAAO,CAAA;IAC5B,2BAA2B;IAC3B,WAAW,EAAE,WAAW,CAAA;IACxB,uBAAuB;IACvB,cAAc,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAA;IAC3C,2CAA2C;IAC3C,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACzE,+CAA+C;IAC/C,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,KAAK,CAAC,SAAS,CAAA;IAChD,wBAAwB;IACxB,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAA;CAClC;AAID,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,EACvC,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,EAAE,qBAAqB,CAAC,KAAK,CAAC,CAAA;CACpC,2CAMA;AAED,wBAAgB,mBAAmB,CAAC,KAAK,GAAG,OAAO,KAGnC,qBAAqB,CAAC,KAAK,CAAC,CAC3C;AAID,2DAA2D;AAC3D,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,MAAM,EAChB,kBAAkB,EAAE,kBAAkB;;WASZ,KAAK,CAAC,aAAa;EAU9C;AAED,uCAAuC;AACvC,wBAAgB,gBAAgB,CAAC,KAAK,EACpC,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,OAAO,EACjB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,GAClB,OAAO,CAYT"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as o } from "react/jsx-runtime";
|
|
3
|
+
import a from "react";
|
|
4
|
+
function f(e) {
|
|
5
|
+
if (!e) return "";
|
|
6
|
+
const t = [];
|
|
7
|
+
return e.align === "right" && t.push("text-right tabular-nums"), e.align === "center" && t.push("text-center"), e.hideBelow === "sm" && t.push("hidden sm:table-cell"), e.hideBelow === "md" && t.push("hidden md:table-cell"), e.hideBelow === "lg" && t.push("hidden lg:table-cell"), t.join(" ");
|
|
8
|
+
}
|
|
9
|
+
const d = {
|
|
10
|
+
compact: "py-ds-02",
|
|
11
|
+
standard: "py-ds-05",
|
|
12
|
+
comfortable: "py-ds-07"
|
|
13
|
+
}, b = 'button, a, input, select, textarea, [role="checkbox"]', i = a.createContext(null);
|
|
14
|
+
function h({
|
|
15
|
+
children: e,
|
|
16
|
+
value: t
|
|
17
|
+
}) {
|
|
18
|
+
return /* @__PURE__ */ o(i.Provider, { value: t, children: e });
|
|
19
|
+
}
|
|
20
|
+
function x() {
|
|
21
|
+
const e = a.useContext(i);
|
|
22
|
+
if (!e) throw new Error("useDataTableContext must be used within DataTableProvider");
|
|
23
|
+
return e;
|
|
24
|
+
}
|
|
25
|
+
function g(e, t) {
|
|
26
|
+
const { left: s = [], right: n = [] } = t, r = s.indexOf(e), l = n.indexOf(e);
|
|
27
|
+
return r !== -1 ? {
|
|
28
|
+
className: "sticky bg-surface-base z-raised",
|
|
29
|
+
style: { left: 0 }
|
|
30
|
+
} : l !== -1 ? {
|
|
31
|
+
className: "sticky bg-surface-base z-raised",
|
|
32
|
+
style: { right: 0 }
|
|
33
|
+
} : { className: "", style: {} };
|
|
34
|
+
}
|
|
35
|
+
function p(e, t, s) {
|
|
36
|
+
if (!t || e === "_select" || e === "_expand") return !1;
|
|
37
|
+
const n = s.getColumn(e);
|
|
38
|
+
return !(!n || n.columnDef.meta?.enableEditing === !1);
|
|
39
|
+
}
|
|
40
|
+
export {
|
|
41
|
+
h as DataTableProvider,
|
|
42
|
+
b as INTERACTIVE_SELECTOR,
|
|
43
|
+
d as densityPaddingMap,
|
|
44
|
+
f as getColumnMetaClasses,
|
|
45
|
+
g as getPinnedCellStyle,
|
|
46
|
+
p as isColumnEditable,
|
|
47
|
+
x as useDataTableContext
|
|
48
|
+
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
/**
|
|
3
|
+
* Renders the `<TableHeader>` block including sortable column headers
|
|
4
|
+
* and optional per-column filter inputs. Internal — not exported to consumers.
|
|
5
|
+
*/
|
|
6
|
+
declare function DataTableHeaderImpl({ stickyHeader }: {
|
|
7
|
+
stickyHeader?: boolean;
|
|
8
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export { DataTableHeaderImpl as DataTableHeader };
|
|
10
|
+
//# sourceMappingURL=data-table-header.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"data-table-header.d.ts","sourceRoot":"","sources":["../../src/ui/data-table-header.tsx"],"names":[],"mappings":"AAqBA;;;GAGG;AACH,iBAAS,mBAAmB,CAAC,EAAE,YAAY,EAAE,EAAE;IAAE,YAAY,CAAC,EAAE,OAAO,CAAA;CAAE,2CAsJxE;AAED,OAAO,EAAE,mBAAmB,IAAI,eAAe,EAAE,CAAA"}
|
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsxs as u, jsx as t } from "react/jsx-runtime";
|
|
3
|
+
import { flexRender as d } from "@tanstack/react-table";
|
|
4
|
+
import { IconArrowUp as D, IconArrowDown as N, IconArrowsSort as C } from "@tabler/icons-react";
|
|
5
|
+
import { Icon as s } from "./icon.js";
|
|
6
|
+
import { TableHeader as S, TableRow as p, TableHead as f } from "./table.js";
|
|
7
|
+
import { cn as a } from "./lib/utils.js";
|
|
8
|
+
import { springs as i } from "./lib/motion.js";
|
|
9
|
+
import { useDataTableContext as w, getPinnedCellStyle as H, getColumnMetaClasses as T } from "./data-table-context.js";
|
|
10
|
+
import { A as I, m as c } from "../_chunks/framer.js";
|
|
11
|
+
function R({ stickyHeader: g }) {
|
|
12
|
+
const { table: r, sortable: b, filterable: x, columnPinningState: y } = w();
|
|
13
|
+
return /* @__PURE__ */ u(
|
|
14
|
+
S,
|
|
15
|
+
{
|
|
16
|
+
className: a(
|
|
17
|
+
g && "sticky top-0 z-10 bg-surface-base"
|
|
18
|
+
),
|
|
19
|
+
children: [
|
|
20
|
+
r.getHeaderGroups().map((n) => /* @__PURE__ */ t(p, { children: n.headers.map((e) => {
|
|
21
|
+
const o = b && e.column.getCanSort(), l = e.column.getIsSorted(), m = H(
|
|
22
|
+
e.column.id,
|
|
23
|
+
y
|
|
24
|
+
);
|
|
25
|
+
return /* @__PURE__ */ t(
|
|
26
|
+
f,
|
|
27
|
+
{
|
|
28
|
+
className: a(
|
|
29
|
+
m.className,
|
|
30
|
+
T(
|
|
31
|
+
e.column.columnDef.meta
|
|
32
|
+
)
|
|
33
|
+
),
|
|
34
|
+
style: m.style,
|
|
35
|
+
"aria-sort": o ? l === "asc" ? "ascending" : l === "desc" ? "descending" : "none" : void 0,
|
|
36
|
+
children: e.isPlaceholder ? null : o ? /* @__PURE__ */ u(
|
|
37
|
+
"button",
|
|
38
|
+
{
|
|
39
|
+
type: "button",
|
|
40
|
+
className: a(
|
|
41
|
+
"flex items-center gap-ds-01 font-medium",
|
|
42
|
+
"cursor-pointer select-none",
|
|
43
|
+
"-ml-ds-01 rounded-ds-sm px-ds-01 py-ds-01",
|
|
44
|
+
"hover:bg-surface-raised transition-colors"
|
|
45
|
+
),
|
|
46
|
+
onClick: e.column.getToggleSortingHandler(),
|
|
47
|
+
"aria-label": `Sort by ${typeof e.column.columnDef.header == "string" ? e.column.columnDef.header : e.column.id}`,
|
|
48
|
+
children: [
|
|
49
|
+
d(
|
|
50
|
+
e.column.columnDef.header,
|
|
51
|
+
e.getContext()
|
|
52
|
+
),
|
|
53
|
+
/* @__PURE__ */ t(I, { mode: "wait", initial: !1, children: l === "asc" ? /* @__PURE__ */ t(
|
|
54
|
+
c.span,
|
|
55
|
+
{
|
|
56
|
+
initial: { opacity: 0, rotate: 90 },
|
|
57
|
+
animate: { opacity: 1, rotate: 0 },
|
|
58
|
+
exit: { opacity: 0, rotate: -90 },
|
|
59
|
+
transition: i.snappy,
|
|
60
|
+
className: "inline-flex",
|
|
61
|
+
children: /* @__PURE__ */ t(
|
|
62
|
+
s,
|
|
63
|
+
{
|
|
64
|
+
icon: D,
|
|
65
|
+
size: "sm",
|
|
66
|
+
className: "text-surface-fg-muted"
|
|
67
|
+
}
|
|
68
|
+
)
|
|
69
|
+
},
|
|
70
|
+
"asc"
|
|
71
|
+
) : l === "desc" ? /* @__PURE__ */ t(
|
|
72
|
+
c.span,
|
|
73
|
+
{
|
|
74
|
+
initial: { opacity: 0, rotate: -90 },
|
|
75
|
+
animate: { opacity: 1, rotate: 0 },
|
|
76
|
+
exit: { opacity: 0, rotate: 90 },
|
|
77
|
+
transition: i.snappy,
|
|
78
|
+
className: "inline-flex",
|
|
79
|
+
children: /* @__PURE__ */ t(
|
|
80
|
+
s,
|
|
81
|
+
{
|
|
82
|
+
icon: N,
|
|
83
|
+
size: "sm",
|
|
84
|
+
className: "text-surface-fg-muted"
|
|
85
|
+
}
|
|
86
|
+
)
|
|
87
|
+
},
|
|
88
|
+
"desc"
|
|
89
|
+
) : /* @__PURE__ */ t(
|
|
90
|
+
c.span,
|
|
91
|
+
{
|
|
92
|
+
initial: { opacity: 0 },
|
|
93
|
+
animate: { opacity: 1 },
|
|
94
|
+
exit: { opacity: 0 },
|
|
95
|
+
transition: i.snappy,
|
|
96
|
+
className: "inline-flex",
|
|
97
|
+
children: /* @__PURE__ */ t(
|
|
98
|
+
s,
|
|
99
|
+
{
|
|
100
|
+
icon: C,
|
|
101
|
+
size: "sm",
|
|
102
|
+
className: "text-surface-fg-subtle"
|
|
103
|
+
}
|
|
104
|
+
)
|
|
105
|
+
},
|
|
106
|
+
"unsorted"
|
|
107
|
+
) })
|
|
108
|
+
]
|
|
109
|
+
}
|
|
110
|
+
) : d(
|
|
111
|
+
e.column.columnDef.header,
|
|
112
|
+
e.getContext()
|
|
113
|
+
)
|
|
114
|
+
},
|
|
115
|
+
e.id
|
|
116
|
+
);
|
|
117
|
+
}) }, n.id)),
|
|
118
|
+
x && r.getHeaderGroups().map((n) => /* @__PURE__ */ t(p, { children: n.headers.map((e) => /* @__PURE__ */ t(f, { className: "py-ds-01", children: e.isPlaceholder || e.column.columnDef.enableColumnFilter === !1 ? null : /* @__PURE__ */ t(
|
|
119
|
+
"input",
|
|
120
|
+
{
|
|
121
|
+
type: "text",
|
|
122
|
+
value: e.column.getFilterValue() ?? "",
|
|
123
|
+
onChange: (o) => e.column.setFilterValue(o.target.value),
|
|
124
|
+
placeholder: `Filter ${typeof e.column.columnDef.header == "string" ? e.column.columnDef.header : ""}...`,
|
|
125
|
+
"aria-label": `Filter ${typeof e.column.columnDef.header == "string" ? e.column.columnDef.header : e.column.id}`,
|
|
126
|
+
className: a(
|
|
127
|
+
"h-ds-xs-plus w-full rounded-ds-md",
|
|
128
|
+
"border border-surface-border-strong bg-surface-raised-hover",
|
|
129
|
+
"px-ds-02 text-ds-sm",
|
|
130
|
+
"text-surface-fg placeholder:text-surface-fg-subtle",
|
|
131
|
+
"outline-none focus:border-accent-7"
|
|
132
|
+
)
|
|
133
|
+
}
|
|
134
|
+
) }, `${e.id}-filter`)) }, `${n.id}-filters`))
|
|
135
|
+
]
|
|
136
|
+
}
|
|
137
|
+
);
|
|
138
|
+
}
|
|
139
|
+
export {
|
|
140
|
+
R as DataTableHeader
|
|
141
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { Table } from '@tanstack/react-table';
|
|
3
|
+
/**
|
|
4
|
+
* Pagination controls: page size selector, prev/next buttons, page info.
|
|
5
|
+
* Internal — not exported to consumers.
|
|
6
|
+
*/
|
|
7
|
+
export declare function DataTablePagination<TData>({ table, totalRowCount, useServerPagination, pageSizeOptions, }: {
|
|
8
|
+
table: Table<TData>;
|
|
9
|
+
totalRowCount: number;
|
|
10
|
+
useServerPagination: boolean;
|
|
11
|
+
pageSizeOptions?: number[];
|
|
12
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
//# sourceMappingURL=data-table-pagination.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"data-table-pagination.d.ts","sourceRoot":"","sources":["../../src/ui/data-table-pagination.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAMlD;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,EACzC,KAAK,EACL,aAAa,EACb,mBAAmB,EACnB,eAAe,GAChB,EAAE;IACD,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;IACnB,aAAa,EAAE,MAAM,CAAA;IACrB,mBAAmB,EAAE,OAAO,CAAA;IAC5B,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;CAC3B,2CAwEA"}
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsxs as s, jsx as a } from "react/jsx-runtime";
|
|
3
|
+
import { IconChevronLeft as c, IconChevronRight as l } from "@tabler/icons-react";
|
|
4
|
+
import { Icon as o } from "./icon.js";
|
|
5
|
+
import { cn as t } from "./lib/utils.js";
|
|
6
|
+
function f({
|
|
7
|
+
table: e,
|
|
8
|
+
totalRowCount: d,
|
|
9
|
+
useServerPagination: n,
|
|
10
|
+
pageSizeOptions: i
|
|
11
|
+
}) {
|
|
12
|
+
return /* @__PURE__ */ s("div", { className: "flex items-center justify-between px-ds-03 py-ds-04 border-t border-surface-border", children: [
|
|
13
|
+
/* @__PURE__ */ s("span", { className: "text-ds-sm text-surface-fg-muted", children: [
|
|
14
|
+
d,
|
|
15
|
+
" total rows"
|
|
16
|
+
] }),
|
|
17
|
+
/* @__PURE__ */ s("div", { className: "flex items-center gap-ds-03", children: [
|
|
18
|
+
!n && /* @__PURE__ */ a(
|
|
19
|
+
"select",
|
|
20
|
+
{
|
|
21
|
+
value: e.getState().pagination.pageSize,
|
|
22
|
+
onChange: (r) => {
|
|
23
|
+
e.setPageSize(Number(r.target.value));
|
|
24
|
+
},
|
|
25
|
+
"aria-label": "Rows per page",
|
|
26
|
+
className: t(
|
|
27
|
+
"h-ds-sm rounded-ds-md",
|
|
28
|
+
"border border-surface-border-strong bg-surface-raised-hover",
|
|
29
|
+
"px-ds-03 text-ds-sm",
|
|
30
|
+
"text-surface-fg"
|
|
31
|
+
),
|
|
32
|
+
children: (i ?? [10, 20, 50, 100]).map((r) => /* @__PURE__ */ s("option", { value: r, children: [
|
|
33
|
+
r,
|
|
34
|
+
" rows"
|
|
35
|
+
] }, r))
|
|
36
|
+
}
|
|
37
|
+
),
|
|
38
|
+
/* @__PURE__ */ a(
|
|
39
|
+
"button",
|
|
40
|
+
{
|
|
41
|
+
type: "button",
|
|
42
|
+
disabled: !e.getCanPreviousPage(),
|
|
43
|
+
onClick: () => e.previousPage(),
|
|
44
|
+
"aria-label": "Previous page",
|
|
45
|
+
className: t(
|
|
46
|
+
"h-ds-sm w-ds-sm flex items-center justify-center",
|
|
47
|
+
"rounded-ds-md border border-surface-border-strong",
|
|
48
|
+
"enabled:hover:bg-surface-raised",
|
|
49
|
+
"disabled:opacity-action-disabled disabled:cursor-not-allowed",
|
|
50
|
+
"transition-colors"
|
|
51
|
+
),
|
|
52
|
+
children: /* @__PURE__ */ a(o, { icon: c, size: "sm" })
|
|
53
|
+
}
|
|
54
|
+
),
|
|
55
|
+
/* @__PURE__ */ s("span", { className: "text-ds-sm text-surface-fg-muted", children: [
|
|
56
|
+
"Page ",
|
|
57
|
+
e.getState().pagination.pageIndex + 1,
|
|
58
|
+
" of",
|
|
59
|
+
" ",
|
|
60
|
+
e.getPageCount()
|
|
61
|
+
] }),
|
|
62
|
+
/* @__PURE__ */ a(
|
|
63
|
+
"button",
|
|
64
|
+
{
|
|
65
|
+
type: "button",
|
|
66
|
+
disabled: !e.getCanNextPage(),
|
|
67
|
+
onClick: () => e.nextPage(),
|
|
68
|
+
"aria-label": "Next page",
|
|
69
|
+
className: t(
|
|
70
|
+
"h-ds-sm w-ds-sm flex items-center justify-center",
|
|
71
|
+
"rounded-ds-md border border-surface-border-strong",
|
|
72
|
+
"enabled:hover:bg-surface-raised",
|
|
73
|
+
"disabled:opacity-action-disabled disabled:cursor-not-allowed",
|
|
74
|
+
"transition-colors"
|
|
75
|
+
),
|
|
76
|
+
children: /* @__PURE__ */ a(o, { icon: l, size: "sm" })
|
|
77
|
+
}
|
|
78
|
+
)
|
|
79
|
+
] })
|
|
80
|
+
] });
|
|
81
|
+
}
|
|
82
|
+
export {
|
|
83
|
+
f as DataTablePagination
|
|
84
|
+
};
|
package/dist/ui/data-table.d.ts
CHANGED
|
@@ -2,19 +2,14 @@
|
|
|
2
2
|
import { default as React } from 'react';
|
|
3
3
|
import { ColumnDef, RowData } from '@tanstack/react-table';
|
|
4
4
|
import { Density } from './data-table-toolbar';
|
|
5
|
+
import { BulkAction } from './data-table-bulk-actions';
|
|
6
|
+
export type { BulkAction } from './data-table-bulk-actions';
|
|
5
7
|
declare module '@tanstack/react-table' {
|
|
6
8
|
interface ColumnMeta<TData extends RowData, TValue> {
|
|
7
9
|
align?: 'left' | 'center' | 'right';
|
|
8
10
|
hideBelow?: 'sm' | 'md' | 'lg';
|
|
9
11
|
}
|
|
10
12
|
}
|
|
11
|
-
/** Bulk action definition for the floating action bar */
|
|
12
|
-
export interface BulkAction<TData> {
|
|
13
|
-
label: string;
|
|
14
|
-
onClick: (selectedRows: TData[]) => void;
|
|
15
|
-
color?: 'default' | 'error';
|
|
16
|
-
disabled?: boolean;
|
|
17
|
-
}
|
|
18
13
|
/**
|
|
19
14
|
* Props for DataTable — a feature-rich TanStack Table wrapper supporting sorting, filtering,
|
|
20
15
|
* pagination, row selection, inline editing, row expansion, column pinning, and virtualization.
|
|
@@ -69,8 +64,13 @@ export interface BulkAction<TData> {
|
|
|
69
64
|
* />
|
|
70
65
|
* // These are just a few ways — feel free to combine props creatively!
|
|
71
66
|
*/
|
|
67
|
+
/**
|
|
68
|
+
* A full-featured data table built on TanStack Table with sorting, filtering,
|
|
69
|
+
* pagination, row selection, inline cell editing, expandable rows, column pinning,
|
|
70
|
+
* a toolbar with density/export controls, and optional row virtualization.
|
|
71
|
+
*/
|
|
72
72
|
export interface DataTableProps<TData, TValue> {
|
|
73
|
-
/** Column definitions passed to TanStack Table */
|
|
73
|
+
/** Column definitions passed to TanStack Table. */
|
|
74
74
|
columns: ColumnDef<TData, TValue>[];
|
|
75
75
|
/** Row data */
|
|
76
76
|
data: TData[];
|
|
@@ -144,8 +144,10 @@ export interface DataTableProps<TData, TValue> {
|
|
|
144
144
|
onRowClick?: (row: TData) => void;
|
|
145
145
|
/** Actions shown in a floating bar when rows are selected */
|
|
146
146
|
bulkActions?: BulkAction<TData>[];
|
|
147
|
+
/** Render rows as stacked cards on small screens (below sm breakpoint). Default 'table'. */
|
|
148
|
+
mobileView?: 'card' | 'table';
|
|
147
149
|
}
|
|
148
|
-
export declare function DataTable<TData, TValue>({ columns, data, className, noResultsText, sortable, filterable, globalFilter, paginated, pageSize: initialPageSize, pageSizeOptions, selectable, onSelectionChange, toolbar, density: initialDensity, columnPinning: initialColumnPinning, editable, onCellEdit, expandable, renderExpanded, virtualRows, virtualRowHeight, maxHeight, onSort, emptyState, loading, selectedIds, selectableFilter, getRowId: getRowIdProp, pagination: serverPagination, singleExpand, stickyHeader, onRowClick, bulkActions, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
|
|
150
|
+
export declare function DataTable<TData, TValue>({ columns, data, className, noResultsText, sortable, filterable, globalFilter, paginated, pageSize: initialPageSize, pageSizeOptions, selectable, onSelectionChange, toolbar, density: initialDensity, columnPinning: initialColumnPinning, editable, onCellEdit, expandable, renderExpanded, virtualRows, virtualRowHeight, maxHeight, onSort, emptyState, loading, selectedIds, selectableFilter, getRowId: getRowIdProp, pagination: serverPagination, singleExpand, stickyHeader, onRowClick, bulkActions, mobileView, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
|
|
149
151
|
export declare namespace DataTable {
|
|
150
152
|
var displayName: string;
|
|
151
153
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../src/ui/data-table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4D,MAAM,OAAO,CAAA;AAChF,OAAO,EACL,KAAK,SAAS,EAMd,KAAK,OAAO,
|
|
1
|
+
{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../src/ui/data-table.tsx"],"names":[],"mappings":"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"}
|