@bsol-oss/react-datatable5 1.0.29 → 1.0.31
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 +15 -4
- package/dist/index.js +34 -27
- package/dist/index.mjs +34 -27
- package/dist/types/components/TableBody.d.ts +11 -1
- package/dist/types/components/TextCell.d.ts +3 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
|
-
import { RowData, OnChangeFn, Updater, FilterFn, ColumnDef } from '@tanstack/react-table';
|
|
3
|
+
import { RowData, OnChangeFn, Updater, FilterFn, ColumnDef, Row } from '@tanstack/react-table';
|
|
4
4
|
import { RankingInfo } from '@tanstack/match-sorter-utils';
|
|
5
5
|
import { ReactNode } from 'react';
|
|
6
|
+
import { TooltipProps } from '@chakra-ui/react';
|
|
6
7
|
import * as _tanstack_table_core from '@tanstack/table-core';
|
|
7
8
|
|
|
8
9
|
type DensityState = "sm" | "md" | "lg";
|
|
@@ -104,7 +105,16 @@ interface TableBodyProps {
|
|
|
104
105
|
dark: string;
|
|
105
106
|
};
|
|
106
107
|
}
|
|
107
|
-
|
|
108
|
+
interface TableRowSelectorProps<TData> {
|
|
109
|
+
index: number;
|
|
110
|
+
row: Row<TData>;
|
|
111
|
+
hoveredRow: number;
|
|
112
|
+
pinnedBgColor?: {
|
|
113
|
+
light: string;
|
|
114
|
+
dark: string;
|
|
115
|
+
};
|
|
116
|
+
}
|
|
117
|
+
declare const TableBody: ({ pinnedBgColor, }: TableBodyProps) => react_jsx_runtime.JSX.Element;
|
|
108
118
|
|
|
109
119
|
interface TableCardContainerProps {
|
|
110
120
|
children: JSX.Element;
|
|
@@ -151,8 +161,9 @@ interface TextCellProps {
|
|
|
151
161
|
noOfLines?: number[];
|
|
152
162
|
padding?: string;
|
|
153
163
|
children: string | number | JSX.Element | JSX.Element[];
|
|
164
|
+
tooltipProps?: TooltipProps;
|
|
154
165
|
}
|
|
155
|
-
declare const TextCell: ({ label, noOfLines, padding, children, }: TextCellProps) => react_jsx_runtime.JSX.Element;
|
|
166
|
+
declare const TextCell: ({ label, noOfLines, padding, children, tooltipProps, ...props }: TextCellProps) => react_jsx_runtime.JSX.Element;
|
|
156
167
|
|
|
157
168
|
interface useDataFromUrlReturn<T> {
|
|
158
169
|
data: T;
|
|
@@ -174,4 +185,4 @@ declare const useDataTable: () => {
|
|
|
174
185
|
setGlobalFilter: (filter: string) => void;
|
|
175
186
|
};
|
|
176
187
|
|
|
177
|
-
export { type DataResponse, DataTable, type DataTableProps, DataTableServer, type DataTableServerProps, DensityToggleButton, EditFilterButton, EditOrderButton, EditSortingButton, EditViewButton, GlobalFilter, PageSizeControl, type PageSizeControlProps, type PaginationProps, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, type Result, Table, TableBody, type TableBodyProps, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableFilter, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, TableOrderer, TablePagination, type TableProps, TableSelector, TableSorter, TableViewer, TextCell, type TextCellProps, useDataFromUrl, type useDataFromUrlProps, type useDataFromUrlReturn, useDataTable };
|
|
188
|
+
export { type DataResponse, DataTable, type DataTableProps, DataTableServer, type DataTableServerProps, DensityToggleButton, EditFilterButton, EditOrderButton, EditSortingButton, EditViewButton, GlobalFilter, PageSizeControl, type PageSizeControlProps, type PaginationProps, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, type Result, Table, TableBody, type TableBodyProps, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableFilter, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, TableOrderer, TablePagination, type TableProps, type TableRowSelectorProps, TableSelector, TableSorter, TableViewer, TextCell, type TextCellProps, useDataFromUrl, type useDataFromUrlProps, type useDataFromUrlReturn, useDataTable };
|
package/dist/index.js
CHANGED
|
@@ -450,28 +450,8 @@ const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, })
|
|
|
450
450
|
const handleRowHover = (index) => {
|
|
451
451
|
setHoveredRow(index);
|
|
452
452
|
};
|
|
453
|
-
const isCheckBoxVisible = (current_index, current_row) => {
|
|
454
|
-
if (current_row.getIsSelected()) {
|
|
455
|
-
return true;
|
|
456
|
-
}
|
|
457
|
-
if (hoveredRow == current_index) {
|
|
458
|
-
return true;
|
|
459
|
-
}
|
|
460
|
-
return false;
|
|
461
|
-
};
|
|
462
453
|
return (jsxRuntime.jsx(table.Tbody, { children: table$1.getRowModel().rows.map((row, index) => {
|
|
463
|
-
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.
|
|
464
|
-
? {
|
|
465
|
-
left: `0px`,
|
|
466
|
-
backgroundColor: pinnedBgColor.light,
|
|
467
|
-
position: "sticky",
|
|
468
|
-
zIndex: 1,
|
|
469
|
-
_dark: { backgroundColor: pinnedBgColor.dark },
|
|
470
|
-
}
|
|
471
|
-
: {}), children: [!isCheckBoxVisible(index, row) && (jsxRuntime.jsx(react$1.FormLabel, { margin: "0rem", children: jsxRuntime.jsx(react$1.Box, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, children: jsxRuntime.jsx("span", { children: index + 1 }) }) })), isCheckBoxVisible(index, row) && (jsxRuntime.jsx(react$1.FormLabel, { margin: "0rem", children: jsxRuntime.jsx(react$1.Checkbox, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, isChecked: row.getIsSelected(),
|
|
472
|
-
disabled: !row.getCanSelect(),
|
|
473
|
-
// indeterminate: row.getIsSomeSelected(),
|
|
474
|
-
onChange: row.getToggleSelectedHandler() }) }))] }), row.getVisibleCells().map((cell) => {
|
|
454
|
+
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) => {
|
|
475
455
|
return (jsxRuntime.jsx(table.Td, { padding: `${table$1.getDensityValue()}px`,
|
|
476
456
|
// styling resize and pinning start
|
|
477
457
|
maxWidth: `${cell.column.getSize()}px`, width: `${cell.column.getSize()}px`, left: cell.column.getIsPinned()
|
|
@@ -484,6 +464,33 @@ const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, })
|
|
|
484
464
|
})] }, crypto.randomUUID()));
|
|
485
465
|
}) }));
|
|
486
466
|
};
|
|
467
|
+
const TableRowSelector = ({ index, row, hoveredRow, pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
|
|
468
|
+
const { table: table$1 } = react.useContext(TableContext);
|
|
469
|
+
const SELECTION_BOX_WIDTH = 20;
|
|
470
|
+
const isCheckBoxVisible = (current_index, current_row) => {
|
|
471
|
+
if (current_row.getIsSelected()) {
|
|
472
|
+
return true;
|
|
473
|
+
}
|
|
474
|
+
if (hoveredRow == current_index) {
|
|
475
|
+
return true;
|
|
476
|
+
}
|
|
477
|
+
return false;
|
|
478
|
+
};
|
|
479
|
+
return (jsxRuntime.jsxs(table.Td, { padding: `${table$1.getDensityValue()}px`, ...(table$1.getIsSomeColumnsPinned("left")
|
|
480
|
+
? {
|
|
481
|
+
left: `0px`,
|
|
482
|
+
backgroundColor: pinnedBgColor.light,
|
|
483
|
+
position: "sticky",
|
|
484
|
+
zIndex: 1,
|
|
485
|
+
_dark: { backgroundColor: pinnedBgColor.dark },
|
|
486
|
+
}
|
|
487
|
+
: {}),
|
|
488
|
+
// styling resize and pinning end
|
|
489
|
+
display: "grid", children: [!isCheckBoxVisible(index, row) && (jsxRuntime.jsx(react$1.FormLabel, { margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", children: jsxRuntime.jsx(react$1.Box, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, children: jsxRuntime.jsx("span", { children: index + 1 }) }) })), isCheckBoxVisible(index, row) && (jsxRuntime.jsx(react$1.FormLabel, { margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", children: jsxRuntime.jsx(react$1.Checkbox, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, isChecked: row.getIsSelected(),
|
|
490
|
+
disabled: !row.getCanSelect(),
|
|
491
|
+
// indeterminate: row.getIsSomeSelected(),
|
|
492
|
+
onChange: row.getToggleSelectedHandler() }) }))] }));
|
|
493
|
+
};
|
|
487
494
|
|
|
488
495
|
const TableCardContainer = ({ children, ...props }) => {
|
|
489
496
|
return (jsxRuntime.jsx(react$1.Grid, { gridTemplateColumns: ["1fr", "1fr 1fr", "1fr 1fr 1fr"], gap: "0.5rem", ...props, children: children }));
|
|
@@ -531,9 +538,9 @@ const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }
|
|
|
531
538
|
}
|
|
532
539
|
: {}),
|
|
533
540
|
// styling resize and pinning end
|
|
534
|
-
onMouseEnter: () => handleRowHover(true), onMouseLeave: () => handleRowHover(false), children: [isCheckBoxVisible() && (jsxRuntime.jsx(react$1.FormLabel, { margin: "0rem", children: jsxRuntime.jsx(react$1.Checkbox, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, isChecked: table.getIsAllRowsSelected(),
|
|
541
|
+
onMouseEnter: () => handleRowHover(true), onMouseLeave: () => handleRowHover(false), display: "grid", children: [isCheckBoxVisible() && (jsxRuntime.jsx(react$1.FormLabel, { margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", children: jsxRuntime.jsx(react$1.Checkbox, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, isChecked: table.getIsAllRowsSelected(),
|
|
535
542
|
// indeterminate: table.getIsSomeRowsSelected(),
|
|
536
|
-
onChange: table.getToggleAllRowsSelectedHandler() }) })), !isCheckBoxVisible() && (jsxRuntime.jsx(react$1.FormLabel, { margin: "0rem", children: jsxRuntime.jsx(react$1.Box, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px` }) }))] }), footerGroup.headers.map((header) => (jsxRuntime.jsx(react$1.Th, { padding: "0", colSpan: header.colSpan,
|
|
543
|
+
onChange: table.getToggleAllRowsSelectedHandler() }) })), !isCheckBoxVisible() && (jsxRuntime.jsx(react$1.FormLabel, { margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", children: jsxRuntime.jsx(react$1.Box, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px` }) }))] }), footerGroup.headers.map((header) => (jsxRuntime.jsx(react$1.Th, { padding: "0", colSpan: header.colSpan,
|
|
537
544
|
// styling resize and pinning start
|
|
538
545
|
maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, left: header.column.getIsPinned()
|
|
539
546
|
? `${header.getStart("left") + SELECTION_BOX_WIDTH + table.getDensityValue() * 2}px`
|
|
@@ -578,9 +585,9 @@ const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gra
|
|
|
578
585
|
}
|
|
579
586
|
: {}),
|
|
580
587
|
// styling resize and pinning end
|
|
581
|
-
padding: `${table.getDensityValue()}px`, onMouseEnter: () => handleRowHover(true), onMouseLeave: () => handleRowHover(false), children: [isCheckBoxVisible() && (jsxRuntime.jsx(react$1.FormLabel, { margin: "0rem", children: jsxRuntime.jsx(react$1.Checkbox, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, isChecked: table.getIsAllRowsSelected(),
|
|
588
|
+
padding: `${table.getDensityValue()}px`, onMouseEnter: () => handleRowHover(true), onMouseLeave: () => handleRowHover(false), display: "grid", children: [isCheckBoxVisible() && (jsxRuntime.jsx(react$1.FormLabel, { margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", children: jsxRuntime.jsx(react$1.Checkbox, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, isChecked: table.getIsAllRowsSelected(),
|
|
582
589
|
// indeterminate: table.getIsSomeRowsSelected(),
|
|
583
|
-
onChange: table.getToggleAllRowsSelectedHandler() }) })), !isCheckBoxVisible() && (jsxRuntime.jsx(react$1.FormLabel, { margin: "0rem", children: jsxRuntime.jsx(react$1.Box, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px` }) }))] }), headerGroup.headers.map((header) => {
|
|
590
|
+
onChange: table.getToggleAllRowsSelectedHandler() }) })), !isCheckBoxVisible() && (jsxRuntime.jsx(react$1.FormLabel, { margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", children: jsxRuntime.jsx(react$1.Box, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px` }) }))] }), headerGroup.headers.map((header) => {
|
|
584
591
|
const resizeProps = {
|
|
585
592
|
onClick: () => header.column.resetSize(),
|
|
586
593
|
onMouseDown: header.getResizeHandler(),
|
|
@@ -636,9 +643,9 @@ const TableSelector = () => {
|
|
|
636
643
|
}, "aria-label": "reset selection" }))] }));
|
|
637
644
|
};
|
|
638
645
|
|
|
639
|
-
const TextCell = ({ label, noOfLines = [1], padding = "0rem", children, }) => {
|
|
646
|
+
const TextCell = ({ label, noOfLines = [1], padding = "0rem", children, tooltipProps, ...props }) => {
|
|
640
647
|
if (label) {
|
|
641
|
-
return (jsxRuntime.jsx(react$1.Box, { padding: padding, children: jsxRuntime.jsx(react$1.Tooltip, { label: jsxRuntime.jsx(react$1.Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [5], children: label }), placement: "auto", children: jsxRuntime.jsx(react$1.Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "break-all", noOfLines: noOfLines, children: children }) }) }));
|
|
648
|
+
return (jsxRuntime.jsx(react$1.Box, { padding: padding, children: jsxRuntime.jsx(react$1.Tooltip, { label: jsxRuntime.jsx(react$1.Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [5], children: label }), placement: "auto", ...tooltipProps, children: jsxRuntime.jsx(react$1.Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "break-all", noOfLines: noOfLines, ...props, children: children }) }) }));
|
|
642
649
|
}
|
|
643
650
|
return (jsxRuntime.jsx(react$1.Box, { padding: padding, children: jsxRuntime.jsx(react$1.Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "break-all", noOfLines: noOfLines, children: children }) }));
|
|
644
651
|
};
|
package/dist/index.mjs
CHANGED
|
@@ -448,28 +448,8 @@ const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, })
|
|
|
448
448
|
const handleRowHover = (index) => {
|
|
449
449
|
setHoveredRow(index);
|
|
450
450
|
};
|
|
451
|
-
const isCheckBoxVisible = (current_index, current_row) => {
|
|
452
|
-
if (current_row.getIsSelected()) {
|
|
453
|
-
return true;
|
|
454
|
-
}
|
|
455
|
-
if (hoveredRow == current_index) {
|
|
456
|
-
return true;
|
|
457
|
-
}
|
|
458
|
-
return false;
|
|
459
|
-
};
|
|
460
451
|
return (jsx(Tbody, { children: table.getRowModel().rows.map((row, index) => {
|
|
461
|
-
return (jsxs(Tr, { display: "flex", _hover: { backgroundColor: "rgba(178,178,178,0.1)" }, zIndex: 1, onMouseEnter: () => handleRowHover(index), onMouseLeave: () => handleRowHover(-1), children: [
|
|
462
|
-
? {
|
|
463
|
-
left: `0px`,
|
|
464
|
-
backgroundColor: pinnedBgColor.light,
|
|
465
|
-
position: "sticky",
|
|
466
|
-
zIndex: 1,
|
|
467
|
-
_dark: { backgroundColor: pinnedBgColor.dark },
|
|
468
|
-
}
|
|
469
|
-
: {}), children: [!isCheckBoxVisible(index, row) && (jsx(FormLabel, { margin: "0rem", children: jsx(Box, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, children: jsx("span", { children: index + 1 }) }) })), isCheckBoxVisible(index, row) && (jsx(FormLabel, { margin: "0rem", children: jsx(Checkbox, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, isChecked: row.getIsSelected(),
|
|
470
|
-
disabled: !row.getCanSelect(),
|
|
471
|
-
// indeterminate: row.getIsSomeSelected(),
|
|
472
|
-
onChange: row.getToggleSelectedHandler() }) }))] }), row.getVisibleCells().map((cell) => {
|
|
452
|
+
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) => {
|
|
473
453
|
return (jsx(Td, { padding: `${table.getDensityValue()}px`,
|
|
474
454
|
// styling resize and pinning start
|
|
475
455
|
maxWidth: `${cell.column.getSize()}px`, width: `${cell.column.getSize()}px`, left: cell.column.getIsPinned()
|
|
@@ -482,6 +462,33 @@ const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, })
|
|
|
482
462
|
})] }, crypto.randomUUID()));
|
|
483
463
|
}) }));
|
|
484
464
|
};
|
|
465
|
+
const TableRowSelector = ({ index, row, hoveredRow, pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
|
|
466
|
+
const { table } = useContext(TableContext);
|
|
467
|
+
const SELECTION_BOX_WIDTH = 20;
|
|
468
|
+
const isCheckBoxVisible = (current_index, current_row) => {
|
|
469
|
+
if (current_row.getIsSelected()) {
|
|
470
|
+
return true;
|
|
471
|
+
}
|
|
472
|
+
if (hoveredRow == current_index) {
|
|
473
|
+
return true;
|
|
474
|
+
}
|
|
475
|
+
return false;
|
|
476
|
+
};
|
|
477
|
+
return (jsxs(Td, { padding: `${table.getDensityValue()}px`, ...(table.getIsSomeColumnsPinned("left")
|
|
478
|
+
? {
|
|
479
|
+
left: `0px`,
|
|
480
|
+
backgroundColor: pinnedBgColor.light,
|
|
481
|
+
position: "sticky",
|
|
482
|
+
zIndex: 1,
|
|
483
|
+
_dark: { backgroundColor: pinnedBgColor.dark },
|
|
484
|
+
}
|
|
485
|
+
: {}),
|
|
486
|
+
// styling resize and pinning end
|
|
487
|
+
display: "grid", children: [!isCheckBoxVisible(index, row) && (jsx(FormLabel, { margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", children: jsx(Box, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, children: jsx("span", { children: index + 1 }) }) })), isCheckBoxVisible(index, row) && (jsx(FormLabel, { margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", children: jsx(Checkbox, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, isChecked: row.getIsSelected(),
|
|
488
|
+
disabled: !row.getCanSelect(),
|
|
489
|
+
// indeterminate: row.getIsSomeSelected(),
|
|
490
|
+
onChange: row.getToggleSelectedHandler() }) }))] }));
|
|
491
|
+
};
|
|
485
492
|
|
|
486
493
|
const TableCardContainer = ({ children, ...props }) => {
|
|
487
494
|
return (jsx(Grid, { gridTemplateColumns: ["1fr", "1fr 1fr", "1fr 1fr 1fr"], gap: "0.5rem", ...props, children: children }));
|
|
@@ -529,9 +536,9 @@ const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }
|
|
|
529
536
|
}
|
|
530
537
|
: {}),
|
|
531
538
|
// styling resize and pinning end
|
|
532
|
-
onMouseEnter: () => handleRowHover(true), onMouseLeave: () => handleRowHover(false), children: [isCheckBoxVisible() && (jsx(FormLabel, { margin: "0rem", children: jsx(Checkbox, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, isChecked: table.getIsAllRowsSelected(),
|
|
539
|
+
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(),
|
|
533
540
|
// indeterminate: table.getIsSomeRowsSelected(),
|
|
534
|
-
onChange: table.getToggleAllRowsSelectedHandler() }) })), !isCheckBoxVisible() && (jsx(FormLabel, { margin: "0rem", children: jsx(Box, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px` }) }))] }), footerGroup.headers.map((header) => (jsx(Th, { padding: "0", colSpan: header.colSpan,
|
|
541
|
+
onChange: table.getToggleAllRowsSelectedHandler() }) })), !isCheckBoxVisible() && (jsx(FormLabel, { margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", children: jsx(Box, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px` }) }))] }), footerGroup.headers.map((header) => (jsx(Th, { padding: "0", colSpan: header.colSpan,
|
|
535
542
|
// styling resize and pinning start
|
|
536
543
|
maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, left: header.column.getIsPinned()
|
|
537
544
|
? `${header.getStart("left") + SELECTION_BOX_WIDTH + table.getDensityValue() * 2}px`
|
|
@@ -576,9 +583,9 @@ const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gra
|
|
|
576
583
|
}
|
|
577
584
|
: {}),
|
|
578
585
|
// styling resize and pinning end
|
|
579
|
-
padding: `${table.getDensityValue()}px`, onMouseEnter: () => handleRowHover(true), onMouseLeave: () => handleRowHover(false), children: [isCheckBoxVisible() && (jsx(FormLabel, { margin: "0rem", children: jsx(Checkbox, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, isChecked: table.getIsAllRowsSelected(),
|
|
586
|
+
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(),
|
|
580
587
|
// indeterminate: table.getIsSomeRowsSelected(),
|
|
581
|
-
onChange: table.getToggleAllRowsSelectedHandler() }) })), !isCheckBoxVisible() && (jsx(FormLabel, { margin: "0rem", children: jsx(Box, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px` }) }))] }), headerGroup.headers.map((header) => {
|
|
588
|
+
onChange: table.getToggleAllRowsSelectedHandler() }) })), !isCheckBoxVisible() && (jsx(FormLabel, { margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", children: jsx(Box, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px` }) }))] }), headerGroup.headers.map((header) => {
|
|
582
589
|
const resizeProps = {
|
|
583
590
|
onClick: () => header.column.resetSize(),
|
|
584
591
|
onMouseDown: header.getResizeHandler(),
|
|
@@ -634,9 +641,9 @@ const TableSelector = () => {
|
|
|
634
641
|
}, "aria-label": "reset selection" }))] }));
|
|
635
642
|
};
|
|
636
643
|
|
|
637
|
-
const TextCell = ({ label, noOfLines = [1], padding = "0rem", children, }) => {
|
|
644
|
+
const TextCell = ({ label, noOfLines = [1], padding = "0rem", children, tooltipProps, ...props }) => {
|
|
638
645
|
if (label) {
|
|
639
|
-
return (jsx(Box, { padding: padding, children: jsx(Tooltip, { label: jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [5], children: label }), placement: "auto", children: jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "break-all", noOfLines: noOfLines, children: children }) }) }));
|
|
646
|
+
return (jsx(Box, { padding: padding, children: jsx(Tooltip, { label: jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [5], children: label }), placement: "auto", ...tooltipProps, children: jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "break-all", noOfLines: noOfLines, ...props, children: children }) }) }));
|
|
640
647
|
}
|
|
641
648
|
return (jsx(Box, { padding: padding, children: jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "break-all", noOfLines: noOfLines, children: children }) }));
|
|
642
649
|
};
|
|
@@ -1,7 +1,17 @@
|
|
|
1
|
+
import { Row } from "@tanstack/react-table";
|
|
1
2
|
export interface TableBodyProps {
|
|
2
3
|
pinnedBgColor?: {
|
|
3
4
|
light: string;
|
|
4
5
|
dark: string;
|
|
5
6
|
};
|
|
6
7
|
}
|
|
7
|
-
export
|
|
8
|
+
export interface TableRowSelectorProps<TData> {
|
|
9
|
+
index: number;
|
|
10
|
+
row: Row<TData>;
|
|
11
|
+
hoveredRow: number;
|
|
12
|
+
pinnedBgColor?: {
|
|
13
|
+
light: string;
|
|
14
|
+
dark: string;
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
export declare const TableBody: ({ pinnedBgColor, }: TableBodyProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
import { TooltipProps } from "@chakra-ui/react";
|
|
2
3
|
export interface TextCellProps {
|
|
3
4
|
label?: string;
|
|
4
5
|
noOfLines?: number[];
|
|
5
6
|
padding?: string;
|
|
6
7
|
children: string | number | JSX.Element | JSX.Element[];
|
|
8
|
+
tooltipProps?: TooltipProps;
|
|
7
9
|
}
|
|
8
|
-
export declare const TextCell: ({ label, noOfLines, padding, children, }: TextCellProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export declare const TextCell: ({ label, noOfLines, padding, children, tooltipProps, ...props }: TextCellProps) => import("react/jsx-runtime").JSX.Element;
|