@bsol-oss/react-datatable5 3.0.1 → 3.1.0
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 +12 -3
- package/dist/index.d.ts +8 -4
- package/dist/index.js +19 -19
- package/dist/index.mjs +19 -19
- package/dist/types/components/DataTable/DefaultTable.d.ts +2 -1
- package/dist/types/components/DataTable/TableBody.d.ts +2 -1
- package/dist/types/components/DataTable/TableFooter.d.ts +2 -1
- package/dist/types/components/DataTable/TableHeader.d.ts +2 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -8,10 +8,19 @@ npm install @tanstack/react-table @chakra-ui/react @bsol-oss/react-datatable5
|
|
|
8
8
|
|
|
9
9
|
## Usage
|
|
10
10
|
|
|
11
|
+
### Hook
|
|
12
|
+
|
|
13
|
+
The `DataTable` and `DataTableServer` utilize hook to add props.
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
const datatable = useDataTable();
|
|
17
|
+
const datatableServer = useDataTableServer({url: "<some-url>"});
|
|
18
|
+
```
|
|
19
|
+
|
|
11
20
|
### DataTable
|
|
12
21
|
|
|
13
22
|
```tsx
|
|
14
|
-
<DataTable columns={columns} data={data}>
|
|
23
|
+
<DataTable columns={columns} data={data} {...datatable}>
|
|
15
24
|
<Flex>
|
|
16
25
|
<TablePagination />
|
|
17
26
|
<EditViewButton />
|
|
@@ -36,7 +45,7 @@ npm install @tanstack/react-table @chakra-ui/react @bsol-oss/react-datatable5
|
|
|
36
45
|
```tsx
|
|
37
46
|
<DataTableServer
|
|
38
47
|
columns={columns}
|
|
39
|
-
|
|
48
|
+
{...datatable}
|
|
40
49
|
>
|
|
41
50
|
<Flex>
|
|
42
51
|
<TablePagination />
|
|
@@ -73,7 +82,7 @@ GET http://localhost:8333/api/v1/gpt/chat/history/all?pagination={"offset":0,"ro
|
|
|
73
82
|
### DefaultTable
|
|
74
83
|
|
|
75
84
|
```tsx
|
|
76
|
-
<DataTable columns={columns} data={data}>
|
|
85
|
+
<DataTable columns={columns} data={data} {...datatable}>
|
|
77
86
|
<DefaultTable />
|
|
78
87
|
</DataTable>
|
|
79
88
|
```
|
package/dist/index.d.ts
CHANGED
|
@@ -228,8 +228,9 @@ declare const TableControls: ({ totalText, showFilter, fitTableWidth, fitTableHe
|
|
|
228
228
|
|
|
229
229
|
interface DefaultTableProps extends TableControlsProps {
|
|
230
230
|
showFooter?: boolean;
|
|
231
|
+
showSelector?: boolean;
|
|
231
232
|
}
|
|
232
|
-
declare const DefaultTable: ({ totalText, showFilter, showFooter, fitTableWidth, fitTableHeight, isMobile, filterOptions, showFilterTags, showFilterName, showReload, extraItems, }: DefaultTableProps) => react_jsx_runtime.JSX.Element;
|
|
233
|
+
declare const DefaultTable: ({ totalText, showFilter, showFooter, fitTableWidth, fitTableHeight, isMobile, filterOptions, showFilterTags, showFilterName, showReload, showSelector, extraItems, }: DefaultTableProps) => react_jsx_runtime.JSX.Element;
|
|
233
234
|
|
|
234
235
|
interface TableProps extends TableProps$1 {
|
|
235
236
|
showLoading?: boolean;
|
|
@@ -243,6 +244,7 @@ interface TableBodyProps {
|
|
|
243
244
|
light: string;
|
|
244
245
|
dark: string;
|
|
245
246
|
};
|
|
247
|
+
showSelector?: boolean;
|
|
246
248
|
}
|
|
247
249
|
interface TableRowSelectorProps<TData> {
|
|
248
250
|
index: number;
|
|
@@ -253,7 +255,7 @@ interface TableRowSelectorProps<TData> {
|
|
|
253
255
|
dark: string;
|
|
254
256
|
};
|
|
255
257
|
}
|
|
256
|
-
declare const TableBody: ({ pinnedBgColor, }: TableBodyProps) => react_jsx_runtime.JSX.Element;
|
|
258
|
+
declare const TableBody: ({ pinnedBgColor, showSelector, }: TableBodyProps) => react_jsx_runtime.JSX.Element;
|
|
257
259
|
|
|
258
260
|
interface TableCardContainerProps extends GridProps {
|
|
259
261
|
children: JSX.Element;
|
|
@@ -279,8 +281,9 @@ interface TableFooterProps {
|
|
|
279
281
|
light: string;
|
|
280
282
|
dark: string;
|
|
281
283
|
};
|
|
284
|
+
showSelector?: boolean;
|
|
282
285
|
}
|
|
283
|
-
declare const TableFooter: ({ pinnedBgColor, }: TableFooterProps) => react_jsx_runtime.JSX.Element;
|
|
286
|
+
declare const TableFooter: ({ pinnedBgColor, showSelector, }: TableFooterProps) => react_jsx_runtime.JSX.Element;
|
|
284
287
|
|
|
285
288
|
interface TableHeaderProps {
|
|
286
289
|
canResize?: boolean;
|
|
@@ -288,8 +291,9 @@ interface TableHeaderProps {
|
|
|
288
291
|
light: string;
|
|
289
292
|
dark: string;
|
|
290
293
|
};
|
|
294
|
+
showSelector?: boolean;
|
|
291
295
|
}
|
|
292
|
-
declare const TableHeader: ({ canResize, pinnedBgColor, }: TableHeaderProps) => react_jsx_runtime.JSX.Element;
|
|
296
|
+
declare const TableHeader: ({ canResize, pinnedBgColor, showSelector, }: TableHeaderProps) => react_jsx_runtime.JSX.Element;
|
|
293
297
|
|
|
294
298
|
interface TableLoadingComponentProps {
|
|
295
299
|
render: (loading: boolean) => JSX.Element;
|
package/dist/index.js
CHANGED
|
@@ -85,7 +85,7 @@ const PageSizeControl = ({ pageSizes = [10, 20, 30, 40, 50], }) => {
|
|
|
85
85
|
const { table } = useDataTableContext();
|
|
86
86
|
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: () => {
|
|
87
87
|
table.setPageSize(Number(pageSize));
|
|
88
|
-
}, children: pageSize },
|
|
88
|
+
}, children: pageSize }, `chakra-table-pageSize-${pageSize}`))) })] }) }));
|
|
89
89
|
};
|
|
90
90
|
|
|
91
91
|
const ResetFilteringButton = ({ text = "Reset Filtering", }) => {
|
|
@@ -330,7 +330,7 @@ const DataTableServer = ({ columns, enableRowSelection = true, enableMultiRowSel
|
|
|
330
330
|
}, children: children }));
|
|
331
331
|
};
|
|
332
332
|
|
|
333
|
-
const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
|
|
333
|
+
const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, showSelector = false, }) => {
|
|
334
334
|
const { table: table$1 } = react$1.useContext(TableContext);
|
|
335
335
|
const SELECTION_BOX_WIDTH = 20;
|
|
336
336
|
const [hoveredRow, setHoveredRow] = react$1.useState(-1);
|
|
@@ -338,7 +338,7 @@ const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, })
|
|
|
338
338
|
setHoveredRow(index);
|
|
339
339
|
};
|
|
340
340
|
return (jsxRuntime.jsx(table.Tbody, { children: table$1.getRowModel().rows.map((row, index) => {
|
|
341
|
-
return (jsxRuntime.jsxs(table.Tr, { display: "flex", _hover: { backgroundColor: "rgba(178,178,178,0.1)" }, zIndex: 1, onMouseEnter: () => handleRowHover(index), onMouseLeave: () => handleRowHover(-1), children: [jsxRuntime.jsx(TableRowSelector, { index: index, row: row, hoveredRow: hoveredRow }), row.getVisibleCells().map((cell) => {
|
|
341
|
+
return (jsxRuntime.jsxs(table.Tr, { display: "flex", _hover: { backgroundColor: "rgba(178,178,178,0.1)" }, zIndex: 1, onMouseEnter: () => handleRowHover(index), onMouseLeave: () => handleRowHover(-1), children: [showSelector && (jsxRuntime.jsx(TableRowSelector, { index: index, row: row, hoveredRow: hoveredRow })), row.getVisibleCells().map((cell, index) => {
|
|
342
342
|
return (jsxRuntime.jsx(table.Td, { padding: `${table$1.getDensityValue()}px`,
|
|
343
343
|
// styling resize and pinning start
|
|
344
344
|
maxWidth: `${cell.column.getSize()}px`, width: `${cell.column.getSize()}px`, left: cell.column.getIsPinned()
|
|
@@ -347,8 +347,8 @@ const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, })
|
|
|
347
347
|
backgroundColor: cell.column.getIsPinned()
|
|
348
348
|
? pinnedBgColor.dark
|
|
349
349
|
: undefined,
|
|
350
|
-
}, children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) },
|
|
351
|
-
})] },
|
|
350
|
+
}, children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, `chakra-table-rowcell-${cell.id}-${index}`));
|
|
351
|
+
})] }, `chakra-table-row-${row.id}`));
|
|
352
352
|
}) }));
|
|
353
353
|
};
|
|
354
354
|
const TableRowSelector = ({ index, row, hoveredRow, pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
|
|
@@ -382,11 +382,11 @@ const TableRowSelector = ({ index, row, hoveredRow, pinnedBgColor = { light: "gr
|
|
|
382
382
|
const TableControls = ({ totalText = "Total:", showFilter = false, fitTableWidth = false, fitTableHeight = false, isMobile = false, children = jsxRuntime.jsx(jsxRuntime.Fragment, {}), showFilterName = false, showFilterTags = false, showReload = false, filterOptions = [], extraItems = jsxRuntime.jsx(jsxRuntime.Fragment, {}), }) => {
|
|
383
383
|
const { loading, hasError } = useDataTableContext();
|
|
384
384
|
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: "0.5rem", 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" })] })), showReload && jsxRuntime.jsx(ReloadButton, {}), extraItems] })] }), jsxRuntime.jsx(react.Flex, { gridColumn: "1 / span 2", flexFlow: "column", gap: "0.5rem", children: filterOptions.map((column) => {
|
|
385
|
-
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 })] }));
|
|
385
|
+
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 })] }, column));
|
|
386
386
|
}) }), 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, {}) })] }));
|
|
387
387
|
};
|
|
388
388
|
|
|
389
|
-
const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
|
|
389
|
+
const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, showSelector = false, }) => {
|
|
390
390
|
const table = useDataTableContext().table;
|
|
391
391
|
const SELECTION_BOX_WIDTH = 20;
|
|
392
392
|
const [hoveredCheckBox, setHoveredCheckBox] = react$1.useState(false);
|
|
@@ -402,7 +402,7 @@ const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }
|
|
|
402
402
|
}
|
|
403
403
|
return false;
|
|
404
404
|
};
|
|
405
|
-
return (jsxRuntime.jsx(react.Tfoot, { children: table.getFooterGroups().map((footerGroup) => (jsxRuntime.jsxs(react.Tr, { display: "flex", children: [jsxRuntime.jsxs(react.Th
|
|
405
|
+
return (jsxRuntime.jsx(react.Tfoot, { children: table.getFooterGroups().map((footerGroup) => (jsxRuntime.jsxs(react.Tr, { display: "flex", children: [showSelector && (jsxRuntime.jsxs(react.Th
|
|
406
406
|
// styling resize and pinning start
|
|
407
407
|
, {
|
|
408
408
|
// styling resize and pinning start
|
|
@@ -418,7 +418,7 @@ const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }
|
|
|
418
418
|
// styling resize and pinning end
|
|
419
419
|
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(),
|
|
420
420
|
// indeterminate: table.getIsSomeRowsSelected(),
|
|
421
|
-
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,
|
|
421
|
+
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,
|
|
422
422
|
// styling resize and pinning start
|
|
423
423
|
maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, left: header.column.getIsPinned()
|
|
424
424
|
? `${header.getStart("left") + SELECTION_BOX_WIDTH + table.getDensityValue() * 2}px`
|
|
@@ -432,10 +432,10 @@ const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }
|
|
|
432
432
|
? null
|
|
433
433
|
: 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 && (
|
|
434
434
|
// <UpDownIcon />
|
|
435
|
-
jsxRuntime.jsx(jsxRuntime.Fragment, {})), header.column.getIsSorted() === "asc" && (jsxRuntime.jsx(icons.ChevronUpIcon, {})), header.column.getIsSorted() === "desc" && (jsxRuntime.jsx(icons.ChevronDownIcon, {}))] })) })] }) }) }) },
|
|
435
|
+
jsxRuntime.jsx(jsxRuntime.Fragment, {})), header.column.getIsSorted() === "asc" && (jsxRuntime.jsx(icons.ChevronUpIcon, {})), header.column.getIsSorted() === "desc" && (jsxRuntime.jsx(icons.ChevronDownIcon, {}))] })) })] }) }) }) }, `chakra-table-footer-${footerGroup.id}`)))] }, `chakra-table-footergroup-${footerGroup.id}`))) }));
|
|
436
436
|
};
|
|
437
437
|
|
|
438
|
-
const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
|
|
438
|
+
const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gray.700" }, showSelector, }) => {
|
|
439
439
|
const { table } = useDataTableContext();
|
|
440
440
|
const SELECTION_BOX_WIDTH = 20;
|
|
441
441
|
const [hoveredCheckBox, setHoveredCheckBox] = react$1.useState(false);
|
|
@@ -451,7 +451,7 @@ const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gra
|
|
|
451
451
|
}
|
|
452
452
|
return false;
|
|
453
453
|
};
|
|
454
|
-
return (jsxRuntime.jsx(react.Thead, { children: table.getHeaderGroups().map((headerGroup) => (jsxRuntime.jsxs(react.Tr, { display: "flex", children: [jsxRuntime.jsxs(react.Th
|
|
454
|
+
return (jsxRuntime.jsx(react.Thead, { children: table.getHeaderGroups().map((headerGroup) => (jsxRuntime.jsxs(react.Tr, { display: "flex", children: [showSelector && (jsxRuntime.jsxs(react.Th
|
|
455
455
|
// styling resize and pinning start
|
|
456
456
|
, { ...(table.getIsSomeColumnsPinned("left")
|
|
457
457
|
? {
|
|
@@ -465,7 +465,7 @@ const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gra
|
|
|
465
465
|
// styling resize and pinning end
|
|
466
466
|
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(),
|
|
467
467
|
// indeterminate: table.getIsSomeRowsSelected(),
|
|
468
|
-
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) => {
|
|
468
|
+
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) => {
|
|
469
469
|
const resizeProps = {
|
|
470
470
|
onClick: () => header.column.resetSize(),
|
|
471
471
|
onMouseDown: header.getResizeHandler(),
|
|
@@ -512,12 +512,12 @@ const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gra
|
|
|
512
512
|
borderRightColor: header.column.getIsResizing()
|
|
513
513
|
? "gray.700"
|
|
514
514
|
: "gray.400",
|
|
515
|
-
}, ...resizeProps }))] },
|
|
516
|
-
})] },
|
|
515
|
+
}, ...resizeProps }))] }, `chakra-table-header-${header.id}`));
|
|
516
|
+
})] }, `chakra-table-headergroup-${headerGroup.id}`))) }));
|
|
517
517
|
};
|
|
518
518
|
|
|
519
|
-
const DefaultTable = ({ totalText = "Total:", showFilter = false, showFooter = false, fitTableWidth = false, fitTableHeight = false, isMobile = false, filterOptions = [], showFilterTags = false, showFilterName = false, showReload = false, extraItems = jsxRuntime.jsx(jsxRuntime.Fragment, {}), }) => {
|
|
520
|
-
return (jsxRuntime.jsx(TableControls, { totalText: totalText, showFilter: showFilter, fitTableWidth: fitTableWidth, fitTableHeight: fitTableHeight, isMobile: isMobile, filterOptions: filterOptions, showFilterName: showFilterName, showFilterTags: showFilterTags, showReload: showReload, extraItems: extraItems, children: jsxRuntime.jsxs(Table, { variant: "striped", children: [jsxRuntime.jsx(TableHeader, { canResize: true }), jsxRuntime.jsx(TableBody, {}), showFooter && jsxRuntime.jsx(TableFooter, {})] }) }));
|
|
519
|
+
const DefaultTable = ({ totalText = "Total:", showFilter = false, showFooter = false, fitTableWidth = false, fitTableHeight = false, isMobile = false, filterOptions = [], showFilterTags = false, showFilterName = false, showReload = false, showSelector = false, extraItems = jsxRuntime.jsx(jsxRuntime.Fragment, {}), }) => {
|
|
520
|
+
return (jsxRuntime.jsx(TableControls, { totalText: totalText, showFilter: showFilter, fitTableWidth: fitTableWidth, fitTableHeight: fitTableHeight, isMobile: isMobile, filterOptions: filterOptions, showFilterName: showFilterName, showFilterTags: showFilterTags, showReload: showReload, extraItems: extraItems, children: jsxRuntime.jsxs(Table, { variant: "striped", children: [jsxRuntime.jsx(TableHeader, { canResize: true, showSelector: showSelector }), jsxRuntime.jsx(TableBody, { showSelector: showSelector }), showFooter && jsxRuntime.jsx(TableFooter, { showSelector: showSelector })] }) }));
|
|
521
521
|
};
|
|
522
522
|
|
|
523
523
|
const Table = ({ children, showLoading = false, loadingComponent = jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Loading..." }), ...props }) => {
|
|
@@ -539,8 +539,8 @@ const TableCards = ({ isSelectable = false }) => {
|
|
|
539
539
|
disabled: !row.getCanSelect(),
|
|
540
540
|
// indeterminate: row.getIsSomeSelected(),
|
|
541
541
|
onChange: row.getToggleSelectedHandler() })), row.getVisibleCells().map((cell) => {
|
|
542
|
-
return (jsxRuntime.jsx(react.Box, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) },
|
|
543
|
-
})] }) },
|
|
542
|
+
return (jsxRuntime.jsx(react.Box, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, `chakra-table-cardcolumn-${row.id}`));
|
|
543
|
+
})] }) }, `chakra-table-card-${row.id}`));
|
|
544
544
|
}) }));
|
|
545
545
|
};
|
|
546
546
|
|
package/dist/index.mjs
CHANGED
|
@@ -83,7 +83,7 @@ const PageSizeControl = ({ pageSizes = [10, 20, 30, 40, 50], }) => {
|
|
|
83
83
|
const { table } = useDataTableContext();
|
|
84
84
|
return (jsx(Fragment, { children: jsxs(Menu, { children: [jsx(MenuButton, { as: Button, variant: "ghost", rightIcon: jsx(ChevronDownIcon, {}), gap: "0.5rem", children: table.getState().pagination.pageSize }), jsx(MenuList, { children: pageSizes.map((pageSize) => (jsx(MenuItem, { onClick: () => {
|
|
85
85
|
table.setPageSize(Number(pageSize));
|
|
86
|
-
}, children: pageSize },
|
|
86
|
+
}, children: pageSize }, `chakra-table-pageSize-${pageSize}`))) })] }) }));
|
|
87
87
|
};
|
|
88
88
|
|
|
89
89
|
const ResetFilteringButton = ({ text = "Reset Filtering", }) => {
|
|
@@ -328,7 +328,7 @@ const DataTableServer = ({ columns, enableRowSelection = true, enableMultiRowSel
|
|
|
328
328
|
}, children: children }));
|
|
329
329
|
};
|
|
330
330
|
|
|
331
|
-
const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
|
|
331
|
+
const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, showSelector = false, }) => {
|
|
332
332
|
const { table } = useContext(TableContext);
|
|
333
333
|
const SELECTION_BOX_WIDTH = 20;
|
|
334
334
|
const [hoveredRow, setHoveredRow] = useState(-1);
|
|
@@ -336,7 +336,7 @@ const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, })
|
|
|
336
336
|
setHoveredRow(index);
|
|
337
337
|
};
|
|
338
338
|
return (jsx(Tbody, { children: table.getRowModel().rows.map((row, index) => {
|
|
339
|
-
return (jsxs(Tr, { display: "flex", _hover: { backgroundColor: "rgba(178,178,178,0.1)" }, zIndex: 1, onMouseEnter: () => handleRowHover(index), onMouseLeave: () => handleRowHover(-1), children: [jsx(TableRowSelector, { index: index, row: row, hoveredRow: hoveredRow }), row.getVisibleCells().map((cell) => {
|
|
339
|
+
return (jsxs(Tr, { display: "flex", _hover: { backgroundColor: "rgba(178,178,178,0.1)" }, zIndex: 1, onMouseEnter: () => handleRowHover(index), onMouseLeave: () => handleRowHover(-1), children: [showSelector && (jsx(TableRowSelector, { index: index, row: row, hoveredRow: hoveredRow })), row.getVisibleCells().map((cell, index) => {
|
|
340
340
|
return (jsx(Td, { padding: `${table.getDensityValue()}px`,
|
|
341
341
|
// styling resize and pinning start
|
|
342
342
|
maxWidth: `${cell.column.getSize()}px`, width: `${cell.column.getSize()}px`, left: cell.column.getIsPinned()
|
|
@@ -345,8 +345,8 @@ const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, })
|
|
|
345
345
|
backgroundColor: cell.column.getIsPinned()
|
|
346
346
|
? pinnedBgColor.dark
|
|
347
347
|
: undefined,
|
|
348
|
-
}, children: flexRender(cell.column.columnDef.cell, cell.getContext()) },
|
|
349
|
-
})] },
|
|
348
|
+
}, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, `chakra-table-rowcell-${cell.id}-${index}`));
|
|
349
|
+
})] }, `chakra-table-row-${row.id}`));
|
|
350
350
|
}) }));
|
|
351
351
|
};
|
|
352
352
|
const TableRowSelector = ({ index, row, hoveredRow, pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
|
|
@@ -380,11 +380,11 @@ const TableRowSelector = ({ index, row, hoveredRow, pinnedBgColor = { light: "gr
|
|
|
380
380
|
const TableControls = ({ totalText = "Total:", showFilter = false, fitTableWidth = false, fitTableHeight = false, isMobile = false, children = jsx(Fragment, {}), showFilterName = false, showFilterTags = false, showReload = false, filterOptions = [], extraItems = jsx(Fragment, {}), }) => {
|
|
381
381
|
const { loading, hasError } = useDataTableContext();
|
|
382
382
|
return (jsxs(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: [jsxs(Flex, { justifyContent: "space-between", gridColumn: "1 / span 2", children: [jsx(Box, { children: jsx(EditViewButton, { text: isMobile ? undefined : "View", icon: jsx(MdOutlineViewColumn, {}) }) }), jsxs(Flex, { gap: "0.5rem", alignItems: "center", justifySelf: "end", children: [loading && jsx(Spinner, { size: "sm" }), hasError && (jsx(Tooltip, { label: "An error occurred while fetching data", children: jsx(Box, { children: jsx(Icon, { as: BsExclamationCircleFill, color: "red.400" }) }) })), showFilter && (jsxs(Fragment, { children: [jsx(GlobalFilter, {}), jsx(EditFilterButton, { text: isMobile ? undefined : "Advanced Filter" })] })), showReload && jsx(ReloadButton, {}), extraItems] })] }), jsx(Flex, { gridColumn: "1 / span 2", flexFlow: "column", gap: "0.5rem", children: filterOptions.map((column) => {
|
|
383
|
-
return (jsxs(Flex, { alignItems: "center", flexFlow: "wrap", gap: "0.5rem", children: [showFilterName && jsxs(Text, { children: [column, ":"] }), jsx(FilterOptions, { column: column })] }));
|
|
383
|
+
return (jsxs(Flex, { alignItems: "center", flexFlow: "wrap", gap: "0.5rem", children: [showFilterName && jsxs(Text, { children: [column, ":"] }), jsx(FilterOptions, { column: column })] }, column));
|
|
384
384
|
}) }), jsx(Flex, { gridColumn: "1 / span 2", children: showFilterTags && jsx(TableFilterTags, {}) }), jsx(Box, { overflow: "auto", gridColumn: "1 / span 2", width: "100%", height: "100%", children: children }), jsxs(Flex, { gap: "1rem", alignItems: "center", children: [jsx(PageSizeControl, {}), jsxs(Flex, { children: [jsx(Text, { paddingRight: "0.5rem", children: totalText }), jsx(RowCountText, {})] })] }), jsx(Box, { justifySelf: "end", children: jsx(TablePagination, {}) })] }));
|
|
385
385
|
};
|
|
386
386
|
|
|
387
|
-
const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
|
|
387
|
+
const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, showSelector = false, }) => {
|
|
388
388
|
const table = useDataTableContext().table;
|
|
389
389
|
const SELECTION_BOX_WIDTH = 20;
|
|
390
390
|
const [hoveredCheckBox, setHoveredCheckBox] = useState(false);
|
|
@@ -400,7 +400,7 @@ const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }
|
|
|
400
400
|
}
|
|
401
401
|
return false;
|
|
402
402
|
};
|
|
403
|
-
return (jsx(Tfoot, { children: table.getFooterGroups().map((footerGroup) => (jsxs(Tr$1, { display: "flex", children: [jsxs(Th
|
|
403
|
+
return (jsx(Tfoot, { children: table.getFooterGroups().map((footerGroup) => (jsxs(Tr$1, { display: "flex", children: [showSelector && (jsxs(Th
|
|
404
404
|
// styling resize and pinning start
|
|
405
405
|
, {
|
|
406
406
|
// styling resize and pinning start
|
|
@@ -416,7 +416,7 @@ const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }
|
|
|
416
416
|
// styling resize and pinning end
|
|
417
417
|
onMouseEnter: () => handleRowHover(true), onMouseLeave: () => handleRowHover(false), display: "grid", children: [isCheckBoxVisible() && (jsx(FormLabel, { margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", children: jsx(Checkbox, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, isChecked: table.getIsAllRowsSelected(),
|
|
418
418
|
// indeterminate: table.getIsSomeRowsSelected(),
|
|
419
|
-
onChange: table.getToggleAllRowsSelectedHandler() }) })), !isCheckBoxVisible() && (jsx(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) => (jsx(Th, { padding: "0", colSpan: header.colSpan,
|
|
419
|
+
onChange: table.getToggleAllRowsSelectedHandler() }) })), !isCheckBoxVisible() && (jsx(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) => (jsx(Th, { padding: "0", colSpan: header.colSpan,
|
|
420
420
|
// styling resize and pinning start
|
|
421
421
|
maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, left: header.column.getIsPinned()
|
|
422
422
|
? `${header.getStart("left") + SELECTION_BOX_WIDTH + table.getDensityValue() * 2}px`
|
|
@@ -430,10 +430,10 @@ const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }
|
|
|
430
430
|
? null
|
|
431
431
|
: flexRender(header.column.columnDef.footer, header.getContext()), jsx(Box, { children: header.column.getCanSort() && (jsxs(Fragment, { children: [header.column.getIsSorted() === false && (
|
|
432
432
|
// <UpDownIcon />
|
|
433
|
-
jsx(Fragment, {})), header.column.getIsSorted() === "asc" && (jsx(ChevronUpIcon, {})), header.column.getIsSorted() === "desc" && (jsx(ChevronDownIcon, {}))] })) })] }) }) }) },
|
|
433
|
+
jsx(Fragment, {})), header.column.getIsSorted() === "asc" && (jsx(ChevronUpIcon, {})), header.column.getIsSorted() === "desc" && (jsx(ChevronDownIcon, {}))] })) })] }) }) }) }, `chakra-table-footer-${footerGroup.id}`)))] }, `chakra-table-footergroup-${footerGroup.id}`))) }));
|
|
434
434
|
};
|
|
435
435
|
|
|
436
|
-
const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
|
|
436
|
+
const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gray.700" }, showSelector, }) => {
|
|
437
437
|
const { table } = useDataTableContext();
|
|
438
438
|
const SELECTION_BOX_WIDTH = 20;
|
|
439
439
|
const [hoveredCheckBox, setHoveredCheckBox] = useState(false);
|
|
@@ -449,7 +449,7 @@ const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gra
|
|
|
449
449
|
}
|
|
450
450
|
return false;
|
|
451
451
|
};
|
|
452
|
-
return (jsx(Thead, { children: table.getHeaderGroups().map((headerGroup) => (jsxs(Tr$1, { display: "flex", children: [jsxs(Th
|
|
452
|
+
return (jsx(Thead, { children: table.getHeaderGroups().map((headerGroup) => (jsxs(Tr$1, { display: "flex", children: [showSelector && (jsxs(Th
|
|
453
453
|
// styling resize and pinning start
|
|
454
454
|
, { ...(table.getIsSomeColumnsPinned("left")
|
|
455
455
|
? {
|
|
@@ -463,7 +463,7 @@ const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gra
|
|
|
463
463
|
// styling resize and pinning end
|
|
464
464
|
padding: `${table.getDensityValue()}px`, onMouseEnter: () => handleRowHover(true), onMouseLeave: () => handleRowHover(false), display: "grid", children: [isCheckBoxVisible() && (jsx(FormLabel, { margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", children: jsx(Checkbox, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, isChecked: table.getIsAllRowsSelected(),
|
|
465
465
|
// indeterminate: table.getIsSomeRowsSelected(),
|
|
466
|
-
onChange: table.getToggleAllRowsSelectedHandler() }) })), !isCheckBoxVisible() && (jsx(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) => {
|
|
466
|
+
onChange: table.getToggleAllRowsSelectedHandler() }) })), !isCheckBoxVisible() && (jsx(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) => {
|
|
467
467
|
const resizeProps = {
|
|
468
468
|
onClick: () => header.column.resetSize(),
|
|
469
469
|
onMouseDown: header.getResizeHandler(),
|
|
@@ -510,12 +510,12 @@ const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gra
|
|
|
510
510
|
borderRightColor: header.column.getIsResizing()
|
|
511
511
|
? "gray.700"
|
|
512
512
|
: "gray.400",
|
|
513
|
-
}, ...resizeProps }))] },
|
|
514
|
-
})] },
|
|
513
|
+
}, ...resizeProps }))] }, `chakra-table-header-${header.id}`));
|
|
514
|
+
})] }, `chakra-table-headergroup-${headerGroup.id}`))) }));
|
|
515
515
|
};
|
|
516
516
|
|
|
517
|
-
const DefaultTable = ({ totalText = "Total:", showFilter = false, showFooter = false, fitTableWidth = false, fitTableHeight = false, isMobile = false, filterOptions = [], showFilterTags = false, showFilterName = false, showReload = false, extraItems = jsx(Fragment, {}), }) => {
|
|
518
|
-
return (jsx(TableControls, { totalText: totalText, showFilter: showFilter, fitTableWidth: fitTableWidth, fitTableHeight: fitTableHeight, isMobile: isMobile, filterOptions: filterOptions, showFilterName: showFilterName, showFilterTags: showFilterTags, showReload: showReload, extraItems: extraItems, children: jsxs(Table, { variant: "striped", children: [jsx(TableHeader, { canResize: true }), jsx(TableBody, {}), showFooter && jsx(TableFooter, {})] }) }));
|
|
517
|
+
const DefaultTable = ({ totalText = "Total:", showFilter = false, showFooter = false, fitTableWidth = false, fitTableHeight = false, isMobile = false, filterOptions = [], showFilterTags = false, showFilterName = false, showReload = false, showSelector = false, extraItems = jsx(Fragment, {}), }) => {
|
|
518
|
+
return (jsx(TableControls, { totalText: totalText, showFilter: showFilter, fitTableWidth: fitTableWidth, fitTableHeight: fitTableHeight, isMobile: isMobile, filterOptions: filterOptions, showFilterName: showFilterName, showFilterTags: showFilterTags, showReload: showReload, extraItems: extraItems, children: jsxs(Table, { variant: "striped", children: [jsx(TableHeader, { canResize: true, showSelector: showSelector }), jsx(TableBody, { showSelector: showSelector }), showFooter && jsx(TableFooter, { showSelector: showSelector })] }) }));
|
|
519
519
|
};
|
|
520
520
|
|
|
521
521
|
const Table = ({ children, showLoading = false, loadingComponent = jsx(Fragment, { children: "Loading..." }), ...props }) => {
|
|
@@ -537,8 +537,8 @@ const TableCards = ({ isSelectable = false }) => {
|
|
|
537
537
|
disabled: !row.getCanSelect(),
|
|
538
538
|
// indeterminate: row.getIsSomeSelected(),
|
|
539
539
|
onChange: row.getToggleSelectedHandler() })), row.getVisibleCells().map((cell) => {
|
|
540
|
-
return (jsx(Box, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) },
|
|
541
|
-
})] }) },
|
|
540
|
+
return (jsx(Box, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, `chakra-table-cardcolumn-${row.id}`));
|
|
541
|
+
})] }) }, `chakra-table-card-${row.id}`));
|
|
542
542
|
}) }));
|
|
543
543
|
};
|
|
544
544
|
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { TableControlsProps } from "./TableControls";
|
|
2
2
|
export interface DefaultTableProps extends TableControlsProps {
|
|
3
3
|
showFooter?: boolean;
|
|
4
|
+
showSelector?: boolean;
|
|
4
5
|
}
|
|
5
|
-
export declare const DefaultTable: ({ totalText, showFilter, showFooter, fitTableWidth, fitTableHeight, isMobile, filterOptions, showFilterTags, showFilterName, showReload, extraItems, }: DefaultTableProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export declare const DefaultTable: ({ totalText, showFilter, showFooter, fitTableWidth, fitTableHeight, isMobile, filterOptions, showFilterTags, showFilterName, showReload, showSelector, extraItems, }: DefaultTableProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -4,6 +4,7 @@ export interface TableBodyProps {
|
|
|
4
4
|
light: string;
|
|
5
5
|
dark: string;
|
|
6
6
|
};
|
|
7
|
+
showSelector?: boolean;
|
|
7
8
|
}
|
|
8
9
|
export interface TableRowSelectorProps<TData> {
|
|
9
10
|
index: number;
|
|
@@ -14,4 +15,4 @@ export interface TableRowSelectorProps<TData> {
|
|
|
14
15
|
dark: string;
|
|
15
16
|
};
|
|
16
17
|
}
|
|
17
|
-
export declare const TableBody: ({ pinnedBgColor, }: TableBodyProps) => import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export declare const TableBody: ({ pinnedBgColor, showSelector, }: TableBodyProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -3,5 +3,6 @@ export interface TableFooterProps {
|
|
|
3
3
|
light: string;
|
|
4
4
|
dark: string;
|
|
5
5
|
};
|
|
6
|
+
showSelector?: boolean;
|
|
6
7
|
}
|
|
7
|
-
export declare const TableFooter: ({ pinnedBgColor, }: TableFooterProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export declare const TableFooter: ({ pinnedBgColor, showSelector, }: TableFooterProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -4,5 +4,6 @@ export interface TableHeaderProps {
|
|
|
4
4
|
light: string;
|
|
5
5
|
dark: string;
|
|
6
6
|
};
|
|
7
|
+
showSelector?: boolean;
|
|
7
8
|
}
|
|
8
|
-
export declare const TableHeader: ({ canResize, pinnedBgColor, }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export declare const TableHeader: ({ canResize, pinnedBgColor, showSelector, }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
|