@stereopt/data-table 0.1.8 → 0.1.9
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 +22 -12
- package/dist/index.d.cts +7 -1
- package/dist/index.d.ts +7 -1
- package/dist/index.js +30 -16
- package/package.json +6 -1
package/dist/index.cjs
CHANGED
|
@@ -25,9 +25,6 @@ __export(index_exports, {
|
|
|
25
25
|
});
|
|
26
26
|
module.exports = __toCommonJS(index_exports);
|
|
27
27
|
|
|
28
|
-
// src/dataTable/DataTable.tsx
|
|
29
|
-
var import_react_table = require("@tanstack/react-table");
|
|
30
|
-
|
|
31
28
|
// src/lib/utils.ts
|
|
32
29
|
var import_clsx = require("clsx");
|
|
33
30
|
var import_tailwind_merge = require("tailwind-merge");
|
|
@@ -41,13 +38,13 @@ function Table({ className, ...props }) {
|
|
|
41
38
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
42
39
|
"div",
|
|
43
40
|
{
|
|
44
|
-
"data-slot": "table-container",
|
|
45
41
|
className: "relative w-full overflow-x-auto",
|
|
42
|
+
"data-slot": "table-container",
|
|
46
43
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
47
44
|
"table",
|
|
48
45
|
{
|
|
49
|
-
"data-slot": "table",
|
|
50
46
|
className: cn("w-full caption-bottom text-sm", className),
|
|
47
|
+
"data-slot": "table",
|
|
51
48
|
...props
|
|
52
49
|
}
|
|
53
50
|
)
|
|
@@ -58,8 +55,8 @@ function TableHeader({ className, ...props }) {
|
|
|
58
55
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
59
56
|
"thead",
|
|
60
57
|
{
|
|
61
|
-
"data-slot": "table-header",
|
|
62
58
|
className: cn("[&_tr]:border-b", className),
|
|
59
|
+
"data-slot": "table-header",
|
|
63
60
|
...props
|
|
64
61
|
}
|
|
65
62
|
);
|
|
@@ -68,8 +65,8 @@ function TableBody({ className, ...props }) {
|
|
|
68
65
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
69
66
|
"tbody",
|
|
70
67
|
{
|
|
71
|
-
"data-slot": "table-body",
|
|
72
68
|
className: cn("[&_tr:last-child]:border-0", className),
|
|
69
|
+
"data-slot": "table-body",
|
|
73
70
|
...props
|
|
74
71
|
}
|
|
75
72
|
);
|
|
@@ -78,11 +75,11 @@ function TableRow({ className, ...props }) {
|
|
|
78
75
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
79
76
|
"tr",
|
|
80
77
|
{
|
|
81
|
-
"data-slot": "table-row",
|
|
82
78
|
className: cn(
|
|
83
79
|
"border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
|
|
84
80
|
className
|
|
85
81
|
),
|
|
82
|
+
"data-slot": "table-row",
|
|
86
83
|
...props
|
|
87
84
|
}
|
|
88
85
|
);
|
|
@@ -91,11 +88,11 @@ function TableHead({ className, ...props }) {
|
|
|
91
88
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
92
89
|
"th",
|
|
93
90
|
{
|
|
94
|
-
"data-slot": "table-head",
|
|
95
91
|
className: cn(
|
|
96
92
|
"h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
|
|
97
93
|
className
|
|
98
94
|
),
|
|
95
|
+
"data-slot": "table-head",
|
|
99
96
|
...props
|
|
100
97
|
}
|
|
101
98
|
);
|
|
@@ -104,23 +101,36 @@ function TableCell({ className, ...props }) {
|
|
|
104
101
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
105
102
|
"td",
|
|
106
103
|
{
|
|
107
|
-
"data-slot": "table-cell",
|
|
108
104
|
className: cn(
|
|
109
105
|
"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
|
|
110
106
|
className
|
|
111
107
|
),
|
|
108
|
+
"data-slot": "table-cell",
|
|
112
109
|
...props
|
|
113
110
|
}
|
|
114
111
|
);
|
|
115
112
|
}
|
|
116
113
|
|
|
117
114
|
// src/dataTable/DataTable.tsx
|
|
115
|
+
var import_react_table = require("@tanstack/react-table");
|
|
118
116
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
119
|
-
function DataTable({
|
|
117
|
+
function DataTable({
|
|
118
|
+
columns,
|
|
119
|
+
data,
|
|
120
|
+
config
|
|
121
|
+
}) {
|
|
120
122
|
const table = (0, import_react_table.useReactTable)({
|
|
121
123
|
data,
|
|
122
124
|
columns,
|
|
123
|
-
getCoreRowModel: (0, import_react_table.getCoreRowModel)()
|
|
125
|
+
getCoreRowModel: (0, import_react_table.getCoreRowModel)(),
|
|
126
|
+
getPaginationRowModel: (0, import_react_table.getPaginationRowModel)(),
|
|
127
|
+
getFilteredRowModel: (0, import_react_table.getFilteredRowModel)(),
|
|
128
|
+
getFacetedRowModel: (0, import_react_table.getFacetedRowModel)(),
|
|
129
|
+
getFacetedUniqueValues: (0, import_react_table.getFacetedUniqueValues)(),
|
|
130
|
+
autoResetPageIndex: false,
|
|
131
|
+
initialState: {
|
|
132
|
+
columnVisibility: config?.columnVisibility
|
|
133
|
+
}
|
|
124
134
|
});
|
|
125
135
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "rounded-md border overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Table, { children: [
|
|
126
136
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TableHeader, { className: "bg-muted", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TableRow, { children: headerGroup.headers.map((header) => {
|
package/dist/index.d.cts
CHANGED
|
@@ -1,10 +1,16 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import { ColumnDef } from '@tanstack/react-table';
|
|
3
3
|
|
|
4
|
+
type ColumnVisibility<TData> = {
|
|
5
|
+
[K in keyof TData]?: boolean;
|
|
6
|
+
} & Record<string, boolean>;
|
|
4
7
|
interface DataTableProps<TData, TValue> {
|
|
5
8
|
columns: ColumnDef<TData, TValue>[];
|
|
6
9
|
data: TData[];
|
|
10
|
+
config?: {
|
|
11
|
+
columnVisibility?: ColumnVisibility<TData>;
|
|
12
|
+
};
|
|
7
13
|
}
|
|
8
|
-
declare function DataTable<TData, TValue>({ columns, data }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
14
|
+
declare function DataTable<TData, TValue>({ columns, data, config, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
9
15
|
|
|
10
16
|
export { DataTable, type DataTableProps, DataTable as default };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,10 +1,16 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import { ColumnDef } from '@tanstack/react-table';
|
|
3
3
|
|
|
4
|
+
type ColumnVisibility<TData> = {
|
|
5
|
+
[K in keyof TData]?: boolean;
|
|
6
|
+
} & Record<string, boolean>;
|
|
4
7
|
interface DataTableProps<TData, TValue> {
|
|
5
8
|
columns: ColumnDef<TData, TValue>[];
|
|
6
9
|
data: TData[];
|
|
10
|
+
config?: {
|
|
11
|
+
columnVisibility?: ColumnVisibility<TData>;
|
|
12
|
+
};
|
|
7
13
|
}
|
|
8
|
-
declare function DataTable<TData, TValue>({ columns, data }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
14
|
+
declare function DataTable<TData, TValue>({ columns, data, config, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
9
15
|
|
|
10
16
|
export { DataTable, type DataTableProps, DataTable as default };
|
package/dist/index.js
CHANGED
|
@@ -1,10 +1,3 @@
|
|
|
1
|
-
// src/dataTable/DataTable.tsx
|
|
2
|
-
import {
|
|
3
|
-
flexRender,
|
|
4
|
-
getCoreRowModel,
|
|
5
|
-
useReactTable
|
|
6
|
-
} from "@tanstack/react-table";
|
|
7
|
-
|
|
8
1
|
// src/lib/utils.ts
|
|
9
2
|
import { clsx } from "clsx";
|
|
10
3
|
import { twMerge } from "tailwind-merge";
|
|
@@ -18,13 +11,13 @@ function Table({ className, ...props }) {
|
|
|
18
11
|
return /* @__PURE__ */ jsx(
|
|
19
12
|
"div",
|
|
20
13
|
{
|
|
21
|
-
"data-slot": "table-container",
|
|
22
14
|
className: "relative w-full overflow-x-auto",
|
|
15
|
+
"data-slot": "table-container",
|
|
23
16
|
children: /* @__PURE__ */ jsx(
|
|
24
17
|
"table",
|
|
25
18
|
{
|
|
26
|
-
"data-slot": "table",
|
|
27
19
|
className: cn("w-full caption-bottom text-sm", className),
|
|
20
|
+
"data-slot": "table",
|
|
28
21
|
...props
|
|
29
22
|
}
|
|
30
23
|
)
|
|
@@ -35,8 +28,8 @@ function TableHeader({ className, ...props }) {
|
|
|
35
28
|
return /* @__PURE__ */ jsx(
|
|
36
29
|
"thead",
|
|
37
30
|
{
|
|
38
|
-
"data-slot": "table-header",
|
|
39
31
|
className: cn("[&_tr]:border-b", className),
|
|
32
|
+
"data-slot": "table-header",
|
|
40
33
|
...props
|
|
41
34
|
}
|
|
42
35
|
);
|
|
@@ -45,8 +38,8 @@ function TableBody({ className, ...props }) {
|
|
|
45
38
|
return /* @__PURE__ */ jsx(
|
|
46
39
|
"tbody",
|
|
47
40
|
{
|
|
48
|
-
"data-slot": "table-body",
|
|
49
41
|
className: cn("[&_tr:last-child]:border-0", className),
|
|
42
|
+
"data-slot": "table-body",
|
|
50
43
|
...props
|
|
51
44
|
}
|
|
52
45
|
);
|
|
@@ -55,11 +48,11 @@ function TableRow({ className, ...props }) {
|
|
|
55
48
|
return /* @__PURE__ */ jsx(
|
|
56
49
|
"tr",
|
|
57
50
|
{
|
|
58
|
-
"data-slot": "table-row",
|
|
59
51
|
className: cn(
|
|
60
52
|
"border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
|
|
61
53
|
className
|
|
62
54
|
),
|
|
55
|
+
"data-slot": "table-row",
|
|
63
56
|
...props
|
|
64
57
|
}
|
|
65
58
|
);
|
|
@@ -68,11 +61,11 @@ function TableHead({ className, ...props }) {
|
|
|
68
61
|
return /* @__PURE__ */ jsx(
|
|
69
62
|
"th",
|
|
70
63
|
{
|
|
71
|
-
"data-slot": "table-head",
|
|
72
64
|
className: cn(
|
|
73
65
|
"h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
|
|
74
66
|
className
|
|
75
67
|
),
|
|
68
|
+
"data-slot": "table-head",
|
|
76
69
|
...props
|
|
77
70
|
}
|
|
78
71
|
);
|
|
@@ -81,23 +74,44 @@ function TableCell({ className, ...props }) {
|
|
|
81
74
|
return /* @__PURE__ */ jsx(
|
|
82
75
|
"td",
|
|
83
76
|
{
|
|
84
|
-
"data-slot": "table-cell",
|
|
85
77
|
className: cn(
|
|
86
78
|
"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
|
|
87
79
|
className
|
|
88
80
|
),
|
|
81
|
+
"data-slot": "table-cell",
|
|
89
82
|
...props
|
|
90
83
|
}
|
|
91
84
|
);
|
|
92
85
|
}
|
|
93
86
|
|
|
94
87
|
// src/dataTable/DataTable.tsx
|
|
88
|
+
import {
|
|
89
|
+
flexRender,
|
|
90
|
+
getCoreRowModel,
|
|
91
|
+
getFacetedRowModel,
|
|
92
|
+
getFacetedUniqueValues,
|
|
93
|
+
getFilteredRowModel,
|
|
94
|
+
getPaginationRowModel,
|
|
95
|
+
useReactTable
|
|
96
|
+
} from "@tanstack/react-table";
|
|
95
97
|
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
96
|
-
function DataTable({
|
|
98
|
+
function DataTable({
|
|
99
|
+
columns,
|
|
100
|
+
data,
|
|
101
|
+
config
|
|
102
|
+
}) {
|
|
97
103
|
const table = useReactTable({
|
|
98
104
|
data,
|
|
99
105
|
columns,
|
|
100
|
-
getCoreRowModel: getCoreRowModel()
|
|
106
|
+
getCoreRowModel: getCoreRowModel(),
|
|
107
|
+
getPaginationRowModel: getPaginationRowModel(),
|
|
108
|
+
getFilteredRowModel: getFilteredRowModel(),
|
|
109
|
+
getFacetedRowModel: getFacetedRowModel(),
|
|
110
|
+
getFacetedUniqueValues: getFacetedUniqueValues(),
|
|
111
|
+
autoResetPageIndex: false,
|
|
112
|
+
initialState: {
|
|
113
|
+
columnVisibility: config?.columnVisibility
|
|
114
|
+
}
|
|
101
115
|
});
|
|
102
116
|
return /* @__PURE__ */ jsx2("div", { className: "w-full", children: /* @__PURE__ */ jsx2("div", { className: "rounded-md border overflow-hidden", children: /* @__PURE__ */ jsxs(Table, { children: [
|
|
103
117
|
/* @__PURE__ */ jsx2(TableHeader, { className: "bg-muted", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx2(TableRow, { children: headerGroup.headers.map((header) => {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stereopt/data-table",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.9",
|
|
4
4
|
"description": "Simple reusable React data table component",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -26,6 +26,10 @@
|
|
|
26
26
|
"build": "tsup src/index.ts --format esm,cjs --dts --external react,react-dom && postcss src/styles/globals.css -o dist/styles.css --minify",
|
|
27
27
|
"clean": "rm -rf dist",
|
|
28
28
|
"dev": "tsup src/index.ts --format esm,cjs --dts --watch --external react,react-dom",
|
|
29
|
+
"format": "biome format ./src",
|
|
30
|
+
"format:fix": "biome format ./src --write",
|
|
31
|
+
"lint": "biome lint ./src && next lint",
|
|
32
|
+
"lint:fix": "biome lint ./src --write && next lint",
|
|
29
33
|
"prepare": "npm run clean && npm run build",
|
|
30
34
|
"prepublishOnly": "npm run clean && npm run build"
|
|
31
35
|
},
|
|
@@ -49,6 +53,7 @@
|
|
|
49
53
|
"react-dom": "^19.0.0"
|
|
50
54
|
},
|
|
51
55
|
"devDependencies": {
|
|
56
|
+
"@biomejs/biome": "2.4.2",
|
|
52
57
|
"@types/react": "^19.2.14",
|
|
53
58
|
"@types/react-dom": "^19.2.3",
|
|
54
59
|
"postcss-cli": "^11.0.1",
|