@alexgorbatchev/shadcn 0.0.29 → 0.0.31
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 +25 -22
- package/THIRD_PARTY_NOTICES.md +6 -0
- package/dist/chunk-1xncv9gb.js +19 -0
- package/dist/chunk-2dxa9enk.js +98 -0
- package/dist/{chunk-3z5gpbh0.js → chunk-987zth0a.js} +1 -1
- package/dist/{chunk-g238nezp.js → chunk-pg9rhbgm.js} +4 -2
- package/dist/{chunk-5da3rzn5.js → chunk-s0typ7hv.js} +1 -1
- package/dist/{chunk-eehfrrdz.js → chunk-tnnf8ydf.js} +1 -15
- package/dist/chunk-yfr9syen.js +363 -0
- package/dist/{chunk-v0k5jnk5.js → chunk-zte6pw69.js} +2 -1
- package/dist/components/Table.d.ts +7 -3
- package/dist/components/assistant-ui/elements/DataTable.js +2 -2
- package/dist/components/assistant-ui/elements/OptionList.js +3 -2
- package/dist/components/assistant-ui/elements/QuestionFlow.js +4 -3
- package/dist/components/assistant-ui/index.js +6 -5
- package/dist/components/data-grid/DataGrid.d.ts +48 -9
- package/dist/components/data-grid/DataGridColumnOptions.d.ts +14 -0
- package/dist/components/data-grid/DataGridColumnResizer.d.ts +13 -0
- package/dist/components/data-grid/getDataGridColumnSizeVariables.d.ts +6 -0
- package/dist/components/data-grid/hooks/useDataGridColumnSizes.d.ts +8 -0
- package/dist/components/data-grid/index.d.ts +3 -2
- package/dist/components/data-grid/index.js +124 -199
- package/dist/components/data-grid/moveDataGridColumn.d.ts +5 -0
- package/dist/components/event-calendar/index.js +4 -2
- package/dist/components/gantt/index.js +1 -1
- package/dist/components/virtual-data-grid/VirtualDataGrid.d.ts +26 -0
- package/dist/components/virtual-data-grid/index.d.ts +2 -0
- package/dist/components/virtual-data-grid/index.js +88 -0
- package/dist/components/virtual-table/index.js +4 -96
- package/dist/index.d.ts +1 -0
- package/dist/index.js +6 -4
- package/llms/components/data-display/DataGridColumnOptions.md +22 -0
- package/llms/components/data-display/Table.md +1 -1
- package/llms/components/data-display/VirtualDataGrid.md +71 -0
- package/llms/components/data-display/VirtualTable.md +2 -2
- package/llms/setup.md +25 -22
- package/llms.txt +2 -0
- package/package.json +6 -2
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import {
|
|
2
2
|
OptionList2
|
|
3
|
-
} from "../../../chunk-
|
|
3
|
+
} from "../../../chunk-pg9rhbgm.js";
|
|
4
4
|
import"../../../chunk-71efbr5n.js";
|
|
5
5
|
import"../../../chunk-vxvaaptq.js";
|
|
6
|
-
import"../../../chunk-
|
|
6
|
+
import"../../../chunk-1xncv9gb.js";
|
|
7
|
+
import"../../../chunk-tnnf8ydf.js";
|
|
7
8
|
import"../../../chunk-q7p28b89.js";
|
|
8
9
|
import"../../../chunk-cp2m7y7v.js";
|
|
9
10
|
export {
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import {
|
|
2
2
|
QuestionFlow2
|
|
3
|
-
} from "../../../chunk-
|
|
4
|
-
import"../../../chunk-
|
|
3
|
+
} from "../../../chunk-s0typ7hv.js";
|
|
4
|
+
import"../../../chunk-pg9rhbgm.js";
|
|
5
5
|
import"../../../chunk-71efbr5n.js";
|
|
6
6
|
import"../../../chunk-vxvaaptq.js";
|
|
7
|
-
import"../../../chunk-
|
|
7
|
+
import"../../../chunk-1xncv9gb.js";
|
|
8
|
+
import"../../../chunk-tnnf8ydf.js";
|
|
8
9
|
import"../../../chunk-q7p28b89.js";
|
|
9
10
|
import"../../../chunk-cp2m7y7v.js";
|
|
10
11
|
export {
|
|
@@ -199,8 +199,8 @@ import"../../chunk-1wz92wgg.js";
|
|
|
199
199
|
import"../../chunk-wjx6zf94.js";
|
|
200
200
|
import {
|
|
201
201
|
DataTable2
|
|
202
|
-
} from "../../chunk-
|
|
203
|
-
import"../../chunk-
|
|
202
|
+
} from "../../chunk-987zth0a.js";
|
|
203
|
+
import"../../chunk-zte6pw69.js";
|
|
204
204
|
import {
|
|
205
205
|
DaySeparator2
|
|
206
206
|
} from "../../chunk-jhw9q2eq.js";
|
|
@@ -423,13 +423,14 @@ import {
|
|
|
423
423
|
import {
|
|
424
424
|
OpenAILogo2
|
|
425
425
|
} from "../../chunk-pa07b92f.js";
|
|
426
|
-
import"../../chunk-
|
|
426
|
+
import"../../chunk-1xncv9gb.js";
|
|
427
|
+
import"../../chunk-tnnf8ydf.js";
|
|
427
428
|
import {
|
|
428
429
|
OptionText2
|
|
429
430
|
} from "../../chunk-71efbr5n.js";
|
|
430
431
|
import {
|
|
431
432
|
OptionList2
|
|
432
|
-
} from "../../chunk-
|
|
433
|
+
} from "../../chunk-pg9rhbgm.js";
|
|
433
434
|
import {
|
|
434
435
|
PermissionGrant2
|
|
435
436
|
} from "../../chunk-726x26pk.js";
|
|
@@ -438,7 +439,7 @@ import {
|
|
|
438
439
|
} from "../../chunk-dvmxyk3q.js";
|
|
439
440
|
import {
|
|
440
441
|
QuestionFlow2
|
|
441
|
-
} from "../../chunk-
|
|
442
|
+
} from "../../chunk-s0typ7hv.js";
|
|
442
443
|
import {
|
|
443
444
|
QuotaBanner2
|
|
444
445
|
} from "../../chunk-bsff5mmk.js";
|
|
@@ -1,15 +1,31 @@
|
|
|
1
|
-
import { type ReactTable, type RowData, type
|
|
2
|
-
import type
|
|
1
|
+
import { type CellData, type Column, type ReactTable, type Row, type RowData, type Table as CoreTable, type TableState } from "@tanstack/react-table";
|
|
2
|
+
import { type ReactElement, type ReactNode } from "react";
|
|
3
3
|
import type { IDensityProps } from "../../density/types.js";
|
|
4
|
+
import { type TableTextAlign, type TableVisibility } from "../Table.js";
|
|
5
|
+
/** Presentation settings a column definition carries in its `meta`. */
|
|
6
|
+
interface IDataGridColumnMeta {
|
|
7
|
+
/** Name in the column picker and resize handle; defaults to a string header, then the column ID. */
|
|
8
|
+
label?: string;
|
|
9
|
+
textAlign?: TableTextAlign;
|
|
10
|
+
truncate?: boolean;
|
|
11
|
+
/** Hides the column below this viewport or container width, together with its header and cells. */
|
|
12
|
+
visibleFrom?: TableVisibility;
|
|
13
|
+
/** Takes the width the sized columns leave, so it has no fixed size of its own. */
|
|
14
|
+
fill?: boolean;
|
|
15
|
+
}
|
|
4
16
|
declare const dataGridFeatures: {
|
|
5
17
|
columnFilteringFeature: import("@tanstack/react-table").TableFeature;
|
|
18
|
+
columnOrderingFeature: import("@tanstack/react-table").TableFeature;
|
|
19
|
+
columnSizingFeature: import("@tanstack/react-table").TableFeature;
|
|
20
|
+
columnResizingFeature: import("@tanstack/react-table").TableFeature;
|
|
6
21
|
columnVisibilityFeature: import("@tanstack/react-table").TableFeature;
|
|
22
|
+
globalFilteringFeature: import("@tanstack/react-table").TableFeature;
|
|
7
23
|
rowPaginationFeature: import("@tanstack/react-table").TableFeature;
|
|
8
24
|
rowSelectionFeature: import("@tanstack/react-table").TableFeature;
|
|
9
25
|
rowSortingFeature: import("@tanstack/react-table").TableFeature;
|
|
10
|
-
filteredRowModel: (table:
|
|
11
|
-
sortedRowModel: (table:
|
|
12
|
-
paginatedRowModel: (table:
|
|
26
|
+
filteredRowModel: (table: CoreTable<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
27
|
+
sortedRowModel: (table: CoreTable<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
28
|
+
paginatedRowModel: (table: CoreTable<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
|
|
13
29
|
filterFns: {
|
|
14
30
|
includesString: import("@tanstack/react-table").CreatedFilterFn<any, any>;
|
|
15
31
|
};
|
|
@@ -17,8 +33,31 @@ declare const dataGridFeatures: {
|
|
|
17
33
|
alphanumeric: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
18
34
|
basic: import("@tanstack/react-table").CreatedSortFn<any, any>;
|
|
19
35
|
};
|
|
36
|
+
columnMeta: IDataGridColumnMeta;
|
|
20
37
|
};
|
|
21
|
-
type
|
|
38
|
+
type DataGridFeatures = typeof dataGridFeatures;
|
|
39
|
+
/** A table built with `dataGridFeatures`; `TSelected` is the state its `useTable` selector returns. */
|
|
40
|
+
type DataGridTable<T extends RowData, TSelected = TableState<DataGridFeatures>> = ReactTable<DataGridFeatures, T, TSelected>;
|
|
41
|
+
type DataGridRow<T extends RowData> = Row<DataGridFeatures, T>;
|
|
42
|
+
type DataGridColumn<T extends RowData> = Column<DataGridFeatures, T, CellData>;
|
|
43
|
+
declare function getDataGridColumnLabel<T extends RowData>(column: DataGridColumn<T>): string;
|
|
44
|
+
interface IDataGridHeaderRowsProps<T extends RowData> {
|
|
45
|
+
table: CoreTable<DataGridFeatures, T>;
|
|
46
|
+
/** Adds a resize handle to each resizable column; only fixed-layout grids honor column sizes. */
|
|
47
|
+
isResizable?: boolean;
|
|
48
|
+
}
|
|
49
|
+
/** Header rows with sort state, column layout, and optional resize handles. */
|
|
50
|
+
declare function DataGridHeaderRows<T extends RowData>({ table, isResizable, }: IDataGridHeaderRowsProps<T>): ReactElement;
|
|
51
|
+
interface IDataGridCellsProps<T extends RowData> {
|
|
52
|
+
row: DataGridRow<T>;
|
|
53
|
+
}
|
|
54
|
+
/** A row's visible cells, laid out by their column `meta`; render them inside a custom `TableRow`. */
|
|
55
|
+
declare function DataGridCells<T extends RowData>({ row }: IDataGridCellsProps<T>): ReactElement;
|
|
56
|
+
interface IDataGridColumnsProps<T extends RowData> {
|
|
57
|
+
table: CoreTable<DataGridFeatures, T>;
|
|
58
|
+
}
|
|
59
|
+
/** Column widths for a fixed-layout grid; sizes resolve through the variables `useDataGridColumnSizes` writes. */
|
|
60
|
+
declare function DataGridColumns<T extends RowData>({ table }: IDataGridColumnsProps<T>): ReactElement;
|
|
22
61
|
type DataGridProps<T extends RowData> = IDensityProps & {
|
|
23
62
|
table: DataGridTable<T>;
|
|
24
63
|
label: string;
|
|
@@ -29,7 +68,7 @@ type DataGridProps<T extends RowData> = IDensityProps & {
|
|
|
29
68
|
};
|
|
30
69
|
declare function DataGrid<T extends RowData>({ table, label, toolbar, empty, loading, pagination, density, }: DataGridProps<T>): ReactElement;
|
|
31
70
|
declare function DataGridColumnHeader<T extends RowData, V extends CellData>({ column, children, }: {
|
|
32
|
-
column: Column<
|
|
71
|
+
column: Column<DataGridFeatures, T, V>;
|
|
33
72
|
children: ReactNode;
|
|
34
73
|
}): ReactElement;
|
|
35
74
|
declare function DataGridFilter<T extends RowData>({ table, columnId, label, }: {
|
|
@@ -40,5 +79,5 @@ declare function DataGridFilter<T extends RowData>({ table, columnId, label, }:
|
|
|
40
79
|
declare function DataGridPagination<T extends RowData>({ table }: {
|
|
41
80
|
table: DataGridTable<T>;
|
|
42
81
|
}): ReactElement;
|
|
43
|
-
export { DataGrid, DataGridColumnHeader, DataGridFilter, DataGridPagination, dataGridFeatures };
|
|
44
|
-
export type { DataGridProps, DataGridTable };
|
|
82
|
+
export { DataGrid, DataGridCells, DataGridColumnHeader, DataGridColumns, DataGridFilter, DataGridHeaderRows, DataGridPagination, dataGridFeatures, getDataGridColumnLabel, };
|
|
83
|
+
export type { DataGridColumn, DataGridFeatures, DataGridProps, DataGridRow, DataGridTable, IDataGridColumnMeta };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { type RowData, type Table } from "@tanstack/react-table";
|
|
2
|
+
import type { ReactElement } from "react";
|
|
3
|
+
import { type DataGridFeatures } from "./DataGrid.js";
|
|
4
|
+
interface IDataGridColumnOptionsProps<T extends RowData> {
|
|
5
|
+
table: Table<DataGridFeatures, T>;
|
|
6
|
+
/** Trigger and popover title. */
|
|
7
|
+
label?: string;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* Shows, hides, and reorders the columns that allow hiding. Columns with `enableHiding: false` keep their positions.
|
|
11
|
+
* Reset restores the table's initial visibility, order, and sizes.
|
|
12
|
+
*/
|
|
13
|
+
export declare function DataGridColumnOptions<T extends RowData>({ table, label, }: IDataGridColumnOptionsProps<T>): ReactElement;
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { type CellData, type Header, type RowData } from "@tanstack/react-table";
|
|
2
|
+
import type { ReactElement } from "react";
|
|
3
|
+
import type { DataGridFeatures } from "./DataGrid.js";
|
|
4
|
+
interface IDataGridColumnResizerProps<T extends RowData> {
|
|
5
|
+
header: Header<DataGridFeatures, T, CellData>;
|
|
6
|
+
label: string;
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* A window-splitter handle at a header's trailing edge: drag it, use the arrow keys, Home, or End, or double-click it
|
|
10
|
+
* to restore the default width.
|
|
11
|
+
*/
|
|
12
|
+
export declare function DataGridColumnResizer<T extends RowData>({ header, label, }: IDataGridColumnResizerProps<T>): ReactElement;
|
|
13
|
+
export {};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { RowData, Table, TableFeatures } from "@tanstack/react-table";
|
|
2
|
+
/**
|
|
3
|
+
* Maps each leaf column ID to the CSS variable holding its width. Variables follow definition order, so reordering or
|
|
4
|
+
* hiding columns never moves a width to another column.
|
|
5
|
+
*/
|
|
6
|
+
export declare function getDataGridColumnSizeVariables<TFeatures extends TableFeatures, T extends RowData>(table: Table<TFeatures, T>): Map<string, string>;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { RowData, Table } from "@tanstack/react-table";
|
|
2
|
+
import { type RefObject } from "react";
|
|
3
|
+
import type { DataGridFeatures } from "../DataGrid.js";
|
|
4
|
+
/**
|
|
5
|
+
* Writes every column's size to its CSS variable on `scope` whenever column sizing changes, so resizing updates widths
|
|
6
|
+
* without rendering the grid again.
|
|
7
|
+
*/
|
|
8
|
+
export declare function useDataGridColumnSizes<T extends RowData>(table: Table<DataGridFeatures, T>, scope: RefObject<HTMLElement | null>): void;
|
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
export { DataGrid, DataGridColumnHeader, DataGridFilter, DataGridPagination, dataGridFeatures } from "./DataGrid.js";
|
|
2
|
-
export type { DataGridProps, DataGridTable } from "./DataGrid.js";
|
|
1
|
+
export { DataGrid, DataGridCells, DataGridColumnHeader, DataGridFilter, DataGridPagination, dataGridFeatures, } from "./DataGrid.js";
|
|
2
|
+
export type { DataGridColumn, DataGridFeatures, DataGridProps, DataGridRow, DataGridTable, IDataGridColumnMeta, } from "./DataGrid.js";
|
|
3
|
+
export { DataGridColumnOptions } from "./DataGridColumnOptions.js";
|
|
@@ -2,217 +2,140 @@ import"../../chunk-cp2m7y7v.js";
|
|
|
2
2
|
import {
|
|
3
3
|
Button2
|
|
4
4
|
} from "../../chunk-q7p28b89.js";
|
|
5
|
+
import"../../chunk-zte6pw69.js";
|
|
6
|
+
import"../../chunk-r9qrb6b6.js";
|
|
7
|
+
import"../../chunk-59p19t57.js";
|
|
5
8
|
import {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
dataGridFeatures2,
|
|
10
|
+
getDataGridColumnLabel,
|
|
11
|
+
DataGridCells2,
|
|
12
|
+
DataGrid2,
|
|
13
|
+
DataGridColumnHeader2,
|
|
14
|
+
DataGridFilter2,
|
|
15
|
+
DataGridPagination2
|
|
16
|
+
} from "../../chunk-yfr9syen.js";
|
|
13
17
|
import {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
} from "../../chunk-r9qrb6b6.js";
|
|
18
|
+
Checkbox2
|
|
19
|
+
} from "../../chunk-tnnf8ydf.js";
|
|
17
20
|
import {
|
|
18
|
-
|
|
19
|
-
} from "../../chunk-
|
|
20
|
-
|
|
21
|
-
|
|
21
|
+
Label2
|
|
22
|
+
} from "../../chunk-jcxxjkqx.js";
|
|
23
|
+
import"../../chunk-e6hk39ev.js";
|
|
24
|
+
import"../../chunk-j89xg1ak.js";
|
|
25
|
+
import"../../chunk-aa7m22zj.js";
|
|
22
26
|
import {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
columnVisibilityFeature,
|
|
41
|
-
rowPaginationFeature,
|
|
42
|
-
rowSelectionFeature,
|
|
43
|
-
rowSortingFeature,
|
|
44
|
-
filteredRowModel: createFilteredRowModel(),
|
|
45
|
-
sortedRowModel: createSortedRowModel(),
|
|
46
|
-
paginatedRowModel: createPaginatedRowModel(),
|
|
47
|
-
filterFns: { includesString: filterFn_includesString },
|
|
48
|
-
sortFns: { alphanumeric: sortFn_alphanumeric, basic: sortFn_basic }
|
|
49
|
-
});
|
|
50
|
-
function DataGrid({
|
|
51
|
-
table,
|
|
52
|
-
label,
|
|
53
|
-
toolbar,
|
|
54
|
-
empty = "No results.",
|
|
55
|
-
loading = false,
|
|
56
|
-
pagination = true,
|
|
57
|
-
density
|
|
58
|
-
}) {
|
|
59
|
-
const rows = table.getRowModel().rows;
|
|
60
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
61
|
-
"data-density": density,
|
|
62
|
-
"data-scroll": "none",
|
|
63
|
-
className: "grid min-w-0 gap-3",
|
|
64
|
-
"aria-busy": loading,
|
|
65
|
-
children: [
|
|
66
|
-
toolbar,
|
|
67
|
-
/* @__PURE__ */ jsx("div", {
|
|
68
|
-
className: "min-w-0 rounded-sm border border-border",
|
|
69
|
-
children: /* @__PURE__ */ jsxs(Table2, {
|
|
70
|
-
"aria-label": label,
|
|
71
|
-
children: [
|
|
72
|
-
/* @__PURE__ */ jsx(TableHeader2, {
|
|
73
|
-
children: table.getHeaderGroups().map((group) => /* @__PURE__ */ jsx(TableRow2, {
|
|
74
|
-
children: group.headers.map((header) => /* @__PURE__ */ jsx(TableHead2, {
|
|
75
|
-
colSpan: header.colSpan,
|
|
76
|
-
"aria-sort": header.column.getCanSort() ? header.column.getIsSorted() === "asc" ? "ascending" : header.column.getIsSorted() === "desc" ? "descending" : "none" : undefined,
|
|
77
|
-
children: header.isPlaceholder ? null : /* @__PURE__ */ jsx(table.FlexRender, {
|
|
78
|
-
header
|
|
79
|
-
})
|
|
80
|
-
}, header.id))
|
|
81
|
-
}, group.id))
|
|
82
|
-
}),
|
|
83
|
-
/* @__PURE__ */ jsx(TableBody2, {
|
|
84
|
-
children: loading ? /* @__PURE__ */ jsx(TableRow2, {
|
|
85
|
-
children: /* @__PURE__ */ jsx(TableCell2, {
|
|
86
|
-
colSpan: table.getVisibleLeafColumns().length,
|
|
87
|
-
children: /* @__PURE__ */ jsxs("p", {
|
|
88
|
-
role: "status",
|
|
89
|
-
children: [
|
|
90
|
-
"Loading ",
|
|
91
|
-
label,
|
|
92
|
-
"…"
|
|
93
|
-
]
|
|
94
|
-
})
|
|
95
|
-
})
|
|
96
|
-
}) : rows.length ? rows.map((row) => /* @__PURE__ */ jsx(TableRow2, {
|
|
97
|
-
"data-state": row.getIsSelected() ? "selected" : undefined,
|
|
98
|
-
children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell2, {
|
|
99
|
-
children: /* @__PURE__ */ jsx(table.FlexRender, {
|
|
100
|
-
cell
|
|
101
|
-
})
|
|
102
|
-
}, cell.id))
|
|
103
|
-
}, row.id)) : /* @__PURE__ */ jsx(TableRow2, {
|
|
104
|
-
children: /* @__PURE__ */ jsx(TableCell2, {
|
|
105
|
-
colSpan: table.getVisibleLeafColumns().length,
|
|
106
|
-
children: /* @__PURE__ */ jsx("p", {
|
|
107
|
-
role: "status",
|
|
108
|
-
children: empty
|
|
109
|
-
})
|
|
110
|
-
})
|
|
111
|
-
})
|
|
112
|
-
})
|
|
113
|
-
]
|
|
114
|
-
})
|
|
115
|
-
}),
|
|
116
|
-
pagination && /* @__PURE__ */ jsx(DataGridPagination, {
|
|
117
|
-
table
|
|
118
|
-
})
|
|
119
|
-
]
|
|
120
|
-
});
|
|
121
|
-
}
|
|
122
|
-
function DataGridColumnHeader({
|
|
123
|
-
column,
|
|
124
|
-
children
|
|
125
|
-
}) {
|
|
126
|
-
const sorted = column.getIsSorted();
|
|
127
|
-
return column.getCanSort() ? /* @__PURE__ */ jsxs(Button2, {
|
|
128
|
-
type: "button",
|
|
129
|
-
variant: "ghost",
|
|
130
|
-
size: "sm",
|
|
131
|
-
onClick: column.getToggleSortingHandler(),
|
|
132
|
-
children: [
|
|
133
|
-
children,
|
|
134
|
-
sorted === "asc" ? /* @__PURE__ */ jsx(ArrowUpIcon, {
|
|
135
|
-
"aria-hidden": "true"
|
|
136
|
-
}) : sorted === "desc" ? /* @__PURE__ */ jsx(ArrowDownIcon, {
|
|
137
|
-
"aria-hidden": "true"
|
|
138
|
-
}) : /* @__PURE__ */ jsx(ChevronsUpDownIcon, {
|
|
139
|
-
"aria-hidden": "true"
|
|
140
|
-
})
|
|
141
|
-
]
|
|
142
|
-
}) : /* @__PURE__ */ jsx("span", {
|
|
143
|
-
children
|
|
144
|
-
});
|
|
27
|
+
Popover2,
|
|
28
|
+
PopoverTrigger2,
|
|
29
|
+
PopoverContent2,
|
|
30
|
+
PopoverHeader2,
|
|
31
|
+
PopoverTitle2
|
|
32
|
+
} from "../../chunk-4djw71cv.js";
|
|
33
|
+
// src/components/data-grid/DataGridColumnOptions.tsx
|
|
34
|
+
import { Subscribe } from "@tanstack/react-table";
|
|
35
|
+
import { ArrowDownIcon, ArrowUpIcon, Columns3Icon } from "lucide-react";
|
|
36
|
+
|
|
37
|
+
// src/components/data-grid/moveDataGridColumn.ts
|
|
38
|
+
function moveDataGridColumn(order, movableIds, columnId, offset) {
|
|
39
|
+
const index = movableIds.indexOf(columnId);
|
|
40
|
+
const neighbour = index < 0 ? undefined : movableIds[index + offset];
|
|
41
|
+
if (neighbour === undefined)
|
|
42
|
+
return [...order];
|
|
43
|
+
return order.map((id) => id === columnId ? neighbour : id === neighbour ? columnId : id);
|
|
145
44
|
}
|
|
146
|
-
|
|
45
|
+
|
|
46
|
+
// src/components/data-grid/DataGridColumnOptions.tsx
|
|
47
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
48
|
+
function DataGridColumnOptions({
|
|
147
49
|
table,
|
|
148
|
-
|
|
149
|
-
label
|
|
50
|
+
label = "Columns"
|
|
150
51
|
}) {
|
|
151
|
-
|
|
152
|
-
if (!column)
|
|
153
|
-
throw new Error(`Unknown filter column: ${columnId}`);
|
|
154
|
-
const value = column.getFilterValue();
|
|
155
|
-
return /* @__PURE__ */ jsx(Input2, {
|
|
156
|
-
"aria-label": label,
|
|
157
|
-
placeholder: label,
|
|
158
|
-
value: typeof value === "string" ? value : "",
|
|
159
|
-
onChange: (event) => column.setFilterValue(event.target.value)
|
|
160
|
-
});
|
|
161
|
-
}
|
|
162
|
-
function DataGridPagination({ table }) {
|
|
163
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
164
|
-
className: "flex flex-wrap items-center justify-between gap-3 text-sm",
|
|
52
|
+
return /* @__PURE__ */ jsxs(Popover2, {
|
|
165
53
|
children: [
|
|
166
|
-
/* @__PURE__ */ jsxs(
|
|
167
|
-
|
|
54
|
+
/* @__PURE__ */ jsxs(PopoverTrigger2, {
|
|
55
|
+
render: /* @__PURE__ */ jsx(Button2, {
|
|
56
|
+
variant: "outline"
|
|
57
|
+
}),
|
|
168
58
|
children: [
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
Math.max(1, table.getPageCount())
|
|
59
|
+
/* @__PURE__ */ jsx(Columns3Icon, {
|
|
60
|
+
"data-icon": "inline-start",
|
|
61
|
+
"aria-hidden": "true"
|
|
62
|
+
}),
|
|
63
|
+
label
|
|
175
64
|
]
|
|
176
65
|
}),
|
|
177
|
-
/* @__PURE__ */ jsxs(
|
|
178
|
-
|
|
66
|
+
/* @__PURE__ */ jsxs(PopoverContent2, {
|
|
67
|
+
align: "end",
|
|
179
68
|
children: [
|
|
180
|
-
/* @__PURE__ */
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
children: [
|
|
185
|
-
[10, 20, 50, 100].map((size) => /* @__PURE__ */ jsxs(NativeSelectOption2, {
|
|
186
|
-
value: size,
|
|
187
|
-
children: [
|
|
188
|
-
size,
|
|
189
|
-
" rows"
|
|
190
|
-
]
|
|
191
|
-
}, size)),
|
|
192
|
-
![10, 20, 50, 100].includes(table.state.pagination.pageSize) && /* @__PURE__ */ jsxs(NativeSelectOption2, {
|
|
193
|
-
value: table.state.pagination.pageSize,
|
|
194
|
-
children: [
|
|
195
|
-
table.state.pagination.pageSize,
|
|
196
|
-
" rows"
|
|
197
|
-
]
|
|
198
|
-
})
|
|
199
|
-
]
|
|
69
|
+
/* @__PURE__ */ jsx(PopoverHeader2, {
|
|
70
|
+
children: /* @__PURE__ */ jsx(PopoverTitle2, {
|
|
71
|
+
children: label
|
|
72
|
+
})
|
|
200
73
|
}),
|
|
201
|
-
/* @__PURE__ */ jsx(
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
74
|
+
/* @__PURE__ */ jsx(Subscribe, {
|
|
75
|
+
source: table.atoms.columnOrder,
|
|
76
|
+
children: () => /* @__PURE__ */ jsx(Subscribe, {
|
|
77
|
+
source: table.atoms.columnVisibility,
|
|
78
|
+
children: () => {
|
|
79
|
+
const columns = table.getAllLeafColumns().filter((column) => column.getCanHide());
|
|
80
|
+
const movableIds = columns.map((column) => column.id);
|
|
81
|
+
const move = (columnId, offset) => table.setColumnOrder(moveDataGridColumn(table.getAllLeafColumns().map((column) => column.id), movableIds, columnId, offset));
|
|
82
|
+
return /* @__PURE__ */ jsx("ul", {
|
|
83
|
+
"aria-label": label,
|
|
84
|
+
className: "grid gap-1",
|
|
85
|
+
children: columns.map((column, index) => {
|
|
86
|
+
const name = getDataGridColumnLabel(column);
|
|
87
|
+
return /* @__PURE__ */ jsxs("li", {
|
|
88
|
+
className: "flex items-center gap-1",
|
|
89
|
+
children: [
|
|
90
|
+
/* @__PURE__ */ jsxs(Label2, {
|
|
91
|
+
className: "min-w-0 flex-1 py-1",
|
|
92
|
+
children: [
|
|
93
|
+
/* @__PURE__ */ jsx(Checkbox2, {
|
|
94
|
+
checked: column.getIsVisible(),
|
|
95
|
+
onCheckedChange: (checked) => column.toggleVisibility(checked)
|
|
96
|
+
}),
|
|
97
|
+
/* @__PURE__ */ jsx("span", {
|
|
98
|
+
className: "truncate",
|
|
99
|
+
children: name
|
|
100
|
+
})
|
|
101
|
+
]
|
|
102
|
+
}),
|
|
103
|
+
/* @__PURE__ */ jsx(Button2, {
|
|
104
|
+
variant: "ghost",
|
|
105
|
+
size: "icon-sm",
|
|
106
|
+
"aria-label": `Move ${name} earlier`,
|
|
107
|
+
disabled: index === 0,
|
|
108
|
+
onClick: () => move(column.id, -1),
|
|
109
|
+
children: /* @__PURE__ */ jsx(ArrowUpIcon, {
|
|
110
|
+
"aria-hidden": "true"
|
|
111
|
+
})
|
|
112
|
+
}),
|
|
113
|
+
/* @__PURE__ */ jsx(Button2, {
|
|
114
|
+
variant: "ghost",
|
|
115
|
+
size: "icon-sm",
|
|
116
|
+
"aria-label": `Move ${name} later`,
|
|
117
|
+
disabled: index === columns.length - 1,
|
|
118
|
+
onClick: () => move(column.id, 1),
|
|
119
|
+
children: /* @__PURE__ */ jsx(ArrowDownIcon, {
|
|
120
|
+
"aria-hidden": "true"
|
|
121
|
+
})
|
|
122
|
+
})
|
|
123
|
+
]
|
|
124
|
+
}, column.id);
|
|
125
|
+
})
|
|
126
|
+
});
|
|
127
|
+
}
|
|
128
|
+
})
|
|
208
129
|
}),
|
|
209
130
|
/* @__PURE__ */ jsx(Button2, {
|
|
210
|
-
type: "button",
|
|
211
131
|
variant: "outline",
|
|
212
132
|
size: "sm",
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
133
|
+
onClick: () => {
|
|
134
|
+
table.resetColumnVisibility();
|
|
135
|
+
table.resetColumnOrder();
|
|
136
|
+
table.resetColumnSizing();
|
|
137
|
+
},
|
|
138
|
+
children: "Reset columns"
|
|
216
139
|
})
|
|
217
140
|
]
|
|
218
141
|
})
|
|
@@ -220,9 +143,11 @@ function DataGridPagination({ table }) {
|
|
|
220
143
|
});
|
|
221
144
|
}
|
|
222
145
|
export {
|
|
223
|
-
DataGrid,
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
146
|
+
DataGrid2 as DataGrid,
|
|
147
|
+
DataGridCells2 as DataGridCells,
|
|
148
|
+
DataGridColumnHeader2 as DataGridColumnHeader,
|
|
149
|
+
DataGridColumnOptions,
|
|
150
|
+
DataGridFilter2 as DataGridFilter,
|
|
151
|
+
DataGridPagination2 as DataGridPagination,
|
|
152
|
+
dataGridFeatures2 as dataGridFeatures
|
|
228
153
|
};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Swaps `columnId` with its neighbour among `movableIds` in `order`, leaving every other column where it is.
|
|
3
|
+
* Returns `order` unchanged when the column is already at that end or is not movable.
|
|
4
|
+
*/
|
|
5
|
+
export declare function moveDataGridColumn(order: readonly string[], movableIds: readonly string[], columnId: string, offset: -1 | 1): string[];
|
|
@@ -15,9 +15,11 @@ import {
|
|
|
15
15
|
Input2
|
|
16
16
|
} from "../../chunk-59p19t57.js";
|
|
17
17
|
import {
|
|
18
|
-
Checkbox2
|
|
18
|
+
Checkbox2
|
|
19
|
+
} from "../../chunk-tnnf8ydf.js";
|
|
20
|
+
import {
|
|
19
21
|
Spinner2
|
|
20
|
-
} from "../../chunk-
|
|
22
|
+
} from "../../chunk-1xncv9gb.js";
|
|
21
23
|
var __create = Object.create;
|
|
22
24
|
var __getProtoOf = Object.getPrototypeOf;
|
|
23
25
|
var __defProp = Object.defineProperty;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import type { RowData } from "@tanstack/react-table";
|
|
2
|
+
import { type ReactElement, type ReactNode } from "react";
|
|
3
|
+
import { type DataGridRow, type DataGridTable } from "../data-grid/DataGrid.js";
|
|
4
|
+
import { type IVirtualTableRowProps } from "../virtual-table/VirtualTable.js";
|
|
5
|
+
interface IVirtualDataGridProps<T extends RowData, TSelected> {
|
|
6
|
+
table: DataGridTable<T, TSelected>;
|
|
7
|
+
label: string;
|
|
8
|
+
maxHeight?: number | string;
|
|
9
|
+
estimateRowHeight?: number;
|
|
10
|
+
overscan?: number;
|
|
11
|
+
/** Row IDs that stay rendered while scrolled out of view, such as rows with an open editor. */
|
|
12
|
+
retainedRowIds?: readonly string[];
|
|
13
|
+
/**
|
|
14
|
+
* Renders one row. Spread `props` onto the row element and render `DataGridCells` inside it; the default renders a
|
|
15
|
+
* plain `TableRow` marked selected while the row is selected.
|
|
16
|
+
*/
|
|
17
|
+
renderRow?: (row: DataGridRow<T>, props: IVirtualTableRowProps) => ReactNode;
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* A virtualized, fixed-layout data grid over every filtered and sorted row, without pagination. Columns marked
|
|
21
|
+
* `fill` take the remaining width; the others keep their sizes and can be resized by dragging or from the keyboard.
|
|
22
|
+
* Column widths change through CSS variables, so a `useTable` selector can leave out sizing state and resizing never
|
|
23
|
+
* renders rows again.
|
|
24
|
+
*/
|
|
25
|
+
export declare function VirtualDataGrid<T extends RowData, TSelected>({ table, label, maxHeight, estimateRowHeight, overscan, retainedRowIds, renderRow, }: IVirtualDataGridProps<T, TSelected>): ReactElement;
|
|
26
|
+
export {};
|