@bsol-oss/react-datatable5 1.0.28 → 1.0.29

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.
Files changed (6) hide show
  1. package/README.md +12 -25
  2. package/dist/index.d.ts +1 -1
  3. package/dist/index.js +58 -17
  4. package/dist/index.mjs +59 -18
  5. package/dist/types/components/TableBody.d.ts +1 -1
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -14,15 +14,11 @@ npm install @tanstack/react-table @chakra-ui/react @bsol-oss/react-datatable5
14
14
  <DataTable columns={columns} data={data}>
15
15
  <Flex>
16
16
  <TablePagination />
17
- <ButtonGroup isAttached>
18
- <EditViewButton />
19
- <EditFilterButton />
20
- </ButtonGroup>
17
+ <EditViewButton />
18
+ <EditFilterButton />
21
19
  <EditOrderButton />
22
20
  <PageSizeControl />
23
- <ButtonGroup isAttached>
24
- <TableSelector />
25
- </ButtonGroup>
21
+ <TableSelector />
26
22
  <GlobalFilter />
27
23
  </Flex>
28
24
  <Table>
@@ -44,16 +40,12 @@ npm install @tanstack/react-table @chakra-ui/react @bsol-oss/react-datatable5
44
40
  >
45
41
  <Flex>
46
42
  <TablePagination />
47
- <ButtonGroup isAttached>
48
- <EditViewButton />
49
- <EditFilterButton />
50
- <DensityToggleButton />
51
- </ButtonGroup>
43
+ <EditViewButton />
44
+ <EditFilterButton />
45
+ <DensityToggleButton />
52
46
  <EditOrderButton />
53
47
  <PageSizeControl />
54
- <ButtonGroup isAttached>
55
- <TableSelector />
56
- </ButtonGroup>
48
+ <TableSelector />
57
49
  <GlobalFilter />
58
50
  </Flex>
59
51
  <Table>
@@ -61,17 +53,13 @@ npm install @tanstack/react-table @chakra-ui/react @bsol-oss/react-datatable5
61
53
  <TableBody />
62
54
  <TableFooter />
63
55
  </Table>
64
- <Flex gap="0.25rem">
56
+ <Flex>
65
57
  <TablePagination />
66
- <ButtonGroup isAttached>
67
- <EditViewButton />
68
- <EditFilterButton />
69
- </ButtonGroup>
58
+ <EditViewButton />
59
+ <EditFilterButton />
70
60
  <EditOrderButton />
71
61
  <PageSizeControl />
72
- <ButtonGroup isAttached>
73
- <TableSelector />
74
- </ButtonGroup>
62
+ <TableSelector />
75
63
  </Flex>
76
64
  </DataTableServer>
77
65
  ```
@@ -79,6 +67,5 @@ npm install @tanstack/react-table @chakra-ui/react @bsol-oss/react-datatable5
79
67
  Example Url generated by the DataTableServer
80
68
 
81
69
  ```
