@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/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
|
|