@bsol-oss/react-datatable5 1.0.13 → 1.0.15
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.d.ts +4 -2
- package/dist/index.js +93 -29
- package/dist/index.mjs +96 -32
- package/dist/types/components/TableCards.d.ts +3 -1
- package/dist/types/stories/DataTable.stories.d.ts +1 -0
- package/dist/types/stories/TablePinningShowcase.d.ts +2 -0
- package/package.json +1 -1
package/README.md
CHANGED
package/dist/index.d.ts
CHANGED
|
@@ -49,7 +49,9 @@ interface TableCardContainerProps {
|
|
|
49
49
|
}
|
|
50
50
|
declare const TableCardContainer: ({ children, ...props }: TableCardContainerProps) => react_jsx_runtime.JSX.Element;
|
|
51
51
|
|
|
52
|
-
|
|
52
|
+
interface TableCardsProps {
|
|
53
|
+
}
|
|
54
|
+
declare const TableCards: ({}: TableCardsProps) => react_jsx_runtime.JSX.Element;
|
|
53
55
|
|
|
54
56
|
declare const TableFilter: () => react_jsx_runtime.JSX.Element;
|
|
55
57
|
|
|
@@ -90,4 +92,4 @@ interface TextCellProps {
|
|
|
90
92
|
}
|
|
91
93
|
declare const TextCell: ({ label, children }: TextCellProps) => react_jsx_runtime.JSX.Element;
|
|
92
94
|
|
|
93
|
-
export { type DataResponse, DataTable, type DataTableProps, EditFilterButton, EditSortingButton, EditViewButton, PageSizeControl, type PageSizeControlProps, type PaginationProps, ResetFilteringButton, ResetSortingButton, type Result, Table, TableBody, TableCardContainer, type TableCardContainerProps, TableCards, TableFilter, TableFooter, TableHeader, type TableHeaderProps, TablePagination, type TableProps, TableSorter, TextCell, type TextCellProps, useDataFromUrl, type useDataFromUrlProps, type useDataFromUrlReturn, useDataTable };
|
|
95
|
+
export { type DataResponse, DataTable, type DataTableProps, EditFilterButton, EditSortingButton, EditViewButton, PageSizeControl, type PageSizeControlProps, type PaginationProps, ResetFilteringButton, ResetSortingButton, type Result, Table, TableBody, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableFilter, TableFooter, TableHeader, type TableHeaderProps, TablePagination, type TableProps, TableSorter, TextCell, type TextCellProps, useDataFromUrl, type useDataFromUrlProps, type useDataFromUrlReturn, useDataTable };
|
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
|
},
|
|
@@ -186,18 +186,38 @@ const PageSizeControl = ({ pageSizes = [10, 20, 30, 40, 50], }) => {
|
|
|
186
186
|
|
|
187
187
|
const Table = ({ children }) => {
|
|
188
188
|
const { table } = useDataTable();
|
|
189
|
-
return (jsxRuntime.jsx(react$1.Container, { maxW: "100%",
|
|
189
|
+
return (jsxRuntime.jsx(react$1.Container, { padding: '0rem', maxW: "100%", overflowX: "scroll", children: jsxRuntime.jsx(react$1.Table, { width: table.getCenterTotalSize(), variant: "simple", children: children }) }));
|
|
190
190
|
};
|
|
191
191
|
|
|
192
192
|
const TableBody = () => {
|
|
193
193
|
const { table: table$1 } = react.useContext(TableContext);
|
|
194
|
-
console.log(table$1.getSelectedRowModel().rows, "jfaisodij");
|
|
195
194
|
return (jsxRuntime.jsx(table.Tbody, { children: table$1.getRowModel().rows.map((row) => {
|
|
196
|
-
|
|
197
|
-
|
|
195
|
+
return (jsxRuntime.jsxs(table.Tr, { display: "flex", _hover: { backgroundColor: "rgba(178,178,178,0.1)" }, zIndex: 1, children: [jsxRuntime.jsx(table.Td
|
|
196
|
+
// styling resize and pinning start
|
|
197
|
+
, {
|
|
198
|
+
// styling resize and pinning start
|
|
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(),
|
|
198
208
|
disabled: !row.getCanSelect(),
|
|
199
209
|
// indeterminate: row.getIsSomeSelected(),
|
|
200
|
-
onChange: row.getToggleSelectedHandler() }) }), row.getVisibleCells().map((cell) =>
|
|
210
|
+
onChange: row.getToggleSelectedHandler() }) }), row.getVisibleCells().map((cell) => {
|
|
211
|
+
return (jsxRuntime.jsx(table.Td, { padding: "0rem",
|
|
212
|
+
// styling resize and pinning start
|
|
213
|
+
maxWidth: `${cell.column.getSize()}px`, width: `${cell.column.getSize()}px`, left: cell.column.getIsPinned()
|
|
214
|
+
? `${cell.column.getStart("left") + 32}px`
|
|
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()));
|
|
220
|
+
})] }, crypto.randomUUID()));
|
|
201
221
|
}) }));
|
|
202
222
|
};
|
|
203
223
|
|
|
@@ -205,30 +225,64 @@ const TableCardContainer = ({ children, ...props }) => {
|
|
|
205
225
|
return (jsxRuntime.jsx(react$1.Grid, { gridTemplateColumns: ["1fr", "1fr 1fr", "1fr 1fr 1fr"], gap: "0.5rem", ...props, children: children }));
|
|
206
226
|
};
|
|
207
227
|
|
|
208
|
-
const TableCards = () => {
|
|
228
|
+
const TableCards = ({}) => {
|
|
209
229
|
const { table } = react.useContext(TableContext);
|
|
210
230
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: table.getRowModel().rows.map((row) => {
|
|
211
231
|
return (jsxRuntime.jsx(react$1.Card, { children: jsxRuntime.jsxs(react$1.CardBody, { display: "flex", flexFlow: "column", gap: "0.5rem", children: [jsxRuntime.jsx(react$1.Checkbox, { isChecked: row.getIsSelected(),
|
|
212
232
|
disabled: !row.getCanSelect(),
|
|
213
233
|
// indeterminate: row.getIsSomeSelected(),
|
|
214
234
|
onChange: row.getToggleSelectedHandler() }), row.getVisibleCells().map((cell) => {
|
|
215
|
-
return (jsxRuntime.
|
|
235
|
+
return (jsxRuntime.jsx(react$1.Box, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }));
|
|
216
236
|
})] }) }, crypto.randomUUID()));
|
|
217
237
|
}) }));
|
|
218
238
|
};
|
|
219
239
|
|
|
220
240
|
const TableFooter = () => {
|
|
221
241
|
const table = useDataTable().table;
|
|
222
|
-
|
|
242
|
+
const SELECTION_BOX_WIDTH = 32;
|
|
243
|
+
return (jsxRuntime.jsx(react$1.Tfoot, { children: table.getFooterGroups().map((footerGroup) => (jsxRuntime.jsxs(react$1.Tr, { display: "flex", children: [jsxRuntime.jsx(react$1.Th
|
|
244
|
+
// styling resize and pinning start
|
|
245
|
+
, {
|
|
246
|
+
// styling resize and pinning start
|
|
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(),
|
|
223
256
|
// indeterminate: table.getIsSomeRowsSelected(),
|
|
224
|
-
onChange: table.getToggleAllRowsSelectedHandler() }) }), footerGroup.headers.map((header) => (jsxRuntime.jsx(react$1.Th, { colSpan: header.colSpan,
|
|
225
|
-
|
|
226
|
-
|
|
257
|
+
onChange: table.getToggleAllRowsSelectedHandler() }) }), footerGroup.headers.map((header) => (jsxRuntime.jsx(react$1.Th, { padding: "0rem", colSpan: header.colSpan,
|
|
258
|
+
// styling resize and pinning start
|
|
259
|
+
maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, left: header.column.getIsPinned()
|
|
260
|
+
? `${header.getStart("left") + SELECTION_BOX_WIDTH}px`
|
|
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()))) }));
|
|
227
268
|
};
|
|
228
269
|
|
|
229
270
|
const TableHeader = ({ canResize }) => {
|
|
230
271
|
const { table } = useDataTable();
|
|
231
|
-
|
|
272
|
+
const SELECTION_BOX_WIDTH = 32;
|
|
273
|
+
return (jsxRuntime.jsx(react$1.Thead, { children: table.getHeaderGroups().map((headerGroup) => (jsxRuntime.jsxs(react$1.Tr, { display: "flex", children: [jsxRuntime.jsx(react$1.Th
|
|
274
|
+
// styling resize and pinning start
|
|
275
|
+
, {
|
|
276
|
+
// styling resize and pinning start
|
|
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(),
|
|
232
286
|
// indeterminate: table.getIsSomeRowsSelected(),
|
|
233
287
|
onChange: table.getToggleAllRowsSelectedHandler() }) }), headerGroup.headers.map((header) => {
|
|
234
288
|
const resizeProps = {
|
|
@@ -237,21 +291,31 @@ const TableHeader = ({ canResize }) => {
|
|
|
237
291
|
onTouchStart: header.getResizeHandler(),
|
|
238
292
|
cursor: "col-resize",
|
|
239
293
|
};
|
|
240
|
-
return (jsxRuntime.
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
294
|
+
return (jsxRuntime.jsxs(react$1.Th, { padding: "0rem", colSpan: header.colSpan,
|
|
295
|
+
// styling resize and pinning start
|
|
296
|
+
maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, left: header.column.getIsPinned()
|
|
297
|
+
? `${header.getStart("left") + SELECTION_BOX_WIDTH}px`
|
|
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()));
|
|
255
319
|
})] }, crypto.randomUUID()))) }));
|
|
256
320
|
};
|
|
257
321
|
|
|
@@ -262,7 +326,7 @@ const TablePagination = ({}) => {
|
|
|
262
326
|
|
|
263
327
|
const TextCell = ({ label, children }) => {
|
|
264
328
|
if (label) {
|
|
265
|
-
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 }) }));
|
|
266
330
|
}
|
|
267
331
|
return (jsxRuntime.jsx(react$1.Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [1, 2, 3], children: children }));
|
|
268
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
|
},
|
|
@@ -184,18 +184,38 @@ const PageSizeControl = ({ pageSizes = [10, 20, 30, 40, 50], }) => {
|
|
|
184
184
|
|
|
185
185
|
const Table = ({ children }) => {
|
|
186
186
|
const { table } = useDataTable();
|
|
187
|
-
return (jsx(Container, { maxW: "100%",
|
|
187
|
+
return (jsx(Container, { padding: '0rem', maxW: "100%", overflowX: "scroll", children: jsx(Table$1, { width: table.getCenterTotalSize(), variant: "simple", children: children }) }));
|
|
188
188
|
};
|
|
189
189
|
|
|
190
190
|
const TableBody = () => {
|
|
191
191
|
const { table } = useContext(TableContext);
|
|
192
|
-
console.log(table.getSelectedRowModel().rows, "jfaisodij");
|
|
193
192
|
return (jsx(Tbody, { children: table.getRowModel().rows.map((row) => {
|
|
194
|
-
|
|
195
|
-
|
|
193
|
+
return (jsxs(Tr, { display: "flex", _hover: { backgroundColor: "rgba(178,178,178,0.1)" }, zIndex: 1, children: [jsx(Td
|
|
194
|
+
// styling resize and pinning start
|
|
195
|
+
, {
|
|
196
|
+
// styling resize and pinning start
|
|
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(),
|
|
196
206
|
disabled: !row.getCanSelect(),
|
|
197
207
|
// indeterminate: row.getIsSomeSelected(),
|
|
198
|
-
onChange: row.getToggleSelectedHandler() }) }), row.getVisibleCells().map((cell) =>
|
|
208
|
+
onChange: row.getToggleSelectedHandler() }) }), row.getVisibleCells().map((cell) => {
|
|
209
|
+
return (jsx(Td, { padding: "0rem",
|
|
210
|
+
// styling resize and pinning start
|
|
211
|
+
maxWidth: `${cell.column.getSize()}px`, width: `${cell.column.getSize()}px`, left: cell.column.getIsPinned()
|
|
212
|
+
? `${cell.column.getStart("left") + 32}px`
|
|
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()));
|
|
218
|
+
})] }, crypto.randomUUID()));
|
|
199
219
|
}) }));
|
|
200
220
|
};
|
|
201
221
|
|
|
@@ -203,30 +223,64 @@ const TableCardContainer = ({ children, ...props }) => {
|
|
|
203
223
|
return (jsx(Grid, { gridTemplateColumns: ["1fr", "1fr 1fr", "1fr 1fr 1fr"], gap: "0.5rem", ...props, children: children }));
|
|
204
224
|
};
|
|
205
225
|
|
|
206
|
-
const TableCards = () => {
|
|
226
|
+
const TableCards = ({}) => {
|
|
207
227
|
const { table } = useContext(TableContext);
|
|
208
228
|
return (jsx(Fragment, { children: table.getRowModel().rows.map((row) => {
|
|
209
229
|
return (jsx(Card, { children: jsxs(CardBody, { display: "flex", flexFlow: "column", gap: "0.5rem", children: [jsx(Checkbox, { isChecked: row.getIsSelected(),
|
|
210
230
|
disabled: !row.getCanSelect(),
|
|
211
231
|
// indeterminate: row.getIsSomeSelected(),
|
|
212
232
|
onChange: row.getToggleSelectedHandler() }), row.getVisibleCells().map((cell) => {
|
|
213
|
-
return (
|
|
233
|
+
return (jsx(Box, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }));
|
|
214
234
|
})] }) }, crypto.randomUUID()));
|
|
215
235
|
}) }));
|
|
216
236
|
};
|
|
217
237
|
|
|
218
238
|
const TableFooter = () => {
|
|
219
239
|
const table = useDataTable().table;
|
|
220
|
-
|
|
240
|
+
const SELECTION_BOX_WIDTH = 32;
|
|
241
|
+
return (jsx(Tfoot, { children: table.getFooterGroups().map((footerGroup) => (jsxs(Tr$1, { display: "flex", children: [jsx(Th
|
|
242
|
+
// styling resize and pinning start
|
|
243
|
+
, {
|
|
244
|
+
// styling resize and pinning start
|
|
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(),
|
|
221
254
|
// indeterminate: table.getIsSomeRowsSelected(),
|
|
222
|
-
onChange: table.getToggleAllRowsSelectedHandler() }) }), footerGroup.headers.map((header) => (jsx(Th, { colSpan: header.colSpan,
|
|
223
|
-
|
|
224
|
-
|
|
255
|
+
onChange: table.getToggleAllRowsSelectedHandler() }) }), footerGroup.headers.map((header) => (jsx(Th, { padding: "0rem", colSpan: header.colSpan,
|
|
256
|
+
// styling resize and pinning start
|
|
257
|
+
maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, left: header.column.getIsPinned()
|
|
258
|
+
? `${header.getStart("left") + SELECTION_BOX_WIDTH}px`
|
|
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()))) }));
|
|
225
266
|
};
|
|
226
267
|
|
|
227
268
|
const TableHeader = ({ canResize }) => {
|
|
228
269
|
const { table } = useDataTable();
|
|
229
|
-
|
|
270
|
+
const SELECTION_BOX_WIDTH = 32;
|
|
271
|
+
return (jsx(Thead, { children: table.getHeaderGroups().map((headerGroup) => (jsxs(Tr$1, { display: "flex", children: [jsx(Th
|
|
272
|
+
// styling resize and pinning start
|
|
273
|
+
, {
|
|
274
|
+
// styling resize and pinning start
|
|
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(),
|
|
230
284
|
// indeterminate: table.getIsSomeRowsSelected(),
|
|
231
285
|
onChange: table.getToggleAllRowsSelectedHandler() }) }), headerGroup.headers.map((header) => {
|
|
232
286
|
const resizeProps = {
|
|
@@ -235,21 +289,31 @@ const TableHeader = ({ canResize }) => {
|
|
|
235
289
|
onTouchStart: header.getResizeHandler(),
|
|
236
290
|
cursor: "col-resize",
|
|
237
291
|
};
|
|
238
|
-
return (
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
292
|
+
return (jsxs(Th, { padding: "0rem", colSpan: header.colSpan,
|
|
293
|
+
// styling resize and pinning start
|
|
294
|
+
maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, left: header.column.getIsPinned()
|
|
295
|
+
? `${header.getStart("left") + SELECTION_BOX_WIDTH}px`
|
|
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()));
|
|
253
317
|
})] }, crypto.randomUUID()))) }));
|
|
254
318
|
};
|
|
255
319
|
|
|
@@ -260,7 +324,7 @@ const TablePagination = ({}) => {
|
|
|
260
324
|
|
|
261
325
|
const TextCell = ({ label, children }) => {
|
|
262
326
|
if (label) {
|
|
263
|
-
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 }) }));
|
|
264
328
|
}
|
|
265
329
|
return (jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [1, 2, 3], children: children }));
|
|
266
330
|
};
|
|
@@ -8,6 +8,7 @@ declare const meta: {
|
|
|
8
8
|
export default meta;
|
|
9
9
|
type Story = StoryObj<typeof meta>;
|
|
10
10
|
export declare const TableView: Story;
|
|
11
|
+
export declare const TablePinningView: Story;
|
|
11
12
|
export declare const CardView: {
|
|
12
13
|
render: () => import("react/jsx-runtime").JSX.Element;
|
|
13
14
|
};
|