@stereopt/data-table 0.2.0 → 0.2.2
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 +5 -0
- 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/dist/styles.css +604 -142
- package/package.json +4 -2
package/README.md
CHANGED
|
@@ -26,12 +26,17 @@ npm run dev
|
|
|
26
26
|
|
|
27
27
|
```tsx
|
|
28
28
|
import { DataTable } from '@stereopt/data-table';
|
|
29
|
+
import '@stereopt/data-table/styles.css';
|
|
29
30
|
|
|
30
31
|
export function Example() {
|
|
31
32
|
return <DataTable />;
|
|
32
33
|
}
|
|
33
34
|
```
|
|
34
35
|
|
|
36
|
+
The package stylesheet ships the component utilities only. It does not include Tailwind preflight, so it will not reset the consuming application's global styles.
|
|
37
|
+
|
|
38
|
+
The components also inherit the host application's theme automatically when the app exposes common semantic CSS variables such as `--background`, `--foreground`, `--primary`, `--muted`, `--border`, and related tokens. If needed, you can override the library specifically with the prefixed variables `--st-dt-*`.
|
|
39
|
+
|
|
35
40
|
## GitHub repository
|
|
36
41
|
|
|
37
42
|
Repository: https://github.com/StereoPT/data-table
|
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 };
|