luxtable 0.2.0
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.d.mts +19 -0
- package/dist/index.d.ts +19 -0
- package/dist/index.js +110 -0
- package/dist/index.mjs +87 -0
- package/package.json +61 -0
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ColumnDef } from '@tanstack/react-table';
|
|
3
|
+
export * from '@tanstack/react-table';
|
|
4
|
+
import { ClassValue } from 'clsx';
|
|
5
|
+
|
|
6
|
+
interface LuxTableProps<TData, TValue> {
|
|
7
|
+
columns: ColumnDef<TData, TValue>[];
|
|
8
|
+
data: TData[];
|
|
9
|
+
className?: string;
|
|
10
|
+
options?: {
|
|
11
|
+
pagination?: boolean;
|
|
12
|
+
selection?: "single" | "multiple" | "none";
|
|
13
|
+
};
|
|
14
|
+
}
|
|
15
|
+
declare function LuxTable<TData, TValue>({ columns, data, className, options }: LuxTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
16
|
+
|
|
17
|
+
declare function cn(...inputs: ClassValue[]): string;
|
|
18
|
+
|
|
19
|
+
export { LuxTable, cn };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ColumnDef } from '@tanstack/react-table';
|
|
3
|
+
export * from '@tanstack/react-table';
|
|
4
|
+
import { ClassValue } from 'clsx';
|
|
5
|
+
|
|
6
|
+
interface LuxTableProps<TData, TValue> {
|
|
7
|
+
columns: ColumnDef<TData, TValue>[];
|
|
8
|
+
data: TData[];
|
|
9
|
+
className?: string;
|
|
10
|
+
options?: {
|
|
11
|
+
pagination?: boolean;
|
|
12
|
+
selection?: "single" | "multiple" | "none";
|
|
13
|
+
};
|
|
14
|
+
}
|
|
15
|
+
declare function LuxTable<TData, TValue>({ columns, data, className, options }: LuxTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
|
|
16
|
+
|
|
17
|
+
declare function cn(...inputs: ClassValue[]): string;
|
|
18
|
+
|
|
19
|
+
export { LuxTable, cn };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
19
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
20
|
+
|
|
21
|
+
// src/index.ts
|
|
22
|
+
var index_exports = {};
|
|
23
|
+
__export(index_exports, {
|
|
24
|
+
LuxTable: () => LuxTable,
|
|
25
|
+
cn: () => cn
|
|
26
|
+
});
|
|
27
|
+
module.exports = __toCommonJS(index_exports);
|
|
28
|
+
|
|
29
|
+
// src/components/LuxTable.tsx
|
|
30
|
+
var import_react_table = require("@tanstack/react-table");
|
|
31
|
+
|
|
32
|
+
// src/lib/utils.ts
|
|
33
|
+
var import_clsx = require("clsx");
|
|
34
|
+
var import_tailwind_merge = require("tailwind-merge");
|
|
35
|
+
function cn(...inputs) {
|
|
36
|
+
return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
// src/components/LuxTable.tsx
|
|
40
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
41
|
+
function LuxTable({
|
|
42
|
+
columns,
|
|
43
|
+
data,
|
|
44
|
+
className,
|
|
45
|
+
options
|
|
46
|
+
}) {
|
|
47
|
+
const table = (0, import_react_table.useReactTable)({
|
|
48
|
+
data,
|
|
49
|
+
columns,
|
|
50
|
+
getCoreRowModel: (0, import_react_table.getCoreRowModel)(),
|
|
51
|
+
getPaginationRowModel: options?.pagination ? (0, import_react_table.getPaginationRowModel)() : void 0,
|
|
52
|
+
getSortedRowModel: (0, import_react_table.getSortedRowModel)(),
|
|
53
|
+
getFilteredRowModel: (0, import_react_table.getFilteredRowModel)()
|
|
54
|
+
});
|
|
55
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cn("w-full space-y-4", className), children: [
|
|
56
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "rounded-md border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { className: "w-full caption-bottom text-sm text-left", children: [
|
|
57
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { className: "[&_tr]:border-b [&_tr]:border-slate-200 dark:[&_tr]:border-slate-800", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { className: "border-b transition-colors hover:bg-slate-100/50 dark:hover:bg-slate-800/50 data-[state=selected]:bg-slate-100 dark:data-[state=selected]:bg-slate-800", children: headerGroup.headers.map((header) => {
|
|
58
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
59
|
+
"th",
|
|
60
|
+
{
|
|
61
|
+
className: "h-10 px-4 text-left align-middle font-medium text-slate-500 [&:has([role=checkbox])]:pr-0 dark:text-slate-400",
|
|
62
|
+
children: header.isPlaceholder ? null : (0, import_react_table.flexRender)(
|
|
63
|
+
header.column.columnDef.header,
|
|
64
|
+
header.getContext()
|
|
65
|
+
)
|
|
66
|
+
},
|
|
67
|
+
header.id
|
|
68
|
+
);
|
|
69
|
+
}) }, headerGroup.id)) }),
|
|
70
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { className: "[&_tr:last-child]:border-0", children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
71
|
+
"tr",
|
|
72
|
+
{
|
|
73
|
+
"data-state": row.getIsSelected() && "selected",
|
|
74
|
+
className: "border-b border-slate-200 dark:border-slate-800 transition-colors hover:bg-slate-100/50 dark:hover:bg-slate-800/50",
|
|
75
|
+
children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "p-4 align-middle [&:has([role=checkbox])]:pr-0", children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
|
|
76
|
+
},
|
|
77
|
+
row.id
|
|
78
|
+
)) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { colSpan: columns.length, className: "h-24 text-center", children: "No results." }) }) })
|
|
79
|
+
] }) }) }),
|
|
80
|
+
options?.pagination && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-end space-x-2 py-4", children: [
|
|
81
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
82
|
+
"button",
|
|
83
|
+
{
|
|
84
|
+
className: "px-3 py-1 border rounded text-sm disabled:opacity-50",
|
|
85
|
+
onClick: () => table.previousPage(),
|
|
86
|
+
disabled: !table.getCanPreviousPage(),
|
|
87
|
+
children: "Previous"
|
|
88
|
+
}
|
|
89
|
+
),
|
|
90
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
91
|
+
"button",
|
|
92
|
+
{
|
|
93
|
+
className: "px-3 py-1 border rounded text-sm disabled:opacity-50",
|
|
94
|
+
onClick: () => table.nextPage(),
|
|
95
|
+
disabled: !table.getCanNextPage(),
|
|
96
|
+
children: "Next"
|
|
97
|
+
}
|
|
98
|
+
)
|
|
99
|
+
] })
|
|
100
|
+
] });
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
// src/index.ts
|
|
104
|
+
__reExport(index_exports, require("@tanstack/react-table"), module.exports);
|
|
105
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
106
|
+
0 && (module.exports = {
|
|
107
|
+
LuxTable,
|
|
108
|
+
cn,
|
|
109
|
+
...require("@tanstack/react-table")
|
|
110
|
+
});
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
// src/components/LuxTable.tsx
|
|
2
|
+
import {
|
|
3
|
+
flexRender,
|
|
4
|
+
getCoreRowModel,
|
|
5
|
+
useReactTable,
|
|
6
|
+
getPaginationRowModel,
|
|
7
|
+
getSortedRowModel,
|
|
8
|
+
getFilteredRowModel
|
|
9
|
+
} from "@tanstack/react-table";
|
|
10
|
+
|
|
11
|
+
// src/lib/utils.ts
|
|
12
|
+
import { clsx } from "clsx";
|
|
13
|
+
import { twMerge } from "tailwind-merge";
|
|
14
|
+
function cn(...inputs) {
|
|
15
|
+
return twMerge(clsx(inputs));
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
// src/components/LuxTable.tsx
|
|
19
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
20
|
+
function LuxTable({
|
|
21
|
+
columns,
|
|
22
|
+
data,
|
|
23
|
+
className,
|
|
24
|
+
options
|
|
25
|
+
}) {
|
|
26
|
+
const table = useReactTable({
|
|
27
|
+
data,
|
|
28
|
+
columns,
|
|
29
|
+
getCoreRowModel: getCoreRowModel(),
|
|
30
|
+
getPaginationRowModel: options?.pagination ? getPaginationRowModel() : void 0,
|
|
31
|
+
getSortedRowModel: getSortedRowModel(),
|
|
32
|
+
getFilteredRowModel: getFilteredRowModel()
|
|
33
|
+
});
|
|
34
|
+
return /* @__PURE__ */ jsxs("div", { className: cn("w-full space-y-4", className), children: [
|
|
35
|
+
/* @__PURE__ */ jsx("div", { className: "rounded-md border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full caption-bottom text-sm text-left", children: [
|
|
36
|
+
/* @__PURE__ */ jsx("thead", { className: "[&_tr]:border-b [&_tr]:border-slate-200 dark:[&_tr]:border-slate-800", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", { className: "border-b transition-colors hover:bg-slate-100/50 dark:hover:bg-slate-800/50 data-[state=selected]:bg-slate-100 dark:data-[state=selected]:bg-slate-800", children: headerGroup.headers.map((header) => {
|
|
37
|
+
return /* @__PURE__ */ jsx(
|
|
38
|
+
"th",
|
|
39
|
+
{
|
|
40
|
+
className: "h-10 px-4 text-left align-middle font-medium text-slate-500 [&:has([role=checkbox])]:pr-0 dark:text-slate-400",
|
|
41
|
+
children: header.isPlaceholder ? null : flexRender(
|
|
42
|
+
header.column.columnDef.header,
|
|
43
|
+
header.getContext()
|
|
44
|
+
)
|
|
45
|
+
},
|
|
46
|
+
header.id
|
|
47
|
+
);
|
|
48
|
+
}) }, headerGroup.id)) }),
|
|
49
|
+
/* @__PURE__ */ jsx("tbody", { className: "[&_tr:last-child]:border-0", children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(
|
|
50
|
+
"tr",
|
|
51
|
+
{
|
|
52
|
+
"data-state": row.getIsSelected() && "selected",
|
|
53
|
+
className: "border-b border-slate-200 dark:border-slate-800 transition-colors hover:bg-slate-100/50 dark:hover:bg-slate-800/50",
|
|
54
|
+
children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx("td", { className: "p-4 align-middle [&:has([role=checkbox])]:pr-0", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
|
|
55
|
+
},
|
|
56
|
+
row.id
|
|
57
|
+
)) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: columns.length, className: "h-24 text-center", children: "No results." }) }) })
|
|
58
|
+
] }) }) }),
|
|
59
|
+
options?.pagination && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end space-x-2 py-4", children: [
|
|
60
|
+
/* @__PURE__ */ jsx(
|
|
61
|
+
"button",
|
|
62
|
+
{
|
|
63
|
+
className: "px-3 py-1 border rounded text-sm disabled:opacity-50",
|
|
64
|
+
onClick: () => table.previousPage(),
|
|
65
|
+
disabled: !table.getCanPreviousPage(),
|
|
66
|
+
children: "Previous"
|
|
67
|
+
}
|
|
68
|
+
),
|
|
69
|
+
/* @__PURE__ */ jsx(
|
|
70
|
+
"button",
|
|
71
|
+
{
|
|
72
|
+
className: "px-3 py-1 border rounded text-sm disabled:opacity-50",
|
|
73
|
+
onClick: () => table.nextPage(),
|
|
74
|
+
disabled: !table.getCanNextPage(),
|
|
75
|
+
children: "Next"
|
|
76
|
+
}
|
|
77
|
+
)
|
|
78
|
+
] })
|
|
79
|
+
] });
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
// src/index.ts
|
|
83
|
+
export * from "@tanstack/react-table";
|
|
84
|
+
export {
|
|
85
|
+
LuxTable,
|
|
86
|
+
cn
|
|
87
|
+
};
|
package/package.json
ADDED
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "luxtable",
|
|
3
|
+
"version": "0.2.0",
|
|
4
|
+
"private": false,
|
|
5
|
+
"description": "Enterprise-Grade Data Management. Minimalist Aesthetics.",
|
|
6
|
+
"keywords": [
|
|
7
|
+
"react",
|
|
8
|
+
"table",
|
|
9
|
+
"datagrid",
|
|
10
|
+
"tanstack",
|
|
11
|
+
"headless",
|
|
12
|
+
"ui"
|
|
13
|
+
],
|
|
14
|
+
"author": "LuxTable",
|
|
15
|
+
"license": "MIT",
|
|
16
|
+
"repository": {
|
|
17
|
+
"type": "git",
|
|
18
|
+
"url": "https://github.com/luxtable/luxtable.git"
|
|
19
|
+
},
|
|
20
|
+
"main": "./dist/index.js",
|
|
21
|
+
"module": "./dist/index.mjs",
|
|
22
|
+
"types": "./dist/index.d.ts",
|
|
23
|
+
"exports": {
|
|
24
|
+
".": {
|
|
25
|
+
"types": "./dist/index.d.ts",
|
|
26
|
+
"import": "./dist/index.mjs",
|
|
27
|
+
"require": "./dist/index.js"
|
|
28
|
+
}
|
|
29
|
+
},
|
|
30
|
+
"files": [
|
|
31
|
+
"dist",
|
|
32
|
+
"README.md"
|
|
33
|
+
],
|
|
34
|
+
"publishConfig": {
|
|
35
|
+
"access": "public"
|
|
36
|
+
},
|
|
37
|
+
"scripts": {
|
|
38
|
+
"build": "tsup src/index.ts --format cjs,esm --dts",
|
|
39
|
+
"dev": "tsup src/index.ts --format cjs,esm --dts --watch",
|
|
40
|
+
"lint": "eslint src/**"
|
|
41
|
+
},
|
|
42
|
+
"peerDependencies": {
|
|
43
|
+
"react": ">=18",
|
|
44
|
+
"react-dom": ">=18"
|
|
45
|
+
},
|
|
46
|
+
"dependencies": {
|
|
47
|
+
"@tanstack/react-table": "^8.0.0",
|
|
48
|
+
"@radix-ui/react-checkbox": "^1.0.0",
|
|
49
|
+
"@radix-ui/react-dropdown-menu": "^2.0.0",
|
|
50
|
+
"lucide-react": "^0.300.0",
|
|
51
|
+
"clsx": "^2.0.0",
|
|
52
|
+
"tailwind-merge": "^2.0.0"
|
|
53
|
+
},
|
|
54
|
+
"devDependencies": {
|
|
55
|
+
"tsup": "^8.0.0",
|
|
56
|
+
"typescript": "^5.0.0",
|
|
57
|
+
"react": "^18.2.0",
|
|
58
|
+
"react-dom": "^18.2.0",
|
|
59
|
+
"tailwindcss": "^3.4.0"
|
|
60
|
+
}
|
|
61
|
+
}
|