@bsol-oss/react-datatable5 1.0.62 → 1.0.64
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 +123 -91
- package/dist/index.js +218 -205
- package/dist/index.mjs +136 -123
- package/dist/types/components/DataTable/DataTableContext.d.ts +1 -0
- package/dist/types/components/DataTable/DataTableServer.d.ts +1 -6
- package/dist/types/components/DataTable/TableFilter.d.ts +0 -18
- package/dist/types/components/DataTable/useDataTable.d.ts +1 -0
- package/dist/types/index.d.ts +58 -5
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,29 +1,125 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var react = require('@chakra-ui/react');
|
|
5
|
+
var ai = require('react-icons/ai');
|
|
6
|
+
var md = require('react-icons/md');
|
|
7
|
+
var icons = require('@chakra-ui/icons');
|
|
8
|
+
var react$1 = require('react');
|
|
9
|
+
var io = require('react-icons/io');
|
|
4
10
|
var reactTable = require('@tanstack/react-table');
|
|
5
|
-
var react = require('react');
|
|
6
11
|
var matchSorterUtils = require('@tanstack/match-sorter-utils');
|
|
7
12
|
var axios = require('axios');
|
|
8
|
-
var react$1 = require('@chakra-ui/react');
|
|
9
13
|
var table = require('@chakra-ui/table');
|
|
10
|
-
var
|
|
11
|
-
var icons = require('@chakra-ui/icons');
|
|
14
|
+
var bs = require('react-icons/bs');
|
|
12
15
|
var gr = require('react-icons/gr');
|
|
13
|
-
var ai = require('react-icons/ai');
|
|
14
|
-
var io = require('react-icons/io');
|
|
15
16
|
var io5 = require('react-icons/io5');
|
|
16
17
|
var reactBeautifulDnd = require('react-beautiful-dnd');
|
|
17
18
|
var fa = require('react-icons/fa');
|
|
18
19
|
|
|
19
|
-
const
|
|
20
|
+
const DensityToggleButton = ({ text, icon = jsxRuntime.jsx(ai.AiOutlineColumnWidth, {}), }) => {
|
|
21
|
+
const { table } = useDataTable();
|
|
22
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!text === false && (jsxRuntime.jsx(react.IconButton, { variant: "ghost", "aria-label": "Toggle Density", icon: icon, onClick: () => {
|
|
23
|
+
table.toggleDensity();
|
|
24
|
+
} })), !!text !== false && (jsxRuntime.jsx(react.Button, { leftIcon: icon, variant: "ghost", "aria-label": "Toggle Density", onClick: () => {
|
|
25
|
+
table.toggleDensity();
|
|
26
|
+
}, children: text }))] }));
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
const EditFilterButton = ({ text, title = "Edit Filter", closeText = "Close", resetText = "Reset", icon = jsxRuntime.jsx(md.MdFilterAlt, {}), ...props }) => {
|
|
30
|
+
const filterModal = react.useDisclosure();
|
|
31
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!text === false && (jsxRuntime.jsx(react.IconButton, { icon: icon, variant: "ghost", onClick: filterModal.onOpen, "aria-label": "filter", ...props })), !!text !== false && (jsxRuntime.jsx(react.Button, { leftIcon: icon, variant: "ghost", onClick: filterModal.onOpen, ...props, children: text })), jsxRuntime.jsxs(react.Modal, { isOpen: filterModal.isOpen, onClose: filterModal.onClose, size: ["full", "full", "md", "md"], children: [jsxRuntime.jsx(react.ModalOverlay, {}), jsxRuntime.jsxs(react.ModalContent, { children: [jsxRuntime.jsx(react.ModalHeader, { children: title }), jsxRuntime.jsx(react.ModalCloseButton, {}), jsxRuntime.jsx(react.ModalBody, { children: jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "1rem", children: [jsxRuntime.jsx(TableFilter, {}), jsxRuntime.jsx(ResetFilteringButton, { text: resetText })] }) }), jsxRuntime.jsx(react.ModalFooter, { children: jsxRuntime.jsx(react.Button, { onClick: filterModal.onClose, children: closeText }) })] })] })] }));
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
const EditOrderButton = ({ text, icon = jsxRuntime.jsx(md.MdOutlineMoveDown, {}), title = "Change Order", }) => {
|
|
35
|
+
const orderModal = react.useDisclosure();
|
|
36
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!text === false && (jsxRuntime.jsx(react.IconButton, { icon: icon, variant: "ghost", onClick: orderModal.onOpen, "aria-label": "change order" })), !!text !== false && (jsxRuntime.jsx(react.Button, { leftIcon: icon, variant: "ghost", onClick: orderModal.onOpen, children: text })), jsxRuntime.jsxs(react.Modal, { isOpen: orderModal.isOpen, onClose: orderModal.onClose, size: ["full", "full", "md", "md"], children: [jsxRuntime.jsx(react.ModalOverlay, {}), jsxRuntime.jsxs(react.ModalContent, { padding: "0 0 1rem 0", children: [jsxRuntime.jsx(react.ModalHeader, { children: title }), jsxRuntime.jsx(react.ModalCloseButton, {}), jsxRuntime.jsx(react.ModalBody, { children: jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: "0.25rem", children: jsxRuntime.jsx(TableOrderer, {}) }) })] })] })] }));
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
const TableContext = react$1.createContext({
|
|
20
40
|
table: {},
|
|
21
41
|
refreshData: () => { },
|
|
22
42
|
globalFilter: "",
|
|
23
43
|
setGlobalFilter: () => { },
|
|
24
44
|
loading: false,
|
|
45
|
+
hasError: false,
|
|
25
46
|
});
|
|
26
47
|
|
|
48
|
+
const useDataTable = () => {
|
|
49
|
+
const { table, refreshData, globalFilter, setGlobalFilter, loading, hasError, } = react$1.useContext(TableContext);
|
|
50
|
+
return {
|
|
51
|
+
table,
|
|
52
|
+
refreshData,
|
|
53
|
+
globalFilter,
|
|
54
|
+
setGlobalFilter,
|
|
55
|
+
loading,
|
|
56
|
+
hasError,
|
|
57
|
+
};
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
const TableSorter = () => {
|
|
61
|
+
const { table } = useDataTable();
|
|
62
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: table.getHeaderGroups().map((headerGroup) => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: headerGroup.headers.map((header) => {
|
|
63
|
+
const displayName = header.column.columnDef.meta === undefined
|
|
64
|
+
? header.column.id
|
|
65
|
+
: header.column.columnDef.meta.displayName;
|
|
66
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: header.column.getCanSort() && (jsxRuntime.jsxs(react.Flex, { alignItems: "center", gap: "0.5rem", padding: "0.5rem", children: [jsxRuntime.jsx(react.Text, { children: displayName }), jsxRuntime.jsxs(react.Button, { variant: "ghost", onClick: (e) => {
|
|
67
|
+
header.column.toggleSorting();
|
|
68
|
+
}, children: [header.column.getIsSorted() === false && (
|
|
69
|
+
// <Text>To No sort</Text>
|
|
70
|
+
jsxRuntime.jsx(icons.UpDownIcon, {})), header.column.getIsSorted() === "asc" && (
|
|
71
|
+
// <Text>To asc</Text>
|
|
72
|
+
jsxRuntime.jsx(icons.ChevronDownIcon, {})), header.column.getIsSorted() === "desc" && (
|
|
73
|
+
// <Text>To desc</Text>
|
|
74
|
+
jsxRuntime.jsx(icons.ChevronUpIcon, {}))] }), header.column.getIsSorted() && (jsxRuntime.jsx(react.Button, { onClick: (e) => {
|
|
75
|
+
header.column.clearSorting();
|
|
76
|
+
}, children: jsxRuntime.jsx(icons.CloseIcon, {}) }))] })) }));
|
|
77
|
+
}) }))) }));
|
|
78
|
+
};
|
|
79
|
+
|
|
80
|
+
const EditSortingButton = ({ text, icon = jsxRuntime.jsx(md.MdOutlineSort, {}), title = "Edit Sorting", }) => {
|
|
81
|
+
const sortingModal = react.useDisclosure();
|
|
82
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!text === false && (jsxRuntime.jsx(react.IconButton, { icon: icon, variant: "ghost", onClick: sortingModal.onOpen, "aria-label": "change sorting" })), !!text !== false && (jsxRuntime.jsx(react.Button, { leftIcon: icon, variant: "ghost", onClick: sortingModal.onOpen, children: text })), jsxRuntime.jsxs(react.Modal, { isOpen: sortingModal.isOpen, onClose: sortingModal.onClose, size: ["full", "full", "md", "md"], children: [jsxRuntime.jsx(react.ModalOverlay, {}), jsxRuntime.jsxs(react.ModalContent, { padding: "0 0 1rem 0", children: [jsxRuntime.jsx(react.ModalHeader, { children: title }), jsxRuntime.jsx(react.ModalCloseButton, {}), jsxRuntime.jsx(react.ModalBody, { children: jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(TableSorter, {}), jsxRuntime.jsx(ResetSortingButton, {})] }) })] })] })] }));
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
const EditViewButton = ({ text, icon = jsxRuntime.jsx(io.IoMdEye, {}), title = "Edit View", }) => {
|
|
86
|
+
const viewModel = react.useDisclosure();
|
|
87
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!text === false && (jsxRuntime.jsx(react.IconButton, { icon: icon, variant: "ghost", onClick: viewModel.onOpen, "aria-label": "change sorting" })), !!text !== false && (jsxRuntime.jsx(react.Button, { leftIcon: icon, variant: "ghost", onClick: viewModel.onOpen, children: text })), jsxRuntime.jsxs(react.Modal, { isOpen: viewModel.isOpen, onClose: viewModel.onClose, size: ["full", "full", "md", "md"], children: [jsxRuntime.jsx(react.ModalOverlay, {}), jsxRuntime.jsxs(react.ModalContent, { padding: "0 0 1rem 0", children: [jsxRuntime.jsx(react.ModalHeader, { children: title }), jsxRuntime.jsx(react.ModalCloseButton, {}), jsxRuntime.jsx(react.ModalBody, { children: jsxRuntime.jsx(TableViewer, {}) })] })] })] }));
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
const PageSizeControl = ({ pageSizes = [10, 20, 30, 40, 50], }) => {
|
|
91
|
+
const { table } = useDataTable();
|
|
92
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(react.Menu, { children: [jsxRuntime.jsx(react.MenuButton, { as: react.Button, variant: "ghost", rightIcon: jsxRuntime.jsx(icons.ChevronDownIcon, {}), gap: "0.5rem", children: table.getState().pagination.pageSize }), jsxRuntime.jsx(react.MenuList, { children: pageSizes.map((pageSize) => (jsxRuntime.jsx(react.MenuItem, { onClick: () => {
|
|
93
|
+
table.setPageSize(Number(pageSize));
|
|
94
|
+
}, children: pageSize }, crypto.randomUUID()))) })] }) }));
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
const ResetFilteringButton = ({ text = "Reset Filtering", }) => {
|
|
98
|
+
const { table } = useDataTable();
|
|
99
|
+
return (jsxRuntime.jsx(react.Button, { onClick: () => {
|
|
100
|
+
table.resetColumnFilters();
|
|
101
|
+
}, children: text }));
|
|
102
|
+
};
|
|
103
|
+
|
|
104
|
+
const ResetSelectionButton = ({ text = "Reset Selection", }) => {
|
|
105
|
+
const { table } = useDataTable();
|
|
106
|
+
return (jsxRuntime.jsx(react.Button, { onClick: () => {
|
|
107
|
+
table.resetRowSelection();
|
|
108
|
+
}, children: text }));
|
|
109
|
+
};
|
|
110
|
+
|
|
111
|
+
const ResetSortingButton = ({ text = "Reset Sorting", }) => {
|
|
112
|
+
const { table } = useDataTable();
|
|
113
|
+
return (jsxRuntime.jsx(react.Button, { onClick: () => {
|
|
114
|
+
table.resetSorting();
|
|
115
|
+
}, children: text }));
|
|
116
|
+
};
|
|
117
|
+
|
|
118
|
+
const RowCountText = () => {
|
|
119
|
+
const { table } = useDataTable();
|
|
120
|
+
return jsxRuntime.jsx(react.Text, { children: table.getRowCount() });
|
|
121
|
+
};
|
|
122
|
+
|
|
27
123
|
// Reference: https://tanstack.com/table/latest/docs/framework/react/examples/custom-features
|
|
28
124
|
// TypeScript setup for our new feature with all of the same type-safety as stock TanStack Table features
|
|
29
125
|
// end of TS setup!
|
|
@@ -112,11 +208,11 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
|
|
|
112
208
|
pageIndex: 0, //initial page index
|
|
113
209
|
pageSize: 10, //default page size
|
|
114
210
|
}, sorting: defaultSorting = [], rowSelection: defaultRowSelection = {}, columnVisibility: defaultColumnVisibility = {}, children, }) => {
|
|
115
|
-
const [columnOrder, setColumnOrder] = react.useState(defaultColumnOrder);
|
|
116
|
-
const [globalFilter, setGlobalFilter] = react.useState(defaultGlobalFilter);
|
|
117
|
-
const [densityState, setDensity] = react.useState(density);
|
|
118
|
-
const [rowSelection, setRowSelection] = react.useState(defaultRowSelection);
|
|
119
|
-
const [columnVisibility, setColumnVisibility] = react.useState(defaultColumnVisibility);
|
|
211
|
+
const [columnOrder, setColumnOrder] = react$1.useState(defaultColumnOrder);
|
|
212
|
+
const [globalFilter, setGlobalFilter] = react$1.useState(defaultGlobalFilter);
|
|
213
|
+
const [densityState, setDensity] = react$1.useState(density);
|
|
214
|
+
const [rowSelection, setRowSelection] = react$1.useState(defaultRowSelection);
|
|
215
|
+
const [columnVisibility, setColumnVisibility] = react$1.useState(defaultColumnVisibility);
|
|
120
216
|
const table = reactTable.useReactTable({
|
|
121
217
|
_features: [DensityFeature],
|
|
122
218
|
data: data,
|
|
@@ -160,10 +256,10 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
|
|
|
160
256
|
pagination: defaultPagination,
|
|
161
257
|
},
|
|
162
258
|
});
|
|
163
|
-
react.useEffect(() => {
|
|
259
|
+
react$1.useEffect(() => {
|
|
164
260
|
setColumnOrder(table.getAllLeafColumns().map((column) => column.id));
|
|
165
261
|
}, []);
|
|
166
|
-
react.useEffect(() => {
|
|
262
|
+
react$1.useEffect(() => {
|
|
167
263
|
onRowSelect(table.getState().rowSelection, data);
|
|
168
264
|
}, [table.getState().rowSelection]);
|
|
169
265
|
return (jsxRuntime.jsx(TableContext.Provider, { value: {
|
|
@@ -174,18 +270,20 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
|
|
|
174
270
|
globalFilter: globalFilter,
|
|
175
271
|
setGlobalFilter: setGlobalFilter,
|
|
176
272
|
loading: false,
|
|
273
|
+
hasError: false,
|
|
177
274
|
}, children: children }));
|
|
178
275
|
};
|
|
179
276
|
|
|
180
277
|
const useDataFromUrl = ({ url, params = {}, disableFirstFetch = false, onFetchSuccess = () => { }, defaultData, }) => {
|
|
181
|
-
const [loading, setLoading] = react.useState(true);
|
|
182
|
-
const [hasError, setHasError] = react.useState(false);
|
|
183
|
-
const [data, setData] = react.useState(defaultData);
|
|
278
|
+
const [loading, setLoading] = react$1.useState(true);
|
|
279
|
+
const [hasError, setHasError] = react$1.useState(false);
|
|
280
|
+
const [data, setData] = react$1.useState(defaultData);
|
|
184
281
|
const refreshData = async () => {
|
|
185
282
|
await getData();
|
|
186
283
|
};
|
|
187
284
|
const getData = async () => {
|
|
188
285
|
try {
|
|
286
|
+
setHasError(false);
|
|
189
287
|
setLoading(true);
|
|
190
288
|
const { data } = await axios.get(url, { params: params });
|
|
191
289
|
console.debug("get DataFromUrl success", data);
|
|
@@ -199,7 +297,7 @@ const useDataFromUrl = ({ url, params = {}, disableFirstFetch = false, onFetchSu
|
|
|
199
297
|
setHasError(true);
|
|
200
298
|
}
|
|
201
299
|
};
|
|
202
|
-
react.useEffect(() => {
|
|
300
|
+
react$1.useEffect(() => {
|
|
203
301
|
if (disableFirstFetch) {
|
|
204
302
|
return;
|
|
205
303
|
}
|
|
@@ -214,14 +312,14 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
|
|
|
214
312
|
pageIndex: 0, //initial page index
|
|
215
313
|
pageSize: 10, //default page size
|
|
216
314
|
}, sorting: defaultSorting = [], rowSelection: defaultRowSelection = {}, columnVisibility: defaultColumnVisibility = {}, children, }) => {
|
|
217
|
-
const [sorting, setSorting] = react.useState(defaultSorting);
|
|
218
|
-
const [columnFilters, setColumnFilters] = react.useState(defaultColumnFilter); // can set initial column filter state here
|
|
219
|
-
const [pagination, setPagination] = react.useState(defaultPagination);
|
|
220
|
-
const [rowSelection, setRowSelection] = react.useState(defaultRowSelection);
|
|
221
|
-
const [columnOrder, setColumnOrder] = react.useState(defaultColumnOrder);
|
|
222
|
-
const [globalFilter, setGlobalFilter] = react.useState(defaultGlobalFilter);
|
|
223
|
-
const [densityState, setDensity] = react.useState(density);
|
|
224
|
-
const [columnVisibility, setColumnVisibility] = react.useState(defaultColumnVisibility);
|
|
315
|
+
const [sorting, setSorting] = react$1.useState(defaultSorting);
|
|
316
|
+
const [columnFilters, setColumnFilters] = react$1.useState(defaultColumnFilter); // can set initial column filter state here
|
|
317
|
+
const [pagination, setPagination] = react$1.useState(defaultPagination);
|
|
318
|
+
const [rowSelection, setRowSelection] = react$1.useState(defaultRowSelection);
|
|
319
|
+
const [columnOrder, setColumnOrder] = react$1.useState(defaultColumnOrder);
|
|
320
|
+
const [globalFilter, setGlobalFilter] = react$1.useState(defaultGlobalFilter);
|
|
321
|
+
const [densityState, setDensity] = react$1.useState(density);
|
|
322
|
+
const [columnVisibility, setColumnVisibility] = react$1.useState(defaultColumnVisibility);
|
|
225
323
|
const { data, loading, hasError, refreshData } = useDataFromUrl({
|
|
226
324
|
url: url,
|
|
227
325
|
defaultData: {
|
|
@@ -294,13 +392,13 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
|
|
|
294
392
|
onDensityChange: setDensity,
|
|
295
393
|
onColumnVisibilityChange: setColumnVisibility,
|
|
296
394
|
});
|
|
297
|
-
react.useEffect(() => {
|
|
395
|
+
react$1.useEffect(() => {
|
|
298
396
|
refreshData();
|
|
299
|
-
}, [pagination, sorting, columnFilters, globalFilter]);
|
|
300
|
-
react.useEffect(() => {
|
|
397
|
+
}, [pagination, sorting, columnFilters, globalFilter, url]);
|
|
398
|
+
react$1.useEffect(() => {
|
|
301
399
|
setColumnOrder(table.getAllLeafColumns().map((column) => column.id));
|
|
302
400
|
}, []);
|
|
303
|
-
react.useEffect(() => {
|
|
401
|
+
react$1.useEffect(() => {
|
|
304
402
|
onRowSelect(table.getState().rowSelection, data.results);
|
|
305
403
|
}, [table.getState().rowSelection]);
|
|
306
404
|
return (jsxRuntime.jsx(TableContext.Provider, { value: {
|
|
@@ -309,13 +407,14 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
|
|
|
309
407
|
globalFilter,
|
|
310
408
|
setGlobalFilter,
|
|
311
409
|
loading: loading,
|
|
410
|
+
hasError: hasError,
|
|
312
411
|
}, children: children }));
|
|
313
412
|
};
|
|
314
413
|
|
|
315
414
|
const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
|
|
316
|
-
const { table: table$1 } = react.useContext(TableContext);
|
|
415
|
+
const { table: table$1 } = react$1.useContext(TableContext);
|
|
317
416
|
const SELECTION_BOX_WIDTH = 20;
|
|
318
|
-
const [hoveredRow, setHoveredRow] = react.useState(-1);
|
|
417
|
+
const [hoveredRow, setHoveredRow] = react$1.useState(-1);
|
|
319
418
|
const handleRowHover = (index) => {
|
|
320
419
|
setHoveredRow(index);
|
|
321
420
|
};
|
|
@@ -334,7 +433,7 @@ const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, })
|
|
|
334
433
|
}) }));
|
|
335
434
|
};
|
|
336
435
|
const TableRowSelector = ({ index, row, hoveredRow, pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
|
|
337
|
-
const { table: table$1 } = react.useContext(TableContext);
|
|
436
|
+
const { table: table$1 } = react$1.useContext(TableContext);
|
|
338
437
|
const SELECTION_BOX_WIDTH = 20;
|
|
339
438
|
const isCheckBoxVisible = (current_index, current_row) => {
|
|
340
439
|
if (current_row.getIsSelected()) {
|
|
@@ -355,27 +454,23 @@ const TableRowSelector = ({ index, row, hoveredRow, pinnedBgColor = { light: "gr
|
|
|
355
454
|
}
|
|
356
455
|
: {}),
|
|
357
456
|
// styling resize and pinning end
|
|
358
|
-
display: "grid", children: [!isCheckBoxVisible(index, row) && (jsxRuntime.jsx(react
|
|
457
|
+
display: "grid", children: [!isCheckBoxVisible(index, row) && (jsxRuntime.jsx(react.Box, { as: "span", margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px` })), isCheckBoxVisible(index, row) && (jsxRuntime.jsx(react.FormLabel, { margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", children: jsxRuntime.jsx(react.Checkbox, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, isChecked: row.getIsSelected(),
|
|
359
458
|
disabled: !row.getCanSelect(),
|
|
360
459
|
// indeterminate: row.getIsSomeSelected(),
|
|
361
460
|
onChange: row.getToggleSelectedHandler() }) }))] }));
|
|
362
461
|
};
|
|
363
462
|
|
|
364
463
|
const TableControls = ({ totalText = "Total:", showFilter = false, fitTableWidth = false, fitTableHeight = false, isMobile = false, children = jsxRuntime.jsx(jsxRuntime.Fragment, {}), showFilterName = false, showFilterTags = false, filterOptions = [], }) => {
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
};
|
|
369
|
-
|
|
370
|
-
const useDataTable = () => {
|
|
371
|
-
const { table, refreshData, globalFilter, setGlobalFilter, loading } = react.useContext(TableContext);
|
|
372
|
-
return { table, refreshData, globalFilter, setGlobalFilter, loading };
|
|
464
|
+
const { loading, hasError } = useDataTable();
|
|
465
|
+
return (jsxRuntime.jsxs(react.Grid, { templateRows: "auto auto auto 1fr auto", templateColumns: "1fr 1fr", width: fitTableWidth ? "fit-content" : "100%", height: fitTableHeight ? "fit-content" : "100%", justifySelf: "center", alignSelf: "center", gap: "0.5rem", children: [jsxRuntime.jsxs(react.Flex, { justifyContent: "space-between", gridColumn: "1 / span 2", children: [jsxRuntime.jsx(react.Box, { children: jsxRuntime.jsx(EditViewButton, { text: isMobile ? undefined : "View", icon: jsxRuntime.jsx(md.MdOutlineViewColumn, {}) }) }), jsxRuntime.jsxs(react.Flex, { gap: "1rem", alignItems: "center", justifySelf: "end", children: [loading && jsxRuntime.jsx(react.Spinner, { size: "sm" }), hasError && (jsxRuntime.jsx(react.Tooltip, { label: "An error occurred while fetching data", children: jsxRuntime.jsx(react.Box, { children: jsxRuntime.jsx(react.Icon, { as: bs.BsExclamationCircleFill, color: "red.400" }) }) })), showFilter && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(GlobalFilter, {}), jsxRuntime.jsx(EditFilterButton, { text: isMobile ? undefined : "Advanced Filter" })] }))] })] }), jsxRuntime.jsx(react.Flex, { gridColumn: "1 / span 2", flexFlow: "column", gap: "0.5rem", children: filterOptions.map((column) => {
|
|
466
|
+
return (jsxRuntime.jsxs(react.Flex, { alignItems: "center", flexFlow: "wrap", gap: "0.5rem", children: [showFilterName && jsxRuntime.jsxs(react.Text, { children: [column, ":"] }), jsxRuntime.jsx(FilterOptions, { column: column })] }));
|
|
467
|
+
}) }), jsxRuntime.jsx(react.Flex, { gridColumn: "1 / span 2", children: showFilterTags && jsxRuntime.jsx(TableFilterTags, {}) }), jsxRuntime.jsx(react.Box, { overflow: "auto", gridColumn: "1 / span 2", width: "100%", height: "100%", children: children }), jsxRuntime.jsxs(react.Flex, { gap: "1rem", alignItems: "center", children: [jsxRuntime.jsx(PageSizeControl, {}), jsxRuntime.jsxs(react.Flex, { children: [jsxRuntime.jsx(react.Text, { paddingRight: "0.5rem", children: totalText }), jsxRuntime.jsx(RowCountText, {})] })] }), jsxRuntime.jsx(react.Box, { justifySelf: "end", children: jsxRuntime.jsx(TablePagination, {}) })] }));
|
|
373
468
|
};
|
|
374
469
|
|
|
375
470
|
const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
|
|
376
471
|
const table = useDataTable().table;
|
|
377
472
|
const SELECTION_BOX_WIDTH = 20;
|
|
378
|
-
const [hoveredCheckBox, setHoveredCheckBox] = react.useState(false);
|
|
473
|
+
const [hoveredCheckBox, setHoveredCheckBox] = react$1.useState(false);
|
|
379
474
|
const handleRowHover = (isHovered) => {
|
|
380
475
|
setHoveredCheckBox(isHovered);
|
|
381
476
|
};
|
|
@@ -388,7 +483,7 @@ const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }
|
|
|
388
483
|
}
|
|
389
484
|
return false;
|
|
390
485
|
};
|
|
391
|
-
return (jsxRuntime.jsx(react
|
|
486
|
+
return (jsxRuntime.jsx(react.Tfoot, { children: table.getFooterGroups().map((footerGroup) => (jsxRuntime.jsxs(react.Tr, { display: "flex", children: [jsxRuntime.jsxs(react.Th
|
|
392
487
|
// styling resize and pinning start
|
|
393
488
|
, {
|
|
394
489
|
// styling resize and pinning start
|
|
@@ -402,9 +497,9 @@ const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }
|
|
|
402
497
|
}
|
|
403
498
|
: {}),
|
|
404
499
|
// styling resize and pinning end
|
|
405
|
-
onMouseEnter: () => handleRowHover(true), onMouseLeave: () => handleRowHover(false), display: "grid", children: [isCheckBoxVisible() && (jsxRuntime.jsx(react
|
|
500
|
+
onMouseEnter: () => handleRowHover(true), onMouseLeave: () => handleRowHover(false), display: "grid", children: [isCheckBoxVisible() && (jsxRuntime.jsx(react.FormLabel, { margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", children: jsxRuntime.jsx(react.Checkbox, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, isChecked: table.getIsAllRowsSelected(),
|
|
406
501
|
// indeterminate: table.getIsSomeRowsSelected(),
|
|
407
|
-
onChange: table.getToggleAllRowsSelectedHandler() }) })), !isCheckBoxVisible() && (jsxRuntime.jsx(react
|
|
502
|
+
onChange: table.getToggleAllRowsSelectedHandler() }) })), !isCheckBoxVisible() && (jsxRuntime.jsx(react.Box, { as: "span", margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px` }))] }), footerGroup.headers.map((header) => (jsxRuntime.jsx(react.Th, { padding: "0", colSpan: header.colSpan,
|
|
408
503
|
// styling resize and pinning start
|
|
409
504
|
maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, left: header.column.getIsPinned()
|
|
410
505
|
? `${header.getStart("left") + SELECTION_BOX_WIDTH + table.getDensityValue() * 2}px`
|
|
@@ -414,9 +509,9 @@ const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }
|
|
|
414
509
|
: undefined,
|
|
415
510
|
},
|
|
416
511
|
// styling resize and pinning end
|
|
417
|
-
display: "grid", children: jsxRuntime.jsx(react
|
|
512
|
+
display: "grid", children: jsxRuntime.jsx(react.Menu, { children: jsxRuntime.jsx(react.MenuButton, { as: react.Box, padding: `${table.getDensityValue()}px`, display: "flex", alignItems: "center", justifyContent: "start", borderRadius: "0rem", _hover: { backgroundColor: "gray.100" }, children: jsxRuntime.jsxs(react.Flex, { gap: "0.5rem", alignItems: "center", children: [header.isPlaceholder
|
|
418
513
|
? null
|
|
419
|
-
: reactTable.flexRender(header.column.columnDef.footer, header.getContext()), jsxRuntime.jsx(react
|
|
514
|
+
: reactTable.flexRender(header.column.columnDef.footer, header.getContext()), jsxRuntime.jsx(react.Box, { children: header.column.getCanSort() && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [header.column.getIsSorted() === false && (
|
|
420
515
|
// <UpDownIcon />
|
|
421
516
|
jsxRuntime.jsx(jsxRuntime.Fragment, {})), header.column.getIsSorted() === "asc" && (jsxRuntime.jsx(icons.ChevronUpIcon, {})), header.column.getIsSorted() === "desc" && (jsxRuntime.jsx(icons.ChevronDownIcon, {}))] })) })] }) }) }) }, crypto.randomUUID())))] }, crypto.randomUUID()))) }));
|
|
422
517
|
};
|
|
@@ -424,7 +519,7 @@ const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }
|
|
|
424
519
|
const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
|
|
425
520
|
const { table } = useDataTable();
|
|
426
521
|
const SELECTION_BOX_WIDTH = 20;
|
|
427
|
-
const [hoveredCheckBox, setHoveredCheckBox] = react.useState(false);
|
|
522
|
+
const [hoveredCheckBox, setHoveredCheckBox] = react$1.useState(false);
|
|
428
523
|
const handleRowHover = (isHovered) => {
|
|
429
524
|
setHoveredCheckBox(isHovered);
|
|
430
525
|
};
|
|
@@ -437,7 +532,7 @@ const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gra
|
|
|
437
532
|
}
|
|
438
533
|
return false;
|
|
439
534
|
};
|
|
440
|
-
return (jsxRuntime.jsx(react
|
|
535
|
+
return (jsxRuntime.jsx(react.Thead, { children: table.getHeaderGroups().map((headerGroup) => (jsxRuntime.jsxs(react.Tr, { display: "flex", children: [jsxRuntime.jsxs(react.Th
|
|
441
536
|
// styling resize and pinning start
|
|
442
537
|
, { ...(table.getIsSomeColumnsPinned("left")
|
|
443
538
|
? {
|
|
@@ -449,16 +544,16 @@ const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gra
|
|
|
449
544
|
}
|
|
450
545
|
: {}),
|
|
451
546
|
// styling resize and pinning end
|
|
452
|
-
padding: `${table.getDensityValue()}px`, onMouseEnter: () => handleRowHover(true), onMouseLeave: () => handleRowHover(false), display: "grid", children: [isCheckBoxVisible() && (jsxRuntime.jsx(react
|
|
547
|
+
padding: `${table.getDensityValue()}px`, onMouseEnter: () => handleRowHover(true), onMouseLeave: () => handleRowHover(false), display: "grid", children: [isCheckBoxVisible() && (jsxRuntime.jsx(react.FormLabel, { margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", children: jsxRuntime.jsx(react.Checkbox, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, isChecked: table.getIsAllRowsSelected(),
|
|
453
548
|
// indeterminate: table.getIsSomeRowsSelected(),
|
|
454
|
-
onChange: table.getToggleAllRowsSelectedHandler() }) })), !isCheckBoxVisible() && (jsxRuntime.jsx(react
|
|
549
|
+
onChange: table.getToggleAllRowsSelectedHandler() }) })), !isCheckBoxVisible() && (jsxRuntime.jsx(react.Box, { as: "span", margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px` }))] }), headerGroup.headers.map((header) => {
|
|
455
550
|
const resizeProps = {
|
|
456
551
|
onClick: () => header.column.resetSize(),
|
|
457
552
|
onMouseDown: header.getResizeHandler(),
|
|
458
553
|
onTouchStart: header.getResizeHandler(),
|
|
459
554
|
cursor: "col-resize",
|
|
460
555
|
};
|
|
461
|
-
return (jsxRuntime.jsxs(react
|
|
556
|
+
return (jsxRuntime.jsxs(react.Th, { padding: "0rem", colSpan: header.colSpan,
|
|
462
557
|
// styling resize and pinning start
|
|
463
558
|
maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, left: header.column.getIsPinned()
|
|
464
559
|
? `${header.getStart("left") + SELECTION_BOX_WIDTH + table.getDensityValue() * 2}px`
|
|
@@ -468,13 +563,13 @@ const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gra
|
|
|
468
563
|
: undefined,
|
|
469
564
|
},
|
|
470
565
|
// styling resize and pinning end
|
|
471
|
-
display: "grid", children: [jsxRuntime.jsxs(react
|
|
566
|
+
display: "grid", children: [jsxRuntime.jsxs(react.Menu, { children: [jsxRuntime.jsx(react.MenuButton, { as: react.Box, padding: `${table.getDensityValue()}px`, display: "flex", alignItems: "center", justifyContent: "start", borderRadius: "0rem", _hover: { backgroundColor: "gray.100" }, children: jsxRuntime.jsxs(react.Flex, { gap: "0.5rem", alignItems: "center", children: [header.isPlaceholder
|
|
472
567
|
? null
|
|
473
|
-
: reactTable.flexRender(header.column.columnDef.header, header.getContext()), jsxRuntime.jsx(react
|
|
568
|
+
: reactTable.flexRender(header.column.columnDef.header, header.getContext()), jsxRuntime.jsx(react.Box, { children: header.column.getCanSort() && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [header.column.getIsSorted() === false && jsxRuntime.jsx(jsxRuntime.Fragment, {}), header.column.getIsSorted() === "asc" && (jsxRuntime.jsx(icons.ChevronUpIcon, {})), header.column.getIsSorted() === "desc" && (jsxRuntime.jsx(icons.ChevronDownIcon, {}))] })) }), jsxRuntime.jsx(react.Box, { children: header.column.getIsFiltered() && jsxRuntime.jsx(md.MdFilterListAlt, {}) })] }) }), jsxRuntime.jsx(react.Portal, { children: jsxRuntime.jsxs(react.MenuList, { children: [!header.column.getIsPinned() && (jsxRuntime.jsx(react.MenuItem, { icon: jsxRuntime.jsx(md.MdPushPin, {}), onClick: () => {
|
|
474
569
|
header.column.pin("left");
|
|
475
|
-
}, children: "Pin Column" })), header.column.getIsPinned() && (jsxRuntime.jsx(react
|
|
570
|
+
}, children: "Pin Column" })), header.column.getIsPinned() && (jsxRuntime.jsx(react.MenuItem, { icon: jsxRuntime.jsx(md.MdCancel, {}), onClick: () => {
|
|
476
571
|
header.column.pin(false);
|
|
477
|
-
}, children: "Cancel Pin" })), header.column.getCanSort() && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react
|
|
572
|
+
}, children: "Cancel Pin" })), header.column.getCanSort() && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.MenuItem, { icon: jsxRuntime.jsx(gr.GrAscend, {}), onClick: () => {
|
|
478
573
|
table.setSorting((state) => {
|
|
479
574
|
return [
|
|
480
575
|
...state.filter((column) => {
|
|
@@ -483,7 +578,7 @@ const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gra
|
|
|
483
578
|
{ id: header.id, desc: false },
|
|
484
579
|
];
|
|
485
580
|
});
|
|
486
|
-
}, children: "Sort Ascending" }), jsxRuntime.jsx(react
|
|
581
|
+
}, children: "Sort Ascending" }), jsxRuntime.jsx(react.MenuItem, { icon: jsxRuntime.jsx(gr.GrDescend, {}), onClick: () => {
|
|
487
582
|
table.setSorting((state) => {
|
|
488
583
|
return [
|
|
489
584
|
...state.filter((column) => {
|
|
@@ -492,9 +587,9 @@ const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gra
|
|
|
492
587
|
{ id: header.id, desc: true },
|
|
493
588
|
];
|
|
494
589
|
});
|
|
495
|
-
}, children: "Sort Descending" }), header.column.getIsSorted() && (jsxRuntime.jsx(react
|
|
590
|
+
}, children: "Sort Descending" }), header.column.getIsSorted() && (jsxRuntime.jsx(react.MenuItem, { icon: jsxRuntime.jsx(md.MdClear, {}), onClick: () => {
|
|
496
591
|
header.column.clearSorting();
|
|
497
|
-
}, children: "Clear Sorting" }))] }))] }) })] }), canResize && (jsxRuntime.jsx(react
|
|
592
|
+
}, children: "Clear Sorting" }))] }))] }) })] }), canResize && (jsxRuntime.jsx(react.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: {
|
|
498
593
|
borderRightColor: header.column.getIsResizing()
|
|
499
594
|
? "gray.700"
|
|
500
595
|
: "gray.400",
|
|
@@ -506,135 +601,26 @@ const DefaultTable = ({ totalText = "Total:", showFilter = false, showFooter = f
|
|
|
506
601
|
return (jsxRuntime.jsx(TableControls, { totalText: totalText, showFilter: showFilter, fitTableWidth: fitTableWidth, fitTableHeight: fitTableHeight, isMobile: isMobile, filterOptions: filterOptions, showFilterName: showFilterName, showFilterTags: showFilterTags, children: jsxRuntime.jsxs(Table, { variant: "striped", children: [jsxRuntime.jsx(TableHeader, { canResize: true }), jsxRuntime.jsx(TableBody, {}), showFooter && jsxRuntime.jsx(TableFooter, {})] }) }));
|
|
507
602
|
};
|
|
508
603
|
|
|
509
|
-
const DensityToggleButton = ({ text, icon = jsxRuntime.jsx(ai.AiOutlineColumnWidth, {}), }) => {
|
|
510
|
-
const { table } = useDataTable();
|
|
511
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!text === false && (jsxRuntime.jsx(react$1.IconButton, { variant: "ghost", "aria-label": "Toggle Density", icon: icon, onClick: () => {
|
|
512
|
-
table.toggleDensity();
|
|
513
|
-
} })), !!text !== false && (jsxRuntime.jsx(react$1.Button, { leftIcon: icon, variant: "ghost", "aria-label": "Toggle Density", onClick: () => {
|
|
514
|
-
table.toggleDensity();
|
|
515
|
-
}, children: text }))] }));
|
|
516
|
-
};
|
|
517
|
-
|
|
518
|
-
const EditFilterButton = ({ text, title = "Edit Filter", closeText = "Close", resetText = "Reset", icon = jsxRuntime.jsx(md.MdFilterAlt, {}), ...props }) => {
|
|
519
|
-
const filterModal = react$1.useDisclosure();
|
|
520
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!text === false && (jsxRuntime.jsx(react$1.IconButton, { icon: icon, variant: "ghost", onClick: filterModal.onOpen, "aria-label": "filter", ...props })), !!text !== false && (jsxRuntime.jsx(react$1.Button, { leftIcon: icon, variant: "ghost", onClick: filterModal.onOpen, ...props, children: text })), jsxRuntime.jsxs(react$1.Modal, { isOpen: filterModal.isOpen, onClose: filterModal.onClose, size: ["full", "full", "md", "md"], children: [jsxRuntime.jsx(react$1.ModalOverlay, {}), jsxRuntime.jsxs(react$1.ModalContent, { children: [jsxRuntime.jsx(react$1.ModalHeader, { children: title }), jsxRuntime.jsx(react$1.ModalCloseButton, {}), jsxRuntime.jsx(react$1.ModalBody, { children: jsxRuntime.jsxs(react$1.Flex, { flexFlow: "column", gap: "1rem", children: [jsxRuntime.jsx(TableFilter, {}), jsxRuntime.jsx(ResetFilteringButton, { text: resetText })] }) }), jsxRuntime.jsx(react$1.ModalFooter, { children: jsxRuntime.jsx(react$1.Button, { onClick: filterModal.onClose, children: closeText }) })] })] })] }));
|
|
521
|
-
};
|
|
522
|
-
|
|
523
|
-
const EditOrderButton = ({ text, icon = jsxRuntime.jsx(md.MdOutlineMoveDown, {}), title = "Change Order", }) => {
|
|
524
|
-
const orderModal = react$1.useDisclosure();
|
|
525
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!text === false && (jsxRuntime.jsx(react$1.IconButton, { icon: icon, variant: "ghost", onClick: orderModal.onOpen, "aria-label": "change order" })), !!text !== false && (jsxRuntime.jsx(react$1.Button, { leftIcon: icon, variant: "ghost", onClick: orderModal.onOpen, children: text })), jsxRuntime.jsxs(react$1.Modal, { isOpen: orderModal.isOpen, onClose: orderModal.onClose, size: ["full", "full", "md", "md"], children: [jsxRuntime.jsx(react$1.ModalOverlay, {}), jsxRuntime.jsxs(react$1.ModalContent, { padding: "0 0 1rem 0", children: [jsxRuntime.jsx(react$1.ModalHeader, { children: title }), jsxRuntime.jsx(react$1.ModalCloseButton, {}), jsxRuntime.jsx(react$1.ModalBody, { children: jsxRuntime.jsx(react$1.Flex, { flexFlow: "column", gap: "0.25rem", children: jsxRuntime.jsx(TableOrderer, {}) }) })] })] })] }));
|
|
526
|
-
};
|
|
527
|
-
|
|
528
|
-
const TableSorter = () => {
|
|
529
|
-
const { table } = useDataTable();
|
|
530
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: table.getHeaderGroups().map((headerGroup) => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: headerGroup.headers.map((header) => {
|
|
531
|
-
const displayName = header.column.columnDef.meta === undefined
|
|
532
|
-
? header.column.id
|
|
533
|
-
: header.column.columnDef.meta.displayName;
|
|
534
|
-
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) => {
|
|
535
|
-
header.column.toggleSorting();
|
|
536
|
-
}, children: [header.column.getIsSorted() === false && (
|
|
537
|
-
// <Text>To No sort</Text>
|
|
538
|
-
jsxRuntime.jsx(icons.UpDownIcon, {})), header.column.getIsSorted() === "asc" && (
|
|
539
|
-
// <Text>To asc</Text>
|
|
540
|
-
jsxRuntime.jsx(icons.ChevronDownIcon, {})), header.column.getIsSorted() === "desc" && (
|
|
541
|
-
// <Text>To desc</Text>
|
|
542
|
-
jsxRuntime.jsx(icons.ChevronUpIcon, {}))] }), header.column.getIsSorted() && (jsxRuntime.jsx(react$1.Button, { onClick: (e) => {
|
|
543
|
-
header.column.clearSorting();
|
|
544
|
-
}, children: jsxRuntime.jsx(icons.CloseIcon, {}) }))] })) }));
|
|
545
|
-
}) }))) }));
|
|
546
|
-
};
|
|
547
|
-
|
|
548
|
-
const EditSortingButton = ({ text, icon = jsxRuntime.jsx(md.MdOutlineSort, {}), title = "Edit Sorting", }) => {
|
|
549
|
-
const sortingModal = react$1.useDisclosure();
|
|
550
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!text === false && (jsxRuntime.jsx(react$1.IconButton, { icon: icon, variant: "ghost", onClick: sortingModal.onOpen, "aria-label": "change sorting" })), !!text !== false && (jsxRuntime.jsx(react$1.Button, { leftIcon: icon, variant: "ghost", onClick: sortingModal.onOpen, children: text })), jsxRuntime.jsxs(react$1.Modal, { isOpen: sortingModal.isOpen, onClose: sortingModal.onClose, size: ["full", "full", "md", "md"], children: [jsxRuntime.jsx(react$1.ModalOverlay, {}), jsxRuntime.jsxs(react$1.ModalContent, { padding: "0 0 1rem 0", children: [jsxRuntime.jsx(react$1.ModalHeader, { children: title }), jsxRuntime.jsx(react$1.ModalCloseButton, {}), jsxRuntime.jsx(react$1.ModalBody, { children: jsxRuntime.jsxs(react$1.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(TableSorter, {}), jsxRuntime.jsx(ResetSortingButton, {})] }) })] })] })] }));
|
|
551
|
-
};
|
|
552
|
-
|
|
553
|
-
const EditViewButton = ({ text, icon = jsxRuntime.jsx(io.IoMdEye, {}), title = "Edit View", }) => {
|
|
554
|
-
const viewModel = react$1.useDisclosure();
|
|
555
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!text === false && (jsxRuntime.jsx(react$1.IconButton, { icon: icon, variant: "ghost", onClick: viewModel.onOpen, "aria-label": "change sorting" })), !!text !== false && (jsxRuntime.jsx(react$1.Button, { leftIcon: icon, variant: "ghost", onClick: viewModel.onOpen, children: text })), jsxRuntime.jsxs(react$1.Modal, { isOpen: viewModel.isOpen, onClose: viewModel.onClose, size: ["full", "full", "md", "md"], children: [jsxRuntime.jsx(react$1.ModalOverlay, {}), jsxRuntime.jsxs(react$1.ModalContent, { padding: "0 0 1rem 0", children: [jsxRuntime.jsx(react$1.ModalHeader, { children: title }), jsxRuntime.jsx(react$1.ModalCloseButton, {}), jsxRuntime.jsx(react$1.ModalBody, { children: jsxRuntime.jsx(TableViewer, {}) })] })] })] }));
|
|
556
|
-
};
|
|
557
|
-
|
|
558
|
-
const FilterOptions = ({ column }) => {
|
|
559
|
-
const { table } = useDataTable();
|
|
560
|
-
const tableColumn = table.getColumn(column);
|
|
561
|
-
const options = tableColumn?.columnDef.meta?.filterOptions ?? [];
|
|
562
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: options.map((option) => {
|
|
563
|
-
const selected = table.getColumn(column)?.getFilterValue() === option;
|
|
564
|
-
return (jsxRuntime.jsxs(react$1.Button, { size: "sm", onClick: () => {
|
|
565
|
-
if (selected) {
|
|
566
|
-
table.setColumnFilters((state) => {
|
|
567
|
-
return state.filter((filter) => {
|
|
568
|
-
return filter.id !== column;
|
|
569
|
-
});
|
|
570
|
-
});
|
|
571
|
-
return;
|
|
572
|
-
}
|
|
573
|
-
table.getColumn(column)?.setFilterValue(option);
|
|
574
|
-
}, variant: selected ? "solid" : "outline", display: "flex", gap: "0.25rem", children: [option, selected && jsxRuntime.jsx(md.MdClose, {})] }, option));
|
|
575
|
-
}) }));
|
|
576
|
-
};
|
|
577
|
-
|
|
578
|
-
const GlobalFilter = ({ icon = md.MdSearch }) => {
|
|
579
|
-
const { globalFilter, setGlobalFilter } = useDataTable();
|
|
580
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(react$1.Box, { children: jsxRuntime.jsxs(react$1.InputGroup, { children: [jsxRuntime.jsx(react$1.InputLeftElement, { pointerEvents: "none", children: jsxRuntime.jsx(react$1.Icon, { as: icon, color: "gray.300" }) }), jsxRuntime.jsx(react$1.Input, { value: globalFilter, onChange: (e) => {
|
|
581
|
-
setGlobalFilter(e.target.value);
|
|
582
|
-
} })] }) }) }));
|
|
583
|
-
};
|
|
584
|
-
|
|
585
|
-
const PageSizeControl = ({ pageSizes = [10, 20, 30, 40, 50], }) => {
|
|
586
|
-
const { table } = useDataTable();
|
|
587
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(react$1.Menu, { children: [jsxRuntime.jsx(react$1.MenuButton, { as: react$1.Button, variant: "ghost", rightIcon: jsxRuntime.jsx(icons.ChevronDownIcon, {}), gap: "0.5rem", children: table.getState().pagination.pageSize }), jsxRuntime.jsx(react$1.MenuList, { children: pageSizes.map((pageSize) => (jsxRuntime.jsx(react$1.MenuItem, { onClick: () => {
|
|
588
|
-
table.setPageSize(Number(pageSize));
|
|
589
|
-
}, children: pageSize }, crypto.randomUUID()))) })] }) }));
|
|
590
|
-
};
|
|
591
|
-
|
|
592
|
-
const ResetFilteringButton = ({ text = "Reset Filtering", }) => {
|
|
593
|
-
const { table } = useDataTable();
|
|
594
|
-
return (jsxRuntime.jsx(react$1.Button, { onClick: () => {
|
|
595
|
-
table.resetColumnFilters();
|
|
596
|
-
}, children: text }));
|
|
597
|
-
};
|
|
598
|
-
|
|
599
|
-
const ResetSelectionButton = ({ text = "Reset Selection", }) => {
|
|
600
|
-
const { table } = useDataTable();
|
|
601
|
-
return (jsxRuntime.jsx(react$1.Button, { onClick: () => {
|
|
602
|
-
table.resetRowSelection();
|
|
603
|
-
}, children: text }));
|
|
604
|
-
};
|
|
605
|
-
|
|
606
|
-
const ResetSortingButton = ({ text = "Reset Sorting", }) => {
|
|
607
|
-
const { table } = useDataTable();
|
|
608
|
-
return (jsxRuntime.jsx(react$1.Button, { onClick: () => {
|
|
609
|
-
table.resetSorting();
|
|
610
|
-
}, children: text }));
|
|
611
|
-
};
|
|
612
|
-
|
|
613
|
-
const RowCountText = () => {
|
|
614
|
-
const { table } = useDataTable();
|
|
615
|
-
return jsxRuntime.jsx(react$1.Text, { children: table.getRowCount() });
|
|
616
|
-
};
|
|
617
|
-
|
|
618
604
|
const Table = ({ children, showLoading = false, loadingComponent = jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Loading..." }), ...props }) => {
|
|
619
605
|
const { table, loading } = useDataTable();
|
|
620
606
|
if (showLoading) {
|
|
621
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [loading && loadingComponent, !loading && (jsxRuntime.jsx(react
|
|
607
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [loading && loadingComponent, !loading && (jsxRuntime.jsx(react.Table, { width: table.getCenterTotalSize(), overflow: "auto", ...props, children: children }))] }));
|
|
622
608
|
}
|
|
623
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(react
|
|
609
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(react.Table, { width: table.getCenterTotalSize(), overflowX: "auto", ...props, children: children }) }));
|
|
624
610
|
};
|
|
625
611
|
|
|
626
612
|
const TableCardContainer = ({ children, ...props }) => {
|
|
627
|
-
return (jsxRuntime.jsx(react
|
|
613
|
+
return (jsxRuntime.jsx(react.Grid, { gridTemplateColumns: ["1fr", "1fr 1fr", "1fr 1fr 1fr"], gap: "0.5rem", ...props, children: children }));
|
|
628
614
|
};
|
|
629
615
|
|
|
630
616
|
const TableCards = ({ isSelectable = false }) => {
|
|
631
|
-
const { table } = react.useContext(TableContext);
|
|
617
|
+
const { table } = react$1.useContext(TableContext);
|
|
632
618
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: table.getRowModel().rows.map((row) => {
|
|
633
|
-
return (jsxRuntime.jsx(react
|
|
619
|
+
return (jsxRuntime.jsx(react.Card, { children: jsxRuntime.jsxs(react.CardBody, { display: "flex", flexFlow: "column", gap: "0.5rem", children: [isSelectable && (jsxRuntime.jsx(react.Checkbox, { isChecked: row.getIsSelected(),
|
|
634
620
|
disabled: !row.getCanSelect(),
|
|
635
621
|
// indeterminate: row.getIsSomeSelected(),
|
|
636
622
|
onChange: row.getToggleSelectedHandler() })), row.getVisibleCells().map((cell) => {
|
|
637
|
-
return (jsxRuntime.jsx(react
|
|
623
|
+
return (jsxRuntime.jsx(react.Box, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, crypto.randomUUID()));
|
|
638
624
|
})] }) }, crypto.randomUUID()));
|
|
639
625
|
}) }));
|
|
640
626
|
};
|
|
@@ -648,11 +634,11 @@ const TableComponent = ({ render = () => {
|
|
|
648
634
|
|
|
649
635
|
const DateRangeFilter = ({ startDate, endDate, setStartDate, setEndDate, }) => {
|
|
650
636
|
console.log(startDate, endDate, "dflp");
|
|
651
|
-
return (jsxRuntime.jsx(react
|
|
637
|
+
return (jsxRuntime.jsx(react.Box, { p: '1rem', children: jsxRuntime.jsxs(react.VStack, { spacing: 4, children: [jsxRuntime.jsxs(react.FormControl, { children: [jsxRuntime.jsx(react.FormLabel, { htmlFor: "start-date", children: "Start Date" }), jsxRuntime.jsx(react.Input, { id: "start-date", type: "date", value: startDate, onChange: (e) => setStartDate(e.target.value) })] }), jsxRuntime.jsxs(react.FormControl, { children: [jsxRuntime.jsx(react.FormLabel, { htmlFor: "end-date", children: "End Date" }), jsxRuntime.jsx(react.Input, { id: "end-date", type: "date", value: endDate, onChange: (e) => setEndDate(e.target.value) })] })] }) }));
|
|
652
638
|
};
|
|
653
639
|
|
|
654
640
|
const RangeFilter = ({ range, setRange, defaultValue, min, max, step, }) => {
|
|
655
|
-
return (jsxRuntime.jsx(react
|
|
641
|
+
return (jsxRuntime.jsx(react.Box, { p: 8, children: jsxRuntime.jsxs(react.VStack, { spacing: 4, children: [jsxRuntime.jsxs(react.Text, { children: ["Selected Range: ", range[0], " - ", range[1]] }), jsxRuntime.jsxs(react.RangeSlider, { "aria-label": ["min", "max"], defaultValue: defaultValue, min: min, max: max, step: step, onChangeEnd: (val) => setRange(val), children: [jsxRuntime.jsx(react.RangeSliderTrack, { children: jsxRuntime.jsx(react.RangeSliderFilledTrack, {}) }), jsxRuntime.jsx(react.RangeSliderThumb, { index: 0 }), jsxRuntime.jsx(react.RangeSliderThumb, { index: 1 })] })] }) }));
|
|
656
642
|
};
|
|
657
643
|
|
|
658
644
|
const TagFilter = ({ availableTags, selectedTags, onTagChange, }) => {
|
|
@@ -664,7 +650,7 @@ const TagFilter = ({ availableTags, selectedTags, onTagChange, }) => {
|
|
|
664
650
|
onTagChange([...selectedTags, tag]);
|
|
665
651
|
}
|
|
666
652
|
};
|
|
667
|
-
return (jsxRuntime.jsx(react
|
|
653
|
+
return (jsxRuntime.jsx(react.Flex, { flexFlow: "wrap", p: "0.5rem", gap: "0.5rem", children: availableTags.map((tag) => (jsxRuntime.jsx(react.WrapItem, { children: jsxRuntime.jsxs(react.Tag, { size: "lg", variant: selectedTags.includes(tag) ? "solid" : "outline", cursor: "pointer", onClick: () => toggleTag(tag), children: [jsxRuntime.jsx(react.TagLabel, { children: tag }), selectedTags.includes(tag) && jsxRuntime.jsx(react.TagCloseButton, {})] }) }, tag))) }));
|
|
668
654
|
};
|
|
669
655
|
|
|
670
656
|
function Filter({ column }) {
|
|
@@ -672,7 +658,7 @@ function Filter({ column }) {
|
|
|
672
658
|
const displayName = column.columnDef.meta?.displayName ?? column.id;
|
|
673
659
|
const filterOptions = column.columnDef.meta?.filterOptions ?? [];
|
|
674
660
|
if (column.columns.length > 0) {
|
|
675
|
-
return (jsxRuntime.jsxs(react
|
|
661
|
+
return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(react.Text, { children: displayName }), column.columns.map((column) => {
|
|
676
662
|
return jsxRuntime.jsx(Filter, { column: column }, column.id);
|
|
677
663
|
})] }, column.id));
|
|
678
664
|
}
|
|
@@ -680,14 +666,14 @@ function Filter({ column }) {
|
|
|
680
666
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
681
667
|
}
|
|
682
668
|
if (filterVariant === "select") {
|
|
683
|
-
return (jsxRuntime.jsxs(react
|
|
669
|
+
return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(react.Text, { children: displayName }), jsxRuntime.jsx(react.Select, { value: column.getFilterValue() ? String(column.getFilterValue()) : "", placeholder: "Select option", onChange: (e) => {
|
|
684
670
|
column.setFilterValue(e.target.value);
|
|
685
671
|
}, children: filterOptions.map((option) => {
|
|
686
672
|
return (jsxRuntime.jsx("option", { value: option, children: option }, `${option}`));
|
|
687
673
|
}) })] }, column.id));
|
|
688
674
|
}
|
|
689
675
|
if (filterVariant === "tag") {
|
|
690
|
-
return (jsxRuntime.jsxs(react
|
|
676
|
+
return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(react.Text, { children: displayName }), jsxRuntime.jsx(TagFilter, { availableTags: filterOptions, selectedTags: (column.getFilterValue() ?? []), onTagChange: (tags) => {
|
|
691
677
|
if (tags.length === 0) {
|
|
692
678
|
return column.setFilterValue(undefined);
|
|
693
679
|
}
|
|
@@ -695,7 +681,7 @@ function Filter({ column }) {
|
|
|
695
681
|
} })] }, column.id));
|
|
696
682
|
}
|
|
697
683
|
if (filterVariant === "boolean") {
|
|
698
|
-
return (jsxRuntime.jsxs(react
|
|
684
|
+
return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(react.Text, { children: displayName }), jsxRuntime.jsx(TagFilter, { availableTags: ["true", "false"], selectedTags: (column.getFilterValue() ?? []), onTagChange: (tags) => {
|
|
699
685
|
if (tags.length === 0) {
|
|
700
686
|
return column.setFilterValue(undefined);
|
|
701
687
|
}
|
|
@@ -724,7 +710,7 @@ function Filter({ column }) {
|
|
|
724
710
|
"",
|
|
725
711
|
"",
|
|
726
712
|
];
|
|
727
|
-
return (jsxRuntime.jsxs(react
|
|
713
|
+
return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(react.Text, { children: displayName }), jsxRuntime.jsx(DateRangeFilter, { startDate: start, endDate: end, setStartDate: function (value) {
|
|
728
714
|
column.setFilterValue((state) => {
|
|
729
715
|
return [value, (state ?? ["", ""])[1]];
|
|
730
716
|
});
|
|
@@ -741,7 +727,7 @@ function Filter({ column }) {
|
|
|
741
727
|
}
|
|
742
728
|
return jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderFilter(column) });
|
|
743
729
|
}
|
|
744
|
-
return (jsxRuntime.jsxs(react
|
|
730
|
+
return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(react.Text, { children: displayName }), jsxRuntime.jsx(react.Input, { value: column.getFilterValue() ? String(column.getFilterValue()) : "", onChange: (e) => {
|
|
745
731
|
column.setFilterValue(e.target.value);
|
|
746
732
|
} })] }, column.id));
|
|
747
733
|
}
|
|
@@ -754,8 +740,8 @@ const TableFilter = () => {
|
|
|
754
740
|
|
|
755
741
|
const TableFilterTags = () => {
|
|
756
742
|
const { table } = useDataTable();
|
|
757
|
-
return (jsxRuntime.jsx(react
|
|
758
|
-
return (jsxRuntime.jsxs(react
|
|
743
|
+
return (jsxRuntime.jsx(react.Flex, { gap: "0.5rem", flexFlow: "wrap", children: table.getState().columnFilters.map(({ id, value }, index) => {
|
|
744
|
+
return (jsxRuntime.jsxs(react.Tag, { display: "flex", gap: "0.5rem", alignItems: "center", children: [jsxRuntime.jsx(react.Text, { children: `${id}: ${value}` }), jsxRuntime.jsx(react.IconButton, { size: "xs", variant: "ghost", icon: jsxRuntime.jsx(icons.CloseIcon, {}), onClick: () => {
|
|
759
745
|
table.setColumnFilters(table.getState().columnFilters.filter((value, curIndex) => {
|
|
760
746
|
return curIndex != index;
|
|
761
747
|
}));
|
|
@@ -769,8 +755,8 @@ const TableLoadingComponent = ({ render, }) => {
|
|
|
769
755
|
};
|
|
770
756
|
|
|
771
757
|
const ColumnOrderChanger = ({ columns }) => {
|
|
772
|
-
const [order, setOrder] = react.useState([]);
|
|
773
|
-
const [originalOrder, setOriginalOrder] = react.useState([]);
|
|
758
|
+
const [order, setOrder] = react$1.useState([]);
|
|
759
|
+
const [originalOrder, setOriginalOrder] = react$1.useState([]);
|
|
774
760
|
const { table } = useDataTable();
|
|
775
761
|
const handleChangeOrder = (startIndex, endIndex) => {
|
|
776
762
|
const newOrder = Array.from(order);
|
|
@@ -778,10 +764,10 @@ const ColumnOrderChanger = ({ columns }) => {
|
|
|
778
764
|
newOrder.splice(endIndex, 0, removed);
|
|
779
765
|
setOrder(newOrder);
|
|
780
766
|
};
|
|
781
|
-
react.useEffect(() => {
|
|
767
|
+
react$1.useEffect(() => {
|
|
782
768
|
setOrder(columns);
|
|
783
769
|
}, [columns]);
|
|
784
|
-
react.useEffect(() => {
|
|
770
|
+
react$1.useEffect(() => {
|
|
785
771
|
if (originalOrder.length > 0) {
|
|
786
772
|
return;
|
|
787
773
|
}
|
|
@@ -790,7 +776,7 @@ const ColumnOrderChanger = ({ columns }) => {
|
|
|
790
776
|
}
|
|
791
777
|
setOriginalOrder(columns);
|
|
792
778
|
}, [columns]);
|
|
793
|
-
return (jsxRuntime.jsxs(react
|
|
779
|
+
return (jsxRuntime.jsxs(react.Flex, { gap: "0.5rem", flexFlow: "column", children: [jsxRuntime.jsx(react.Flex, { gap: "0.5rem", flexFlow: "column", children: order.map((columnId, index) => (jsxRuntime.jsxs(react.Flex, { gap: "0.5rem", alignItems: "center", justifyContent: "space-between", children: [jsxRuntime.jsx(react.IconButton, { onClick: () => {
|
|
794
780
|
const prevIndex = index - 1;
|
|
795
781
|
if (prevIndex >= 0) {
|
|
796
782
|
handleChangeOrder(index, prevIndex);
|
|
@@ -805,14 +791,14 @@ const ColumnOrderChanger = ({ columns }) => {
|
|
|
805
791
|
? column.id
|
|
806
792
|
: column.columnDef.meta.displayName;
|
|
807
793
|
return jsxRuntime.jsx("span", { children: displayName }, column.id);
|
|
808
|
-
}), jsxRuntime.jsx(react
|
|
794
|
+
}), jsxRuntime.jsx(react.IconButton, { onClick: () => {
|
|
809
795
|
const nextIndex = index + 1;
|
|
810
796
|
if (nextIndex < order.length) {
|
|
811
797
|
handleChangeOrder(index, nextIndex);
|
|
812
798
|
}
|
|
813
|
-
}, disabled: index === order.length - 1, "aria-label": "", children: jsxRuntime.jsx(md.MdArrowDownward, {}) })] }, columnId))) }), jsxRuntime.jsxs(react
|
|
799
|
+
}, disabled: index === order.length - 1, "aria-label": "", children: jsxRuntime.jsx(md.MdArrowDownward, {}) })] }, columnId))) }), jsxRuntime.jsxs(react.Flex, { gap: "0.25rem", children: [jsxRuntime.jsx(react.Button, { onClick: () => {
|
|
814
800
|
table.setColumnOrder(order);
|
|
815
|
-
}, children: "Apply" }), jsxRuntime.jsx(react
|
|
801
|
+
}, children: "Apply" }), jsxRuntime.jsx(react.Button, { onClick: () => {
|
|
816
802
|
table.setColumnOrder(originalOrder);
|
|
817
803
|
}, children: "Reset" })] })] }));
|
|
818
804
|
};
|
|
@@ -823,28 +809,28 @@ const TableOrderer = () => {
|
|
|
823
809
|
|
|
824
810
|
const TablePagination = ({}) => {
|
|
825
811
|
const { firstPage, getCanPreviousPage, previousPage, getState, nextPage, getCanNextPage, lastPage, } = useDataTable().table;
|
|
826
|
-
return (jsxRuntime.jsxs(react
|
|
812
|
+
return (jsxRuntime.jsxs(react.ButtonGroup, { isAttached: true, children: [jsxRuntime.jsx(react.IconButton, { icon: jsxRuntime.jsx(md.MdFirstPage, {}), onClick: () => firstPage(), isDisabled: !getCanPreviousPage(), "aria-label": "first-page", variant: "ghost" }), jsxRuntime.jsx(react.IconButton, { icon: jsxRuntime.jsx(md.MdArrowBack, {}), onClick: () => previousPage(), isDisabled: !getCanPreviousPage(), "aria-label": "previous-page", variant: "ghost" }), jsxRuntime.jsx(react.Button, { variant: "ghost", onClick: () => { }, disabled: !getCanPreviousPage(), children: getState().pagination.pageIndex + 1 }), jsxRuntime.jsx(react.IconButton, { onClick: () => nextPage(), isDisabled: !getCanNextPage(), "aria-label": "next-page", variant: "ghost", children: jsxRuntime.jsx(md.MdArrowForward, {}) }), jsxRuntime.jsx(react.IconButton, { onClick: () => lastPage(), isDisabled: !getCanNextPage(), "aria-label": "last-page", variant: "ghost", children: jsxRuntime.jsx(md.MdLastPage, {}) })] }));
|
|
827
813
|
};
|
|
828
814
|
|
|
829
815
|
const ReloadButton = ({ text = "Reload" }) => {
|
|
830
816
|
const { refreshData } = useDataTable();
|
|
831
|
-
return (jsxRuntime.jsx(react
|
|
817
|
+
return (jsxRuntime.jsx(react.Button, { leftIcon: jsxRuntime.jsx(io5.IoReload, {}), onClick: () => {
|
|
832
818
|
refreshData();
|
|
833
819
|
}, children: text }));
|
|
834
820
|
};
|
|
835
821
|
|
|
836
822
|
const SelectAllRowsToggle = ({ selectAllIcon = jsxRuntime.jsx(md.MdOutlineChecklist, {}), clearAllIcon = jsxRuntime.jsx(md.MdClear, {}), selectAllText, clearAllText, }) => {
|
|
837
823
|
const { table } = useDataTable();
|
|
838
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!selectAllText === false && (jsxRuntime.jsx(react
|
|
824
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!selectAllText === false && (jsxRuntime.jsx(react.IconButton, { icon: table.getIsAllRowsSelected() ? clearAllIcon : selectAllIcon, variant: "ghost", "aria-label": table.getIsAllRowsSelected() ? clearAllText : selectAllText, onClick: (event) => {
|
|
839
825
|
table.getToggleAllRowsSelectedHandler()(event);
|
|
840
|
-
} })), !!selectAllText !== false && (jsxRuntime.jsx(react
|
|
826
|
+
} })), !!selectAllText !== false && (jsxRuntime.jsx(react.Button, { leftIcon: table.getIsAllRowsSelected() ? clearAllIcon : selectAllIcon, variant: "ghost", onClick: (event) => {
|
|
841
827
|
table.getToggleAllRowsSelectedHandler()(event);
|
|
842
828
|
}, children: table.getIsAllRowsSelected() ? clearAllText : selectAllText }))] }));
|
|
843
829
|
};
|
|
844
830
|
|
|
845
831
|
const TableSelector = () => {
|
|
846
|
-
const { table } = react.useContext(TableContext);
|
|
847
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [table.getSelectedRowModel().rows.length > 0 && (jsxRuntime.jsxs(react
|
|
832
|
+
const { table } = react$1.useContext(TableContext);
|
|
833
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [table.getSelectedRowModel().rows.length > 0 && (jsxRuntime.jsxs(react.Button, { onClick: () => { }, variant: "ghost", display: "flex", gap: "0.25rem", children: [jsxRuntime.jsx(react.Box, { fontSize: "sm", children: `${table.getSelectedRowModel().rows.length}` }), jsxRuntime.jsx(react.Icon, { as: io.IoMdCheckbox })] })), !table.getIsAllPageRowsSelected() && jsxRuntime.jsx(SelectAllRowsToggle, {}), table.getSelectedRowModel().rows.length > 0 && (jsxRuntime.jsx(react.IconButton, { variant: "ghost", icon: jsxRuntime.jsx(react.Icon, { as: md.MdClear }), onClick: () => {
|
|
848
834
|
table.resetRowSelection();
|
|
849
835
|
}, "aria-label": "reset selection" }))] }));
|
|
850
836
|
};
|
|
@@ -852,7 +838,7 @@ const TableSelector = () => {
|
|
|
852
838
|
const TableViewer = () => {
|
|
853
839
|
const { table } = useDataTable();
|
|
854
840
|
const columns = table.getAllLeafColumns();
|
|
855
|
-
const [columnOrder, setColumnOrder] = react.useState(columns.map((column, index) => {
|
|
841
|
+
const [columnOrder, setColumnOrder] = react$1.useState(columns.map((column, index) => {
|
|
856
842
|
return column.id;
|
|
857
843
|
}));
|
|
858
844
|
const handleDragEnd = (result) => {
|
|
@@ -864,19 +850,46 @@ const TableViewer = () => {
|
|
|
864
850
|
setColumnOrder(newColumnOrder);
|
|
865
851
|
table.setColumnOrder(newColumnOrder);
|
|
866
852
|
};
|
|
867
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(reactBeautifulDnd.DragDropContext, { onDragEnd: handleDragEnd, children: jsxRuntime.jsx(reactBeautifulDnd.Droppable, { droppableId: "columns", children: (provided) => (jsxRuntime.jsxs(react
|
|
853
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(reactBeautifulDnd.DragDropContext, { onDragEnd: handleDragEnd, children: jsxRuntime.jsx(reactBeautifulDnd.Droppable, { droppableId: "columns", children: (provided) => (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "0.5rem", ref: provided.innerRef, ...provided.droppableProps, children: [columns.map((column, i) => {
|
|
868
854
|
const displayName = column.columnDef.meta === undefined
|
|
869
855
|
? column.id
|
|
870
856
|
: column.columnDef.meta.displayName;
|
|
871
|
-
return (jsxRuntime.jsx(reactBeautifulDnd.Draggable, { draggableId: column.id, index: i, children: (provided) => (jsxRuntime.jsxs(react
|
|
857
|
+
return (jsxRuntime.jsx(reactBeautifulDnd.Draggable, { draggableId: column.id, index: i, children: (provided) => (jsxRuntime.jsxs(react.Grid, { ref: provided.innerRef, ...provided.draggableProps, templateColumns: "auto 1fr", gap: "0.5rem", alignItems: "center", children: [jsxRuntime.jsx(react.Flex, { ...provided.dragHandleProps, alignItems: "center", padding: "auto 0 auto 0", children: jsxRuntime.jsx(react.Icon, { as: fa.FaGripLinesVertical, color: "gray.400" }) }), jsxRuntime.jsxs(react.Flex, { justifyContent: "space-between", alignItems: "center", children: [jsxRuntime.jsxs(react.Box, { children: [" ", displayName] }), jsxRuntime.jsx(react.Switch, { isChecked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() })] })] }, column.id)) }, column.id));
|
|
872
858
|
}), provided.placeholder] })) }) }) }));
|
|
873
859
|
};
|
|
874
860
|
|
|
875
861
|
const TextCell = ({ label, noOfLines = [1], padding = "0rem", children, tooltipProps, ...props }) => {
|
|
876
862
|
if (label) {
|
|
877
|
-
return (jsxRuntime.jsx(react
|
|
863
|
+
return (jsxRuntime.jsx(react.Flex, { alignItems: "center", height: "100%", padding: padding, children: jsxRuntime.jsx(react.Tooltip, { label: jsxRuntime.jsx(react.Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [5], children: label }), placement: "auto", ...tooltipProps, children: jsxRuntime.jsx(react.Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "break-all", noOfLines: noOfLines, ...props, children: children }) }) }));
|
|
878
864
|
}
|
|
879
|
-
return (jsxRuntime.jsx(react
|
|
865
|
+
return (jsxRuntime.jsx(react.Flex, { alignItems: "center", height: "100%", padding: padding, children: jsxRuntime.jsx(react.Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "break-all", noOfLines: noOfLines, ...props, children: children }) }));
|
|
866
|
+
};
|
|
867
|
+
|
|
868
|
+
const FilterOptions = ({ column }) => {
|
|
869
|
+
const { table } = useDataTable();
|
|
870
|
+
const tableColumn = table.getColumn(column);
|
|
871
|
+
const options = tableColumn?.columnDef.meta?.filterOptions ?? [];
|
|
872
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: options.map((option) => {
|
|
873
|
+
const selected = table.getColumn(column)?.getFilterValue() === option;
|
|
874
|
+
return (jsxRuntime.jsxs(react.Button, { size: "sm", onClick: () => {
|
|
875
|
+
if (selected) {
|
|
876
|
+
table.setColumnFilters((state) => {
|
|
877
|
+
return state.filter((filter) => {
|
|
878
|
+
return filter.id !== column;
|
|
879
|
+
});
|
|
880
|
+
});
|
|
881
|
+
return;
|
|
882
|
+
}
|
|
883
|
+
table.getColumn(column)?.setFilterValue(option);
|
|
884
|
+
}, variant: selected ? "solid" : "outline", display: "flex", gap: "0.25rem", children: [option, selected && jsxRuntime.jsx(md.MdClose, {})] }, option));
|
|
885
|
+
}) }));
|
|
886
|
+
};
|
|
887
|
+
|
|
888
|
+
const GlobalFilter = ({ icon = md.MdSearch }) => {
|
|
889
|
+
const { globalFilter, setGlobalFilter } = useDataTable();
|
|
890
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(react.Box, { children: jsxRuntime.jsxs(react.InputGroup, { children: [jsxRuntime.jsx(react.InputLeftElement, { pointerEvents: "none", children: jsxRuntime.jsx(react.Icon, { as: icon, color: "gray.300" }) }), jsxRuntime.jsx(react.Input, { value: globalFilter, onChange: (e) => {
|
|
891
|
+
setGlobalFilter(e.target.value);
|
|
892
|
+
} })] }) }) }));
|
|
880
893
|
};
|
|
881
894
|
|
|
882
895
|
exports.DataTable = DataTable;
|