@stereopt/data-table 0.2.0 → 0.2.1
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/index.cjs +164 -109
- package/dist/index.d.cts +10 -1
- package/dist/index.d.ts +10 -1
- package/dist/index.js +171 -111
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -30,8 +30,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
30
30
|
// src/index.ts
|
|
31
31
|
var index_exports = {};
|
|
32
32
|
__export(index_exports, {
|
|
33
|
-
|
|
34
|
-
|
|
33
|
+
DataGrid: () => DataGrid,
|
|
34
|
+
DataTable: () => DataTable
|
|
35
35
|
});
|
|
36
36
|
module.exports = __toCommonJS(index_exports);
|
|
37
37
|
|
|
@@ -42,80 +42,27 @@ function cn(...inputs) {
|
|
|
42
42
|
return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
|
|
43
43
|
}
|
|
44
44
|
|
|
45
|
-
// src/components/ui/
|
|
45
|
+
// src/components/ui/card.tsx
|
|
46
46
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
47
|
-
function
|
|
47
|
+
function Card({ className, ...props }) {
|
|
48
48
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
49
49
|
"div",
|
|
50
|
-
{
|
|
51
|
-
className: "relative w-full overflow-x-auto",
|
|
52
|
-
"data-slot": "table-container",
|
|
53
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
54
|
-
"table",
|
|
55
|
-
{
|
|
56
|
-
className: cn("w-full caption-bottom text-sm", className),
|
|
57
|
-
"data-slot": "table",
|
|
58
|
-
...props
|
|
59
|
-
}
|
|
60
|
-
)
|
|
61
|
-
}
|
|
62
|
-
);
|
|
63
|
-
}
|
|
64
|
-
function TableHeader({ className, ...props }) {
|
|
65
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
66
|
-
"thead",
|
|
67
|
-
{
|
|
68
|
-
className: cn("[&_tr]:border-b", className),
|
|
69
|
-
"data-slot": "table-header",
|
|
70
|
-
...props
|
|
71
|
-
}
|
|
72
|
-
);
|
|
73
|
-
}
|
|
74
|
-
function TableBody({ className, ...props }) {
|
|
75
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
76
|
-
"tbody",
|
|
77
|
-
{
|
|
78
|
-
className: cn("[&_tr:last-child]:border-0", className),
|
|
79
|
-
"data-slot": "table-body",
|
|
80
|
-
...props
|
|
81
|
-
}
|
|
82
|
-
);
|
|
83
|
-
}
|
|
84
|
-
function TableRow({ className, ...props }) {
|
|
85
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
86
|
-
"tr",
|
|
87
|
-
{
|
|
88
|
-
className: cn(
|
|
89
|
-
"border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
|
|
90
|
-
className
|
|
91
|
-
),
|
|
92
|
-
"data-slot": "table-row",
|
|
93
|
-
...props
|
|
94
|
-
}
|
|
95
|
-
);
|
|
96
|
-
}
|
|
97
|
-
function TableHead({ className, ...props }) {
|
|
98
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
99
|
-
"th",
|
|
100
50
|
{
|
|
101
51
|
className: cn(
|
|
102
|
-
"
|
|
52
|
+
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
|
|
103
53
|
className
|
|
104
54
|
),
|
|
105
|
-
"data-slot": "
|
|
55
|
+
"data-slot": "card",
|
|
106
56
|
...props
|
|
107
57
|
}
|
|
108
58
|
);
|
|
109
59
|
}
|
|
110
|
-
function
|
|
60
|
+
function CardContent({ className, ...props }) {
|
|
111
61
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
112
|
-
"
|
|
62
|
+
"div",
|
|
113
63
|
{
|
|
114
|
-
className: cn(
|
|
115
|
-
|
|
116
|
-
className
|
|
117
|
-
),
|
|
118
|
-
"data-slot": "table-cell",
|
|
64
|
+
className: cn("px-6", className),
|
|
65
|
+
"data-slot": "card-content",
|
|
119
66
|
...props
|
|
120
67
|
}
|
|
121
68
|
);
|
|
@@ -8502,26 +8449,143 @@ var DataTableControls = ({
|
|
|
8502
8449
|
] });
|
|
8503
8450
|
};
|
|
8504
8451
|
|
|
8505
|
-
// src/
|
|
8452
|
+
// src/lib/search.ts
|
|
8453
|
+
var import_match_sorter_utils = require("@tanstack/match-sorter-utils");
|
|
8454
|
+
var fuzzyFilterFn = (searchableColumns) => (row, columnId, filterValue, addMeta) => {
|
|
8455
|
+
if (!searchableColumns) return false;
|
|
8456
|
+
if (!searchableColumns.includes(columnId)) return false;
|
|
8457
|
+
const itemRank = (0, import_match_sorter_utils.rankItem)(row.getValue(columnId), filterValue);
|
|
8458
|
+
addMeta({ itemRank });
|
|
8459
|
+
return itemRank.passed;
|
|
8460
|
+
};
|
|
8461
|
+
|
|
8462
|
+
// src/dataTable/DataGrid.tsx
|
|
8463
|
+
var import_react_table = require("@tanstack/react-table");
|
|
8506
8464
|
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
8465
|
+
var DataGrid = ({
|
|
8466
|
+
columns,
|
|
8467
|
+
render,
|
|
8468
|
+
data,
|
|
8469
|
+
config
|
|
8470
|
+
}) => {
|
|
8471
|
+
const table = (0, import_react_table.useReactTable)({
|
|
8472
|
+
data,
|
|
8473
|
+
columns,
|
|
8474
|
+
getCoreRowModel: (0, import_react_table.getCoreRowModel)(),
|
|
8475
|
+
getFilteredRowModel: (0, import_react_table.getFilteredRowModel)(),
|
|
8476
|
+
getFacetedRowModel: (0, import_react_table.getFacetedRowModel)(),
|
|
8477
|
+
getFacetedUniqueValues: (0, import_react_table.getFacetedUniqueValues)(),
|
|
8478
|
+
globalFilterFn: fuzzyFilterFn(config?.search?.filterFields),
|
|
8479
|
+
autoResetPageIndex: false,
|
|
8480
|
+
initialState: {
|
|
8481
|
+
columnVisibility: config?.columnVisibility
|
|
8482
|
+
}
|
|
8483
|
+
});
|
|
8484
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "w-full flex flex-col gap-4", children: [
|
|
8485
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DataTableControls, { filters: config?.filters, table }),
|
|
8486
|
+
table.getRowModel().rows?.length ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4", children: table.getRowModel().rows.map((row) => render(row.id, row.original)) }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "py-4", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Card, { className: "max-w-xl mx-auto", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CardContent, { className: "text-center", children: "No results." }) }) })
|
|
8487
|
+
] });
|
|
8488
|
+
};
|
|
8489
|
+
|
|
8490
|
+
// src/components/ui/table.tsx
|
|
8491
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
8492
|
+
function Table({ className, ...props }) {
|
|
8493
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
8494
|
+
"div",
|
|
8495
|
+
{
|
|
8496
|
+
className: "relative w-full overflow-x-auto",
|
|
8497
|
+
"data-slot": "table-container",
|
|
8498
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
8499
|
+
"table",
|
|
8500
|
+
{
|
|
8501
|
+
className: cn("w-full caption-bottom text-sm", className),
|
|
8502
|
+
"data-slot": "table",
|
|
8503
|
+
...props
|
|
8504
|
+
}
|
|
8505
|
+
)
|
|
8506
|
+
}
|
|
8507
|
+
);
|
|
8508
|
+
}
|
|
8509
|
+
function TableHeader({ className, ...props }) {
|
|
8510
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
8511
|
+
"thead",
|
|
8512
|
+
{
|
|
8513
|
+
className: cn("[&_tr]:border-b", className),
|
|
8514
|
+
"data-slot": "table-header",
|
|
8515
|
+
...props
|
|
8516
|
+
}
|
|
8517
|
+
);
|
|
8518
|
+
}
|
|
8519
|
+
function TableBody({ className, ...props }) {
|
|
8520
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
8521
|
+
"tbody",
|
|
8522
|
+
{
|
|
8523
|
+
className: cn("[&_tr:last-child]:border-0", className),
|
|
8524
|
+
"data-slot": "table-body",
|
|
8525
|
+
...props
|
|
8526
|
+
}
|
|
8527
|
+
);
|
|
8528
|
+
}
|
|
8529
|
+
function TableRow({ className, ...props }) {
|
|
8530
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
8531
|
+
"tr",
|
|
8532
|
+
{
|
|
8533
|
+
className: cn(
|
|
8534
|
+
"border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
|
|
8535
|
+
className
|
|
8536
|
+
),
|
|
8537
|
+
"data-slot": "table-row",
|
|
8538
|
+
...props
|
|
8539
|
+
}
|
|
8540
|
+
);
|
|
8541
|
+
}
|
|
8542
|
+
function TableHead({ className, ...props }) {
|
|
8543
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
8544
|
+
"th",
|
|
8545
|
+
{
|
|
8546
|
+
className: cn(
|
|
8547
|
+
"h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
|
|
8548
|
+
className
|
|
8549
|
+
),
|
|
8550
|
+
"data-slot": "table-head",
|
|
8551
|
+
...props
|
|
8552
|
+
}
|
|
8553
|
+
);
|
|
8554
|
+
}
|
|
8555
|
+
function TableCell({ className, ...props }) {
|
|
8556
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
8557
|
+
"td",
|
|
8558
|
+
{
|
|
8559
|
+
className: cn(
|
|
8560
|
+
"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
|
|
8561
|
+
className
|
|
8562
|
+
),
|
|
8563
|
+
"data-slot": "table-cell",
|
|
8564
|
+
...props
|
|
8565
|
+
}
|
|
8566
|
+
);
|
|
8567
|
+
}
|
|
8568
|
+
|
|
8569
|
+
// src/dataTable/pagination/DataTablePagination.tsx
|
|
8570
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
8507
8571
|
function DataTablePagination({
|
|
8508
8572
|
table
|
|
8509
8573
|
}) {
|
|
8510
|
-
return /* @__PURE__ */ (0,
|
|
8511
|
-
/* @__PURE__ */ (0,
|
|
8574
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center justify-between px-2 pt-4", children: [
|
|
8575
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "text-muted-foreground flex-1 text-sm", children: [
|
|
8512
8576
|
table.getFilteredRowModel().rows.length,
|
|
8513
8577
|
" rows"
|
|
8514
8578
|
] }),
|
|
8515
|
-
/* @__PURE__ */ (0,
|
|
8516
|
-
/* @__PURE__ */ (0,
|
|
8579
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center space-x-6 lg:space-x-8", children: [
|
|
8580
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex w-[100px] items-center justify-center text-sm font-medium", children: [
|
|
8517
8581
|
"Page ",
|
|
8518
8582
|
table.getState().pagination.pageIndex + 1,
|
|
8519
8583
|
" of",
|
|
8520
8584
|
" ",
|
|
8521
8585
|
table.getPageCount() || 1
|
|
8522
8586
|
] }),
|
|
8523
|
-
/* @__PURE__ */ (0,
|
|
8524
|
-
/* @__PURE__ */ (0,
|
|
8587
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center space-x-2", children: [
|
|
8588
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
8525
8589
|
Button,
|
|
8526
8590
|
{
|
|
8527
8591
|
className: "hidden size-8 lg:flex",
|
|
@@ -8530,12 +8594,12 @@ function DataTablePagination({
|
|
|
8530
8594
|
size: "icon",
|
|
8531
8595
|
variant: "outline",
|
|
8532
8596
|
children: [
|
|
8533
|
-
/* @__PURE__ */ (0,
|
|
8534
|
-
/* @__PURE__ */ (0,
|
|
8597
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "sr-only", children: "Go to first page" }),
|
|
8598
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ChevronsLeft, {})
|
|
8535
8599
|
]
|
|
8536
8600
|
}
|
|
8537
8601
|
),
|
|
8538
|
-
/* @__PURE__ */ (0,
|
|
8602
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
8539
8603
|
Button,
|
|
8540
8604
|
{
|
|
8541
8605
|
className: "size-8",
|
|
@@ -8544,12 +8608,12 @@ function DataTablePagination({
|
|
|
8544
8608
|
size: "icon",
|
|
8545
8609
|
variant: "outline",
|
|
8546
8610
|
children: [
|
|
8547
|
-
/* @__PURE__ */ (0,
|
|
8548
|
-
/* @__PURE__ */ (0,
|
|
8611
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "sr-only", children: "Go to previous page" }),
|
|
8612
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ChevronLeft, {})
|
|
8549
8613
|
]
|
|
8550
8614
|
}
|
|
8551
8615
|
),
|
|
8552
|
-
/* @__PURE__ */ (0,
|
|
8616
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
8553
8617
|
Button,
|
|
8554
8618
|
{
|
|
8555
8619
|
className: "size-8",
|
|
@@ -8558,12 +8622,12 @@ function DataTablePagination({
|
|
|
8558
8622
|
size: "icon",
|
|
8559
8623
|
variant: "outline",
|
|
8560
8624
|
children: [
|
|
8561
|
-
/* @__PURE__ */ (0,
|
|
8562
|
-
/* @__PURE__ */ (0,
|
|
8625
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "sr-only", children: "Go to next page" }),
|
|
8626
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ChevronRight, {})
|
|
8563
8627
|
]
|
|
8564
8628
|
}
|
|
8565
8629
|
),
|
|
8566
|
-
/* @__PURE__ */ (0,
|
|
8630
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
8567
8631
|
Button,
|
|
8568
8632
|
{
|
|
8569
8633
|
className: "hidden size-8 lg:flex",
|
|
@@ -8572,8 +8636,8 @@ function DataTablePagination({
|
|
|
8572
8636
|
size: "icon",
|
|
8573
8637
|
variant: "outline",
|
|
8574
8638
|
children: [
|
|
8575
|
-
/* @__PURE__ */ (0,
|
|
8576
|
-
/* @__PURE__ */ (0,
|
|
8639
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "sr-only", children: "Go to last page" }),
|
|
8640
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ChevronsRight, {})
|
|
8577
8641
|
]
|
|
8578
8642
|
}
|
|
8579
8643
|
)
|
|
@@ -8582,40 +8646,30 @@ function DataTablePagination({
|
|
|
8582
8646
|
] });
|
|
8583
8647
|
}
|
|
8584
8648
|
|
|
8585
|
-
// src/lib/search.ts
|
|
8586
|
-
var import_match_sorter_utils = require("@tanstack/match-sorter-utils");
|
|
8587
|
-
var fuzzyFilterFn = (searchableColumns) => (row, columnId, filterValue, addMeta) => {
|
|
8588
|
-
if (!searchableColumns) return false;
|
|
8589
|
-
if (!searchableColumns.includes(columnId)) return false;
|
|
8590
|
-
const itemRank = (0, import_match_sorter_utils.rankItem)(row.getValue(columnId), filterValue);
|
|
8591
|
-
addMeta({ itemRank });
|
|
8592
|
-
return itemRank.passed;
|
|
8593
|
-
};
|
|
8594
|
-
|
|
8595
8649
|
// src/dataTable/DataTable.tsx
|
|
8596
|
-
var
|
|
8597
|
-
var
|
|
8650
|
+
var import_react_table2 = require("@tanstack/react-table");
|
|
8651
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
8598
8652
|
function DataTable({
|
|
8599
8653
|
columns,
|
|
8600
8654
|
data,
|
|
8601
8655
|
config
|
|
8602
8656
|
}) {
|
|
8603
|
-
const table = (0,
|
|
8657
|
+
const table = (0, import_react_table2.useReactTable)({
|
|
8604
8658
|
data,
|
|
8605
8659
|
columns,
|
|
8606
|
-
getCoreRowModel: (0,
|
|
8607
|
-
getPaginationRowModel: (0,
|
|
8608
|
-
getFilteredRowModel: (0,
|
|
8609
|
-
getFacetedRowModel: (0,
|
|
8610
|
-
getFacetedUniqueValues: (0,
|
|
8660
|
+
getCoreRowModel: (0, import_react_table2.getCoreRowModel)(),
|
|
8661
|
+
getPaginationRowModel: (0, import_react_table2.getPaginationRowModel)(),
|
|
8662
|
+
getFilteredRowModel: (0, import_react_table2.getFilteredRowModel)(),
|
|
8663
|
+
getFacetedRowModel: (0, import_react_table2.getFacetedRowModel)(),
|
|
8664
|
+
getFacetedUniqueValues: (0, import_react_table2.getFacetedUniqueValues)(),
|
|
8611
8665
|
globalFilterFn: fuzzyFilterFn(config?.search?.filterFields),
|
|
8612
8666
|
autoResetPageIndex: false,
|
|
8613
8667
|
initialState: {
|
|
8614
8668
|
columnVisibility: config?.columnVisibility
|
|
8615
8669
|
}
|
|
8616
8670
|
});
|
|
8617
|
-
return /* @__PURE__ */ (0,
|
|
8618
|
-
/* @__PURE__ */ (0,
|
|
8671
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "w-full", children: [
|
|
8672
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
8619
8673
|
DataTableControls,
|
|
8620
8674
|
{
|
|
8621
8675
|
filters: config?.filters,
|
|
@@ -8623,14 +8677,14 @@ function DataTable({
|
|
|
8623
8677
|
table
|
|
8624
8678
|
}
|
|
8625
8679
|
),
|
|
8626
|
-
/* @__PURE__ */ (0,
|
|
8627
|
-
/* @__PURE__ */ (0,
|
|
8628
|
-
return /* @__PURE__ */ (0,
|
|
8680
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "rounded-md border overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Table, { children: [
|
|
8681
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TableHeader, { className: "bg-muted", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TableRow, { children: headerGroup.headers.map((header) => {
|
|
8682
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
8629
8683
|
TableHead,
|
|
8630
8684
|
{
|
|
8631
8685
|
colSpan: header.colSpan,
|
|
8632
8686
|
style: { width: header.getSize() },
|
|
8633
|
-
children: header.isPlaceholder ? null : (0,
|
|
8687
|
+
children: header.isPlaceholder ? null : (0, import_react_table2.flexRender)(
|
|
8634
8688
|
header.column.columnDef.header,
|
|
8635
8689
|
header.getContext()
|
|
8636
8690
|
)
|
|
@@ -8638,17 +8692,17 @@ function DataTable({
|
|
|
8638
8692
|
header.id
|
|
8639
8693
|
);
|
|
8640
8694
|
}) }, headerGroup.id)) }),
|
|
8641
|
-
/* @__PURE__ */ (0,
|
|
8695
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
8642
8696
|
TableRow,
|
|
8643
8697
|
{
|
|
8644
8698
|
"data-state": row.getIsSelected() && "selected",
|
|
8645
|
-
children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0,
|
|
8699
|
+
children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TableCell, { className: "truncate max-w-0", children: (0, import_react_table2.flexRender)(
|
|
8646
8700
|
cell.column.columnDef.cell,
|
|
8647
8701
|
cell.getContext()
|
|
8648
8702
|
) }, cell.id))
|
|
8649
8703
|
},
|
|
8650
8704
|
row.id
|
|
8651
|
-
)) : /* @__PURE__ */ (0,
|
|
8705
|
+
)) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
8652
8706
|
TableCell,
|
|
8653
8707
|
{
|
|
8654
8708
|
className: "h-24 text-center",
|
|
@@ -8657,11 +8711,12 @@ function DataTable({
|
|
|
8657
8711
|
}
|
|
8658
8712
|
) }) })
|
|
8659
8713
|
] }) }),
|
|
8660
|
-
/* @__PURE__ */ (0,
|
|
8714
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DataTablePagination, { table })
|
|
8661
8715
|
] });
|
|
8662
8716
|
}
|
|
8663
8717
|
// Annotate the CommonJS export names for ESM import in node:
|
|
8664
8718
|
0 && (module.exports = {
|
|
8719
|
+
DataGrid,
|
|
8665
8720
|
DataTable
|
|
8666
8721
|
});
|
|
8667
8722
|
/*! Bundled license information:
|
package/dist/index.d.cts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import { ColumnDef } from '@tanstack/react-table';
|
|
3
|
+
import { ReactNode } from 'react';
|
|
3
4
|
|
|
4
5
|
type Search<TData> = {
|
|
5
6
|
filterFields: (keyof TData)[];
|
|
@@ -19,6 +20,14 @@ type DataTableConfig<TData> = {
|
|
|
19
20
|
columnVisibility?: ColumnVisibility<TData>;
|
|
20
21
|
};
|
|
21
22
|
|
|
23
|
+
interface DataGridProps<TData, TValue> {
|
|
24
|
+
columns: ColumnDef<TData, TValue>[];
|
|
25
|
+
data: TData[];
|
|
26
|
+
render: (index: string, item: TData) => ReactNode;
|
|
27
|
+
config?: DataTableConfig<TData>;
|
|
28
|
+
}
|
|
29
|
+
declare const DataGrid: <TData, TValue>({ columns, render, data, config, }: DataGridProps<TData, TValue>) => react_jsx_runtime.JSX.Element;
|
|
30
|
+
|
|
22
31
|
interface DataTableProps<TData, TValue> {
|
|
23
32
|
columns: ColumnDef<TData, TValue>[];
|
|
24
33
|
data: TData[];
|
|
@@ -26,4 +35,4 @@ interface DataTableProps<TData, TValue> {
|
|
|
26
35
|
}
|
|
27
36
|
declare function DataTable<TData, TValue>({ columns, data, config, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
28
37
|
|
|
29
|
-
export {
|
|
38
|
+
export { DataGrid, type DataGridProps, DataTable, type DataTableProps };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import { ColumnDef } from '@tanstack/react-table';
|
|
3
|
+
import { ReactNode } from 'react';
|
|
3
4
|
|
|
4
5
|
type Search<TData> = {
|
|
5
6
|
filterFields: (keyof TData)[];
|
|
@@ -19,6 +20,14 @@ type DataTableConfig<TData> = {
|
|
|
19
20
|
columnVisibility?: ColumnVisibility<TData>;
|
|
20
21
|
};
|
|
21
22
|
|
|
23
|
+
interface DataGridProps<TData, TValue> {
|
|
24
|
+
columns: ColumnDef<TData, TValue>[];
|
|
25
|
+
data: TData[];
|
|
26
|
+
render: (index: string, item: TData) => ReactNode;
|
|
27
|
+
config?: DataTableConfig<TData>;
|
|
28
|
+
}
|
|
29
|
+
declare const DataGrid: <TData, TValue>({ columns, render, data, config, }: DataGridProps<TData, TValue>) => react_jsx_runtime.JSX.Element;
|
|
30
|
+
|
|
22
31
|
interface DataTableProps<TData, TValue> {
|
|
23
32
|
columns: ColumnDef<TData, TValue>[];
|
|
24
33
|
data: TData[];
|
|
@@ -26,4 +35,4 @@ interface DataTableProps<TData, TValue> {
|
|
|
26
35
|
}
|
|
27
36
|
declare function DataTable<TData, TValue>({ columns, data, config, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
28
37
|
|
|
29
|
-
export {
|
|
38
|
+
export { DataGrid, type DataGridProps, DataTable, type DataTableProps };
|
package/dist/index.js
CHANGED
|
@@ -11,80 +11,27 @@ function cn(...inputs) {
|
|
|
11
11
|
return twMerge(clsx(inputs));
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
// src/components/ui/
|
|
14
|
+
// src/components/ui/card.tsx
|
|
15
15
|
import { jsx } from "react/jsx-runtime";
|
|
16
|
-
function
|
|
16
|
+
function Card({ className, ...props }) {
|
|
17
17
|
return /* @__PURE__ */ jsx(
|
|
18
18
|
"div",
|
|
19
|
-
{
|
|
20
|
-
className: "relative w-full overflow-x-auto",
|
|
21
|
-
"data-slot": "table-container",
|
|
22
|
-
children: /* @__PURE__ */ jsx(
|
|
23
|
-
"table",
|
|
24
|
-
{
|
|
25
|
-
className: cn("w-full caption-bottom text-sm", className),
|
|
26
|
-
"data-slot": "table",
|
|
27
|
-
...props
|
|
28
|
-
}
|
|
29
|
-
)
|
|
30
|
-
}
|
|
31
|
-
);
|
|
32
|
-
}
|
|
33
|
-
function TableHeader({ className, ...props }) {
|
|
34
|
-
return /* @__PURE__ */ jsx(
|
|
35
|
-
"thead",
|
|
36
|
-
{
|
|
37
|
-
className: cn("[&_tr]:border-b", className),
|
|
38
|
-
"data-slot": "table-header",
|
|
39
|
-
...props
|
|
40
|
-
}
|
|
41
|
-
);
|
|
42
|
-
}
|
|
43
|
-
function TableBody({ className, ...props }) {
|
|
44
|
-
return /* @__PURE__ */ jsx(
|
|
45
|
-
"tbody",
|
|
46
|
-
{
|
|
47
|
-
className: cn("[&_tr:last-child]:border-0", className),
|
|
48
|
-
"data-slot": "table-body",
|
|
49
|
-
...props
|
|
50
|
-
}
|
|
51
|
-
);
|
|
52
|
-
}
|
|
53
|
-
function TableRow({ className, ...props }) {
|
|
54
|
-
return /* @__PURE__ */ jsx(
|
|
55
|
-
"tr",
|
|
56
|
-
{
|
|
57
|
-
className: cn(
|
|
58
|
-
"border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
|
|
59
|
-
className
|
|
60
|
-
),
|
|
61
|
-
"data-slot": "table-row",
|
|
62
|
-
...props
|
|
63
|
-
}
|
|
64
|
-
);
|
|
65
|
-
}
|
|
66
|
-
function TableHead({ className, ...props }) {
|
|
67
|
-
return /* @__PURE__ */ jsx(
|
|
68
|
-
"th",
|
|
69
19
|
{
|
|
70
20
|
className: cn(
|
|
71
|
-
"
|
|
21
|
+
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
|
|
72
22
|
className
|
|
73
23
|
),
|
|
74
|
-
"data-slot": "
|
|
24
|
+
"data-slot": "card",
|
|
75
25
|
...props
|
|
76
26
|
}
|
|
77
27
|
);
|
|
78
28
|
}
|
|
79
|
-
function
|
|
29
|
+
function CardContent({ className, ...props }) {
|
|
80
30
|
return /* @__PURE__ */ jsx(
|
|
81
|
-
"
|
|
31
|
+
"div",
|
|
82
32
|
{
|
|
83
|
-
className: cn(
|
|
84
|
-
|
|
85
|
-
className
|
|
86
|
-
),
|
|
87
|
-
"data-slot": "table-cell",
|
|
33
|
+
className: cn("px-6", className),
|
|
34
|
+
"data-slot": "card-content",
|
|
88
35
|
...props
|
|
89
36
|
}
|
|
90
37
|
);
|
|
@@ -8474,26 +8421,149 @@ var DataTableControls = ({
|
|
|
8474
8421
|
] });
|
|
8475
8422
|
};
|
|
8476
8423
|
|
|
8477
|
-
// src/
|
|
8424
|
+
// src/lib/search.ts
|
|
8425
|
+
import { rankItem } from "@tanstack/match-sorter-utils";
|
|
8426
|
+
var fuzzyFilterFn = (searchableColumns) => (row, columnId, filterValue, addMeta) => {
|
|
8427
|
+
if (!searchableColumns) return false;
|
|
8428
|
+
if (!searchableColumns.includes(columnId)) return false;
|
|
8429
|
+
const itemRank = rankItem(row.getValue(columnId), filterValue);
|
|
8430
|
+
addMeta({ itemRank });
|
|
8431
|
+
return itemRank.passed;
|
|
8432
|
+
};
|
|
8433
|
+
|
|
8434
|
+
// src/dataTable/DataGrid.tsx
|
|
8435
|
+
import {
|
|
8436
|
+
getCoreRowModel,
|
|
8437
|
+
getFacetedRowModel,
|
|
8438
|
+
getFacetedUniqueValues,
|
|
8439
|
+
getFilteredRowModel,
|
|
8440
|
+
useReactTable
|
|
8441
|
+
} from "@tanstack/react-table";
|
|
8478
8442
|
import { jsx as jsx26, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
8443
|
+
var DataGrid = ({
|
|
8444
|
+
columns,
|
|
8445
|
+
render,
|
|
8446
|
+
data,
|
|
8447
|
+
config
|
|
8448
|
+
}) => {
|
|
8449
|
+
const table = useReactTable({
|
|
8450
|
+
data,
|
|
8451
|
+
columns,
|
|
8452
|
+
getCoreRowModel: getCoreRowModel(),
|
|
8453
|
+
getFilteredRowModel: getFilteredRowModel(),
|
|
8454
|
+
getFacetedRowModel: getFacetedRowModel(),
|
|
8455
|
+
getFacetedUniqueValues: getFacetedUniqueValues(),
|
|
8456
|
+
globalFilterFn: fuzzyFilterFn(config?.search?.filterFields),
|
|
8457
|
+
autoResetPageIndex: false,
|
|
8458
|
+
initialState: {
|
|
8459
|
+
columnVisibility: config?.columnVisibility
|
|
8460
|
+
}
|
|
8461
|
+
});
|
|
8462
|
+
return /* @__PURE__ */ jsxs5("div", { className: "w-full flex flex-col gap-4", children: [
|
|
8463
|
+
/* @__PURE__ */ jsx26(DataTableControls, { filters: config?.filters, table }),
|
|
8464
|
+
table.getRowModel().rows?.length ? /* @__PURE__ */ jsx26("div", { className: "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4", children: table.getRowModel().rows.map((row) => render(row.id, row.original)) }) : /* @__PURE__ */ jsx26("div", { className: "py-4", children: /* @__PURE__ */ jsx26(Card, { className: "max-w-xl mx-auto", children: /* @__PURE__ */ jsx26(CardContent, { className: "text-center", children: "No results." }) }) })
|
|
8465
|
+
] });
|
|
8466
|
+
};
|
|
8467
|
+
|
|
8468
|
+
// src/components/ui/table.tsx
|
|
8469
|
+
import { jsx as jsx27 } from "react/jsx-runtime";
|
|
8470
|
+
function Table({ className, ...props }) {
|
|
8471
|
+
return /* @__PURE__ */ jsx27(
|
|
8472
|
+
"div",
|
|
8473
|
+
{
|
|
8474
|
+
className: "relative w-full overflow-x-auto",
|
|
8475
|
+
"data-slot": "table-container",
|
|
8476
|
+
children: /* @__PURE__ */ jsx27(
|
|
8477
|
+
"table",
|
|
8478
|
+
{
|
|
8479
|
+
className: cn("w-full caption-bottom text-sm", className),
|
|
8480
|
+
"data-slot": "table",
|
|
8481
|
+
...props
|
|
8482
|
+
}
|
|
8483
|
+
)
|
|
8484
|
+
}
|
|
8485
|
+
);
|
|
8486
|
+
}
|
|
8487
|
+
function TableHeader({ className, ...props }) {
|
|
8488
|
+
return /* @__PURE__ */ jsx27(
|
|
8489
|
+
"thead",
|
|
8490
|
+
{
|
|
8491
|
+
className: cn("[&_tr]:border-b", className),
|
|
8492
|
+
"data-slot": "table-header",
|
|
8493
|
+
...props
|
|
8494
|
+
}
|
|
8495
|
+
);
|
|
8496
|
+
}
|
|
8497
|
+
function TableBody({ className, ...props }) {
|
|
8498
|
+
return /* @__PURE__ */ jsx27(
|
|
8499
|
+
"tbody",
|
|
8500
|
+
{
|
|
8501
|
+
className: cn("[&_tr:last-child]:border-0", className),
|
|
8502
|
+
"data-slot": "table-body",
|
|
8503
|
+
...props
|
|
8504
|
+
}
|
|
8505
|
+
);
|
|
8506
|
+
}
|
|
8507
|
+
function TableRow({ className, ...props }) {
|
|
8508
|
+
return /* @__PURE__ */ jsx27(
|
|
8509
|
+
"tr",
|
|
8510
|
+
{
|
|
8511
|
+
className: cn(
|
|
8512
|
+
"border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
|
|
8513
|
+
className
|
|
8514
|
+
),
|
|
8515
|
+
"data-slot": "table-row",
|
|
8516
|
+
...props
|
|
8517
|
+
}
|
|
8518
|
+
);
|
|
8519
|
+
}
|
|
8520
|
+
function TableHead({ className, ...props }) {
|
|
8521
|
+
return /* @__PURE__ */ jsx27(
|
|
8522
|
+
"th",
|
|
8523
|
+
{
|
|
8524
|
+
className: cn(
|
|
8525
|
+
"h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
|
|
8526
|
+
className
|
|
8527
|
+
),
|
|
8528
|
+
"data-slot": "table-head",
|
|
8529
|
+
...props
|
|
8530
|
+
}
|
|
8531
|
+
);
|
|
8532
|
+
}
|
|
8533
|
+
function TableCell({ className, ...props }) {
|
|
8534
|
+
return /* @__PURE__ */ jsx27(
|
|
8535
|
+
"td",
|
|
8536
|
+
{
|
|
8537
|
+
className: cn(
|
|
8538
|
+
"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
|
|
8539
|
+
className
|
|
8540
|
+
),
|
|
8541
|
+
"data-slot": "table-cell",
|
|
8542
|
+
...props
|
|
8543
|
+
}
|
|
8544
|
+
);
|
|
8545
|
+
}
|
|
8546
|
+
|
|
8547
|
+
// src/dataTable/pagination/DataTablePagination.tsx
|
|
8548
|
+
import { jsx as jsx28, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
8479
8549
|
function DataTablePagination({
|
|
8480
8550
|
table
|
|
8481
8551
|
}) {
|
|
8482
|
-
return /* @__PURE__ */
|
|
8483
|
-
/* @__PURE__ */
|
|
8552
|
+
return /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between px-2 pt-4", children: [
|
|
8553
|
+
/* @__PURE__ */ jsxs6("div", { className: "text-muted-foreground flex-1 text-sm", children: [
|
|
8484
8554
|
table.getFilteredRowModel().rows.length,
|
|
8485
8555
|
" rows"
|
|
8486
8556
|
] }),
|
|
8487
|
-
/* @__PURE__ */
|
|
8488
|
-
/* @__PURE__ */
|
|
8557
|
+
/* @__PURE__ */ jsxs6("div", { className: "flex items-center space-x-6 lg:space-x-8", children: [
|
|
8558
|
+
/* @__PURE__ */ jsxs6("div", { className: "flex w-[100px] items-center justify-center text-sm font-medium", children: [
|
|
8489
8559
|
"Page ",
|
|
8490
8560
|
table.getState().pagination.pageIndex + 1,
|
|
8491
8561
|
" of",
|
|
8492
8562
|
" ",
|
|
8493
8563
|
table.getPageCount() || 1
|
|
8494
8564
|
] }),
|
|
8495
|
-
/* @__PURE__ */
|
|
8496
|
-
/* @__PURE__ */
|
|
8565
|
+
/* @__PURE__ */ jsxs6("div", { className: "flex items-center space-x-2", children: [
|
|
8566
|
+
/* @__PURE__ */ jsxs6(
|
|
8497
8567
|
Button,
|
|
8498
8568
|
{
|
|
8499
8569
|
className: "hidden size-8 lg:flex",
|
|
@@ -8502,12 +8572,12 @@ function DataTablePagination({
|
|
|
8502
8572
|
size: "icon",
|
|
8503
8573
|
variant: "outline",
|
|
8504
8574
|
children: [
|
|
8505
|
-
/* @__PURE__ */
|
|
8506
|
-
/* @__PURE__ */
|
|
8575
|
+
/* @__PURE__ */ jsx28("span", { className: "sr-only", children: "Go to first page" }),
|
|
8576
|
+
/* @__PURE__ */ jsx28(ChevronsLeft, {})
|
|
8507
8577
|
]
|
|
8508
8578
|
}
|
|
8509
8579
|
),
|
|
8510
|
-
/* @__PURE__ */
|
|
8580
|
+
/* @__PURE__ */ jsxs6(
|
|
8511
8581
|
Button,
|
|
8512
8582
|
{
|
|
8513
8583
|
className: "size-8",
|
|
@@ -8516,12 +8586,12 @@ function DataTablePagination({
|
|
|
8516
8586
|
size: "icon",
|
|
8517
8587
|
variant: "outline",
|
|
8518
8588
|
children: [
|
|
8519
|
-
/* @__PURE__ */
|
|
8520
|
-
/* @__PURE__ */
|
|
8589
|
+
/* @__PURE__ */ jsx28("span", { className: "sr-only", children: "Go to previous page" }),
|
|
8590
|
+
/* @__PURE__ */ jsx28(ChevronLeft, {})
|
|
8521
8591
|
]
|
|
8522
8592
|
}
|
|
8523
8593
|
),
|
|
8524
|
-
/* @__PURE__ */
|
|
8594
|
+
/* @__PURE__ */ jsxs6(
|
|
8525
8595
|
Button,
|
|
8526
8596
|
{
|
|
8527
8597
|
className: "size-8",
|
|
@@ -8530,12 +8600,12 @@ function DataTablePagination({
|
|
|
8530
8600
|
size: "icon",
|
|
8531
8601
|
variant: "outline",
|
|
8532
8602
|
children: [
|
|
8533
|
-
/* @__PURE__ */
|
|
8534
|
-
/* @__PURE__ */
|
|
8603
|
+
/* @__PURE__ */ jsx28("span", { className: "sr-only", children: "Go to next page" }),
|
|
8604
|
+
/* @__PURE__ */ jsx28(ChevronRight, {})
|
|
8535
8605
|
]
|
|
8536
8606
|
}
|
|
8537
8607
|
),
|
|
8538
|
-
/* @__PURE__ */
|
|
8608
|
+
/* @__PURE__ */ jsxs6(
|
|
8539
8609
|
Button,
|
|
8540
8610
|
{
|
|
8541
8611
|
className: "hidden size-8 lg:flex",
|
|
@@ -8544,8 +8614,8 @@ function DataTablePagination({
|
|
|
8544
8614
|
size: "icon",
|
|
8545
8615
|
variant: "outline",
|
|
8546
8616
|
children: [
|
|
8547
|
-
/* @__PURE__ */
|
|
8548
|
-
/* @__PURE__ */
|
|
8617
|
+
/* @__PURE__ */ jsx28("span", { className: "sr-only", children: "Go to last page" }),
|
|
8618
|
+
/* @__PURE__ */ jsx28(ChevronsRight, {})
|
|
8549
8619
|
]
|
|
8550
8620
|
}
|
|
8551
8621
|
)
|
|
@@ -8554,48 +8624,38 @@ function DataTablePagination({
|
|
|
8554
8624
|
] });
|
|
8555
8625
|
}
|
|
8556
8626
|
|
|
8557
|
-
// src/lib/search.ts
|
|
8558
|
-
import { rankItem } from "@tanstack/match-sorter-utils";
|
|
8559
|
-
var fuzzyFilterFn = (searchableColumns) => (row, columnId, filterValue, addMeta) => {
|
|
8560
|
-
if (!searchableColumns) return false;
|
|
8561
|
-
if (!searchableColumns.includes(columnId)) return false;
|
|
8562
|
-
const itemRank = rankItem(row.getValue(columnId), filterValue);
|
|
8563
|
-
addMeta({ itemRank });
|
|
8564
|
-
return itemRank.passed;
|
|
8565
|
-
};
|
|
8566
|
-
|
|
8567
8627
|
// src/dataTable/DataTable.tsx
|
|
8568
8628
|
import {
|
|
8569
8629
|
flexRender,
|
|
8570
|
-
getCoreRowModel,
|
|
8571
|
-
getFacetedRowModel,
|
|
8572
|
-
getFacetedUniqueValues,
|
|
8573
|
-
getFilteredRowModel,
|
|
8630
|
+
getCoreRowModel as getCoreRowModel2,
|
|
8631
|
+
getFacetedRowModel as getFacetedRowModel2,
|
|
8632
|
+
getFacetedUniqueValues as getFacetedUniqueValues2,
|
|
8633
|
+
getFilteredRowModel as getFilteredRowModel2,
|
|
8574
8634
|
getPaginationRowModel,
|
|
8575
|
-
useReactTable
|
|
8635
|
+
useReactTable as useReactTable2
|
|
8576
8636
|
} from "@tanstack/react-table";
|
|
8577
|
-
import { jsx as
|
|
8637
|
+
import { jsx as jsx29, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
8578
8638
|
function DataTable({
|
|
8579
8639
|
columns,
|
|
8580
8640
|
data,
|
|
8581
8641
|
config
|
|
8582
8642
|
}) {
|
|
8583
|
-
const table =
|
|
8643
|
+
const table = useReactTable2({
|
|
8584
8644
|
data,
|
|
8585
8645
|
columns,
|
|
8586
|
-
getCoreRowModel:
|
|
8646
|
+
getCoreRowModel: getCoreRowModel2(),
|
|
8587
8647
|
getPaginationRowModel: getPaginationRowModel(),
|
|
8588
|
-
getFilteredRowModel:
|
|
8589
|
-
getFacetedRowModel:
|
|
8590
|
-
getFacetedUniqueValues:
|
|
8648
|
+
getFilteredRowModel: getFilteredRowModel2(),
|
|
8649
|
+
getFacetedRowModel: getFacetedRowModel2(),
|
|
8650
|
+
getFacetedUniqueValues: getFacetedUniqueValues2(),
|
|
8591
8651
|
globalFilterFn: fuzzyFilterFn(config?.search?.filterFields),
|
|
8592
8652
|
autoResetPageIndex: false,
|
|
8593
8653
|
initialState: {
|
|
8594
8654
|
columnVisibility: config?.columnVisibility
|
|
8595
8655
|
}
|
|
8596
8656
|
});
|
|
8597
|
-
return /* @__PURE__ */
|
|
8598
|
-
/* @__PURE__ */
|
|
8657
|
+
return /* @__PURE__ */ jsxs7("div", { className: "w-full", children: [
|
|
8658
|
+
/* @__PURE__ */ jsx29(
|
|
8599
8659
|
DataTableControls,
|
|
8600
8660
|
{
|
|
8601
8661
|
filters: config?.filters,
|
|
@@ -8603,9 +8663,9 @@ function DataTable({
|
|
|
8603
8663
|
table
|
|
8604
8664
|
}
|
|
8605
8665
|
),
|
|
8606
|
-
/* @__PURE__ */
|
|
8607
|
-
/* @__PURE__ */
|
|
8608
|
-
return /* @__PURE__ */
|
|
8666
|
+
/* @__PURE__ */ jsx29("div", { className: "rounded-md border overflow-hidden", children: /* @__PURE__ */ jsxs7(Table, { children: [
|
|
8667
|
+
/* @__PURE__ */ jsx29(TableHeader, { className: "bg-muted", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx29(TableRow, { children: headerGroup.headers.map((header) => {
|
|
8668
|
+
return /* @__PURE__ */ jsx29(
|
|
8609
8669
|
TableHead,
|
|
8610
8670
|
{
|
|
8611
8671
|
colSpan: header.colSpan,
|
|
@@ -8618,17 +8678,17 @@ function DataTable({
|
|
|
8618
8678
|
header.id
|
|
8619
8679
|
);
|
|
8620
8680
|
}) }, headerGroup.id)) }),
|
|
8621
|
-
/* @__PURE__ */
|
|
8681
|
+
/* @__PURE__ */ jsx29(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx29(
|
|
8622
8682
|
TableRow,
|
|
8623
8683
|
{
|
|
8624
8684
|
"data-state": row.getIsSelected() && "selected",
|
|
8625
|
-
children: row.getVisibleCells().map((cell) => /* @__PURE__ */
|
|
8685
|
+
children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx29(TableCell, { className: "truncate max-w-0", children: flexRender(
|
|
8626
8686
|
cell.column.columnDef.cell,
|
|
8627
8687
|
cell.getContext()
|
|
8628
8688
|
) }, cell.id))
|
|
8629
8689
|
},
|
|
8630
8690
|
row.id
|
|
8631
|
-
)) : /* @__PURE__ */
|
|
8691
|
+
)) : /* @__PURE__ */ jsx29(TableRow, { children: /* @__PURE__ */ jsx29(
|
|
8632
8692
|
TableCell,
|
|
8633
8693
|
{
|
|
8634
8694
|
className: "h-24 text-center",
|
|
@@ -8637,12 +8697,12 @@ function DataTable({
|
|
|
8637
8697
|
}
|
|
8638
8698
|
) }) })
|
|
8639
8699
|
] }) }),
|
|
8640
|
-
/* @__PURE__ */
|
|
8700
|
+
/* @__PURE__ */ jsx29(DataTablePagination, { table })
|
|
8641
8701
|
] });
|
|
8642
8702
|
}
|
|
8643
8703
|
export {
|
|
8644
|
-
|
|
8645
|
-
DataTable
|
|
8704
|
+
DataGrid,
|
|
8705
|
+
DataTable
|
|
8646
8706
|
};
|
|
8647
8707
|
/*! Bundled license information:
|
|
8648
8708
|
|