@bsol-oss/react-datatable5 1.0.24 → 1.0.26
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.ts +35 -8
- package/dist/index.js +167 -59
- package/dist/index.mjs +168 -62
- package/dist/types/components/DataTable.d.ts +2 -2
- package/dist/types/components/DataTableServer.d.ts +6 -1
- package/dist/types/components/DensityFeature.d.ts +22 -0
- package/dist/types/components/DensityToggle.d.ts +1 -0
- package/dist/types/components/DensityToggleButton.d.ts +1 -0
- package/dist/types/components/Table.d.ts +1 -1
- package/dist/types/components/TableBody.d.ts +7 -1
- package/dist/types/components/TableFooter.d.ts +7 -1
- package/dist/types/components/TableHeader.d.ts +5 -1
- package/dist/types/components/TableViewer.d.ts +1 -0
- package/dist/types/components/TextCell.d.ts +3 -1
- package/dist/types/index.d.ts +2 -0
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
|
-
import { FilterFn, ColumnDef } from '@tanstack/react-table';
|
|
3
|
+
import { FilterFn, ColumnDef, RowData } from '@tanstack/react-table';
|
|
4
4
|
import { RankingInfo } from '@tanstack/match-sorter-utils';
|
|
5
5
|
import { ReactNode } from 'react';
|
|
6
6
|
import * as _tanstack_table_core from '@tanstack/table-core';
|
|
7
7
|
|
|
8
|
-
declare module
|
|
8
|
+
declare module "@tanstack/react-table" {
|
|
9
9
|
interface FilterFns {
|
|
10
10
|
fuzzy: FilterFn<unknown>;
|
|
11
11
|
}
|
|
@@ -39,8 +39,15 @@ interface DataResponse<T> extends Result<T> {
|
|
|
39
39
|
count: number;
|
|
40
40
|
filterCount: number;
|
|
41
41
|
}
|
|
42
|
+
declare module "@tanstack/react-table" {
|
|
43
|
+
interface ColumnMeta<TData extends RowData, TValue> {
|
|
44
|
+
displayName: string;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
42
47
|
declare const DataTableServer: <TData>({ columns, url, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, children, }: DataTableServerProps<TData>) => react_jsx_runtime.JSX.Element;
|
|
43
48
|
|
|
49
|
+
declare const DensityToggleButton: () => react_jsx_runtime.JSX.Element;
|
|
50
|
+
|
|
44
51
|
declare const EditFilterButton: () => react_jsx_runtime.JSX.Element;
|
|
45
52
|
|
|
46
53
|
declare const EditOrderButton: () => react_jsx_runtime.JSX.Element;
|
|
@@ -65,9 +72,15 @@ declare const ResetSortingButton: () => react_jsx_runtime.JSX.Element;
|
|
|
65
72
|
interface TableProps {
|
|
66
73
|
children: ReactNode;
|
|
67
74
|
}
|
|
68
|
-
declare const Table: ({ children }: TableProps) => react_jsx_runtime.JSX.Element;
|
|
75
|
+
declare const Table: ({ children, ...props }: TableProps) => react_jsx_runtime.JSX.Element;
|
|
69
76
|
|
|
70
|
-
|
|
77
|
+
interface TableBodyProps {
|
|
78
|
+
pinnedBgColor?: {
|
|
79
|
+
light: string;
|
|
80
|
+
dark: string;
|
|
81
|
+
};
|
|
82
|
+
}
|
|
83
|
+
declare const TableBody: ({ pinnedBgColor, }: TableBodyProps) => react_jsx_runtime.JSX.Element;
|
|
71
84
|
|
|
72
85
|
interface TableCardContainerProps {
|
|
73
86
|
children: JSX.Element;
|
|
@@ -80,12 +93,22 @@ declare const TableCards: ({}: TableCardsProps) => react_jsx_runtime.JSX.Element
|
|
|
80
93
|
|
|
81
94
|
declare const TableFilter: () => react_jsx_runtime.JSX.Element;
|
|
82
95
|
|
|
83
|
-
|
|
96
|
+
interface TableFooterProps {
|
|
97
|
+
pinnedBgColor?: {
|
|
98
|
+
light: string;
|
|
99
|
+
dark: string;
|
|
100
|
+
};
|
|
101
|
+
}
|
|
102
|
+
declare const TableFooter: ({ pinnedBgColor, }: TableFooterProps) => react_jsx_runtime.JSX.Element;
|
|
84
103
|
|
|
85
104
|
interface TableHeaderProps {
|
|
86
105
|
canResize?: boolean;
|
|
106
|
+
pinnedBgColor?: {
|
|
107
|
+
light: string;
|
|
108
|
+
dark: string;
|
|
109
|
+
};
|
|
87
110
|
}
|
|
88
|
-
declare const TableHeader: ({ canResize }: TableHeaderProps) => react_jsx_runtime.JSX.Element;
|
|
111
|
+
declare const TableHeader: ({ canResize, pinnedBgColor, }: TableHeaderProps) => react_jsx_runtime.JSX.Element;
|
|
89
112
|
|
|
90
113
|
declare const TableOrderer: () => react_jsx_runtime.JSX.Element;
|
|
91
114
|
|
|
@@ -97,11 +120,15 @@ declare const TableSelector: () => react_jsx_runtime.JSX.Element;
|
|
|
97
120
|
|
|
98
121
|
declare const TableSorter: () => react_jsx_runtime.JSX.Element;
|
|
99
122
|
|
|
123
|
+
declare const TableViewer: () => react_jsx_runtime.JSX.Element;
|
|
124
|
+
|
|
100
125
|
interface TextCellProps {
|
|
101
126
|
label?: string;
|
|
127
|
+
noOfLines?: number[];
|
|
128
|
+
padding?: string;
|
|
102
129
|
children: string | number | JSX.Element | JSX.Element[];
|
|
103
130
|
}
|
|
104
|
-
declare const TextCell: ({ label, children }: TextCellProps) => react_jsx_runtime.JSX.Element;
|
|
131
|
+
declare const TextCell: ({ label, noOfLines, padding, children, }: TextCellProps) => react_jsx_runtime.JSX.Element;
|
|
105
132
|
|
|
106
133
|
interface useDataFromUrlReturn<T> {
|
|
107
134
|
data: T;
|
|
@@ -123,4 +150,4 @@ declare const useDataTable: () => {
|
|
|
123
150
|
setGlobalFilter: (filter: string) => void;
|
|
124
151
|
};
|
|
125
152
|
|
|
126
|
-
export { type DataResponse, DataTable, type DataTableProps, DataTableServer, type DataTableServerProps, EditFilterButton, EditOrderButton, EditSortingButton, EditViewButton, GlobalFilter, PageSizeControl, type PageSizeControlProps, type PaginationProps, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, type Result, Table, TableBody, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableFilter, TableFooter, TableHeader, type TableHeaderProps, TableOrderer, TablePagination, type TableProps, TableSelector, TableSorter, TextCell, type TextCellProps, useDataFromUrl, type useDataFromUrlProps, type useDataFromUrlReturn, useDataTable };
|
|
153
|
+
export { type DataResponse, DataTable, type DataTableProps, DataTableServer, type DataTableServerProps, DensityToggleButton, EditFilterButton, EditOrderButton, EditSortingButton, EditViewButton, GlobalFilter, PageSizeControl, type PageSizeControlProps, type PaginationProps, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, type Result, Table, TableBody, type TableBodyProps, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableFilter, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, TableOrderer, TablePagination, type TableProps, TableSelector, TableSorter, TableViewer, TextCell, type TextCellProps, useDataFromUrl, type useDataFromUrlProps, type useDataFromUrlReturn, useDataTable };
|
package/dist/index.js
CHANGED
|
@@ -6,6 +6,7 @@ var react = require('react');
|
|
|
6
6
|
var matchSorterUtils = require('@tanstack/match-sorter-utils');
|
|
7
7
|
var axios = require('axios');
|
|
8
8
|
var react$1 = require('@chakra-ui/react');
|
|
9
|
+
var ai = require('react-icons/ai');
|
|
9
10
|
var md = require('react-icons/md');
|
|
10
11
|
var icons = require('@chakra-ui/icons');
|
|
11
12
|
var io = require('react-icons/io');
|
|
@@ -18,6 +19,63 @@ const TableContext = react.createContext({
|
|
|
18
19
|
setGlobalFilter: () => { },
|
|
19
20
|
});
|
|
20
21
|
|
|
22
|
+
// Reference: https://tanstack.com/table/latest/docs/framework/react/examples/custom-features
|
|
23
|
+
// TypeScript setup for our new feature with all of the same type-safety as stock TanStack Table features
|
|
24
|
+
// end of TS setup!
|
|
25
|
+
// Here is all of the actual javascript code for our new feature
|
|
26
|
+
const DensityFeature = {
|
|
27
|
+
// define the new feature's initial state
|
|
28
|
+
getInitialState: (state) => {
|
|
29
|
+
return {
|
|
30
|
+
density: "1rem",
|
|
31
|
+
...state,
|
|
32
|
+
};
|
|
33
|
+
},
|
|
34
|
+
// define the new feature's default options
|
|
35
|
+
getDefaultOptions: (table) => {
|
|
36
|
+
return {
|
|
37
|
+
enableDensity: true,
|
|
38
|
+
onDensityChange: reactTable.makeStateUpdater("density", table),
|
|
39
|
+
};
|
|
40
|
+
},
|
|
41
|
+
// if you need to add a default column definition...
|
|
42
|
+
// getDefaultColumnDef: <TData extends RowData>(): Partial<ColumnDef<TData>> => {
|
|
43
|
+
// return { meta: {} } //use meta instead of directly adding to the columnDef to avoid typescript stuff that's hard to workaround
|
|
44
|
+
// },
|
|
45
|
+
// define the new feature's table instance methods
|
|
46
|
+
createTable: (table) => {
|
|
47
|
+
table.setDensity = (updater) => {
|
|
48
|
+
const safeUpdater = (old) => {
|
|
49
|
+
let newState = reactTable.functionalUpdate(updater, old);
|
|
50
|
+
return newState;
|
|
51
|
+
};
|
|
52
|
+
return table.options.onDensityChange?.(safeUpdater);
|
|
53
|
+
};
|
|
54
|
+
table.toggleDensity = (value) => {
|
|
55
|
+
table.setDensity((old) => {
|
|
56
|
+
if (value)
|
|
57
|
+
return value;
|
|
58
|
+
if (old === "0.5rem") {
|
|
59
|
+
return "1rem";
|
|
60
|
+
}
|
|
61
|
+
if (old === "1rem") {
|
|
62
|
+
return "2rem";
|
|
63
|
+
}
|
|
64
|
+
return "0.5rem";
|
|
65
|
+
});
|
|
66
|
+
};
|
|
67
|
+
},
|
|
68
|
+
// if you need to add row instance APIs...
|
|
69
|
+
// createRow: <TData extends RowData>(row, table): void => {},
|
|
70
|
+
// if you need to add cell instance APIs...
|
|
71
|
+
// createCell: <TData extends RowData>(cell, column, row, table): void => {},
|
|
72
|
+
// if you need to add column instance APIs...
|
|
73
|
+
// createColumn: <TData extends RowData>(column, table): void => {},
|
|
74
|
+
// if you need to add header instance APIs...
|
|
75
|
+
// createHeader: <TData extends RowData>(header, table): void => {},
|
|
76
|
+
};
|
|
77
|
+
//end of custom feature code
|
|
78
|
+
|
|
21
79
|
// Define a custom fuzzy filter function that will apply ranking info to rows (using match-sorter utils)
|
|
22
80
|
const fuzzyFilter = (row, columnId, value, addMeta) => {
|
|
23
81
|
// Rank the item
|
|
@@ -31,8 +89,10 @@ const fuzzyFilter = (row, columnId, value, addMeta) => {
|
|
|
31
89
|
};
|
|
32
90
|
const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, children, }) => {
|
|
33
91
|
const [columnOrder, setColumnOrder] = react.useState([]);
|
|
34
|
-
const [globalFilter, setGlobalFilter] = react.useState(
|
|
92
|
+
const [globalFilter, setGlobalFilter] = react.useState("");
|
|
93
|
+
const [density, setDensity] = react.useState("1rem");
|
|
35
94
|
const table = reactTable.useReactTable({
|
|
95
|
+
_features: [DensityFeature],
|
|
36
96
|
data: data,
|
|
37
97
|
columns: columns,
|
|
38
98
|
getCoreRowModel: reactTable.getCoreRowModel(),
|
|
@@ -47,6 +107,7 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
|
|
|
47
107
|
state: {
|
|
48
108
|
columnOrder,
|
|
49
109
|
globalFilter,
|
|
110
|
+
density,
|
|
50
111
|
},
|
|
51
112
|
onColumnOrderChange: (state) => {
|
|
52
113
|
setColumnOrder(state);
|
|
@@ -55,11 +116,14 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
|
|
|
55
116
|
enableMultiRowSelection: enableMultiRowSelection,
|
|
56
117
|
enableSubRowSelection: enableSubRowSelection,
|
|
57
118
|
columnResizeMode: "onChange",
|
|
119
|
+
// global filter start
|
|
58
120
|
filterFns: {
|
|
59
|
-
fuzzy: fuzzyFilter,
|
|
121
|
+
fuzzy: fuzzyFilter,
|
|
60
122
|
},
|
|
61
123
|
onGlobalFilterChange: setGlobalFilter,
|
|
62
|
-
globalFilterFn:
|
|
124
|
+
globalFilterFn: "fuzzy",
|
|
125
|
+
// global filter end
|
|
126
|
+
onDensityChange: setDensity,
|
|
63
127
|
});
|
|
64
128
|
react.useEffect(() => {
|
|
65
129
|
setColumnOrder(table.getAllLeafColumns().map((column) => column.id));
|
|
@@ -113,6 +177,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
|
|
|
113
177
|
const [rowSelection, setRowSelection] = react.useState({});
|
|
114
178
|
const [columnOrder, setColumnOrder] = react.useState([]);
|
|
115
179
|
const [globalFilter, setGlobalFilter] = react.useState("");
|
|
180
|
+
const [density, setDensity] = react.useState("1rem");
|
|
116
181
|
const { data, loading, hasError, refreshData } = useDataFromUrl({
|
|
117
182
|
url: url,
|
|
118
183
|
defaultData: {
|
|
@@ -138,6 +203,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
|
|
|
138
203
|
},
|
|
139
204
|
});
|
|
140
205
|
const table = reactTable.useReactTable({
|
|
206
|
+
_features: [DensityFeature],
|
|
141
207
|
data: data.results,
|
|
142
208
|
columns: columns,
|
|
143
209
|
getCoreRowModel: reactTable.getCoreRowModel(),
|
|
@@ -155,6 +221,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
|
|
|
155
221
|
rowSelection,
|
|
156
222
|
columnOrder,
|
|
157
223
|
globalFilter,
|
|
224
|
+
density,
|
|
158
225
|
},
|
|
159
226
|
defaultColumn: {
|
|
160
227
|
size: 150, //starting column size
|
|
@@ -171,6 +238,14 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
|
|
|
171
238
|
setGlobalFilter(state);
|
|
172
239
|
},
|
|
173
240
|
rowCount: data.filterCount,
|
|
241
|
+
// for tanstack-table ts bug start
|
|
242
|
+
filterFns: {
|
|
243
|
+
fuzzy: () => {
|
|
244
|
+
return false;
|
|
245
|
+
},
|
|
246
|
+
},
|
|
247
|
+
// for tanstack-table ts bug end
|
|
248
|
+
onDensityChange: setDensity,
|
|
174
249
|
});
|
|
175
250
|
react.useEffect(() => {
|
|
176
251
|
refreshData();
|
|
@@ -186,6 +261,13 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
|
|
|
186
261
|
}, children: children }));
|
|
187
262
|
};
|
|
188
263
|
|
|
264
|
+
const DensityToggleButton = () => {
|
|
265
|
+
const { table } = react.useContext(TableContext);
|
|
266
|
+
return (jsxRuntime.jsx(react$1.Tooltip, { label: "Toggle Density", children: jsxRuntime.jsx(react$1.IconButton, { variant: "ghost", "aria-label": "Toggle Density", icon: jsxRuntime.jsx(ai.AiOutlineColumnWidth, {}), onClick: (event) => {
|
|
267
|
+
table.toggleDensity();
|
|
268
|
+
} }) }));
|
|
269
|
+
};
|
|
270
|
+
|
|
189
271
|
const ResetFilteringButton = () => {
|
|
190
272
|
const { table } = react.useContext(TableContext);
|
|
191
273
|
return (jsxRuntime.jsx(react$1.Button, { onClick: () => {
|
|
@@ -201,7 +283,10 @@ const useDataTable = () => {
|
|
|
201
283
|
const TableFilter = () => {
|
|
202
284
|
const { table } = useDataTable();
|
|
203
285
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: table.getLeafHeaders().map((header) => {
|
|
204
|
-
|
|
286
|
+
const displayName = header.column.columnDef.meta === undefined
|
|
287
|
+
? header.column.id
|
|
288
|
+
: header.column.columnDef.meta.displayName;
|
|
289
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: header.column.getCanFilter() && (jsxRuntime.jsxs(react$1.Box, { children: [jsxRuntime.jsx(react$1.Text, { children: displayName }), jsxRuntime.jsx(react$1.Input, { value: header.column.getFilterValue()
|
|
205
290
|
? String(header.column.getFilterValue())
|
|
206
291
|
: "", onChange: (e) => {
|
|
207
292
|
header.column.setFilterValue(e.target.value);
|
|
@@ -235,17 +320,27 @@ const ColumnOrderChanger = ({ columns }) => {
|
|
|
235
320
|
}
|
|
236
321
|
setOriginalOrder(columns);
|
|
237
322
|
}, [columns]);
|
|
238
|
-
return (jsxRuntime.jsxs(react$1.Flex, { gap: "0.5rem", flexFlow: "column", children: [jsxRuntime.jsx(react$1.Flex, { gap: "0.5rem", flexFlow: "column", children: order.map((
|
|
323
|
+
return (jsxRuntime.jsxs(react$1.Flex, { gap: "0.5rem", flexFlow: "column", children: [jsxRuntime.jsx(react$1.Flex, { gap: "0.5rem", flexFlow: "column", children: order.map((columnId, index) => (jsxRuntime.jsxs(react$1.Flex, { gap: "0.5rem", alignItems: "center", justifyContent: "space-between", children: [jsxRuntime.jsx(react$1.IconButton, { onClick: () => {
|
|
239
324
|
const prevIndex = index - 1;
|
|
240
325
|
if (prevIndex >= 0) {
|
|
241
326
|
handleChangeOrder(index, prevIndex);
|
|
242
327
|
}
|
|
243
|
-
}, disabled: index === 0, "aria-label": "", children: jsxRuntime.jsx(md.MdArrowUpward, {}) }),
|
|
328
|
+
}, disabled: index === 0, "aria-label": "", children: jsxRuntime.jsx(md.MdArrowUpward, {}) }), table
|
|
329
|
+
.getAllFlatColumns()
|
|
330
|
+
.filter((column) => {
|
|
331
|
+
return column.id === columnId;
|
|
332
|
+
})
|
|
333
|
+
.map((column) => {
|
|
334
|
+
const displayName = column.columnDef.meta === undefined
|
|
335
|
+
? column.id
|
|
336
|
+
: column.columnDef.meta.displayName;
|
|
337
|
+
return jsxRuntime.jsx(jsxRuntime.Fragment, { children: displayName });
|
|
338
|
+
}), jsxRuntime.jsx(react$1.IconButton, { onClick: () => {
|
|
244
339
|
const nextIndex = index + 1;
|
|
245
340
|
if (nextIndex < order.length) {
|
|
246
341
|
handleChangeOrder(index, nextIndex);
|
|
247
342
|
}
|
|
248
|
-
}, disabled: index === order.length - 1, "aria-label": "", children: jsxRuntime.jsx(md.MdArrowDownward, {}) })] },
|
|
343
|
+
}, disabled: index === order.length - 1, "aria-label": "", children: jsxRuntime.jsx(md.MdArrowDownward, {}) })] }, columnId))) }), jsxRuntime.jsxs(react$1.Flex, { gap: "0.25rem", children: [jsxRuntime.jsx(react$1.Button, { onClick: () => {
|
|
249
344
|
table.setColumnOrder(order);
|
|
250
345
|
}, children: "Apply" }), jsxRuntime.jsx(react$1.Button, { onClick: () => {
|
|
251
346
|
table.setColumnOrder(originalOrder);
|
|
@@ -270,7 +365,10 @@ const ResetSortingButton = () => {
|
|
|
270
365
|
const TableSorter = () => {
|
|
271
366
|
const { table } = useDataTable();
|
|
272
367
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: table.getHeaderGroups().map((headerGroup) => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: headerGroup.headers.map((header) => {
|
|
273
|
-
|
|
368
|
+
const displayName = header.column.columnDef.meta === undefined
|
|
369
|
+
? header.column.id
|
|
370
|
+
: header.column.columnDef.meta.displayName;
|
|
371
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: header.column.getCanSort() && (jsxRuntime.jsxs(react$1.Flex, { alignItems: "center", gap: "0.5rem", padding: "0.5rem", children: [jsxRuntime.jsx(react$1.Text, { children: displayName }), jsxRuntime.jsxs(react$1.Button, { variant: "ghost", onClick: (e) => {
|
|
274
372
|
header.column.toggleSorting();
|
|
275
373
|
}, children: [header.column.getIsSorted() === false && (
|
|
276
374
|
// <Text>To No sort</Text>
|
|
@@ -288,11 +386,19 @@ const EditSortingButton = () => {
|
|
|
288
386
|
return (jsxRuntime.jsxs(react$1.Popover, { placement: "auto", children: [jsxRuntime.jsx(react$1.Tooltip, { label: "Filter", children: jsxRuntime.jsx(react$1.PopoverTrigger, { children: jsxRuntime.jsx(react$1.IconButton, { "aria-label": "filter", variant: "ghost", icon: jsxRuntime.jsx(md.MdOutlineSort, {}) }) }) }), jsxRuntime.jsxs(react$1.PopoverContent, { width: "auto", children: [jsxRuntime.jsx(react$1.PopoverArrow, {}), jsxRuntime.jsx(react$1.PopoverBody, { children: jsxRuntime.jsxs(react$1.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(TableSorter, {}), jsxRuntime.jsx(ResetSortingButton, {})] }) })] })] }));
|
|
289
387
|
};
|
|
290
388
|
|
|
389
|
+
const TableViewer = () => {
|
|
390
|
+
const { table } = useDataTable();
|
|
391
|
+
return (jsxRuntime.jsx(react$1.Flex, { flexFlow: "column", gap: "1rem", children: table.getAllLeafColumns().map((column) => {
|
|
392
|
+
console.log(column.columnDef.meta, "gokspo");
|
|
393
|
+
const displayName = column.columnDef.meta === undefined
|
|
394
|
+
? column.id
|
|
395
|
+
: column.columnDef.meta.displayName;
|
|
396
|
+
return (jsxRuntime.jsxs(react$1.Flex, { flexFlow: "row", gap: "0.5rem", alignItems: "center", children: [jsxRuntime.jsx(react$1.Switch, { isChecked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }), displayName] }));
|
|
397
|
+
}) }));
|
|
398
|
+
};
|
|
399
|
+
|
|
291
400
|
const EditViewButton = () => {
|
|
292
|
-
|
|
293
|
-
return (jsxRuntime.jsxs(react$1.Popover, { placement: "auto", children: [jsxRuntime.jsx(react$1.PopoverTrigger, { children: jsxRuntime.jsx(react$1.IconButton, { "aria-label": "view", variant: "ghost", icon: jsxRuntime.jsx(io.IoMdEye, {}) }) }), jsxRuntime.jsxs(react$1.PopoverContent, { width: "auto", children: [jsxRuntime.jsx(react$1.PopoverArrow, {}), jsxRuntime.jsx(react$1.PopoverBody, { children: jsxRuntime.jsx(react$1.Flex, { flexFlow: "column", gap: "1rem", children: table.getAllLeafColumns().map((column) => {
|
|
294
|
-
return (jsxRuntime.jsx(react$1.FormControl, { width: "auto", children: jsxRuntime.jsx(react$1.Checkbox, { isChecked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler(), children: column.id }) }, crypto.randomUUID()));
|
|
295
|
-
}) }) })] })] }));
|
|
401
|
+
return (jsxRuntime.jsxs(react$1.Popover, { placement: "auto", children: [jsxRuntime.jsx(react$1.PopoverTrigger, { children: jsxRuntime.jsx(react$1.IconButton, { "aria-label": "view", variant: "ghost", icon: jsxRuntime.jsx(io.IoMdEye, {}) }) }), jsxRuntime.jsxs(react$1.PopoverContent, { width: "auto", children: [jsxRuntime.jsx(react$1.PopoverArrow, {}), jsxRuntime.jsx(react$1.PopoverBody, { children: jsxRuntime.jsx(TableViewer, {}) })] })] }));
|
|
296
402
|
};
|
|
297
403
|
|
|
298
404
|
const GlobalFilter = () => {
|
|
@@ -316,37 +422,33 @@ const ResetSelectionButton = () => {
|
|
|
316
422
|
}, children: "Reset Selection" }));
|
|
317
423
|
};
|
|
318
424
|
|
|
319
|
-
const Table = ({ children }) => {
|
|
425
|
+
const Table = ({ children, ...props }) => {
|
|
320
426
|
const { table } = useDataTable();
|
|
321
|
-
return (jsxRuntime.jsx(react$1.
|
|
427
|
+
return (jsxRuntime.jsx(react$1.Table, { width: table.getCenterTotalSize(), overflowX: "scroll", ...props, children: children }));
|
|
322
428
|
};
|
|
323
429
|
|
|
324
|
-
const TableBody = () => {
|
|
430
|
+
const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
|
|
325
431
|
const { table: table$1 } = react.useContext(TableContext);
|
|
326
432
|
return (jsxRuntime.jsx(table.Tbody, { children: table$1.getRowModel().rows.map((row) => {
|
|
327
|
-
return (jsxRuntime.jsxs(table.Tr, { display: "flex", _hover: { backgroundColor: "rgba(178,178,178,0.1)" }, zIndex: 1, children: [jsxRuntime.jsx(table.Td
|
|
328
|
-
// styling resize and pinning start
|
|
329
|
-
, {
|
|
330
|
-
// styling resize and pinning start
|
|
331
|
-
padding: "0.5rem", ...(table$1.getIsSomeColumnsPinned("left")
|
|
433
|
+
return (jsxRuntime.jsxs(table.Tr, { display: "flex", _hover: { backgroundColor: "rgba(178,178,178,0.1)" }, zIndex: 1, children: [jsxRuntime.jsx(table.Td, { padding: "0rem", ...(table$1.getIsSomeColumnsPinned("left")
|
|
332
434
|
? {
|
|
333
435
|
left: `0px`,
|
|
334
|
-
backgroundColor:
|
|
436
|
+
backgroundColor: pinnedBgColor.light,
|
|
335
437
|
position: "sticky",
|
|
336
438
|
zIndex: 1,
|
|
337
|
-
_dark: { backgroundColor:
|
|
439
|
+
_dark: { backgroundColor: pinnedBgColor.dark },
|
|
338
440
|
}
|
|
339
|
-
: {}), children: jsxRuntime.jsx(react$1.Checkbox, { isChecked: row.getIsSelected(),
|
|
441
|
+
: {}), children: jsxRuntime.jsx(react$1.Checkbox, { padding: table$1.getState().density, isChecked: row.getIsSelected(),
|
|
340
442
|
disabled: !row.getCanSelect(),
|
|
341
443
|
// indeterminate: row.getIsSomeSelected(),
|
|
342
444
|
onChange: row.getToggleSelectedHandler() }) }), row.getVisibleCells().map((cell) => {
|
|
343
|
-
return (jsxRuntime.jsx(table.Td, { padding:
|
|
445
|
+
return (jsxRuntime.jsx(table.Td, { padding: table$1.getState().density,
|
|
344
446
|
// styling resize and pinning start
|
|
345
447
|
maxWidth: `${cell.column.getSize()}px`, width: `${cell.column.getSize()}px`, left: cell.column.getIsPinned()
|
|
346
448
|
? `${cell.column.getStart("left") + 32}px`
|
|
347
|
-
: undefined, backgroundColor: cell.column.getIsPinned() ?
|
|
449
|
+
: undefined, backgroundColor: cell.column.getIsPinned() ? pinnedBgColor.light : undefined, position: cell.column.getIsPinned() ? "sticky" : "relative", zIndex: cell.column.getIsPinned() ? 1 : 0, _dark: {
|
|
348
450
|
backgroundColor: cell.column.getIsPinned()
|
|
349
|
-
?
|
|
451
|
+
? pinnedBgColor.dark
|
|
350
452
|
: undefined,
|
|
351
453
|
}, children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, crypto.randomUUID()));
|
|
352
454
|
})] }, crypto.randomUUID()));
|
|
@@ -369,54 +471,56 @@ const TableCards = ({}) => {
|
|
|
369
471
|
}) }));
|
|
370
472
|
};
|
|
371
473
|
|
|
372
|
-
const TableFooter = () => {
|
|
474
|
+
const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
|
|
373
475
|
const table = useDataTable().table;
|
|
374
476
|
const SELECTION_BOX_WIDTH = 32;
|
|
375
477
|
return (jsxRuntime.jsx(react$1.Tfoot, { children: table.getFooterGroups().map((footerGroup) => (jsxRuntime.jsxs(react$1.Tr, { display: "flex", children: [jsxRuntime.jsx(react$1.Th
|
|
376
478
|
// styling resize and pinning start
|
|
377
479
|
, {
|
|
378
480
|
// styling resize and pinning start
|
|
379
|
-
padding:
|
|
481
|
+
padding: table.getState().density, ...(table.getIsSomeColumnsPinned("left")
|
|
380
482
|
? {
|
|
381
483
|
left: `0px`,
|
|
382
|
-
backgroundColor:
|
|
484
|
+
backgroundColor: pinnedBgColor.light,
|
|
383
485
|
position: "sticky",
|
|
384
486
|
zIndex: 1,
|
|
385
|
-
_dark: { backgroundColor:
|
|
487
|
+
_dark: { backgroundColor: pinnedBgColor.dark },
|
|
386
488
|
}
|
|
387
489
|
: {}), children: jsxRuntime.jsx(react$1.Checkbox, { isChecked: table.getIsAllRowsSelected(),
|
|
388
490
|
// indeterminate: table.getIsSomeRowsSelected(),
|
|
389
|
-
onChange: table.getToggleAllRowsSelectedHandler() }) }), footerGroup.headers.map((header) => (jsxRuntime.jsx(react$1.Th, { padding: "
|
|
491
|
+
onChange: table.getToggleAllRowsSelectedHandler() }) }), footerGroup.headers.map((header) => (jsxRuntime.jsx(react$1.Th, { padding: "0", colSpan: header.colSpan,
|
|
390
492
|
// styling resize and pinning start
|
|
391
493
|
maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, left: header.column.getIsPinned()
|
|
392
494
|
? `${header.getStart("left") + SELECTION_BOX_WIDTH}px`
|
|
393
|
-
: undefined, backgroundColor: header.column.getIsPinned() ?
|
|
495
|
+
: undefined, backgroundColor: header.column.getIsPinned() ? pinnedBgColor.light : undefined, position: header.column.getIsPinned() ? "sticky" : "relative", zIndex: header.column.getIsPinned() ? 1 : undefined, _dark: {
|
|
394
496
|
backgroundColor: header.column.getIsPinned()
|
|
395
|
-
?
|
|
497
|
+
? pinnedBgColor.dark
|
|
396
498
|
: undefined,
|
|
397
499
|
},
|
|
398
500
|
// styling resize and pinning end
|
|
399
|
-
display: "flex", alignItems: "center", children: header.isPlaceholder
|
|
400
|
-
|
|
401
|
-
|
|
501
|
+
display: "grid", children: jsxRuntime.jsx(react$1.Menu, { children: jsxRuntime.jsx(react$1.MenuButton, { as: react$1.Box, padding: table.getState().density, display: "flex", alignItems: "center", justifyContent: "start", borderRadius: "0rem", _hover: { backgroundColor: "gray.100" }, children: jsxRuntime.jsxs(react$1.Flex, { gap: "0.5rem", alignItems: "center", children: [header.isPlaceholder
|
|
502
|
+
? null
|
|
503
|
+
: reactTable.flexRender(header.column.columnDef.footer, header.getContext()), jsxRuntime.jsx(react$1.Box, { children: header.column.getCanSort() && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [header.column.getIsSorted() === false && (
|
|
504
|
+
// <UpDownIcon />
|
|
505
|
+
jsxRuntime.jsx(jsxRuntime.Fragment, {})), header.column.getIsSorted() === "asc" && (jsxRuntime.jsx(icons.ChevronUpIcon, {})), header.column.getIsSorted() === "desc" && (jsxRuntime.jsx(icons.ChevronDownIcon, {}))] })) })] }) }) }) }, crypto.randomUUID())))] }, crypto.randomUUID()))) }));
|
|
402
506
|
};
|
|
403
507
|
|
|
404
|
-
const TableHeader = ({ canResize }) => {
|
|
508
|
+
const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
|
|
405
509
|
const { table } = useDataTable();
|
|
406
510
|
const SELECTION_BOX_WIDTH = 32;
|
|
407
511
|
return (jsxRuntime.jsx(react$1.Thead, { children: table.getHeaderGroups().map((headerGroup) => (jsxRuntime.jsxs(react$1.Tr, { display: "flex", children: [jsxRuntime.jsx(react$1.Th
|
|
408
512
|
// styling resize and pinning start
|
|
409
|
-
, {
|
|
410
|
-
// styling resize and pinning start
|
|
411
|
-
padding: "0.5rem", ...(table.getIsSomeColumnsPinned("left")
|
|
513
|
+
, { ...(table.getIsSomeColumnsPinned("left")
|
|
412
514
|
? {
|
|
413
515
|
left: `0px`,
|
|
414
|
-
backgroundColor:
|
|
516
|
+
backgroundColor: pinnedBgColor.light,
|
|
415
517
|
position: "sticky",
|
|
416
518
|
zIndex: 1,
|
|
417
|
-
_dark: { backgroundColor:
|
|
519
|
+
_dark: { backgroundColor: pinnedBgColor.dark },
|
|
418
520
|
}
|
|
419
|
-
: {}),
|
|
521
|
+
: {}),
|
|
522
|
+
// styling resize and pinning end
|
|
523
|
+
padding: "0rem", children: jsxRuntime.jsx(react$1.Checkbox, { padding: table.getState().density, isChecked: table.getIsAllRowsSelected(),
|
|
420
524
|
// indeterminate: table.getIsSomeRowsSelected(),
|
|
421
525
|
onChange: table.getToggleAllRowsSelectedHandler() }) }), headerGroup.headers.map((header) => {
|
|
422
526
|
const resizeProps = {
|
|
@@ -429,23 +533,25 @@ const TableHeader = ({ canResize }) => {
|
|
|
429
533
|
// styling resize and pinning start
|
|
430
534
|
maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, left: header.column.getIsPinned()
|
|
431
535
|
? `${header.getStart("left") + SELECTION_BOX_WIDTH}px`
|
|
432
|
-
: undefined, backgroundColor: header.column.getIsPinned() ?
|
|
536
|
+
: undefined, backgroundColor: header.column.getIsPinned() ? pinnedBgColor.light : undefined, position: header.column.getIsPinned() ? "sticky" : "relative", zIndex: header.column.getIsPinned() ? 1 : undefined, _dark: {
|
|
433
537
|
backgroundColor: header.column.getIsPinned()
|
|
434
|
-
?
|
|
538
|
+
? pinnedBgColor.dark
|
|
435
539
|
: undefined,
|
|
436
540
|
},
|
|
437
541
|
// styling resize and pinning end
|
|
438
|
-
display: "grid", children: [jsxRuntime.
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
542
|
+
display: "grid", children: [jsxRuntime.jsxs(react$1.Menu, { children: [jsxRuntime.jsx(react$1.MenuButton, { as: react$1.Box, padding: table.getState().density, display: "flex", alignItems: "center", justifyContent: "start", borderRadius: "0rem", _hover: { backgroundColor: "gray.100" }, children: jsxRuntime.jsxs(react$1.Flex, { gap: "0.5rem", alignItems: "center", children: [header.isPlaceholder
|
|
543
|
+
? null
|
|
544
|
+
: reactTable.flexRender(header.column.columnDef.header, header.getContext()), jsxRuntime.jsx(react$1.Box, { children: header.column.getCanSort() && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [header.column.getIsSorted() === false && (
|
|
545
|
+
// <UpDownIcon />
|
|
546
|
+
jsxRuntime.jsx(jsxRuntime.Fragment, {})), header.column.getIsSorted() === "asc" && (jsxRuntime.jsx(icons.ChevronUpIcon, {})), header.column.getIsSorted() === "desc" && (jsxRuntime.jsx(icons.ChevronDownIcon, {}))] })) })] }) }), jsxRuntime.jsx(react$1.Portal, { children: jsxRuntime.jsxs(react$1.MenuList, { children: [!header.column.getIsPinned() && (jsxRuntime.jsx(react$1.MenuItem, { icon: jsxRuntime.jsx(md.MdPushPin, {}), onClick: () => {
|
|
547
|
+
header.column.pin("left");
|
|
548
|
+
}, children: "Pin Column" })), header.column.getIsPinned() && (jsxRuntime.jsx(react$1.MenuItem, { icon: jsxRuntime.jsx(md.MdCancel, {}), onClick: () => {
|
|
549
|
+
header.column.pin(false);
|
|
550
|
+
}, children: "Cancel Pin" })), header.column.getCanSort() && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react$1.MenuItem, { icon: jsxRuntime.jsx(md.MdSort, {}), onClick: () => {
|
|
551
|
+
header.column.toggleSorting();
|
|
552
|
+
}, children: "Toggle Sorting" }), header.column.getIsSorted() && (jsxRuntime.jsx(react$1.MenuItem, { icon: jsxRuntime.jsx(io.IoMdClose, {}), onClick: () => {
|
|
553
|
+
header.column.clearSorting();
|
|
554
|
+
}, children: "Clear Sorting" }))] }))] }) })] }), header.column.getIsFiltered() && jsxRuntime.jsx(md.MdFilterListAlt, {}), canResize && (jsxRuntime.jsx(react$1.Box, { borderRight: "0.2rem solid", borderRightColor: header.column.getIsResizing() ? "gray.700" : "transparent", position: "absolute", right: "0", top: "0", height: "100%", width: "5px", userSelect: "none", style: { touchAction: "none" }, _hover: {
|
|
449
555
|
borderRightColor: header.column.getIsResizing()
|
|
450
556
|
? "gray.700"
|
|
451
557
|
: "gray.400",
|
|
@@ -472,15 +578,16 @@ const TableSelector = () => {
|
|
|
472
578
|
}, "aria-label": "reset selection" }))] }));
|
|
473
579
|
};
|
|
474
580
|
|
|
475
|
-
const TextCell = ({ label, children }) => {
|
|
581
|
+
const TextCell = ({ label, noOfLines = [1], padding = "0rem", children, }) => {
|
|
476
582
|
if (label) {
|
|
477
|
-
return (jsxRuntime.jsx(react$1.Tooltip, { label: jsxRuntime.jsx(react$1.Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [5], children: label }), placement: "auto", children: jsxRuntime.jsx(react$1.Text, { as: "span", textOverflow: "ellipsis", noOfLines:
|
|
583
|
+
return (jsxRuntime.jsx(react$1.Box, { padding: padding, children: jsxRuntime.jsx(react$1.Tooltip, { label: jsxRuntime.jsx(react$1.Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [5], children: label }), placement: "auto", children: jsxRuntime.jsx(react$1.Text, { as: "span", textOverflow: "ellipsis", noOfLines: noOfLines, children: children }) }) }));
|
|
478
584
|
}
|
|
479
|
-
return (jsxRuntime.jsx(react$1.Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis",
|
|
585
|
+
return (jsxRuntime.jsx(react$1.Box, { padding: padding, children: jsxRuntime.jsx(react$1.Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "break-all", noOfLines: noOfLines, children: children }) }));
|
|
480
586
|
};
|
|
481
587
|
|
|
482
588
|
exports.DataTable = DataTable;
|
|
483
589
|
exports.DataTableServer = DataTableServer;
|
|
590
|
+
exports.DensityToggleButton = DensityToggleButton;
|
|
484
591
|
exports.EditFilterButton = EditFilterButton;
|
|
485
592
|
exports.EditOrderButton = EditOrderButton;
|
|
486
593
|
exports.EditSortingButton = EditSortingButton;
|
|
@@ -501,6 +608,7 @@ exports.TableOrderer = TableOrderer;
|
|
|
501
608
|
exports.TablePagination = TablePagination;
|
|
502
609
|
exports.TableSelector = TableSelector;
|
|
503
610
|
exports.TableSorter = TableSorter;
|
|
611
|
+
exports.TableViewer = TableViewer;
|
|
504
612
|
exports.TextCell = TextCell;
|
|
505
613
|
exports.useDataFromUrl = useDataFromUrl;
|
|
506
614
|
exports.useDataTable = useDataTable;
|
package/dist/index.mjs
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
2
|
-
import { useReactTable, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getPaginationRowModel, flexRender } from '@tanstack/react-table';
|
|
2
|
+
import { makeStateUpdater, functionalUpdate, useReactTable, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getPaginationRowModel, flexRender } from '@tanstack/react-table';
|
|
3
3
|
import { createContext, useState, useEffect, useContext } from 'react';
|
|
4
4
|
import { rankItem } from '@tanstack/match-sorter-utils';
|
|
5
5
|
import axios from 'axios';
|
|
6
|
-
import { Button, Box, Text, Input, Popover,
|
|
6
|
+
import { Tooltip, IconButton, Button, Box, Text, Input, Popover, PopoverTrigger, PopoverContent, PopoverArrow, PopoverBody, Flex, Switch, Menu, MenuButton, MenuList, MenuItem, Table as Table$1, Checkbox, Grid, Card, CardBody, Tfoot, Tr as Tr$1, Th, Thead, Portal, ButtonGroup, Icon } from '@chakra-ui/react';
|
|
7
|
+
import { AiOutlineColumnWidth } from 'react-icons/ai';
|
|
7
8
|
import { MdFilterAlt, MdArrowUpward, MdArrowDownward, MdOutlineMoveDown, MdOutlineSort, MdPushPin, MdCancel, MdSort, MdFilterListAlt, MdFirstPage, MdArrowBack, MdArrowForward, MdLastPage, MdClear, MdOutlineChecklist } from 'react-icons/md';
|
|
8
9
|
import { UpDownIcon, ChevronDownIcon, ChevronUpIcon, CloseIcon } from '@chakra-ui/icons';
|
|
9
10
|
import { IoMdEye, IoMdClose, IoMdCheckbox } from 'react-icons/io';
|
|
@@ -16,6 +17,63 @@ const TableContext = createContext({
|
|
|
16
17
|
setGlobalFilter: () => { },
|
|
17
18
|
});
|
|
18
19
|
|
|
20
|
+
// Reference: https://tanstack.com/table/latest/docs/framework/react/examples/custom-features
|
|
21
|
+
// TypeScript setup for our new feature with all of the same type-safety as stock TanStack Table features
|
|
22
|
+
// end of TS setup!
|
|
23
|
+
// Here is all of the actual javascript code for our new feature
|
|
24
|
+
const DensityFeature = {
|
|
25
|
+
// define the new feature's initial state
|
|
26
|
+
getInitialState: (state) => {
|
|
27
|
+
return {
|
|
28
|
+
density: "1rem",
|
|
29
|
+
...state,
|
|
30
|
+
};
|
|
31
|
+
},
|
|
32
|
+
// define the new feature's default options
|
|
33
|
+
getDefaultOptions: (table) => {
|
|
34
|
+
return {
|
|
35
|
+
enableDensity: true,
|
|
36
|
+
onDensityChange: makeStateUpdater("density", table),
|
|
37
|
+
};
|
|
38
|
+
},
|
|
39
|
+
// if you need to add a default column definition...
|
|
40
|
+
// getDefaultColumnDef: <TData extends RowData>(): Partial<ColumnDef<TData>> => {
|
|
41
|
+
// return { meta: {} } //use meta instead of directly adding to the columnDef to avoid typescript stuff that's hard to workaround
|
|
42
|
+
// },
|
|
43
|
+
// define the new feature's table instance methods
|
|
44
|
+
createTable: (table) => {
|
|
45
|
+
table.setDensity = (updater) => {
|
|
46
|
+
const safeUpdater = (old) => {
|
|
47
|
+
let newState = functionalUpdate(updater, old);
|
|
48
|
+
return newState;
|
|
49
|
+
};
|
|
50
|
+
return table.options.onDensityChange?.(safeUpdater);
|
|
51
|
+
};
|
|
52
|
+
table.toggleDensity = (value) => {
|
|
53
|
+
table.setDensity((old) => {
|
|
54
|
+
if (value)
|
|
55
|
+
return value;
|
|
56
|
+
if (old === "0.5rem") {
|
|
57
|
+
return "1rem";
|
|
58
|
+
}
|
|
59
|
+
if (old === "1rem") {
|
|
60
|
+
return "2rem";
|
|
61
|
+
}
|
|
62
|
+
return "0.5rem";
|
|
63
|
+
});
|
|
64
|
+
};
|
|
65
|
+
},
|
|
66
|
+
// if you need to add row instance APIs...
|
|
67
|
+
// createRow: <TData extends RowData>(row, table): void => {},
|
|
68
|
+
// if you need to add cell instance APIs...
|
|
69
|
+
// createCell: <TData extends RowData>(cell, column, row, table): void => {},
|
|
70
|
+
// if you need to add column instance APIs...
|
|
71
|
+
// createColumn: <TData extends RowData>(column, table): void => {},
|
|
72
|
+
// if you need to add header instance APIs...
|
|
73
|
+
// createHeader: <TData extends RowData>(header, table): void => {},
|
|
74
|
+
};
|
|
75
|
+
//end of custom feature code
|
|
76
|
+
|
|
19
77
|
// Define a custom fuzzy filter function that will apply ranking info to rows (using match-sorter utils)
|
|
20
78
|
const fuzzyFilter = (row, columnId, value, addMeta) => {
|
|
21
79
|
// Rank the item
|
|
@@ -29,8 +87,10 @@ const fuzzyFilter = (row, columnId, value, addMeta) => {
|
|
|
29
87
|
};
|
|
30
88
|
const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, children, }) => {
|
|
31
89
|
const [columnOrder, setColumnOrder] = useState([]);
|
|
32
|
-
const [globalFilter, setGlobalFilter] = useState(
|
|
90
|
+
const [globalFilter, setGlobalFilter] = useState("");
|
|
91
|
+
const [density, setDensity] = useState("1rem");
|
|
33
92
|
const table = useReactTable({
|
|
93
|
+
_features: [DensityFeature],
|
|
34
94
|
data: data,
|
|
35
95
|
columns: columns,
|
|
36
96
|
getCoreRowModel: getCoreRowModel(),
|
|
@@ -45,6 +105,7 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
|
|
|
45
105
|
state: {
|
|
46
106
|
columnOrder,
|
|
47
107
|
globalFilter,
|
|
108
|
+
density,
|
|
48
109
|
},
|
|
49
110
|
onColumnOrderChange: (state) => {
|
|
50
111
|
setColumnOrder(state);
|
|
@@ -53,11 +114,14 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
|
|
|
53
114
|
enableMultiRowSelection: enableMultiRowSelection,
|
|
54
115
|
enableSubRowSelection: enableSubRowSelection,
|
|
55
116
|
columnResizeMode: "onChange",
|
|
117
|
+
// global filter start
|
|
56
118
|
filterFns: {
|
|
57
|
-
fuzzy: fuzzyFilter,
|
|
119
|
+
fuzzy: fuzzyFilter,
|
|
58
120
|
},
|
|
59
121
|
onGlobalFilterChange: setGlobalFilter,
|
|
60
|
-
globalFilterFn:
|
|
122
|
+
globalFilterFn: "fuzzy",
|
|
123
|
+
// global filter end
|
|
124
|
+
onDensityChange: setDensity,
|
|
61
125
|
});
|
|
62
126
|
useEffect(() => {
|
|
63
127
|
setColumnOrder(table.getAllLeafColumns().map((column) => column.id));
|
|
@@ -111,6 +175,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
|
|
|
111
175
|
const [rowSelection, setRowSelection] = useState({});
|
|
112
176
|
const [columnOrder, setColumnOrder] = useState([]);
|
|
113
177
|
const [globalFilter, setGlobalFilter] = useState("");
|
|
178
|
+
const [density, setDensity] = useState("1rem");
|
|
114
179
|
const { data, loading, hasError, refreshData } = useDataFromUrl({
|
|
115
180
|
url: url,
|
|
116
181
|
defaultData: {
|
|
@@ -136,6 +201,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
|
|
|
136
201
|
},
|
|
137
202
|
});
|
|
138
203
|
const table = useReactTable({
|
|
204
|
+
_features: [DensityFeature],
|
|
139
205
|
data: data.results,
|
|
140
206
|
columns: columns,
|
|
141
207
|
getCoreRowModel: getCoreRowModel(),
|
|
@@ -153,6 +219,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
|
|
|
153
219
|
rowSelection,
|
|
154
220
|
columnOrder,
|
|
155
221
|
globalFilter,
|
|
222
|
+
density,
|
|
156
223
|
},
|
|
157
224
|
defaultColumn: {
|
|
158
225
|
size: 150, //starting column size
|
|
@@ -169,6 +236,14 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
|
|
|
169
236
|
setGlobalFilter(state);
|
|
170
237
|
},
|
|
171
238
|
rowCount: data.filterCount,
|
|
239
|
+
// for tanstack-table ts bug start
|
|
240
|
+
filterFns: {
|
|
241
|
+
fuzzy: () => {
|
|
242
|
+
return false;
|
|
243
|
+
},
|
|
244
|
+
},
|
|
245
|
+
// for tanstack-table ts bug end
|
|
246
|
+
onDensityChange: setDensity,
|
|
172
247
|
});
|
|
173
248
|
useEffect(() => {
|
|
174
249
|
refreshData();
|
|
@@ -184,6 +259,13 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
|
|
|
184
259
|
}, children: children }));
|
|
185
260
|
};
|
|
186
261
|
|
|
262
|
+
const DensityToggleButton = () => {
|
|
263
|
+
const { table } = useContext(TableContext);
|
|
264
|
+
return (jsx(Tooltip, { label: "Toggle Density", children: jsx(IconButton, { variant: "ghost", "aria-label": "Toggle Density", icon: jsx(AiOutlineColumnWidth, {}), onClick: (event) => {
|
|
265
|
+
table.toggleDensity();
|
|
266
|
+
} }) }));
|
|
267
|
+
};
|
|
268
|
+
|
|
187
269
|
const ResetFilteringButton = () => {
|
|
188
270
|
const { table } = useContext(TableContext);
|
|
189
271
|
return (jsx(Button, { onClick: () => {
|
|
@@ -199,7 +281,10 @@ const useDataTable = () => {
|
|
|
199
281
|
const TableFilter = () => {
|
|
200
282
|
const { table } = useDataTable();
|
|
201
283
|
return (jsx(Fragment, { children: table.getLeafHeaders().map((header) => {
|
|
202
|
-
|
|
284
|
+
const displayName = header.column.columnDef.meta === undefined
|
|
285
|
+
? header.column.id
|
|
286
|
+
: header.column.columnDef.meta.displayName;
|
|
287
|
+
return (jsx(Fragment, { children: header.column.getCanFilter() && (jsxs(Box, { children: [jsx(Text, { children: displayName }), jsx(Input, { value: header.column.getFilterValue()
|
|
203
288
|
? String(header.column.getFilterValue())
|
|
204
289
|
: "", onChange: (e) => {
|
|
205
290
|
header.column.setFilterValue(e.target.value);
|
|
@@ -233,17 +318,27 @@ const ColumnOrderChanger = ({ columns }) => {
|
|
|
233
318
|
}
|
|
234
319
|
setOriginalOrder(columns);
|
|
235
320
|
}, [columns]);
|
|
236
|
-
return (jsxs(Flex, { gap: "0.5rem", flexFlow: "column", children: [jsx(Flex, { gap: "0.5rem", flexFlow: "column", children: order.map((
|
|
321
|
+
return (jsxs(Flex, { gap: "0.5rem", flexFlow: "column", children: [jsx(Flex, { gap: "0.5rem", flexFlow: "column", children: order.map((columnId, index) => (jsxs(Flex, { gap: "0.5rem", alignItems: "center", justifyContent: "space-between", children: [jsx(IconButton, { onClick: () => {
|
|
237
322
|
const prevIndex = index - 1;
|
|
238
323
|
if (prevIndex >= 0) {
|
|
239
324
|
handleChangeOrder(index, prevIndex);
|
|
240
325
|
}
|
|
241
|
-
}, disabled: index === 0, "aria-label": "", children: jsx(MdArrowUpward, {}) }),
|
|
326
|
+
}, disabled: index === 0, "aria-label": "", children: jsx(MdArrowUpward, {}) }), table
|
|
327
|
+
.getAllFlatColumns()
|
|
328
|
+
.filter((column) => {
|
|
329
|
+
return column.id === columnId;
|
|
330
|
+
})
|
|
331
|
+
.map((column) => {
|
|
332
|
+
const displayName = column.columnDef.meta === undefined
|
|
333
|
+
? column.id
|
|
334
|
+
: column.columnDef.meta.displayName;
|
|
335
|
+
return jsx(Fragment, { children: displayName });
|
|
336
|
+
}), jsx(IconButton, { onClick: () => {
|
|
242
337
|
const nextIndex = index + 1;
|
|
243
338
|
if (nextIndex < order.length) {
|
|
244
339
|
handleChangeOrder(index, nextIndex);
|
|
245
340
|
}
|
|
246
|
-
}, disabled: index === order.length - 1, "aria-label": "", children: jsx(MdArrowDownward, {}) })] },
|
|
341
|
+
}, disabled: index === order.length - 1, "aria-label": "", children: jsx(MdArrowDownward, {}) })] }, columnId))) }), jsxs(Flex, { gap: "0.25rem", children: [jsx(Button, { onClick: () => {
|
|
247
342
|
table.setColumnOrder(order);
|
|
248
343
|
}, children: "Apply" }), jsx(Button, { onClick: () => {
|
|
249
344
|
table.setColumnOrder(originalOrder);
|
|
@@ -268,7 +363,10 @@ const ResetSortingButton = () => {
|
|
|
268
363
|
const TableSorter = () => {
|
|
269
364
|
const { table } = useDataTable();
|
|
270
365
|
return (jsx(Fragment, { children: table.getHeaderGroups().map((headerGroup) => (jsx(Fragment, { children: headerGroup.headers.map((header) => {
|
|
271
|
-
|
|
366
|
+
const displayName = header.column.columnDef.meta === undefined
|
|
367
|
+
? header.column.id
|
|
368
|
+
: header.column.columnDef.meta.displayName;
|
|
369
|
+
return (jsx(Fragment, { children: header.column.getCanSort() && (jsxs(Flex, { alignItems: "center", gap: "0.5rem", padding: "0.5rem", children: [jsx(Text, { children: displayName }), jsxs(Button, { variant: "ghost", onClick: (e) => {
|
|
272
370
|
header.column.toggleSorting();
|
|
273
371
|
}, children: [header.column.getIsSorted() === false && (
|
|
274
372
|
// <Text>To No sort</Text>
|
|
@@ -286,11 +384,19 @@ const EditSortingButton = () => {
|
|
|
286
384
|
return (jsxs(Popover, { placement: "auto", children: [jsx(Tooltip, { label: "Filter", children: jsx(PopoverTrigger, { children: jsx(IconButton, { "aria-label": "filter", variant: "ghost", icon: jsx(MdOutlineSort, {}) }) }) }), jsxs(PopoverContent, { width: "auto", children: [jsx(PopoverArrow, {}), jsx(PopoverBody, { children: jsxs(Flex, { flexFlow: "column", gap: "0.25rem", children: [jsx(TableSorter, {}), jsx(ResetSortingButton, {})] }) })] })] }));
|
|
287
385
|
};
|
|
288
386
|
|
|
387
|
+
const TableViewer = () => {
|
|
388
|
+
const { table } = useDataTable();
|
|
389
|
+
return (jsx(Flex, { flexFlow: "column", gap: "1rem", children: table.getAllLeafColumns().map((column) => {
|
|
390
|
+
console.log(column.columnDef.meta, "gokspo");
|
|
391
|
+
const displayName = column.columnDef.meta === undefined
|
|
392
|
+
? column.id
|
|
393
|
+
: column.columnDef.meta.displayName;
|
|
394
|
+
return (jsxs(Flex, { flexFlow: "row", gap: "0.5rem", alignItems: "center", children: [jsx(Switch, { isChecked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }), displayName] }));
|
|
395
|
+
}) }));
|
|
396
|
+
};
|
|
397
|
+
|
|
289
398
|
const EditViewButton = () => {
|
|
290
|
-
|
|
291
|
-
return (jsxs(Popover, { placement: "auto", children: [jsx(PopoverTrigger, { children: jsx(IconButton, { "aria-label": "view", variant: "ghost", icon: jsx(IoMdEye, {}) }) }), jsxs(PopoverContent, { width: "auto", children: [jsx(PopoverArrow, {}), jsx(PopoverBody, { children: jsx(Flex, { flexFlow: "column", gap: "1rem", children: table.getAllLeafColumns().map((column) => {
|
|
292
|
-
return (jsx(FormControl, { width: "auto", children: jsx(Checkbox, { isChecked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler(), children: column.id }) }, crypto.randomUUID()));
|
|
293
|
-
}) }) })] })] }));
|
|
399
|
+
return (jsxs(Popover, { placement: "auto", children: [jsx(PopoverTrigger, { children: jsx(IconButton, { "aria-label": "view", variant: "ghost", icon: jsx(IoMdEye, {}) }) }), jsxs(PopoverContent, { width: "auto", children: [jsx(PopoverArrow, {}), jsx(PopoverBody, { children: jsx(TableViewer, {}) })] })] }));
|
|
294
400
|
};
|
|
295
401
|
|
|
296
402
|
const GlobalFilter = () => {
|
|
@@ -314,37 +420,33 @@ const ResetSelectionButton = () => {
|
|
|
314
420
|
}, children: "Reset Selection" }));
|
|
315
421
|
};
|
|
316
422
|
|
|
317
|
-
const Table = ({ children }) => {
|
|
423
|
+
const Table = ({ children, ...props }) => {
|
|
318
424
|
const { table } = useDataTable();
|
|
319
|
-
return (jsx(
|
|
425
|
+
return (jsx(Table$1, { width: table.getCenterTotalSize(), overflowX: "scroll", ...props, children: children }));
|
|
320
426
|
};
|
|
321
427
|
|
|
322
|
-
const TableBody = () => {
|
|
428
|
+
const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
|
|
323
429
|
const { table } = useContext(TableContext);
|
|
324
430
|
return (jsx(Tbody, { children: table.getRowModel().rows.map((row) => {
|
|
325
|
-
return (jsxs(Tr, { display: "flex", _hover: { backgroundColor: "rgba(178,178,178,0.1)" }, zIndex: 1, children: [jsx(Td
|
|
326
|
-
// styling resize and pinning start
|
|
327
|
-
, {
|
|
328
|
-
// styling resize and pinning start
|
|
329
|
-
padding: "0.5rem", ...(table.getIsSomeColumnsPinned("left")
|
|
431
|
+
return (jsxs(Tr, { display: "flex", _hover: { backgroundColor: "rgba(178,178,178,0.1)" }, zIndex: 1, children: [jsx(Td, { padding: "0rem", ...(table.getIsSomeColumnsPinned("left")
|
|
330
432
|
? {
|
|
331
433
|
left: `0px`,
|
|
332
|
-
backgroundColor:
|
|
434
|
+
backgroundColor: pinnedBgColor.light,
|
|
333
435
|
position: "sticky",
|
|
334
436
|
zIndex: 1,
|
|
335
|
-
_dark: { backgroundColor:
|
|
437
|
+
_dark: { backgroundColor: pinnedBgColor.dark },
|
|
336
438
|
}
|
|
337
|
-
: {}), children: jsx(Checkbox, { isChecked: row.getIsSelected(),
|
|
439
|
+
: {}), children: jsx(Checkbox, { padding: table.getState().density, isChecked: row.getIsSelected(),
|
|
338
440
|
disabled: !row.getCanSelect(),
|
|
339
441
|
// indeterminate: row.getIsSomeSelected(),
|
|
340
442
|
onChange: row.getToggleSelectedHandler() }) }), row.getVisibleCells().map((cell) => {
|
|
341
|
-
return (jsx(Td, { padding:
|
|
443
|
+
return (jsx(Td, { padding: table.getState().density,
|
|
342
444
|
// styling resize and pinning start
|
|
343
445
|
maxWidth: `${cell.column.getSize()}px`, width: `${cell.column.getSize()}px`, left: cell.column.getIsPinned()
|
|
344
446
|
? `${cell.column.getStart("left") + 32}px`
|
|
345
|
-
: undefined, backgroundColor: cell.column.getIsPinned() ?
|
|
447
|
+
: undefined, backgroundColor: cell.column.getIsPinned() ? pinnedBgColor.light : undefined, position: cell.column.getIsPinned() ? "sticky" : "relative", zIndex: cell.column.getIsPinned() ? 1 : 0, _dark: {
|
|
346
448
|
backgroundColor: cell.column.getIsPinned()
|
|
347
|
-
?
|
|
449
|
+
? pinnedBgColor.dark
|
|
348
450
|
: undefined,
|
|
349
451
|
}, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, crypto.randomUUID()));
|
|
350
452
|
})] }, crypto.randomUUID()));
|
|
@@ -367,54 +469,56 @@ const TableCards = ({}) => {
|
|
|
367
469
|
}) }));
|
|
368
470
|
};
|
|
369
471
|
|
|
370
|
-
const TableFooter = () => {
|
|
472
|
+
const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
|
|
371
473
|
const table = useDataTable().table;
|
|
372
474
|
const SELECTION_BOX_WIDTH = 32;
|
|
373
475
|
return (jsx(Tfoot, { children: table.getFooterGroups().map((footerGroup) => (jsxs(Tr$1, { display: "flex", children: [jsx(Th
|
|
374
476
|
// styling resize and pinning start
|
|
375
477
|
, {
|
|
376
478
|
// styling resize and pinning start
|
|
377
|
-
padding:
|
|
479
|
+
padding: table.getState().density, ...(table.getIsSomeColumnsPinned("left")
|
|
378
480
|
? {
|
|
379
481
|
left: `0px`,
|
|
380
|
-
backgroundColor:
|
|
482
|
+
backgroundColor: pinnedBgColor.light,
|
|
381
483
|
position: "sticky",
|
|
382
484
|
zIndex: 1,
|
|
383
|
-
_dark: { backgroundColor:
|
|
485
|
+
_dark: { backgroundColor: pinnedBgColor.dark },
|
|
384
486
|
}
|
|
385
487
|
: {}), children: jsx(Checkbox, { isChecked: table.getIsAllRowsSelected(),
|
|
386
488
|
// indeterminate: table.getIsSomeRowsSelected(),
|
|
387
|
-
onChange: table.getToggleAllRowsSelectedHandler() }) }), footerGroup.headers.map((header) => (jsx(Th, { padding: "
|
|
489
|
+
onChange: table.getToggleAllRowsSelectedHandler() }) }), footerGroup.headers.map((header) => (jsx(Th, { padding: "0", colSpan: header.colSpan,
|
|
388
490
|
// styling resize and pinning start
|
|
389
491
|
maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, left: header.column.getIsPinned()
|
|
390
492
|
? `${header.getStart("left") + SELECTION_BOX_WIDTH}px`
|
|
391
|
-
: undefined, backgroundColor: header.column.getIsPinned() ?
|
|
493
|
+
: undefined, backgroundColor: header.column.getIsPinned() ? pinnedBgColor.light : undefined, position: header.column.getIsPinned() ? "sticky" : "relative", zIndex: header.column.getIsPinned() ? 1 : undefined, _dark: {
|
|
392
494
|
backgroundColor: header.column.getIsPinned()
|
|
393
|
-
?
|
|
495
|
+
? pinnedBgColor.dark
|
|
394
496
|
: undefined,
|
|
395
497
|
},
|
|
396
498
|
// styling resize and pinning end
|
|
397
|
-
display: "flex", alignItems: "center", children: header.isPlaceholder
|
|
398
|
-
|
|
399
|
-
|
|
499
|
+
display: "grid", children: jsx(Menu, { children: jsx(MenuButton, { as: Box, padding: table.getState().density, display: "flex", alignItems: "center", justifyContent: "start", borderRadius: "0rem", _hover: { backgroundColor: "gray.100" }, children: jsxs(Flex, { gap: "0.5rem", alignItems: "center", children: [header.isPlaceholder
|
|
500
|
+
? null
|
|
501
|
+
: flexRender(header.column.columnDef.footer, header.getContext()), jsx(Box, { children: header.column.getCanSort() && (jsxs(Fragment, { children: [header.column.getIsSorted() === false && (
|
|
502
|
+
// <UpDownIcon />
|
|
503
|
+
jsx(Fragment, {})), header.column.getIsSorted() === "asc" && (jsx(ChevronUpIcon, {})), header.column.getIsSorted() === "desc" && (jsx(ChevronDownIcon, {}))] })) })] }) }) }) }, crypto.randomUUID())))] }, crypto.randomUUID()))) }));
|
|
400
504
|
};
|
|
401
505
|
|
|
402
|
-
const TableHeader = ({ canResize }) => {
|
|
506
|
+
const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
|
|
403
507
|
const { table } = useDataTable();
|
|
404
508
|
const SELECTION_BOX_WIDTH = 32;
|
|
405
509
|
return (jsx(Thead, { children: table.getHeaderGroups().map((headerGroup) => (jsxs(Tr$1, { display: "flex", children: [jsx(Th
|
|
406
510
|
// styling resize and pinning start
|
|
407
|
-
, {
|
|
408
|
-
// styling resize and pinning start
|
|
409
|
-
padding: "0.5rem", ...(table.getIsSomeColumnsPinned("left")
|
|
511
|
+
, { ...(table.getIsSomeColumnsPinned("left")
|
|
410
512
|
? {
|
|
411
513
|
left: `0px`,
|
|
412
|
-
backgroundColor:
|
|
514
|
+
backgroundColor: pinnedBgColor.light,
|
|
413
515
|
position: "sticky",
|
|
414
516
|
zIndex: 1,
|
|
415
|
-
_dark: { backgroundColor:
|
|
517
|
+
_dark: { backgroundColor: pinnedBgColor.dark },
|
|
416
518
|
}
|
|
417
|
-
: {}),
|
|
519
|
+
: {}),
|
|
520
|
+
// styling resize and pinning end
|
|
521
|
+
padding: "0rem", children: jsx(Checkbox, { padding: table.getState().density, isChecked: table.getIsAllRowsSelected(),
|
|
418
522
|
// indeterminate: table.getIsSomeRowsSelected(),
|
|
419
523
|
onChange: table.getToggleAllRowsSelectedHandler() }) }), headerGroup.headers.map((header) => {
|
|
420
524
|
const resizeProps = {
|
|
@@ -427,23 +531,25 @@ const TableHeader = ({ canResize }) => {
|
|
|
427
531
|
// styling resize and pinning start
|
|
428
532
|
maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, left: header.column.getIsPinned()
|
|
429
533
|
? `${header.getStart("left") + SELECTION_BOX_WIDTH}px`
|
|
430
|
-
: undefined, backgroundColor: header.column.getIsPinned() ?
|
|
534
|
+
: undefined, backgroundColor: header.column.getIsPinned() ? pinnedBgColor.light : undefined, position: header.column.getIsPinned() ? "sticky" : "relative", zIndex: header.column.getIsPinned() ? 1 : undefined, _dark: {
|
|
431
535
|
backgroundColor: header.column.getIsPinned()
|
|
432
|
-
?
|
|
536
|
+
? pinnedBgColor.dark
|
|
433
537
|
: undefined,
|
|
434
538
|
},
|
|
435
539
|
// styling resize and pinning end
|
|
436
|
-
display: "grid", children: [
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
540
|
+
display: "grid", children: [jsxs(Menu, { children: [jsx(MenuButton, { as: Box, padding: table.getState().density, display: "flex", alignItems: "center", justifyContent: "start", borderRadius: "0rem", _hover: { backgroundColor: "gray.100" }, children: jsxs(Flex, { gap: "0.5rem", alignItems: "center", children: [header.isPlaceholder
|
|
541
|
+
? null
|
|
542
|
+
: flexRender(header.column.columnDef.header, header.getContext()), jsx(Box, { children: header.column.getCanSort() && (jsxs(Fragment, { children: [header.column.getIsSorted() === false && (
|
|
543
|
+
// <UpDownIcon />
|
|
544
|
+
jsx(Fragment, {})), header.column.getIsSorted() === "asc" && (jsx(ChevronUpIcon, {})), header.column.getIsSorted() === "desc" && (jsx(ChevronDownIcon, {}))] })) })] }) }), jsx(Portal, { children: jsxs(MenuList, { children: [!header.column.getIsPinned() && (jsx(MenuItem, { icon: jsx(MdPushPin, {}), onClick: () => {
|
|
545
|
+
header.column.pin("left");
|
|
546
|
+
}, children: "Pin Column" })), header.column.getIsPinned() && (jsx(MenuItem, { icon: jsx(MdCancel, {}), onClick: () => {
|
|
547
|
+
header.column.pin(false);
|
|
548
|
+
}, children: "Cancel Pin" })), header.column.getCanSort() && (jsxs(Fragment, { children: [jsx(MenuItem, { icon: jsx(MdSort, {}), onClick: () => {
|
|
549
|
+
header.column.toggleSorting();
|
|
550
|
+
}, children: "Toggle Sorting" }), header.column.getIsSorted() && (jsx(MenuItem, { icon: jsx(IoMdClose, {}), onClick: () => {
|
|
551
|
+
header.column.clearSorting();
|
|
552
|
+
}, children: "Clear Sorting" }))] }))] }) })] }), header.column.getIsFiltered() && jsx(MdFilterListAlt, {}), canResize && (jsx(Box, { borderRight: "0.2rem solid", borderRightColor: header.column.getIsResizing() ? "gray.700" : "transparent", position: "absolute", right: "0", top: "0", height: "100%", width: "5px", userSelect: "none", style: { touchAction: "none" }, _hover: {
|
|
447
553
|
borderRightColor: header.column.getIsResizing()
|
|
448
554
|
? "gray.700"
|
|
449
555
|
: "gray.400",
|
|
@@ -470,11 +576,11 @@ const TableSelector = () => {
|
|
|
470
576
|
}, "aria-label": "reset selection" }))] }));
|
|
471
577
|
};
|
|
472
578
|
|
|
473
|
-
const TextCell = ({ label, children }) => {
|
|
579
|
+
const TextCell = ({ label, noOfLines = [1], padding = "0rem", children, }) => {
|
|
474
580
|
if (label) {
|
|
475
|
-
return (jsx(Tooltip, { label: jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [5], children: label }), placement: "auto", children: jsx(Text, { as: "span", textOverflow: "ellipsis", noOfLines:
|
|
581
|
+
return (jsx(Box, { padding: padding, children: jsx(Tooltip, { label: jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [5], children: label }), placement: "auto", children: jsx(Text, { as: "span", textOverflow: "ellipsis", noOfLines: noOfLines, children: children }) }) }));
|
|
476
582
|
}
|
|
477
|
-
return (jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis",
|
|
583
|
+
return (jsx(Box, { padding: padding, children: jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "break-all", noOfLines: noOfLines, children: children }) }));
|
|
478
584
|
};
|
|
479
585
|
|
|
480
|
-
export { DataTable, DataTableServer, EditFilterButton, EditOrderButton, EditSortingButton, EditViewButton, GlobalFilter, PageSizeControl, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, Table, TableBody, TableCardContainer, TableCards, TableFilter, TableFooter, TableHeader, TableOrderer, TablePagination, TableSelector, TableSorter, TextCell, useDataFromUrl, useDataTable };
|
|
586
|
+
export { DataTable, DataTableServer, DensityToggleButton, EditFilterButton, EditOrderButton, EditSortingButton, EditViewButton, GlobalFilter, PageSizeControl, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, Table, TableBody, TableCardContainer, TableCards, TableFilter, TableFooter, TableHeader, TableOrderer, TablePagination, TableSelector, TableSorter, TableViewer, TextCell, useDataFromUrl, useDataTable };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { ColumnDef, FilterFn } from "@tanstack/react-table";
|
|
3
|
-
import { RankingInfo } from
|
|
4
|
-
declare module
|
|
3
|
+
import { RankingInfo } from "@tanstack/match-sorter-utils";
|
|
4
|
+
declare module "@tanstack/react-table" {
|
|
5
5
|
interface FilterFns {
|
|
6
6
|
fuzzy: FilterFn<unknown>;
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { ColumnDef } from "@tanstack/react-table";
|
|
2
|
+
import { ColumnDef, RowData } from "@tanstack/react-table";
|
|
3
3
|
export interface DataTableServerProps<T> {
|
|
4
4
|
children: JSX.Element | JSX.Element[];
|
|
5
5
|
url: string;
|
|
@@ -16,4 +16,9 @@ export interface DataResponse<T> extends Result<T> {
|
|
|
16
16
|
count: number;
|
|
17
17
|
filterCount: number;
|
|
18
18
|
}
|
|
19
|
+
declare module "@tanstack/react-table" {
|
|
20
|
+
interface ColumnMeta<TData extends RowData, TValue> {
|
|
21
|
+
displayName: string;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
19
24
|
export declare const DataTableServer: <TData>({ columns, url, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, children, }: DataTableServerProps<TData>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { OnChangeFn, Updater, RowData, TableFeature } from "@tanstack/react-table";
|
|
2
|
+
export type DensityState = "0.5rem" | "1rem" | "2rem";
|
|
3
|
+
export interface DensityTableState {
|
|
4
|
+
density: DensityState;
|
|
5
|
+
}
|
|
6
|
+
export interface DensityOptions {
|
|
7
|
+
enableDensity?: boolean;
|
|
8
|
+
onDensityChange?: OnChangeFn<DensityState>;
|
|
9
|
+
}
|
|
10
|
+
export interface DensityInstance {
|
|
11
|
+
setDensity: (updater: Updater<DensityState>) => void;
|
|
12
|
+
toggleDensity: (value?: DensityState) => void;
|
|
13
|
+
}
|
|
14
|
+
declare module "@tanstack/react-table" {
|
|
15
|
+
interface TableState extends DensityTableState {
|
|
16
|
+
}
|
|
17
|
+
interface TableOptionsResolved<TData extends RowData> extends DensityOptions {
|
|
18
|
+
}
|
|
19
|
+
interface Table<TData extends RowData> extends DensityInstance {
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
export declare const DensityFeature: TableFeature<any>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const SelectAllRowsToggle: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const DensityToggleButton: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -2,4 +2,4 @@ import { ReactNode } from "react";
|
|
|
2
2
|
export interface TableProps {
|
|
3
3
|
children: ReactNode;
|
|
4
4
|
}
|
|
5
|
-
export declare const Table: ({ children }: TableProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
export declare const Table: ({ children, ...props }: TableProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1,7 @@
|
|
|
1
|
-
export
|
|
1
|
+
export interface TableBodyProps {
|
|
2
|
+
pinnedBgColor?: {
|
|
3
|
+
light: string;
|
|
4
|
+
dark: string;
|
|
5
|
+
};
|
|
6
|
+
}
|
|
7
|
+
export declare const TableBody: ({ pinnedBgColor, }: TableBodyProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1,7 @@
|
|
|
1
|
-
export
|
|
1
|
+
export interface TableFooterProps {
|
|
2
|
+
pinnedBgColor?: {
|
|
3
|
+
light: string;
|
|
4
|
+
dark: string;
|
|
5
|
+
};
|
|
6
|
+
}
|
|
7
|
+
export declare const TableFooter: ({ pinnedBgColor, }: TableFooterProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
export interface TableHeaderProps {
|
|
2
2
|
canResize?: boolean;
|
|
3
|
+
pinnedBgColor?: {
|
|
4
|
+
light: string;
|
|
5
|
+
dark: string;
|
|
6
|
+
};
|
|
3
7
|
}
|
|
4
|
-
export declare const TableHeader: ({ canResize }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export declare const TableHeader: ({ canResize, pinnedBgColor, }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const TableViewer: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export interface TextCellProps {
|
|
3
3
|
label?: string;
|
|
4
|
+
noOfLines?: number[];
|
|
5
|
+
padding?: string;
|
|
4
6
|
children: string | number | JSX.Element | JSX.Element[];
|
|
5
7
|
}
|
|
6
|
-
export declare const TextCell: ({ label, children }: TextCellProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export declare const TextCell: ({ label, noOfLines, padding, children, }: TextCellProps) => import("react/jsx-runtime").JSX.Element;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export * from "./components/DataTable";
|
|
2
2
|
export * from "./components/DataTableServer";
|
|
3
|
+
export * from "./components/DensityToggleButton";
|
|
3
4
|
export * from "./components/EditFilterButton";
|
|
4
5
|
export * from "./components/EditOrderButton";
|
|
5
6
|
export * from "./components/EditSortingButton";
|
|
@@ -20,6 +21,7 @@ export * from "./components/TableOrderer";
|
|
|
20
21
|
export * from "./components/TablePagination";
|
|
21
22
|
export * from "./components/TableSelector";
|
|
22
23
|
export * from "./components/TableSorter";
|
|
24
|
+
export * from "./components/TableViewer";
|
|
23
25
|
export * from "./components/TextCell";
|
|
24
26
|
export * from "./components/useDataFromUrl";
|
|
25
27
|
export * from "./components/useDataTable";
|