@stereopt/data-table 0.1.6 → 0.1.8

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 (4) hide show
  1. package/dist/index.cjs +33 -3
  2. package/dist/index.js +34 -3
  3. package/dist/styles.css +11 -0
  4. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -122,9 +122,39 @@ function DataTable({ columns, data }) {
122
122
  columns,
123
123
  getCoreRowModel: (0, import_react_table.getCoreRowModel)()
124
124
  });
125
- 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 bg-red-500", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Table, { children: [
126
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TableHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TableHead, { children: "Head" }) }) }),
127
- /* @__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" }) }) })
125
+ 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, { className: "bg-muted", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TableRow, { children: headerGroup.headers.map((header) => {
127
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
128
+ TableHead,
129
+ {
130
+ colSpan: header.colSpan,
131
+ style: { width: header.getSize() },
132
+ children: header.isPlaceholder ? null : (0, import_react_table.flexRender)(
133
+ header.column.columnDef.header,
134
+ header.getContext()
135
+ )
136
+ },
137
+ header.id
138
+ );
139
+ }) }, headerGroup.id)) }),
140
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
141
+ TableRow,
142
+ {
143
+ "data-state": row.getIsSelected() && "selected",
144
+ children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TableCell, { className: "truncate max-w-0", children: (0, import_react_table.flexRender)(
145
+ cell.column.columnDef.cell,
146
+ cell.getContext()
147
+ ) }, cell.id))
148
+ },
149
+ row.id
150
+ )) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
151
+ TableCell,
152
+ {
153
+ className: "h-24 text-center",
154
+ colSpan: columns.length,
155
+ children: "No results."
156
+ }
157
+ ) }) })
128
158
  ] }) }) });
129
159
  }
130
160
  // Annotate the CommonJS export names for ESM import in node:
package/dist/index.js CHANGED
@@ -1,5 +1,6 @@
1
1
  // src/dataTable/DataTable.tsx
2
2
  import {
3
+ flexRender,
3
4
  getCoreRowModel,
4
5
  useReactTable
5
6
  } from "@tanstack/react-table";
@@ -98,9 +99,39 @@ function DataTable({ columns, data }) {
98
99
  columns,
99
100
  getCoreRowModel: getCoreRowModel()
100
101
  });
101
- return /* @__PURE__ */ jsx2("div", { className: "w-full", children: /* @__PURE__ */ jsx2("div", { className: "rounded-md border overflow-hidden bg-red-500", children: /* @__PURE__ */ jsxs(Table, { children: [
102
- /* @__PURE__ */ jsx2(TableHeader, { children: /* @__PURE__ */ jsx2(TableRow, { children: /* @__PURE__ */ jsx2(TableHead, { children: "Head" }) }) }),
103
- /* @__PURE__ */ jsx2(TableBody, { children: /* @__PURE__ */ jsx2(TableRow, { children: /* @__PURE__ */ jsx2(TableCell, { children: "Cell" }) }) })
102
+ 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, { className: "bg-muted", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx2(TableRow, { children: headerGroup.headers.map((header) => {
104
+ return /* @__PURE__ */ jsx2(
105
+ TableHead,
106
+ {
107
+ colSpan: header.colSpan,
108
+ style: { width: header.getSize() },
109
+ children: header.isPlaceholder ? null : flexRender(
110
+ header.column.columnDef.header,
111
+ header.getContext()
112
+ )
113
+ },
114
+ header.id
115
+ );
116
+ }) }, headerGroup.id)) }),
117
+ /* @__PURE__ */ jsx2(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx2(
118
+ TableRow,
119
+ {
120
+ "data-state": row.getIsSelected() && "selected",
121
+ children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx2(TableCell, { className: "truncate max-w-0", children: flexRender(
122
+ cell.column.columnDef.cell,
123
+ cell.getContext()
124
+ ) }, cell.id))
125
+ },
126
+ row.id
127
+ )) : /* @__PURE__ */ jsx2(TableRow, { children: /* @__PURE__ */ jsx2(
128
+ TableCell,
129
+ {
130
+ className: "h-24 text-center",
131
+ colSpan: columns.length,
132
+ children: "No results."
133
+ }
134
+ ) }) })
104
135
  ] }) }) });
105
136
  }
106
137
  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.6",
3
+ "version": "0.1.8",
4
4
  "description": "Simple reusable React data table component",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",