@cryptlex/web-components 3.6.0 → 3.6.1
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.
|
@@ -1,33 +1,33 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as a, jsxs as c, Fragment as
|
|
3
|
-
import { useState as
|
|
4
|
-
import { cn as
|
|
2
|
+
import { jsx as a, jsxs as c, Fragment as U } from "react/jsx-runtime";
|
|
3
|
+
import { useState as H, useEffect as K, useMemo as M } from "react";
|
|
4
|
+
import { cn as j } from "../../utils/index.es.js";
|
|
5
5
|
import "../../utils/form-context.es.js";
|
|
6
6
|
import "../../utils/form-hook.es.js";
|
|
7
|
-
import { useQuery as
|
|
8
|
-
import { createColumnHelper as
|
|
9
|
-
import { Info as
|
|
10
|
-
import { ColumnPicker as
|
|
11
|
-
import { PageSize as
|
|
12
|
-
import { Paginator as
|
|
13
|
-
import
|
|
14
|
-
import { TableContent as
|
|
15
|
-
import { TABLE_CHECK_BOX_COLUMN as
|
|
16
|
-
import { TooltipProvider as
|
|
17
|
-
const
|
|
18
|
-
function
|
|
7
|
+
import { useQuery as k, keepPreviousData as q } from "@tanstack/react-query";
|
|
8
|
+
import { createColumnHelper as B, useReactTable as G, getCoreRowModel as Q } from "@tanstack/react-table";
|
|
9
|
+
import { Info as W } from "lucide-react";
|
|
10
|
+
import { ColumnPicker as X } from "./column-picker.es.js";
|
|
11
|
+
import { PageSize as J } from "./page-size.es.js";
|
|
12
|
+
import { Paginator as Y } from "./paginator.es.js";
|
|
13
|
+
import Z from "./table-actions.es.js";
|
|
14
|
+
import { TableContent as $ } from "./table-content.es.js";
|
|
15
|
+
import { TABLE_CHECK_BOX_COLUMN as ee, TABLE_ID_COLUMN as te, TABLE_DEFAULT_DATE_COLUMNS as oe } from "./table-commons.es.js";
|
|
16
|
+
import { TooltipProvider as ae, Tooltip as ne, TooltipTrigger as ie, TooltipContent as le } from "../ui/tooltip.es.js";
|
|
17
|
+
const N = "Actions";
|
|
18
|
+
function we({
|
|
19
19
|
columns: u,
|
|
20
|
-
fetchFn:
|
|
21
|
-
|
|
22
|
-
tableActions:
|
|
23
|
-
columnsToHideByDefault:
|
|
24
|
-
allowSelection:
|
|
25
|
-
className:
|
|
26
|
-
...
|
|
20
|
+
fetchFn: _,
|
|
21
|
+
tableName: V,
|
|
22
|
+
tableActions: F,
|
|
23
|
+
columnsToHideByDefault: f,
|
|
24
|
+
allowSelection: p,
|
|
25
|
+
className: E,
|
|
26
|
+
...I
|
|
27
27
|
// filterableFields,
|
|
28
28
|
}) {
|
|
29
|
-
var P, w, x, A
|
|
30
|
-
const [
|
|
29
|
+
var y, P, w, x, A;
|
|
30
|
+
const [L, R] = H({
|
|
31
31
|
sorting: [],
|
|
32
32
|
// Sorting state
|
|
33
33
|
columnFilters: [],
|
|
@@ -41,34 +41,35 @@ function Pe({
|
|
|
41
41
|
pagination: { pageIndex: 0, pageSize: 20 }
|
|
42
42
|
// Pagination state
|
|
43
43
|
}), l = (e) => {
|
|
44
|
-
|
|
44
|
+
R((t) => ({ ...t, ...e }));
|
|
45
45
|
}, {
|
|
46
46
|
sorting: g,
|
|
47
|
-
columnFilters:
|
|
48
|
-
searching:
|
|
49
|
-
columnVisibility:
|
|
50
|
-
rowSelection:
|
|
47
|
+
columnFilters: C,
|
|
48
|
+
searching: h,
|
|
49
|
+
columnVisibility: S,
|
|
50
|
+
rowSelection: b,
|
|
51
51
|
pagination: m
|
|
52
|
-
} =
|
|
53
|
-
|
|
52
|
+
} = L;
|
|
53
|
+
K(() => {
|
|
54
54
|
l({
|
|
55
55
|
columnVisibility: {
|
|
56
56
|
id: !1,
|
|
57
57
|
updatedAt: !1,
|
|
58
|
-
...
|
|
58
|
+
...f
|
|
59
59
|
}
|
|
60
60
|
});
|
|
61
|
-
}, [
|
|
62
|
-
const n =
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
61
|
+
}, [f]);
|
|
62
|
+
const n = k({
|
|
63
|
+
// TODO, better way to construct this key
|
|
64
|
+
queryKey: [V, m, g, h.trim()],
|
|
65
|
+
queryFn: () => _(m, g, h.trim()),
|
|
66
|
+
placeholderData: q,
|
|
66
67
|
// Keep previous data while loading new data
|
|
67
68
|
retry: 0,
|
|
68
69
|
refetchOnWindowFocus: !1
|
|
69
|
-
}),
|
|
70
|
-
var
|
|
71
|
-
const e = (
|
|
70
|
+
}), D = B(), d = M(() => {
|
|
71
|
+
var T;
|
|
72
|
+
const e = (T = n.data) == null ? void 0 : T.data;
|
|
72
73
|
if (!(e != null && e.length)) return [];
|
|
73
74
|
const t = /* @__PURE__ */ new Set();
|
|
74
75
|
return e.forEach((i) => {
|
|
@@ -76,22 +77,22 @@ function Pe({
|
|
|
76
77
|
t.add(s.key);
|
|
77
78
|
});
|
|
78
79
|
}), Array.from(t).map(
|
|
79
|
-
(i) =>
|
|
80
|
+
(i) => D.accessor(
|
|
80
81
|
(s) => {
|
|
81
|
-
var
|
|
82
|
-
const r = (
|
|
83
|
-
(
|
|
82
|
+
var v;
|
|
83
|
+
const r = (v = s.metadata) == null ? void 0 : v.find(
|
|
84
|
+
(z) => z.key === i
|
|
84
85
|
);
|
|
85
86
|
return r == null ? void 0 : r.value;
|
|
86
87
|
},
|
|
87
88
|
{
|
|
88
|
-
header: () => /* @__PURE__ */ a(
|
|
89
|
-
/* @__PURE__ */ a(
|
|
89
|
+
header: () => /* @__PURE__ */ a(ae, { delayDuration: 0, children: /* @__PURE__ */ c(ne, { children: [
|
|
90
|
+
/* @__PURE__ */ a(ie, { asChild: !0, children: /* @__PURE__ */ c("span", { className: "flex gap-1 items-center align-middle", children: [
|
|
90
91
|
i,
|
|
91
92
|
" ",
|
|
92
|
-
/* @__PURE__ */ a(
|
|
93
|
+
/* @__PURE__ */ a(W, { size: 18, strokeWidth: "1px" })
|
|
93
94
|
] }) }),
|
|
94
|
-
/* @__PURE__ */ a(
|
|
95
|
+
/* @__PURE__ */ a(le, { children: "Metadata Key" })
|
|
95
96
|
] }) }),
|
|
96
97
|
// Use the metadata key as the column header
|
|
97
98
|
id: i,
|
|
@@ -103,18 +104,18 @@ function Pe({
|
|
|
103
104
|
}
|
|
104
105
|
)
|
|
105
106
|
);
|
|
106
|
-
}, [(
|
|
107
|
-
...
|
|
108
|
-
...ee,
|
|
109
|
-
...u.filter((t) => t.id !== _),
|
|
110
|
-
...d.length ? d : [],
|
|
107
|
+
}, [(y = n.data) == null ? void 0 : y.data]), O = M(() => [
|
|
108
|
+
...p ? ee : [],
|
|
111
109
|
...te,
|
|
112
|
-
...u.filter((t) => t.id
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
110
|
+
...u.filter((t) => t.id !== N),
|
|
111
|
+
...d.length ? d : [],
|
|
112
|
+
...oe,
|
|
113
|
+
...u.filter((t) => t.id === N)
|
|
114
|
+
], [u, d, (P = n.data) == null ? void 0 : P.data, p]), o = G({
|
|
115
|
+
data: ((w = n.data) == null ? void 0 : w.data) ?? [],
|
|
116
|
+
columns: O,
|
|
117
|
+
getCoreRowModel: Q(),
|
|
118
|
+
rowCount: (x = n.data) == null ? void 0 : x.total,
|
|
118
119
|
manualPagination: !0,
|
|
119
120
|
// Handle pagination manually since pagination is done server side for data tables
|
|
120
121
|
onPaginationChange: (e) => {
|
|
@@ -130,40 +131,40 @@ function Pe({
|
|
|
130
131
|
manualFiltering: !0,
|
|
131
132
|
// Handle filtering manually since filtering is done server side for data tables
|
|
132
133
|
onGlobalFilterChange: (e) => {
|
|
133
|
-
const t = typeof e == "function" ? e(
|
|
134
|
+
const t = typeof e == "function" ? e(C) : e;
|
|
134
135
|
l({ columnFilters: t });
|
|
135
136
|
},
|
|
136
137
|
onColumnVisibilityChange: (e) => {
|
|
137
|
-
const t = typeof e == "function" ? e(
|
|
138
|
+
const t = typeof e == "function" ? e(S) : e;
|
|
138
139
|
l({ columnVisibility: t });
|
|
139
140
|
},
|
|
140
141
|
onRowSelectionChange: (e) => {
|
|
141
|
-
const t = typeof e == "function" ? e(
|
|
142
|
+
const t = typeof e == "function" ? e(b) : e;
|
|
142
143
|
l({ rowSelection: t });
|
|
143
144
|
},
|
|
144
145
|
state: {
|
|
145
146
|
sorting: g,
|
|
146
|
-
columnFilters:
|
|
147
|
-
columnVisibility:
|
|
147
|
+
columnFilters: C,
|
|
148
|
+
columnVisibility: S,
|
|
148
149
|
pagination: m,
|
|
149
|
-
rowSelection:
|
|
150
|
+
rowSelection: b
|
|
150
151
|
},
|
|
151
152
|
meta: {
|
|
152
153
|
refetch: n.refetch
|
|
153
154
|
}
|
|
154
155
|
});
|
|
155
|
-
return /* @__PURE__ */ a(
|
|
156
|
+
return /* @__PURE__ */ a(U, { children: /* @__PURE__ */ c("section", { ...I, className: j("flex flex-col bg-card", E), children: [
|
|
156
157
|
/* @__PURE__ */ a(
|
|
157
|
-
|
|
158
|
+
Z,
|
|
158
159
|
{
|
|
159
160
|
dataQuery: n,
|
|
160
161
|
getSelectedRowModel: o.getSelectedRowModel,
|
|
161
|
-
tableActions:
|
|
162
|
+
tableActions: F,
|
|
162
163
|
handleSearching: (e) => l({ searching: e })
|
|
163
164
|
}
|
|
164
165
|
),
|
|
165
166
|
/* @__PURE__ */ a("div", { className: "w-full overflow-auto border-x grow", tabIndex: 0, children: /* @__PURE__ */ a(
|
|
166
|
-
|
|
167
|
+
$,
|
|
167
168
|
{
|
|
168
169
|
getRowModel: o.getRowModel,
|
|
169
170
|
getHeaderGroups: o.getHeaderGroups,
|
|
@@ -173,7 +174,7 @@ function Pe({
|
|
|
173
174
|
/* @__PURE__ */ c("div", { className: "flex w-full justify-between border gap-4 p-4 overflow-x-auto", children: [
|
|
174
175
|
/* @__PURE__ */ c("div", { className: "flex gap-4", children: [
|
|
175
176
|
/* @__PURE__ */ a(
|
|
176
|
-
|
|
177
|
+
X,
|
|
177
178
|
{
|
|
178
179
|
getAllColumns: o.getAllColumns,
|
|
179
180
|
getIsAllColumnsVisible: o.getIsAllColumnsVisible,
|
|
@@ -181,7 +182,7 @@ function Pe({
|
|
|
181
182
|
}
|
|
182
183
|
),
|
|
183
184
|
/* @__PURE__ */ a(
|
|
184
|
-
|
|
185
|
+
J,
|
|
185
186
|
{
|
|
186
187
|
size: o.getState().pagination.pageSize,
|
|
187
188
|
onSelect: o.setPageSize
|
|
@@ -189,7 +190,7 @@ function Pe({
|
|
|
189
190
|
)
|
|
190
191
|
] }),
|
|
191
192
|
/* @__PURE__ */ a(
|
|
192
|
-
|
|
193
|
+
Y,
|
|
193
194
|
{
|
|
194
195
|
firstPage: o.firstPage,
|
|
195
196
|
previousPage: o.previousPage,
|
|
@@ -198,14 +199,14 @@ function Pe({
|
|
|
198
199
|
lastPage: o.lastPage,
|
|
199
200
|
nextPage: o.nextPage,
|
|
200
201
|
getState: o.getState,
|
|
201
|
-
rowCount: ((
|
|
202
|
+
rowCount: ((A = n.data) == null ? void 0 : A.total) ?? 0
|
|
202
203
|
}
|
|
203
204
|
)
|
|
204
205
|
] })
|
|
205
206
|
] }) });
|
|
206
207
|
}
|
|
207
208
|
export {
|
|
208
|
-
|
|
209
|
-
|
|
209
|
+
N as ACTIONS_COLUMN_ID,
|
|
210
|
+
we as DataTable
|
|
210
211
|
};
|
|
211
212
|
//# sourceMappingURL=data-table.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table.es.js","sources":["../../../lib/components/data-table/data-table.tsx"],"sourcesContent":["\"use client\";\n// import { TableFilter, type FilterFormType } from '@/components/data-table/table-filter';\nimport {\n\tcn,\n\tTABLE_CHECK_BOX_COLUMN,\n\tTABLE_DEFAULT_DATE_COLUMNS,\n\tTABLE_ID_COLUMN,\n\tTooltip,\n\tTooltipContent,\n\tTooltipProvider,\n\tTooltipTrigger,\n} from \"@/index\";\nimport { keepPreviousData, useQuery } from \"@tanstack/react-query\";\nimport {\n\ttype ColumnDef,\n\ttype ColumnFiltersState,\n\tcreateColumnHelper,\n\tgetCoreRowModel,\n\ttype PaginationState,\n\ttype SortingState,\n\ttype TableOptions,\n\tuseReactTable,\n\ttype VisibilityState,\n} from \"@tanstack/react-table\";\nimport { Info } from \"lucide-react\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { ColumnPicker } from \"./column-picker\";\nimport { PageSize } from \"./page-size\";\nimport { Paginator } from \"./paginator\";\nimport Actions from \"./table-actions\";\nimport { TableContent } from \"./table-content\";\nimport type { MetadataDto, TableActions, TableFetchFn } from \"./table-utils\";\n\n/** Reserved name for actions column */\nexport const ACTIONS_COLUMN_ID = \"Actions\";\n\n// Props type for the DataTable component\nexport interface DataTableProps<TData> extends Pick<TableOptions<TData>, 'columns'>, React.ComponentProps<'section'> {\n\t// \n\t// columns: ColumnDef<TData>[]; // Columns for the table\n\t// tableName: string; // Table name used as query key\n\tfetchFn: TableFetchFn<TData>; // Function for fetching data from the server\n\ttableActions: TableActions;\n\tallowSelection: boolean;\n\t// filterableFields: FilterableProperties<TData>; // Fields that can be filtered\n\tcolumnsToHideByDefault: VisibilityState; // Columns that are hidden by default\n}\nexport function DataTable<TData extends object>({\n\tcolumns,\n\tfetchFn,\n\t// tableName,\n\ttableActions,\n\tcolumnsToHideByDefault,\n\tallowSelection,\n\tclassName,\n\t...props\n\t// filterableFields,\n}: DataTableProps<TData>) {\n\t// State for managing table data and filters\n\n\t//TODO: This is later to be stored in url as params\n\tconst [tableState, setTableState] = useState({\n\t\tsorting: [] as SortingState, // Sorting state\n\t\tcolumnFilters: [] as ColumnFiltersState, // Filters for columns\n\t\tsearching: \"\", // Search query state\n\t\tcolumnVisibility: {} as VisibilityState, // Visibility of columns\n\t\trowSelection: {}, // Row selection state\n\t\tpagination: { pageIndex: 0, pageSize: 20 } as PaginationState, // Pagination state\n\t});\n\n\t// Update table state with new values\n\tconst updateTableState = (updates: Partial<typeof tableState>) => {\n\t\tsetTableState((prev) => ({ ...prev, ...updates }));\n\t};\n\n\t// Destructuring the table state for easier access\n\tconst {\n\t\tsorting,\n\t\tcolumnFilters,\n\t\tsearching,\n\t\tcolumnVisibility,\n\t\trowSelection,\n\t\tpagination,\n\t} = tableState;\n\n\t// Debounce the search query to avoid making a request on every keystroke\n\t// const [debouncedQuery] = useDebounce(searching.trim(), 300);\n\n\t// Update column visibility when columnsToHideByDefault changes\n\tuseEffect(() => {\n\t\tupdateTableState({\n\t\t\tcolumnVisibility: {\n\t\t\t\tid: false,\n\t\t\t\tupdatedAt: false,\n\t\t\t\t...columnsToHideByDefault,\n\t\t\t},\n\t\t});\n\t}, [columnsToHideByDefault]);\n\t// const [filters, setFilters] = useState<FilterFormType[]>([]);\n\n\t// const formatedFilters = useMemo(() => {\n\t// return filters.reduce((acc, filter) => {\n\t// const { property, value, operator } = filter;\n\t// if (!acc[property]) {\n\t// acc[property] = {};\n\t// }\n\t// acc[property][operator] = value;\n\t// return acc;\n\t// }, {} as Record<string, Record<string, any>>);\n\t// }, [filters]);\n\n\t// Fetch table data using the fetchFn and react-query's useQuery hook\n\tconst query = useQuery({\n\t\tqueryKey: [fetchFn.toString(), pagination, sorting, searching.trim()],\n\t\tqueryFn: () => fetchFn(pagination, sorting, searching.trim()),\n\t\tplaceholderData: keepPreviousData, // Keep previous data while loading new data\n\t\tretry: 0,\n\t\trefetchOnWindowFocus: false,\n\t});\n\n\n\t// TODO Memoizing here seems wasteful\n\t// TODO is createColumnHelper an expensive operation?\n\tconst columnHelper = createColumnHelper<TData>();\n\tconst metadataColumns = useMemo<ColumnDef<TData>[]>(() => {\n\t\tconst data = query.data?.data;\n\t\tif (!data?.length) return [];\n\t\t// set of all the keys present in a given view\n\t\tconst allMetadataKeys = new Set<string>();\n\n\t\t// Collect all unique metadata keys\n\t\tdata.forEach((row: TData) => {\n\t\t\tif ('metadata' in row && row.metadata && Array.isArray(row.metadata)) {\n\t\t\t\trow.metadata.forEach((meta: MetadataDto) => {\n\t\t\t\t\tallMetadataKeys.add(meta.key);\n\t\t\t\t});\n\t\t\t}\n\t\t});\n\n\t\t// Generate columns for all unique metadata keys\n\t\treturn Array.from(allMetadataKeys).map((key) =>\n\t\t\tcolumnHelper.accessor(\n\t\t\t\t(row: TData) => {\n\t\t\t\t\t// Find the metadata object with the matching key\n\t\t\t\t\tconst metadataEntry = row.metadata?.find(\n\t\t\t\t\t\t(meta: MetadataDto) => meta.key === key,\n\t\t\t\t\t);\n\t\t\t\t\treturn metadataEntry?.value; // Return the value for the specific key\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\theader: () => (\n\t\t\t\t\t\t<TooltipProvider delayDuration={0}>\n\t\t\t\t\t\t\t<Tooltip>\n\t\t\t\t\t\t\t\t<TooltipTrigger asChild>\n\t\t\t\t\t\t\t\t\t<span className=\"flex gap-1 items-center align-middle\">\n\t\t\t\t\t\t\t\t\t\t{key} <Info size={18} strokeWidth={\"1px\"} />\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</TooltipTrigger>\n\t\t\t\t\t\t\t\t<TooltipContent>Metadata Key</TooltipContent>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t</TooltipProvider>\n\t\t\t\t\t), // Use the metadata key as the column header\n\t\t\t\t\tid: key,\n\t\t\t\t\tenableSorting: false,\n\t\t\t\t\tcell: (info) => {\n\t\t\t\t\t\tconst value = info.getValue();\n\t\t\t\t\t\t// Handle null/undefined values\n\t\t\t\t\t\tif (value === null || value === undefined) return \"\";\n\t\t\t\t\t\t// For primitive types, return the string representation\n\t\t\t\t\t\treturn String(value);\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t),\n\t\t);\n\t}, [query.data?.data]);\n\n\t/**\n\t * ID,createdAt and updatedAt will be added by default for all tables\n\t * If selection is allowed, checkbox will be added\n\t * If the dto has metadata, dynamics columns for all the metadata key-value will be added(particular for a view)\n\t * If there are actions for the table, they will be placed fixed at the right side of table.\n\t */\n\tconst extendedColumns = useMemo<ColumnDef<any, any>[]>(() => {\n\t\tconst _columns = [\n\t\t\t...(allowSelection ? TABLE_CHECK_BOX_COLUMN : []),\n\t\t\t...TABLE_ID_COLUMN,\n\t\t\t...columns.filter((col) => col.id !== ACTIONS_COLUMN_ID),\n\t\t\t...(metadataColumns.length ? metadataColumns : []),\n\t\t\t...TABLE_DEFAULT_DATE_COLUMNS,\n\t\t\t...columns.filter((col) => col.id === ACTIONS_COLUMN_ID),\n\t\t];\n\n\t\treturn _columns;\n\t}, [columns, metadataColumns, query.data?.data, allowSelection]);\n\n\t// Use react-table's hook to create the table instance\n\tconst table = useReactTable({\n\t\tdata: query.data?.data ?? [],\n\t\tcolumns: extendedColumns,\n\t\tgetCoreRowModel: getCoreRowModel(),\n\t\trowCount: query.data?.total,\n\t\tmanualPagination: true, // Handle pagination manually since pagination is done server side for data tables\n\t\tonPaginationChange: (updater) => {\n\t\t\tconst newPagination =\n\t\t\t\ttypeof updater === \"function\" ? updater(pagination) : updater;\n\t\t\tupdateTableState({ pagination: newPagination });\n\t\t},\n\t\tmanualSorting: true, // Handle sorting manually since sorting is done server side for data tables\n\t\tonSortingChange: (updater) => {\n\t\t\tconst newSorting =\n\t\t\t\ttypeof updater === \"function\" ? updater(sorting) : updater;\n\t\t\t// Reset selection when sorting.\n\t\t\tupdateTableState({ sorting: newSorting, rowSelection: {} });\n\t\t},\n\t\tmanualFiltering: true, // Handle filtering manually since filtering is done server side for data tables\n\t\tonGlobalFilterChange: (updater) => {\n\t\t\tconst newFilters =\n\t\t\t\ttypeof updater === \"function\" ? updater(columnFilters) : updater;\n\t\t\tupdateTableState({ columnFilters: newFilters });\n\t\t},\n\t\tonColumnVisibilityChange: (updater) => {\n\t\t\tconst newVisibility =\n\t\t\t\ttypeof updater === \"function\" ? updater(columnVisibility) : updater;\n\t\t\tupdateTableState({ columnVisibility: newVisibility });\n\t\t},\n\t\tonRowSelectionChange: (updater) => {\n\t\t\tconst newSelection =\n\t\t\t\ttypeof updater === \"function\" ? updater(rowSelection) : updater;\n\t\t\tupdateTableState({ rowSelection: newSelection });\n\t\t},\n\t\tstate: {\n\t\t\tsorting,\n\t\t\tcolumnFilters,\n\t\t\tcolumnVisibility,\n\t\t\tpagination,\n\t\t\trowSelection,\n\t\t},\n\t\tmeta: {\n\t\t\trefetch: query.refetch,\n\t\t},\n\t});\n\n\treturn (\n\t\t<>\n\t\t\t{/* TODO, explore filtering component being outside the data-table, fine-grained theming would be nice here */}\n\t\t\t{/* Also, the data-table is a huuuuuge component, it would be nice to have it broken into pieces a little */}\n\t\t\t{/* ContextAPI???? */}\n\n\t\t\t{/* <TableFilter\n filterableProperties={{ ...filterableFields, ...DEFAULT_FILTERABLE_FIELDS }}\n filters={filters}\n onFiltersChange={setFilters}\n /> */}\n\n\t\t\t{/* Table Actions Section */}\n\t\t\t<section {...props} className={cn(\"flex flex-col bg-card\", className)}>\n\t\t\t\t<Actions\n\t\t\t\t\tdataQuery={query}\n\t\t\t\t\tgetSelectedRowModel={table.getSelectedRowModel}\n\t\t\t\t\ttableActions={tableActions}\n\t\t\t\t\thandleSearching={(value) => updateTableState({ searching: value })}\n\t\t\t\t/>\n\n\t\t\t\t{/* The div here is necessary because TableContent is internally a <table> tag and does not respect width, height CSS */}\n\t\t\t\t<div className=\"w-full overflow-auto border-x grow\" tabIndex={0}>\n\t\t\t\t\t<TableContent\n\t\t\t\t\t\tgetRowModel={table.getRowModel}\n\t\t\t\t\t\tgetHeaderGroups={table.getHeaderGroups}\n\t\t\t\t\t\tquery={query}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t{/* Table Footer Section with Pagination and Column Picker */}\n\t\t\t\t<div className=\"flex w-full justify-between border gap-4 p-4 overflow-x-auto\">\n\t\t\t\t\t<div className=\"flex gap-4\">\n\t\t\t\t\t\t<ColumnPicker\n\t\t\t\t\t\t\tgetAllColumns={table.getAllColumns}\n\t\t\t\t\t\t\tgetIsAllColumnsVisible={table.getIsAllColumnsVisible}\n\t\t\t\t\t\t\ttoggleAllColumnsVisible={table.toggleAllColumnsVisible}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<PageSize\n\t\t\t\t\t\t\tsize={table.getState().pagination.pageSize}\n\t\t\t\t\t\t\tonSelect={table.setPageSize}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Paginator\n\t\t\t\t\t\tfirstPage={table.firstPage}\n\t\t\t\t\t\tpreviousPage={table.previousPage}\n\t\t\t\t\t\tgetCanNextPage={table.getCanNextPage}\n\t\t\t\t\t\tgetCanPreviousPage={table.getCanPreviousPage}\n\t\t\t\t\t\tlastPage={table.lastPage}\n\t\t\t\t\t\tnextPage={table.nextPage}\n\t\t\t\t\t\tgetState={table.getState}\n\t\t\t\t\t\trowCount={query.data?.total ?? 0}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</>\n\t);\n}\n"],"names":["ACTIONS_COLUMN_ID","DataTable","columns","fetchFn","tableActions","columnsToHideByDefault","allowSelection","className","props","tableState","setTableState","useState","updateTableState","updates","prev","sorting","columnFilters","searching","columnVisibility","rowSelection","pagination","useEffect","query","useQuery","keepPreviousData","columnHelper","createColumnHelper","metadataColumns","useMemo","data","_a","allMetadataKeys","row","meta","key","metadataEntry","jsx","TooltipProvider","Tooltip","TooltipTrigger","jsxs","Info","TooltipContent","info","value","extendedColumns","TABLE_CHECK_BOX_COLUMN","TABLE_ID_COLUMN","col","TABLE_DEFAULT_DATE_COLUMNS","_b","table","useReactTable","_c","getCoreRowModel","_d","updater","newPagination","newSorting","newFilters","newVisibility","newSelection","Fragment","cn","Actions","TableContent","ColumnPicker","PageSize","Paginator","_e"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"data-table.es.js","sources":["../../../lib/components/data-table/data-table.tsx"],"sourcesContent":["\"use client\";\n// import { TableFilter, type FilterFormType } from '@/components/data-table/table-filter';\nimport {\n\tcn,\n\tTABLE_CHECK_BOX_COLUMN,\n\tTABLE_DEFAULT_DATE_COLUMNS,\n\tTABLE_ID_COLUMN,\n\tTooltip,\n\tTooltipContent,\n\tTooltipProvider,\n\tTooltipTrigger,\n} from \"@/index\";\nimport { keepPreviousData, useQuery } from \"@tanstack/react-query\";\nimport {\n\ttype ColumnDef,\n\ttype ColumnFiltersState,\n\tcreateColumnHelper,\n\tgetCoreRowModel,\n\ttype PaginationState,\n\ttype SortingState,\n\ttype TableOptions,\n\tuseReactTable,\n\ttype VisibilityState,\n} from \"@tanstack/react-table\";\nimport { Info } from \"lucide-react\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { ColumnPicker } from \"./column-picker\";\nimport { PageSize } from \"./page-size\";\nimport { Paginator } from \"./paginator\";\nimport Actions from \"./table-actions\";\nimport { TableContent } from \"./table-content\";\nimport type { MetadataDto, TableActions, TableFetchFn } from \"./table-utils\";\n\n/** Reserved name for actions column */\nexport const ACTIONS_COLUMN_ID = \"Actions\";\n\n// Props type for the DataTable component\nexport interface DataTableProps<TData> extends Pick<TableOptions<TData>, 'columns'>, React.ComponentProps<'section'> {\n\t// \n\t// columns: ColumnDef<TData>[]; // Columns for the table\n\ttableName: string; // Table name used as query key\n\tfetchFn: TableFetchFn<TData>; // Function for fetching data from the server\n\ttableActions: TableActions;\n\tallowSelection: boolean;\n\t// filterableFields: FilterableProperties<TData>; // Fields that can be filtered\n\tcolumnsToHideByDefault: VisibilityState; // Columns that are hidden by default\n}\nexport function DataTable<TData extends object>({\n\tcolumns,\n\tfetchFn,\n\ttableName,\n\ttableActions,\n\tcolumnsToHideByDefault,\n\tallowSelection,\n\tclassName,\n\t...props\n\t// filterableFields,\n}: DataTableProps<TData>) {\n\t// State for managing table data and filters\n\n\t//TODO: This is later to be stored in url as params\n\tconst [tableState, setTableState] = useState({\n\t\tsorting: [] as SortingState, // Sorting state\n\t\tcolumnFilters: [] as ColumnFiltersState, // Filters for columns\n\t\tsearching: \"\", // Search query state\n\t\tcolumnVisibility: {} as VisibilityState, // Visibility of columns\n\t\trowSelection: {}, // Row selection state\n\t\tpagination: { pageIndex: 0, pageSize: 20 } as PaginationState, // Pagination state\n\t});\n\n\t// Update table state with new values\n\tconst updateTableState = (updates: Partial<typeof tableState>) => {\n\t\tsetTableState((prev) => ({ ...prev, ...updates }));\n\t};\n\n\t// Destructuring the table state for easier access\n\tconst {\n\t\tsorting,\n\t\tcolumnFilters,\n\t\tsearching,\n\t\tcolumnVisibility,\n\t\trowSelection,\n\t\tpagination,\n\t} = tableState;\n\n\t// Debounce the search query to avoid making a request on every keystroke\n\t// const [debouncedQuery] = useDebounce(searching.trim(), 300);\n\n\t// Update column visibility when columnsToHideByDefault changes\n\tuseEffect(() => {\n\t\tupdateTableState({\n\t\t\tcolumnVisibility: {\n\t\t\t\tid: false,\n\t\t\t\tupdatedAt: false,\n\t\t\t\t...columnsToHideByDefault,\n\t\t\t},\n\t\t});\n\t}, [columnsToHideByDefault]);\n\t// const [filters, setFilters] = useState<FilterFormType[]>([]);\n\n\t// const formatedFilters = useMemo(() => {\n\t// return filters.reduce((acc, filter) => {\n\t// const { property, value, operator } = filter;\n\t// if (!acc[property]) {\n\t// acc[property] = {};\n\t// }\n\t// acc[property][operator] = value;\n\t// return acc;\n\t// }, {} as Record<string, Record<string, any>>);\n\t// }, [filters]);\n\n\t// Fetch table data using the fetchFn and react-query's useQuery hook\n\tconst query = useQuery({\n\t\t// TODO, better way to construct this key\n\t\tqueryKey: [tableName, pagination, sorting, searching.trim()],\n\t\tqueryFn: () => fetchFn(pagination, sorting, searching.trim()),\n\t\tplaceholderData: keepPreviousData, // Keep previous data while loading new data\n\t\tretry: 0,\n\t\trefetchOnWindowFocus: false,\n\t});\n\n\n\t// TODO Memoizing here seems wasteful\n\t// TODO is createColumnHelper an expensive operation?\n\tconst columnHelper = createColumnHelper<TData>();\n\tconst metadataColumns = useMemo<ColumnDef<TData>[]>(() => {\n\t\tconst data = query.data?.data;\n\t\tif (!data?.length) return [];\n\t\t// set of all the keys present in a given view\n\t\tconst allMetadataKeys = new Set<string>();\n\n\t\t// Collect all unique metadata keys\n\t\tdata.forEach((row: TData) => {\n\t\t\tif ('metadata' in row && row.metadata && Array.isArray(row.metadata)) {\n\t\t\t\trow.metadata.forEach((meta: MetadataDto) => {\n\t\t\t\t\tallMetadataKeys.add(meta.key);\n\t\t\t\t});\n\t\t\t}\n\t\t});\n\n\t\t// Generate columns for all unique metadata keys\n\t\treturn Array.from(allMetadataKeys).map((key) =>\n\t\t\tcolumnHelper.accessor(\n\t\t\t\t(row: TData) => {\n\t\t\t\t\t// Find the metadata object with the matching key\n\t\t\t\t\tconst metadataEntry = row.metadata?.find(\n\t\t\t\t\t\t(meta: MetadataDto) => meta.key === key,\n\t\t\t\t\t);\n\t\t\t\t\treturn metadataEntry?.value; // Return the value for the specific key\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\theader: () => (\n\t\t\t\t\t\t<TooltipProvider delayDuration={0}>\n\t\t\t\t\t\t\t<Tooltip>\n\t\t\t\t\t\t\t\t<TooltipTrigger asChild>\n\t\t\t\t\t\t\t\t\t<span className=\"flex gap-1 items-center align-middle\">\n\t\t\t\t\t\t\t\t\t\t{key} <Info size={18} strokeWidth={\"1px\"} />\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</TooltipTrigger>\n\t\t\t\t\t\t\t\t<TooltipContent>Metadata Key</TooltipContent>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t</TooltipProvider>\n\t\t\t\t\t), // Use the metadata key as the column header\n\t\t\t\t\tid: key,\n\t\t\t\t\tenableSorting: false,\n\t\t\t\t\tcell: (info) => {\n\t\t\t\t\t\tconst value = info.getValue();\n\t\t\t\t\t\t// Handle null/undefined values\n\t\t\t\t\t\tif (value === null || value === undefined) return \"\";\n\t\t\t\t\t\t// For primitive types, return the string representation\n\t\t\t\t\t\treturn String(value);\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t),\n\t\t);\n\t}, [query.data?.data]);\n\n\t/**\n\t * ID,createdAt and updatedAt will be added by default for all tables\n\t * If selection is allowed, checkbox will be added\n\t * If the dto has metadata, dynamics columns for all the metadata key-value will be added(particular for a view)\n\t * If there are actions for the table, they will be placed fixed at the right side of table.\n\t */\n\tconst extendedColumns = useMemo<ColumnDef<any, any>[]>(() => {\n\t\tconst _columns = [\n\t\t\t...(allowSelection ? TABLE_CHECK_BOX_COLUMN : []),\n\t\t\t...TABLE_ID_COLUMN,\n\t\t\t...columns.filter((col) => col.id !== ACTIONS_COLUMN_ID),\n\t\t\t...(metadataColumns.length ? metadataColumns : []),\n\t\t\t...TABLE_DEFAULT_DATE_COLUMNS,\n\t\t\t...columns.filter((col) => col.id === ACTIONS_COLUMN_ID),\n\t\t];\n\n\t\treturn _columns;\n\t}, [columns, metadataColumns, query.data?.data, allowSelection]);\n\n\t// Use react-table's hook to create the table instance\n\tconst table = useReactTable({\n\t\tdata: query.data?.data ?? [],\n\t\tcolumns: extendedColumns,\n\t\tgetCoreRowModel: getCoreRowModel(),\n\t\trowCount: query.data?.total,\n\t\tmanualPagination: true, // Handle pagination manually since pagination is done server side for data tables\n\t\tonPaginationChange: (updater) => {\n\t\t\tconst newPagination =\n\t\t\t\ttypeof updater === \"function\" ? updater(pagination) : updater;\n\t\t\tupdateTableState({ pagination: newPagination });\n\t\t},\n\t\tmanualSorting: true, // Handle sorting manually since sorting is done server side for data tables\n\t\tonSortingChange: (updater) => {\n\t\t\tconst newSorting =\n\t\t\t\ttypeof updater === \"function\" ? updater(sorting) : updater;\n\t\t\t// Reset selection when sorting.\n\t\t\tupdateTableState({ sorting: newSorting, rowSelection: {} });\n\t\t},\n\t\tmanualFiltering: true, // Handle filtering manually since filtering is done server side for data tables\n\t\tonGlobalFilterChange: (updater) => {\n\t\t\tconst newFilters =\n\t\t\t\ttypeof updater === \"function\" ? updater(columnFilters) : updater;\n\t\t\tupdateTableState({ columnFilters: newFilters });\n\t\t},\n\t\tonColumnVisibilityChange: (updater) => {\n\t\t\tconst newVisibility =\n\t\t\t\ttypeof updater === \"function\" ? updater(columnVisibility) : updater;\n\t\t\tupdateTableState({ columnVisibility: newVisibility });\n\t\t},\n\t\tonRowSelectionChange: (updater) => {\n\t\t\tconst newSelection =\n\t\t\t\ttypeof updater === \"function\" ? updater(rowSelection) : updater;\n\t\t\tupdateTableState({ rowSelection: newSelection });\n\t\t},\n\t\tstate: {\n\t\t\tsorting,\n\t\t\tcolumnFilters,\n\t\t\tcolumnVisibility,\n\t\t\tpagination,\n\t\t\trowSelection,\n\t\t},\n\t\tmeta: {\n\t\t\trefetch: query.refetch,\n\t\t},\n\t});\n\n\treturn (\n\t\t<>\n\t\t\t{/* TODO, explore filtering component being outside the data-table, fine-grained theming would be nice here */}\n\t\t\t{/* Also, the data-table is a huuuuuge component, it would be nice to have it broken into pieces a little */}\n\t\t\t{/* ContextAPI???? */}\n\n\t\t\t{/* <TableFilter\n filterableProperties={{ ...filterableFields, ...DEFAULT_FILTERABLE_FIELDS }}\n filters={filters}\n onFiltersChange={setFilters}\n /> */}\n\n\t\t\t{/* Table Actions Section */}\n\t\t\t<section {...props} className={cn(\"flex flex-col bg-card\", className)}>\n\t\t\t\t<Actions\n\t\t\t\t\tdataQuery={query}\n\t\t\t\t\tgetSelectedRowModel={table.getSelectedRowModel}\n\t\t\t\t\ttableActions={tableActions}\n\t\t\t\t\thandleSearching={(value) => updateTableState({ searching: value })}\n\t\t\t\t/>\n\n\t\t\t\t{/* The div here is necessary because TableContent is internally a <table> tag and does not respect width, height CSS */}\n\t\t\t\t<div className=\"w-full overflow-auto border-x grow\" tabIndex={0}>\n\t\t\t\t\t<TableContent\n\t\t\t\t\t\tgetRowModel={table.getRowModel}\n\t\t\t\t\t\tgetHeaderGroups={table.getHeaderGroups}\n\t\t\t\t\t\tquery={query}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t{/* Table Footer Section with Pagination and Column Picker */}\n\t\t\t\t<div className=\"flex w-full justify-between border gap-4 p-4 overflow-x-auto\">\n\t\t\t\t\t<div className=\"flex gap-4\">\n\t\t\t\t\t\t<ColumnPicker\n\t\t\t\t\t\t\tgetAllColumns={table.getAllColumns}\n\t\t\t\t\t\t\tgetIsAllColumnsVisible={table.getIsAllColumnsVisible}\n\t\t\t\t\t\t\ttoggleAllColumnsVisible={table.toggleAllColumnsVisible}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<PageSize\n\t\t\t\t\t\t\tsize={table.getState().pagination.pageSize}\n\t\t\t\t\t\t\tonSelect={table.setPageSize}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Paginator\n\t\t\t\t\t\tfirstPage={table.firstPage}\n\t\t\t\t\t\tpreviousPage={table.previousPage}\n\t\t\t\t\t\tgetCanNextPage={table.getCanNextPage}\n\t\t\t\t\t\tgetCanPreviousPage={table.getCanPreviousPage}\n\t\t\t\t\t\tlastPage={table.lastPage}\n\t\t\t\t\t\tnextPage={table.nextPage}\n\t\t\t\t\t\tgetState={table.getState}\n\t\t\t\t\t\trowCount={query.data?.total ?? 0}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</>\n\t);\n}\n"],"names":["ACTIONS_COLUMN_ID","DataTable","columns","fetchFn","tableName","tableActions","columnsToHideByDefault","allowSelection","className","props","tableState","setTableState","useState","updateTableState","updates","prev","sorting","columnFilters","searching","columnVisibility","rowSelection","pagination","useEffect","query","useQuery","keepPreviousData","columnHelper","createColumnHelper","metadataColumns","useMemo","data","_a","allMetadataKeys","row","meta","key","metadataEntry","jsx","TooltipProvider","Tooltip","TooltipTrigger","jsxs","Info","TooltipContent","info","value","extendedColumns","TABLE_CHECK_BOX_COLUMN","TABLE_ID_COLUMN","col","TABLE_DEFAULT_DATE_COLUMNS","_b","table","useReactTable","_c","getCoreRowModel","_d","updater","newPagination","newSorting","newFilters","newVisibility","newSelection","Fragment","cn","Actions","TableContent","ColumnPicker","PageSize","Paginator","_e"],"mappings":"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"}
|
package/dist/index.es.d.ts
CHANGED
|
@@ -175,9 +175,10 @@ export declare type CtxPortals = "customer-portal" | "system-portal" | "reseller
|
|
|
175
175
|
/** Application Names */
|
|
176
176
|
export declare type CtxProjectName = "admin-portal" | "customer-portal" | "internal-portal" | "reseller-portal";
|
|
177
177
|
|
|
178
|
-
export declare function DataTable<TData extends object>({ columns, fetchFn, tableActions, columnsToHideByDefault, allowSelection, className, ...props }: DataTableProps<TData>): JSX.Element;
|
|
178
|
+
export declare function DataTable<TData extends object>({ columns, fetchFn, tableName, tableActions, columnsToHideByDefault, allowSelection, className, ...props }: DataTableProps<TData>): JSX.Element;
|
|
179
179
|
|
|
180
180
|
export declare interface DataTableProps<TData> extends Pick<TableOptions<TData>, 'columns'>, React.ComponentProps<'section'> {
|
|
181
|
+
tableName: string;
|
|
181
182
|
fetchFn: TableFetchFn<TData>;
|
|
182
183
|
tableActions: TableActions;
|
|
183
184
|
allowSelection: boolean;
|