@bsol-oss/react-datatable5 1.0.28 → 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.
Files changed (6) hide show
  1. package/README.md +12 -25
  2. package/dist/index.d.ts +11 -2
  3. package/dist/index.js +72 -24
  4. package/dist/index.mjs +73 -25
  5. package/dist/types/components/TableBody.d.ts +10 -0
  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
@@ -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,6 +104,15 @@ interface TableBodyProps {
104
104
  dark: string;
105
105
  };
106
106
  }
107
+ interface TableRowSelectorProps<TData> {
108
+ index: number;
109
+ row: Row<TData>;
110
+ hoveredRow: number;
111
+ pinnedBgColor?: {
112
+ light: string;
113
+ dark: string;
114
+ };
115
+ }
107
116
  declare const TableBody: ({ pinnedBgColor, }: TableBodyProps) => react_jsx_runtime.JSX.Element;
108
117
 
109
118
  interface TableCardContainerProps {
@@ -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
@@ -445,20 +445,13 @@ 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")
451
- ? {
452
- left: `0px`,
453
- backgroundColor: pinnedBgColor.light,
454
- position: "sticky",
455
- zIndex: 1,
456
- _dark: { backgroundColor: pinnedBgColor.dark },
457
- }
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) => {
448
+ const SELECTION_BOX_WIDTH = 20;
449
+ const [hoveredRow, setHoveredRow] = react.useState(-1);
450
+ const handleRowHover = (index) => {
451
+ setHoveredRow(index);
452
+ };
453
+ return (jsxRuntime.jsx(table.Tbody, { children: table$1.getRowModel().rows.map((row, index) => {
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) => {
462
455
  return (jsxRuntime.jsx(table.Td, { padding: `${table$1.getDensityValue()}px`,
463
456
  // styling resize and pinning start
464
457
  maxWidth: `${cell.column.getSize()}px`, width: `${cell.column.getSize()}px`, left: cell.column.getIsPinned()
@@ -471,6 +464,33 @@ const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, })
471
464
  })] }, crypto.randomUUID()));
472
465
  }) }));
473
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
+ };
474
494
 
475
495
  const TableCardContainer = ({ children, ...props }) => {
476
496
  return (jsxRuntime.jsx(react$1.Grid, { gridTemplateColumns: ["1fr", "1fr 1fr", "1fr 1fr 1fr"], gap: "0.5rem", ...props, children: children }));
@@ -490,8 +510,21 @@ const TableCards = ({}) => {
490
510
 
491
511
  const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
492
512
  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
513
+ const SELECTION_BOX_WIDTH = 20;
514
+ const [hoveredCheckBox, setHoveredCheckBox] = react.useState(false);
515
+ const handleRowHover = (isHovered) => {
516
+ setHoveredCheckBox(isHovered);
517
+ };
518
+ const isCheckBoxVisible = () => {
519
+ if (table.getIsAllRowsSelected()) {
520
+ return true;
521
+ }
522
+ if (hoveredCheckBox) {
523
+ return true;
524
+ }
525
+ return false;
526
+ };
527
+ 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
528
  // styling resize and pinning start
496
529
  , {
497
530
  // styling resize and pinning start
@@ -503,9 +536,11 @@ const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }
503
536
  zIndex: 1,
504
537
  _dark: { backgroundColor: pinnedBgColor.dark },
505
538
  }
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,
539
+ : {}),
540
+ // styling resize and pinning end
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(),
542
+ // indeterminate: table.getIsSomeRowsSelected(),
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,
509
544
  // styling resize and pinning start
510
545
  maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, left: header.column.getIsPinned()
511
546
  ? `${header.getStart("left") + SELECTION_BOX_WIDTH + table.getDensityValue() * 2}px`
@@ -524,8 +559,21 @@ const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }
524
559
 
525
560
  const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
526
561
  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
562
+ const SELECTION_BOX_WIDTH = 20;
563
+ const [hoveredCheckBox, setHoveredCheckBox] = react.useState(false);
564
+ const handleRowHover = (isHovered) => {
565
+ setHoveredCheckBox(isHovered);
566
+ };
567
+ const isCheckBoxVisible = () => {
568
+ if (table.getIsAllRowsSelected()) {
569
+ return true;
570
+ }
571
+ if (hoveredCheckBox) {
572
+ return true;
573
+ }
574
+ return false;
575
+ };
576
+ 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
577
  // styling resize and pinning start
