@stereopt/data-table 0.1.7 → 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.
Files changed (6) hide show
  1. package/dist/index.cjs +41 -14
  2. package/dist/index.d.cts +7 -1
  3. package/dist/index.d.ts +7 -1
  4. package/dist/index.js +49 -18
  5. package/dist/styles.css +11 -0
  6. 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,26 +101,39 @@ 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({ columns, data }) {
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
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TableRow, { children: headerGroup.headers.map((header) => {
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) => {
127
137
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
128
138
  TableHead,
129
139
  {
@@ -137,7 +147,24 @@ function DataTable({ columns, data }) {
137
147
  header.id
138
148
  );
139
149
  }) }, headerGroup.id)) }),
140
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TableBody, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TableCell, { children: "Cell" }) }) })
150
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
151
+ TableRow,
152
+ {
153
+ "data-state": row.getIsSelected() && "selected",
154
+ children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TableCell, { className: "truncate max-w-0", children: (0, import_react_table.flexRender)(
155
+ cell.column.columnDef.cell,
156
+ cell.getContext()
157
+ ) }, cell.id))
158
+ },
159
+ row.id
160
+ )) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
161
+ TableCell,
162
+ {
163
+ className: "h-24 text-center",
164
+ colSpan: columns.length,
165
+ children: "No results."
166
+ }
167
+ ) }) })
141
168
  ] }) }) });
142
169
  }
143
170
  // Annotate the CommonJS export names for ESM import in node:
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,26 +74,47 @@ 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({ columns, data }) {
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
- /* @__PURE__ */ jsx2(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx2(TableRow, { children: headerGroup.headers.map((header) => {
117
+ /* @__PURE__ */ jsx2(TableHeader, { className: "bg-muted", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx2(TableRow, { children: headerGroup.headers.map((header) => {
104
118
  return /* @__PURE__ */ jsx2(
105
119
  TableHead,
106
120
  {
@@ -114,7 +128,24 @@ function DataTable({ columns, data }) {
114
128
  header.id
115
129
  );
116
130
  }) }, headerGroup.id)) }),
117
- /* @__PURE__ */ jsx2(TableBody, { children: /* @__PURE__ */ jsx2(TableRow, { children: /* @__PURE__ */ jsx2(TableCell, { children: "Cell" }) }) })
131
+ /* @__PURE__ */ jsx2(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx2(
132
+ TableRow,
133
+ {
134
+ "data-state": row.getIsSelected() && "selected",
135
+ children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx2(TableCell, { className: "truncate max-w-0", children: flexRender(
136
+ cell.column.columnDef.cell,
137
+ cell.getContext()
138
+ ) }, cell.id))
139
+ },
140
+ row.id
141
+ )) : /* @__PURE__ */ jsx2(TableRow, { children: /* @__PURE__ */ jsx2(
142
+ TableCell,
143
+ {
144
+ className: "h-24 text-center",
145
+ colSpan: columns.length,
146
+ children: "No results."
147
+ }
148
+ ) }) })
118
149
  ] }) }) });
119
150
  }
120
151
  export {
package/dist/styles.css CHANGED
@@ -21,6 +21,11 @@
21
21
  .caption-bottom {
22
22
  caption-side: bottom;
23
23
  }
24
+ .truncate {
25
+ overflow: hidden;
26
+ text-overflow: ellipsis;
27
+ white-space: nowrap;
28
+ }
24
29
  .overflow-hidden {
25
30
  overflow: hidden;
26
31
  }
@@ -39,12 +44,18 @@
39
44
  border-bottom-style: var(--tw-border-style);
40
45
  border-bottom-width: 1px;
41
46
  }
47
+ .bg-muted {
48
+ background-color: var(--color-muted);
49
+ }
42
50
  .bg-muted\/50 {
43
51
  background-color: color-mix(in srgb, 0 0% 96.1% 50%, transparent);
44
52
  @supports (color: color-mix(in lab, red, red)) {
45
53
  background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
46
54
  }
47
55
  }
56
+ .text-center {
57
+ text-align: center;
58
+ }
48
59
  .text-left {
49
60
  text-align: left;
50
61
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stereopt/data-table",
3
- "version": "0.1.7",
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",