@bsol-oss/react-datatable5 1.0.14 → 1.0.16
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/README.md +6 -0
- package/dist/index.js +64 -30
- package/dist/index.mjs +67 -33
- package/package.json +1 -1
package/README.md
CHANGED
package/dist/index.js
CHANGED
|
@@ -95,7 +95,7 @@ const DataTable = ({ columns, url, enableRowSelection = true, enableMultiRowSele
|
|
|
95
95
|
columnOrder,
|
|
96
96
|
},
|
|
97
97
|
defaultColumn: {
|
|
98
|
-
size:
|
|
98
|
+
size: 150, //starting column size
|
|
99
99
|
minSize: 10, //enforced during column resizing
|
|
100
100
|
maxSize: 10000, //enforced during column resizing
|
|
101
101
|
},
|
|
@@ -192,11 +192,19 @@ const Table = ({ children }) => {
|
|
|
192
192
|
const TableBody = () => {
|
|
193
193
|
const { table: table$1 } = react.useContext(TableContext);
|
|
194
194
|
return (jsxRuntime.jsx(table.Tbody, { children: table$1.getRowModel().rows.map((row) => {
|
|
195
|
-
return (jsxRuntime.jsxs(table.Tr, { display: "flex", children: [jsxRuntime.jsx(table.Td
|
|
195
|
+
return (jsxRuntime.jsxs(table.Tr, { display: "flex", _hover: { backgroundColor: "rgba(178,178,178,0.1)" }, zIndex: 1, children: [jsxRuntime.jsx(table.Td
|
|
196
196
|
// styling resize and pinning start
|
|
197
197
|
, {
|
|
198
198
|
// styling resize and pinning start
|
|
199
|
-
padding: "0.5rem",
|
|
199
|
+
padding: "0.5rem", ...(table$1.getIsSomeColumnsPinned("left")
|
|
200
|
+
? {
|
|
201
|
+
left: `0px`,
|
|
202
|
+
backgroundColor: "gray.50",
|
|
203
|
+
position: "sticky",
|
|
204
|
+
zIndex: 1,
|
|
205
|
+
_dark: { backgroundColor: "gray.700" },
|
|
206
|
+
}
|
|
207
|
+
: {}), children: jsxRuntime.jsx(react$1.Checkbox, { isChecked: row.getIsSelected(),
|
|
200
208
|
disabled: !row.getCanSelect(),
|
|
201
209
|
// indeterminate: row.getIsSomeSelected(),
|
|
202
210
|
onChange: row.getToggleSelectedHandler() }) }), row.getVisibleCells().map((cell) => {
|
|
@@ -204,7 +212,11 @@ const TableBody = () => {
|
|
|
204
212
|
// styling resize and pinning start
|
|
205
213
|
maxWidth: `${cell.column.getSize()}px`, width: `${cell.column.getSize()}px`, left: cell.column.getIsPinned()
|
|
206
214
|
? `${cell.column.getStart("left") + 32}px`
|
|
207
|
-
: undefined, backgroundColor: cell.column.getIsPinned() ? "gray.50" :
|
|
215
|
+
: undefined, backgroundColor: cell.column.getIsPinned() ? "gray.50" : undefined, position: cell.column.getIsPinned() ? "sticky" : "relative", zIndex: cell.column.getIsPinned() ? 1 : 0, _dark: {
|
|
216
|
+
backgroundColor: cell.column.getIsPinned()
|
|
217
|
+
? "gray.700"
|
|
218
|
+
: undefined,
|
|
219
|
+
}, children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, crypto.randomUUID()));
|
|
208
220
|
})] }, crypto.randomUUID()));
|
|
209
221
|
}) }));
|
|
210
222
|
};
|
|
@@ -232,15 +244,27 @@ const TableFooter = () => {
|
|
|
232
244
|
// styling resize and pinning start
|
|
233
245
|
, {
|
|
234
246
|
// styling resize and pinning start
|
|
235
|
-
padding: "0.5rem",
|
|
247
|
+
padding: "0.5rem", ...(table.getIsSomeColumnsPinned("left")
|
|
248
|
+
? {
|
|
249
|
+
left: `0px`,
|
|
250
|
+
backgroundColor: "gray.50",
|
|
251
|
+
position: "sticky",
|
|
252
|
+
zIndex: 1,
|
|
253
|
+
_dark: { backgroundColor: "gray.700" },
|
|
254
|
+
}
|
|
255
|
+
: {}), children: jsxRuntime.jsx(react$1.Checkbox, { isChecked: table.getIsAllRowsSelected(),
|
|
236
256
|
// indeterminate: table.getIsSomeRowsSelected(),
|
|
237
257
|
onChange: table.getToggleAllRowsSelectedHandler() }) }), footerGroup.headers.map((header) => (jsxRuntime.jsx(react$1.Th, { padding: "0rem", colSpan: header.colSpan,
|
|
238
258
|
// styling resize and pinning start
|
|
239
259
|
maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, left: header.column.getIsPinned()
|
|
240
260
|
? `${header.getStart("left") + SELECTION_BOX_WIDTH}px`
|
|
241
|
-
: undefined, backgroundColor: header.column.getIsPinned() ? "gray.50" : undefined, position: header.column.getIsPinned() ? "sticky" : "relative", zIndex: header.column.getIsPinned() ? 1 :
|
|
242
|
-
|
|
243
|
-
|
|
261
|
+
: undefined, backgroundColor: header.column.getIsPinned() ? "gray.50" : undefined, position: header.column.getIsPinned() ? "sticky" : "relative", zIndex: header.column.getIsPinned() ? 1 : undefined, _dark: {
|
|
262
|
+
backgroundColor: header.column.getIsPinned()
|
|
263
|
+
? "gray.700"
|
|
264
|
+
: undefined,
|
|
265
|
+
}, children: jsxRuntime.jsx(react$1.Button, { variant: "unstyled", children: header.isPlaceholder
|
|
266
|
+
? null
|
|
267
|
+
: reactTable.flexRender(header.column.columnDef.footer, header.getContext()) }) }, crypto.randomUUID())))] }, crypto.randomUUID()))) }));
|
|
244
268
|
};
|
|
245
269
|
|
|
246
270
|
const TableHeader = ({ canResize }) => {
|
|
@@ -250,7 +274,15 @@ const TableHeader = ({ canResize }) => {
|
|
|
250
274
|
// styling resize and pinning start
|
|
251
275
|
, {
|
|
252
276
|
// styling resize and pinning start
|
|
253
|
-
padding: "0.5rem",
|
|
277
|
+
padding: "0.5rem", ...(table.getIsSomeColumnsPinned("left")
|
|
278
|
+
? {
|
|
279
|
+
left: `0px`,
|
|
280
|
+
backgroundColor: "gray.50",
|
|
281
|
+
position: "sticky",
|
|
282
|
+
zIndex: 1,
|
|
283
|
+
_dark: { backgroundColor: "gray.700" },
|
|
284
|
+
}
|
|
285
|
+
: {}), children: jsxRuntime.jsx(react$1.Checkbox, { isChecked: table.getIsAllRowsSelected(),
|
|
254
286
|
// indeterminate: table.getIsSomeRowsSelected(),
|
|
255
287
|
onChange: table.getToggleAllRowsSelectedHandler() }) }), headerGroup.headers.map((header) => {
|
|
256
288
|
const resizeProps = {
|
|
@@ -259,29 +291,31 @@ const TableHeader = ({ canResize }) => {
|
|
|
259
291
|
onTouchStart: header.getResizeHandler(),
|
|
260
292
|
cursor: "col-resize",
|
|
261
293
|
};
|
|
262
|
-
return (jsxRuntime.
|
|
294
|
+
return (jsxRuntime.jsxs(react$1.Th, { padding: "0rem", colSpan: header.colSpan,
|
|
263
295
|
// styling resize and pinning start
|
|
264
296
|
maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, left: header.column.getIsPinned()
|
|
265
297
|
? `${header.getStart("left") + SELECTION_BOX_WIDTH}px`
|
|
266
|
-
: undefined, backgroundColor: header.column.getIsPinned() ? "gray.50" : undefined, position: header.column.getIsPinned() ? "sticky" : "relative", zIndex: header.column.getIsPinned() ? 1 :
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
298
|
+
: undefined, backgroundColor: header.column.getIsPinned() ? "gray.50" : undefined, position: header.column.getIsPinned() ? "sticky" : "relative", zIndex: header.column.getIsPinned() ? 1 : undefined, _dark: {
|
|
299
|
+
backgroundColor: header.column.getIsPinned()
|
|
300
|
+
? "gray.700"
|
|
301
|
+
: undefined,
|
|
302
|
+
},
|
|
303
|
+
// styling resize and pinning end
|
|
304
|
+
display: "grid", children: [jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(react$1.Menu, { children: [jsxRuntime.jsx(react$1.MenuButton, { as: react$1.Box, display: "flex", alignItems: "center", justifyContent: "start", _hover: { backgroundColor: "gray.100" }, _dark: { _hover: { backgroundColor: "gray.700" } }, children: jsxRuntime.jsxs(react$1.Flex, { gap: "0.5rem", alignItems: "center", children: [header.isPlaceholder
|
|
305
|
+
? null
|
|
306
|
+
: 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 && (jsxRuntime.jsx(icons.UpDownIcon, {})), 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: () => {
|
|
307
|
+
header.column.pin("left");
|
|
308
|
+
}, children: "Pin Column" })), header.column.getIsPinned() && (jsxRuntime.jsx(react$1.MenuItem, { icon: jsxRuntime.jsx(md.MdCancel, {}), onClick: () => {
|
|
309
|
+
header.column.pin(false);
|
|
310
|
+
}, children: "Cancel Pin" })), header.column.getCanSort() && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react$1.MenuItem, { icon: jsxRuntime.jsx(md.MdSort, {}), onClick: () => {
|
|
311
|
+
header.column.toggleSorting();
|
|
312
|
+
}, children: "Toggle Sorting" }), header.column.getIsSorted() && (jsxRuntime.jsx(react$1.MenuItem, { icon: jsxRuntime.jsx(io.IoMdClose, {}), onClick: () => {
|
|
313
|
+
header.column.clearSorting();
|
|
314
|
+
}, 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: {
|
|
315
|
+
borderRightColor: header.column.getIsResizing()
|
|
316
|
+
? "gray.700"
|
|
317
|
+
: "gray.400",
|
|
318
|
+
}, ...resizeProps }))] }, crypto.randomUUID()));
|
|
285
319
|
})] }, crypto.randomUUID()))) }));
|
|
286
320
|
};
|
|
287
321
|
|
|
@@ -292,7 +326,7 @@ const TablePagination = ({}) => {
|
|
|
292
326
|
|
|
293
327
|
const TextCell = ({ label, children }) => {
|
|
294
328
|
if (label) {
|
|
295
|
-
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",
|
|
329
|
+
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: [1, 2, 3], children: children }) }));
|
|
296
330
|
}
|
|
297
331
|
return (jsxRuntime.jsx(react$1.Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [1, 2, 3], children: children }));
|
|
298
332
|
};
|
package/dist/index.mjs
CHANGED
|
@@ -2,9 +2,9 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
|
2
2
|
import { createContext, useState, useEffect, useContext } from 'react';
|
|
3
3
|
import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
|
|
4
4
|
import axios from 'axios';
|
|
5
|
-
import { Popover, PopoverTrigger, IconButton, PopoverContent, PopoverArrow, PopoverBody, Flex, FormControl, Checkbox, Button, Box, Text, Input, Tooltip, Select, Container, Table as Table$1, Grid, Card, CardBody, Tfoot, Tr as Tr$1, Th, Thead, ButtonGroup } from '@chakra-ui/react';
|
|
6
|
-
import { IoMdEye } from 'react-icons/io';
|
|
7
|
-
import { MdFilterAlt, MdOutlineSort, MdFilterListAlt, MdFirstPage, MdArrowBack, MdArrowForward, MdLastPage } from 'react-icons/md';
|
|
5
|
+
import { Popover, PopoverTrigger, IconButton, PopoverContent, PopoverArrow, PopoverBody, Flex, FormControl, Checkbox, Button, Box, Text, Input, Tooltip, Select, Container, Table as Table$1, Grid, Card, CardBody, Tfoot, Tr as Tr$1, Th, Thead, Menu, MenuButton, Portal, MenuList, MenuItem, ButtonGroup } from '@chakra-ui/react';
|
|
6
|
+
import { IoMdEye, IoMdClose } from 'react-icons/io';
|
|
7
|
+
import { MdFilterAlt, MdOutlineSort, MdPushPin, MdCancel, MdSort, MdFilterListAlt, MdFirstPage, MdArrowBack, MdArrowForward, MdLastPage } from 'react-icons/md';
|
|
8
8
|
import { ChevronUpIcon, UpDownIcon, ChevronDownIcon, CloseIcon } from '@chakra-ui/icons';
|
|
9
9
|
import { Tbody, Tr, Td } from '@chakra-ui/table';
|
|
10
10
|
|
|
@@ -93,7 +93,7 @@ const DataTable = ({ columns, url, enableRowSelection = true, enableMultiRowSele
|
|
|
93
93
|
columnOrder,
|
|
94
94
|
},
|
|
95
95
|
defaultColumn: {
|
|
96
|
-
size:
|
|
96
|
+
size: 150, //starting column size
|
|
97
97
|
minSize: 10, //enforced during column resizing
|
|
98
98
|
maxSize: 10000, //enforced during column resizing
|
|
99
99
|
},
|
|
@@ -190,11 +190,19 @@ const Table = ({ children }) => {
|
|
|
190
190
|
const TableBody = () => {
|
|
191
191
|
const { table } = useContext(TableContext);
|
|
192
192
|
return (jsx(Tbody, { children: table.getRowModel().rows.map((row) => {
|
|
193
|
-
return (jsxs(Tr, { display: "flex", children: [jsx(Td
|
|
193
|
+
return (jsxs(Tr, { display: "flex", _hover: { backgroundColor: "rgba(178,178,178,0.1)" }, zIndex: 1, children: [jsx(Td
|
|
194
194
|
// styling resize and pinning start
|
|
195
195
|
, {
|
|
196
196
|
// styling resize and pinning start
|
|
197
|
-
padding: "0.5rem",
|
|
197
|
+
padding: "0.5rem", ...(table.getIsSomeColumnsPinned("left")
|
|
198
|
+
? {
|
|
199
|
+
left: `0px`,
|
|
200
|
+
backgroundColor: "gray.50",
|
|
201
|
+
position: "sticky",
|
|
202
|
+
zIndex: 1,
|
|
203
|
+
_dark: { backgroundColor: "gray.700" },
|
|
204
|
+
}
|
|
205
|
+
: {}), children: jsx(Checkbox, { isChecked: row.getIsSelected(),
|
|
198
206
|
disabled: !row.getCanSelect(),
|
|
199
207
|
// indeterminate: row.getIsSomeSelected(),
|
|
200
208
|
onChange: row.getToggleSelectedHandler() }) }), row.getVisibleCells().map((cell) => {
|
|
@@ -202,7 +210,11 @@ const TableBody = () => {
|
|
|
202
210
|
// styling resize and pinning start
|
|
203
211
|
maxWidth: `${cell.column.getSize()}px`, width: `${cell.column.getSize()}px`, left: cell.column.getIsPinned()
|
|
204
212
|
? `${cell.column.getStart("left") + 32}px`
|
|
205
|
-
: undefined, backgroundColor: cell.column.getIsPinned() ? "gray.50" :
|
|
213
|
+
: undefined, backgroundColor: cell.column.getIsPinned() ? "gray.50" : undefined, position: cell.column.getIsPinned() ? "sticky" : "relative", zIndex: cell.column.getIsPinned() ? 1 : 0, _dark: {
|
|
214
|
+
backgroundColor: cell.column.getIsPinned()
|
|
215
|
+
? "gray.700"
|
|
216
|
+
: undefined,
|
|
217
|
+
}, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, crypto.randomUUID()));
|
|
206
218
|
})] }, crypto.randomUUID()));
|
|
207
219
|
}) }));
|
|
208
220
|
};
|
|
@@ -230,15 +242,27 @@ const TableFooter = () => {
|
|
|
230
242
|
// styling resize and pinning start
|
|
231
243
|
, {
|
|
232
244
|
// styling resize and pinning start
|
|
233
|
-
padding: "0.5rem",
|
|
245
|
+
padding: "0.5rem", ...(table.getIsSomeColumnsPinned("left")
|
|
246
|
+
? {
|
|
247
|
+
left: `0px`,
|
|
248
|
+
backgroundColor: "gray.50",
|
|
249
|
+
position: "sticky",
|
|
250
|
+
zIndex: 1,
|
|
251
|
+
_dark: { backgroundColor: "gray.700" },
|
|
252
|
+
}
|
|
253
|
+
: {}), children: jsx(Checkbox, { isChecked: table.getIsAllRowsSelected(),
|
|
234
254
|
// indeterminate: table.getIsSomeRowsSelected(),
|
|
235
255
|
onChange: table.getToggleAllRowsSelectedHandler() }) }), footerGroup.headers.map((header) => (jsx(Th, { padding: "0rem", colSpan: header.colSpan,
|
|
236
256
|
// styling resize and pinning start
|
|
237
257
|
maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, left: header.column.getIsPinned()
|
|
238
258
|
? `${header.getStart("left") + SELECTION_BOX_WIDTH}px`
|
|
239
|
-
: undefined, backgroundColor: header.column.getIsPinned() ? "gray.50" : undefined, position: header.column.getIsPinned() ? "sticky" : "relative", zIndex: header.column.getIsPinned() ? 1 :
|
|
240
|
-
|
|
241
|
-
|
|
259
|
+
: undefined, backgroundColor: header.column.getIsPinned() ? "gray.50" : undefined, position: header.column.getIsPinned() ? "sticky" : "relative", zIndex: header.column.getIsPinned() ? 1 : undefined, _dark: {
|
|
260
|
+
backgroundColor: header.column.getIsPinned()
|
|
261
|
+
? "gray.700"
|
|
262
|
+
: undefined,
|
|
263
|
+
}, children: jsx(Button, { variant: "unstyled", children: header.isPlaceholder
|
|
264
|
+
? null
|
|
265
|
+
: flexRender(header.column.columnDef.footer, header.getContext()) }) }, crypto.randomUUID())))] }, crypto.randomUUID()))) }));
|
|
242
266
|
};
|
|
243
267
|
|
|
244
268
|
const TableHeader = ({ canResize }) => {
|
|
@@ -248,7 +272,15 @@ const TableHeader = ({ canResize }) => {
|
|
|
248
272
|
// styling resize and pinning start
|
|
249
273
|
, {
|
|
250
274
|
// styling resize and pinning start
|
|
251
|
-
padding: "0.5rem",
|
|
275
|
+
padding: "0.5rem", ...(table.getIsSomeColumnsPinned("left")
|
|
276
|
+
? {
|
|
277
|
+
left: `0px`,
|
|
278
|
+
backgroundColor: "gray.50",
|
|
279
|
+
position: "sticky",
|
|
280
|
+
zIndex: 1,
|
|
281
|
+
_dark: { backgroundColor: "gray.700" },
|
|
282
|
+
}
|
|
283
|
+
: {}), children: jsx(Checkbox, { isChecked: table.getIsAllRowsSelected(),
|
|
252
284
|
// indeterminate: table.getIsSomeRowsSelected(),
|
|
253
285
|
onChange: table.getToggleAllRowsSelectedHandler() }) }), headerGroup.headers.map((header) => {
|
|
254
286
|
const resizeProps = {
|
|
@@ -257,29 +289,31 @@ const TableHeader = ({ canResize }) => {
|
|
|
257
289
|
onTouchStart: header.getResizeHandler(),
|
|
258
290
|
cursor: "col-resize",
|
|
259
291
|
};
|
|
260
|
-
return (
|
|
292
|
+
return (jsxs(Th, { padding: "0rem", colSpan: header.colSpan,
|
|
261
293
|
// styling resize and pinning start
|
|
262
294
|
maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, left: header.column.getIsPinned()
|
|
263
295
|
? `${header.getStart("left") + SELECTION_BOX_WIDTH}px`
|
|
264
|
-
: undefined, backgroundColor: header.column.getIsPinned() ? "gray.50" : undefined, position: header.column.getIsPinned() ? "sticky" : "relative", zIndex: header.column.getIsPinned() ? 1 :
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
296
|
+
: undefined, backgroundColor: header.column.getIsPinned() ? "gray.50" : undefined, position: header.column.getIsPinned() ? "sticky" : "relative", zIndex: header.column.getIsPinned() ? 1 : undefined, _dark: {
|
|
297
|
+
backgroundColor: header.column.getIsPinned()
|
|
298
|
+
? "gray.700"
|
|
299
|
+
: undefined,
|
|
300
|
+
},
|
|
301
|
+
// styling resize and pinning end
|
|
302
|
+
display: "grid", children: [jsx(Fragment, { children: jsxs(Menu, { children: [jsx(MenuButton, { as: Box, display: "flex", alignItems: "center", justifyContent: "start", _hover: { backgroundColor: "gray.100" }, _dark: { _hover: { backgroundColor: "gray.700" } }, children: jsxs(Flex, { gap: "0.5rem", alignItems: "center", children: [header.isPlaceholder
|
|
303
|
+
? null
|
|
304
|
+
: flexRender(header.column.columnDef.header, header.getContext()), jsx(Box, { children: header.column.getCanSort() && (jsxs(Fragment, { children: [header.column.getIsSorted() === false && (jsx(UpDownIcon, {})), 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: () => {
|
|
305
|
+
header.column.pin("left");
|
|
306
|
+
}, children: "Pin Column" })), header.column.getIsPinned() && (jsx(MenuItem, { icon: jsx(MdCancel, {}), onClick: () => {
|
|
307
|
+
header.column.pin(false);
|
|
308
|
+
}, children: "Cancel Pin" })), header.column.getCanSort() && (jsxs(Fragment, { children: [jsx(MenuItem, { icon: jsx(MdSort, {}), onClick: () => {
|
|
309
|
+
header.column.toggleSorting();
|
|
310
|
+
}, children: "Toggle Sorting" }), header.column.getIsSorted() && (jsx(MenuItem, { icon: jsx(IoMdClose, {}), onClick: () => {
|
|
311
|
+
header.column.clearSorting();
|
|
312
|
+
}, 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: {
|
|
313
|
+
borderRightColor: header.column.getIsResizing()
|
|
314
|
+
? "gray.700"
|
|
315
|
+
: "gray.400",
|
|
316
|
+
}, ...resizeProps }))] }, crypto.randomUUID()));
|
|
283
317
|
})] }, crypto.randomUUID()))) }));
|
|
284
318
|
};
|
|
285
319
|
|
|
@@ -290,7 +324,7 @@ const TablePagination = ({}) => {
|
|
|
290
324
|
|
|
291
325
|
const TextCell = ({ label, children }) => {
|
|
292
326
|
if (label) {
|
|
293
|
-
return (jsx(Tooltip, { label: jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [5], children: label }), placement: "auto", children: jsx(Text, { as: "span",
|
|
327
|
+
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: [1, 2, 3], children: children }) }));
|
|
294
328
|
}
|
|
295
329
|
return (jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [1, 2, 3], children: children }));
|
|
296
330
|
};
|