530
578
  , { ...(table.getIsSomeColumnsPinned("left")
531
579
  ? {
@@ -537,9 +585,9 @@ const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gra
537
585
  }
538
586
  : {}),
539
587
  // 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) => {
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(),
589
+ // indeterminate: table.getIsSomeRowsSelected(),
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) => {
543
591
  const resizeProps = {
544
592
  onClick: () => header.column.resetSize(),
545
593
  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,20 +443,13 @@ 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")
449
- ? {
450
- left: `0px`,
451
- backgroundColor: pinnedBgColor.light,
452
- position: "sticky",
453
- zIndex: 1,
454
- _dark: { backgroundColor: pinnedBgColor.dark },
455
- }
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) => {
446
+ const SELECTION_BOX_WIDTH = 20;
447
+ const [hoveredRow, setHoveredRow] = useState(-1);
448
+ const handleRowHover = (index) => {
449
+ setHoveredRow(index);
450
+ };
451
+ return (jsx(Tbody, { children: table.getRowModel().rows.map((row, index) => {
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) => {
460
453
  return (jsx(Td, { padding: `${table.getDensityValue()}px`,
461
454
  // styling resize and pinning start
462
455
  maxWidth: `${cell.column.getSize()}px`, width: `${cell.column.getSize()}px`, left: cell.column.getIsPinned()
@@ -469,6 +462,33 @@ const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, })
469
462
  })] }, crypto.randomUUID()));
470
463
  }) }));
471
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
+ };
472
492
 
473
493
  const TableCardContainer = ({ children, ...props }) => {
474
494
  return (jsx(Grid, { gridTemplateColumns: ["1fr", "1fr 1fr", "1fr 1fr 1fr"], gap: "0.5rem", ...props, children: children }));
@@ -488,8 +508,21 @@ const TableCards = ({}) => {
488
508
 
489
509
  const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
490
510
  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
511
+ const SELECTION_BOX_WIDTH = 20;
512
+ const [hoveredCheckBox, setHoveredCheckBox] = useState(false);
513
+ const handleRowHover = (isHovered) => {
514
+ setHoveredCheckBox(isHovered);
515
+ };
516
+ const isCheckBoxVisible = () => {
517
+ if (table.getIsAllRowsSelected()) {
518
+ return true;
519
+ }
520
+ if (hoveredCheckBox) {
521
+ return true;
522
+ }
523
+ return false;
524
+ };
525
+ return (jsx(Tfoot, { children: table.getFooterGroups().map((footerGroup) => (jsxs(Tr$1, { display: "flex", children: [jsxs(Th
493
526
  // styling resize and pinning start
494
527
  , {
495
528
  // styling resize and pinning start
@@ -501,9 +534,11 @@ const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }
501
534
  zIndex: 1,
502
535
  _dark: { backgroundColor: pinnedBgColor.dark },
503
536
  }
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,
537
+ : {}),
538
+ // styling resize and pinning end
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(),
540
+ // indeterminate: table.getIsSomeRowsSelected(),
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,
507
542
  // styling resize and pinning start
508
543
  maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, left: header.column.getIsPinned()
509
544
  ? `${header.getStart("left") + SELECTION_BOX_WIDTH + table.getDensityValue() * 2}px`
@@ -522,8 +557,21 @@ const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }
522
557
 
523
558
  const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
524
559
  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
560
+ const SELECTION_BOX_WIDTH = 20;
561
+ const [hoveredCheckBox, setHoveredCheckBox] = useState(false);
562
+ const handleRowHover = (isHovered) => {
563
+ setHoveredCheckBox(isHovered);
564
+ };
565
+ const isCheckBoxVisible = () => {
566
+ if (table.getIsAllRowsSelected()) {
567
+ return true;
568
+ }
569
+ if (hoveredCheckBox) {
570
+ return true;
571
+ }
572
+ return false;
573
+ };
574
+ return (jsx(Thead, { children: table.getHeaderGroups().map((headerGroup) => (jsxs(Tr$1, { display: "flex", children: [jsxs(Th
527
575
  // styling resize and pinning start
528
576
  , { ...(table.getIsSomeColumnsPinned("left")
529
577
  ? {
@@ -535,9 +583,9 @@ const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gra
535
583
  }
536
584
  : {}),
537
585
  // 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) => {
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(),
587
+ // indeterminate: table.getIsSomeRowsSelected(),
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) => {
541
589
  const resizeProps = {
542
590
  onClick: () => header.column.resetSize(),
543
591
  onMouseDown: header.getResizeHandler(),
package/dist/types/components/TableBody.d.ts CHANGED
@@ -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
  }
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
+ }
7
17
  export declare const TableBody: ({ 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.30",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",