@bsol-oss/react-datatable5 1.0.29 → 1.0.30
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 +12 -3
- package/dist/index.js +32 -25
- package/dist/index.mjs +32 -25
- package/dist/types/components/TableBody.d.ts +11 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
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
6
|
import * as _tanstack_table_core from '@tanstack/table-core';
|
|
@@ -104,7 +104,16 @@ interface TableBodyProps {
|
|
|
104
104
|
dark: string;
|
|
105
105
|
};
|
|
106
106
|
}
|
|
107
|
-
|
|
107
|
+
interface TableRowSelectorProps<TData> {
|
|
108
|
+
index: number;
|
|
109
|
+
row: Row<TData>;
|
|
110
|
+
hoveredRow: number;
|
|
111
|
+
pinnedBgColor?: {
|
|
112
|
+
light: string;
|
|
113
|
+
dark: string;
|
|
114
|
+
};
|
|
115
|
+
}
|
|
116
|
+
declare const TableBody: ({ pinnedBgColor, }: TableBodyProps) => react_jsx_runtime.JSX.Element;
|
|
108
117
|
|
|
109
118
|
interface TableCardContainerProps {
|
|
110
119
|
children: JSX.Element;
|
|
@@ -174,4 +183,4 @@ declare const useDataTable: () => {
|
|
|
174
183
|
setGlobalFilter: (filter: string) => void;
|
|
175
184
|
};
|
|
176
185
|
|
|
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 };
|
|
186
|
+
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(),
|
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(),
|
|
@@ -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;
|