82
- GET
83
- http://localhost:8333/api/v1/gpt/chat/history/all?pagination={"offset":0,"rows":10}&sorting={}&where={}&searching=hello
70
+ GET http://localhost:8333/api/v1/gpt/chat/history/all?pagination={"offset":0,"rows":10}&sorting={}&where={}&searching=hello
84
71
  ```
package/dist/index.d.ts CHANGED
@@ -104,7 +104,7 @@ interface TableBodyProps {
104
104
  dark: string;
105
105
  };
106
106
  }
107
- declare const TableBody: ({ pinnedBgColor, }: TableBodyProps) => react_jsx_runtime.JSX.Element;
107
+ declare const TableBody: <TData>({ pinnedBgColor, }: TableBodyProps) => react_jsx_runtime.JSX.Element;
108
108
 
109
109
  interface TableCardContainerProps {
110
110
  children: JSX.Element;
package/dist/index.js CHANGED
@@ -445,9 +445,22 @@ const Table = ({ children, ...props }) => {
445
445
 
446
446
  const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
447
447
  const { table: table$1 } = react.useContext(TableContext);
448
- const SELECTION_BOX_WIDTH = 16;
449
- return (jsxRuntime.jsx(table.Tbody, { children: table$1.getRowModel().rows.map((row) => {
450
- return (jsxRuntime.jsxs(table.Tr, { display: "flex", _hover: { backgroundColor: "rgba(178,178,178,0.1)" }, zIndex: 1, children: [jsxRuntime.jsx(table.Td, { padding: "0rem", ...(table$1.getIsSomeColumnsPinned("left")
448
+ const SELECTION_BOX_WIDTH = 20;
449
+ const [hoveredRow, setHoveredRow] = react.useState(-1);
450
+ const handleRowHover = (index) => {
451
+ setHoveredRow(index);
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
+ 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.jsxs(table.Td, { padding: `${table$1.getDensityValue()}px`, ...(table$1.getIsSomeColumnsPinned("left")
451
464
  ? {
452
465
  left: `0px`,
453
466
  backgroundColor: pinnedBgColor.light,
@@ -455,10 +468,10 @@ const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, })
455
468
  zIndex: 1,
456
469
  _dark: { backgroundColor: pinnedBgColor.dark },
457
470
  }
458
- : {}), children: jsxRuntime.jsx(react$1.Checkbox, { padding: `${table$1.getDensityValue()}px`, isChecked: row.getIsSelected(),
459
- disabled: !row.getCanSelect(),
460
- // indeterminate: row.getIsSomeSelected(),
461
- onChange: row.getToggleSelectedHandler() }) }), row.getVisibleCells().map((cell) => {
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) => {
462
475
  return (jsxRuntime.jsx(table.Td, { padding: `${table$1.getDensityValue()}px`,
463
476
  // styling resize and pinning start
464
477
  maxWidth: `${cell.column.getSize()}px`, width: `${cell.column.getSize()}px`, left: cell.column.getIsPinned()
@@ -490,8 +503,21 @@ const TableCards = ({}) => {
490
503
 
491
504
  const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
492
505
  const table = useDataTable().table;
493
- const SELECTION_BOX_WIDTH = 16;
494
- return (jsxRuntime.jsx(react$1.Tfoot, { children: table.getFooterGroups().map((footerGroup) => (jsxRuntime.jsxs(react$1.Tr, { display: "flex", children: [jsxRuntime.jsx(react$1.Th
506
+ const SELECTION_BOX_WIDTH = 20;
507
+ const [hoveredCheckBox, setHoveredCheckBox] = react.useState(false);
508
+ const handleRowHover = (isHovered) => {
509
+ setHoveredCheckBox(isHovered);
510
+ };
511
+ const isCheckBoxVisible = () => {
512
+ if (table.getIsAllRowsSelected()) {
513
+ return true;
514
+ }
515
+ if (hoveredCheckBox) {
516
+ return true;
517
+ }
518
+ return false;
519
+ };
520
+ return (jsxRuntime.jsx(react$1.Tfoot, { children: table.getFooterGroups().map((footerGroup) => (jsxRuntime.jsxs(react$1.Tr, { display: "flex", children: [jsxRuntime.jsxs(react$1.Th
495
521
  // styling resize and pinning start
496
522
  , {
497
523
  // styling resize and pinning start
@@ -503,9 +529,11 @@ const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }
503
529
  zIndex: 1,
504
530
  _dark: { backgroundColor: pinnedBgColor.dark },
505
531
  }
506
- : {}), children: jsxRuntime.jsx(react$1.Checkbox, { isChecked: table.getIsAllRowsSelected(),
507
- // indeterminate: table.getIsSomeRowsSelected(),
508
- onChange: table.getToggleAllRowsSelectedHandler() }) }), footerGroup.headers.map((header) => (jsxRuntime.jsx(react$1.Th, { padding: "0", colSpan: header.colSpan,
532
+ : {}),
533
+ // 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(),
535
+ // 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,
509
537
  // styling resize and pinning start
510
538
  maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, left: header.column.getIsPinned()
511
539
  ? `${header.getStart("left") + SELECTION_BOX_WIDTH + table.getDensityValue() * 2}px`
@@ -524,8 +552,21 @@ const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }
524
552
 
525
553
  const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
526
554
  const { table } = useDataTable();
527
- const SELECTION_BOX_WIDTH = 16;
528
- return (jsxRuntime.jsx(react$1.Thead, { children: table.getHeaderGroups().map((headerGroup) => (jsxRuntime.jsxs(react$1.Tr, { display: "flex", children: [jsxRuntime.jsx(react$1.Th
555
+ const SELECTION_BOX_WIDTH = 20;
556
+ const [hoveredCheckBox, setHoveredCheckBox] = react.useState(false);
557
+ const handleRowHover = (isHovered) => {
558
+ setHoveredCheckBox(isHovered);
559
+ };
560
+ const isCheckBoxVisible = () => {
561
+ if (table.getIsAllRowsSelected()) {
562
+ return true;
563
+ }
564
+ if (hoveredCheckBox) {
565
+ return true;
566
+ }
567
+ return false;
568
+ };
569
+ return (jsxRuntime.jsx(react$1.Thead, { children: table.getHeaderGroups().map((headerGroup) => (jsxRuntime.jsxs(react$1.Tr, { display: "flex", children: [jsxRuntime.jsxs(react$1.Th
529
570
  // styling resize and pinning start
530
571
  , { ...(table.getIsSomeColumnsPinned("left")
531
572
  ? {
@@ -537,9 +578,9 @@ const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gra
537
578
  }
538
579
  : {}),
539
580
  // styling resize and pinning end
540
- padding: "0rem", children: jsxRuntime.jsx(react$1.Checkbox, { padding: `${table.getDensityValue()}px`, isChecked: table.getIsAllRowsSelected(),
541
- // indeterminate: table.getIsSomeRowsSelected(),
542
- onChange: table.getToggleAllRowsSelectedHandler() }) }), headerGroup.headers.map((header) => {
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(),
582
+ // 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) => {
543
584
  const resizeProps = {
544
585
  onClick: () => header.column.resetSize(),
545
586
  onMouseDown: header.getResizeHandler(),
package/dist/index.mjs CHANGED
@@ -3,7 +3,7 @@ import { makeStateUpdater, functionalUpdate, useReactTable, getCoreRowModel, get
3
3
  import { createContext, useState, useEffect, useContext } from 'react';
4
4
  import { rankItem } from '@tanstack/match-sorter-utils';
5
5
  import axios from 'axios';
6
- import { Tooltip, IconButton, Button, Box, Text, Input, Popover, PopoverTrigger, PopoverContent, PopoverArrow, PopoverBody, Flex, Switch, Menu, MenuButton, MenuList, MenuItem, Table as Table$1, Checkbox, Grid, Card, CardBody, Tfoot, Tr as Tr$1, Th, Thead, Portal, ButtonGroup, Icon } from '@chakra-ui/react';
6
+ import { Tooltip, IconButton, Button, Box, Text, Input, Popover, PopoverTrigger, PopoverContent, PopoverArrow, PopoverBody, Flex, Switch, Menu, MenuButton, MenuList, MenuItem, Table as Table$1, FormLabel, Checkbox, Grid, Card, CardBody, Tfoot, Tr as Tr$1, Th, Thead, Portal, ButtonGroup, Icon } from '@chakra-ui/react';
7
7
  import { AiOutlineColumnWidth } from 'react-icons/ai';
8
8
  import { MdFilterAlt, MdArrowUpward, MdArrowDownward, MdOutlineMoveDown, MdOutlineSort, MdPushPin, MdCancel, MdSort, MdFilterListAlt, MdFirstPage, MdArrowBack, MdArrowForward, MdLastPage, MdClear, MdOutlineChecklist } from 'react-icons/md';
9
9
  import { UpDownIcon, ChevronDownIcon, ChevronUpIcon, CloseIcon } from '@chakra-ui/icons';
@@ -443,9 +443,22 @@ const Table = ({ children, ...props }) => {
443
443
 
444
444
  const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
445
445
  const { table } = useContext(TableContext);
446
- const SELECTION_BOX_WIDTH = 16;
447
- return (jsx(Tbody, { children: table.getRowModel().rows.map((row) => {
448
- return (jsxs(Tr, { display: "flex", _hover: { backgroundColor: "rgba(178,178,178,0.1)" }, zIndex: 1, children: [jsx(Td, { padding: "0rem", ...(table.getIsSomeColumnsPinned("left")
446
+ const SELECTION_BOX_WIDTH = 20;
447
+ const [hoveredRow, setHoveredRow] = useState(-1);
448
+ const handleRowHover = (index) => {
449
+ setHoveredRow(index);
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
+ 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: [jsxs(Td, { padding: `${table.getDensityValue()}px`, ...(table.getIsSomeColumnsPinned("left")
449
462
  ? {
450
463
  left: `0px`,
451
464
  backgroundColor: pinnedBgColor.light,
@@ -453,10 +466,10 @@ const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, })
453
466
  zIndex: 1,
454
467
  _dark: { backgroundColor: pinnedBgColor.dark },
455
468
  }
456
- : {}), children: jsx(Checkbox, { padding: `${table.getDensityValue()}px`, isChecked: row.getIsSelected(),
457
- disabled: !row.getCanSelect(),
458
- // indeterminate: row.getIsSomeSelected(),
459
- onChange: row.getToggleSelectedHandler() }) }), row.getVisibleCells().map((cell) => {
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) => {
460
473
  return (jsx(Td, { padding: `${table.getDensityValue()}px`,
461
474
  // styling resize and pinning start
462
475
  maxWidth: `${cell.column.getSize()}px`, width: `${cell.column.getSize()}px`, left: cell.column.getIsPinned()
@@ -488,8 +501,21 @@ const TableCards = ({}) => {
488
501
 
489
502
  const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
490
503
  const table = useDataTable().table;
491
- const SELECTION_BOX_WIDTH = 16;
492
- return (jsx(Tfoot, { children: table.getFooterGroups().map((footerGroup) => (jsxs(Tr$1, { display: "flex", children: [jsx(Th
504
+ const SELECTION_BOX_WIDTH = 20;
505
+ const [hoveredCheckBox, setHoveredCheckBox] = useState(false);
506
+ const handleRowHover = (isHovered) => {
507
+ setHoveredCheckBox(isHovered);
508
+ };
509
+ const isCheckBoxVisible = () => {
510
+ if (table.getIsAllRowsSelected()) {
511
+ return true;
512
+ }
513
+ if (hoveredCheckBox) {
514
+ return true;
515
+ }
516
+ return false;
517
+ };
518
+ return (jsx(Tfoot, { children: table.getFooterGroups().map((footerGroup) => (jsxs(Tr$1, { display: "flex", children: [jsxs(Th
493
519
  // styling resize and pinning start
494
520
  , {
495
521
  // styling resize and pinning start
@@ -501,9 +527,11 @@ const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }
501
527
  zIndex: 1,
502
528
  _dark: { backgroundColor: pinnedBgColor.dark },
503
529
  }
504
- : {}), children: jsx(Checkbox, { isChecked: table.getIsAllRowsSelected(),
505
- // indeterminate: table.getIsSomeRowsSelected(),
506
- onChange: table.getToggleAllRowsSelectedHandler() }) }), footerGroup.headers.map((header) => (jsx(Th, { padding: "0", colSpan: header.colSpan,
530
+ : {}),
531
+ // 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(),
533
+ // 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,
507
535
  // styling resize and pinning start
508
536
  maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, left: header.column.getIsPinned()
509
537
  ? `${header.getStart("left") + SELECTION_BOX_WIDTH + table.getDensityValue() * 2}px`
@@ -522,8 +550,21 @@ const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }
522
550
 
523
551
  const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
524
552
  const { table } = useDataTable();
525
- const SELECTION_BOX_WIDTH = 16;
526
- return (jsx(Thead, { children: table.getHeaderGroups().map((headerGroup) => (jsxs(Tr$1, { display: "flex", children: [jsx(Th
553
+ const SELECTION_BOX_WIDTH = 20;
554
+ const [hoveredCheckBox, setHoveredCheckBox] = useState(false);
555
+ const handleRowHover = (isHovered) => {
556
+ setHoveredCheckBox(isHovered);
557
+ };
558
+ const isCheckBoxVisible = () => {
559
+ if (table.getIsAllRowsSelected()) {
560
+ return true;
561
+ }
562
+ if (hoveredCheckBox) {
563
+ return true;
564
+ }
565
+ return false;
566
+ };
567
+ return (jsx(Thead, { children: table.getHeaderGroups().map((headerGroup) => (jsxs(Tr$1, { display: "flex", children: [jsxs(Th
527
568
  // styling resize and pinning start
528
569
  , { ...(table.getIsSomeColumnsPinned("left")
529
570
  ? {
@@ -535,9 +576,9 @@ const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gra
535
576
  }
536
577
  : {}),
537
578
  // styling resize and pinning end
538
- padding: "0rem", children: jsx(Checkbox, { padding: `${table.getDensityValue()}px`, isChecked: table.getIsAllRowsSelected(),
539
- // indeterminate: table.getIsSomeRowsSelected(),
540
- onChange: table.getToggleAllRowsSelectedHandler() }) }), headerGroup.headers.map((header) => {
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(),
580
+ // 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) => {
541
582
  const resizeProps = {
542
583
  onClick: () => header.column.resetSize(),
543
584
  onMouseDown: header.getResizeHandler(),
package/dist/types/components/TableBody.d.ts CHANGED
@@ -4,4 +4,4 @@ export interface TableBodyProps {
4
4
  dark: string;
5
5
  };
6
6
  }
7
- export declare const TableBody: ({ pinnedBgColor, }: TableBodyProps) => import("react/jsx-runtime").JSX.Element;
7
+ export declare const TableBody: <TData>({ pinnedBgColor, }: TableBodyProps) => import("react/jsx-runtime").JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bsol-oss/react-datatable5",
3
- "version": "1.0.28",
3
+ "version": "1.0.29",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",