@bsol-oss/react-datatable5 1.0.27 → 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 (9) hide show
  1. package/README.md +12 -25
  2. package/dist/index.d.ts +28 -4
  3. package/dist/index.js +93 -35
  4. package/dist/index.mjs +94 -36
  5. package/dist/types/components/DataTable.d.ts +3 -1
  6. package/dist/types/components/DataTableServer.d.ts +3 -1
  7. package/dist/types/components/DensityFeature.d.ts +2 -1
  8. package/dist/types/components/TableBody.d.ts +1 -1
  9. 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,10 +1,32 @@
1
1
  /// <reference types="react" />
2
2
  import * as react_jsx_runtime from 'react/jsx-runtime';
3
- import { FilterFn, ColumnDef, RowData } from '@tanstack/react-table';
3
+ import { RowData, OnChangeFn, Updater, FilterFn, ColumnDef } 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';
7
7
 
8
+ type DensityState = "sm" | "md" | "lg";
9
+ interface DensityTableState {
10
+ density: DensityState;
11
+ }
12
+ interface DensityOptions {
13
+ enableDensity?: boolean;
14
+ onDensityChange?: OnChangeFn<DensityState>;
15
+ }
16
+ interface DensityInstance {
17
+ setDensity: (updater: Updater<DensityState>) => void;
18
+ toggleDensity: (value?: DensityState) => void;
19
+ getDensityValue: (value?: DensityState) => number;
20
+ }
21
+ declare module "@tanstack/react-table" {
22
+ interface TableState extends DensityTableState {
23
+ }
24
+ interface TableOptionsResolved<TData extends RowData> extends DensityOptions {
25
+ }
26
+ interface Table<TData extends RowData> extends DensityInstance {
27
+ }
28
+ }
29
+
8
30
  declare module "@tanstack/react-table" {
9
31
  interface FilterFns {
10
32
  fuzzy: FilterFn<unknown>;
@@ -17,11 +39,12 @@ interface DataTableProps<T> {
17
39
  children: JSX.Element | JSX.Element[];
18
40
  data: T[];
19
41
  columns: ColumnDef<T, any>[];
42
+ density?: DensityState;
20
43
  enableRowSelection?: boolean;
21
44
  enableMultiRowSelection?: boolean;
22
45
  enableSubRowSelection?: boolean;
23
46
  }
24
- declare const DataTable: <TData>({ columns, data, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, children, }: DataTableProps<TData>) => react_jsx_runtime.JSX.Element;
47
+ declare const DataTable: <TData>({ columns, data, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, density, children, }: DataTableProps<TData>) => react_jsx_runtime.JSX.Element;
25
48
 
26
49
  interface DataTableServerProps<T> {
27
50
  children: JSX.Element | JSX.Element[];
@@ -30,6 +53,7 @@ interface DataTableServerProps<T> {
30
53
  enableRowSelection?: boolean;
31
54
  enableMultiRowSelection?: boolean;
32
55
  enableSubRowSelection?: boolean;
56
+ density?: DensityState;
33
57
  }
34
58
  interface Result<T> {
35
59
  results: T[];
@@ -44,7 +68,7 @@ declare module "@tanstack/react-table" {
44
68
  displayName: string;
45
69
  }
46
70
  }
47
- declare const DataTableServer: <TData>({ columns, url, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, children, }: DataTableServerProps<TData>) => react_jsx_runtime.JSX.Element;
71
+ declare const DataTableServer: <TData>({ columns, url, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, density, children, }: DataTableServerProps<TData>) => react_jsx_runtime.JSX.Element;
48
72
 
49
73
  declare const DensityToggleButton: () => react_jsx_runtime.JSX.Element;
50
74
 
@@ -80,7 +104,7 @@ interface TableBodyProps {
80
104
  dark: string;
81
105
  };
82
106
  }
83
- declare const TableBody: ({ pinnedBgColor, }: TableBodyProps) => react_jsx_runtime.JSX.Element;
107
+ declare const TableBody: <TData>({ pinnedBgColor, }: TableBodyProps) => react_jsx_runtime.JSX.Element;
84
108
 
85
109
  interface TableCardContainerProps {
86
110
  children: JSX.Element;
package/dist/index.js CHANGED
@@ -27,7 +27,7 @@ const DensityFeature = {
27
27
  // define the new feature's initial state
28
28
  getInitialState: (state) => {
29
29
  return {
30
- density: "1rem",
30
+ density: "sm",
31
31
  ...state,
32
32
  };
33
33
  },
@@ -55,15 +55,31 @@ const DensityFeature = {
55
55
  table.setDensity((old) => {
56
56
  if (value)
57
57
  return value;
58
- if (old === "0.5rem") {
59
- return "1rem";
58
+ if (old === "sm") {
59
+ return "md";
60
60
  }
61
- if (old === "1rem") {
62
- return "2rem";
61
+ if (old === "md") {
62
+ return "lg";
63
63
  }
64
- return "0.5rem";
64
+ return "sm";
65
65
  });
66
66
  };
67
+ table.getDensityValue = (value) => {
68
+ let density;
69
+ if (value) {
70
+ density = value;
71
+ }
72
+ else {
73
+ density = table.getState().density;
74
+ }
75
+ if (density === "sm") {
76
+ return 8;
77
+ }
78
+ if (density === "md") {
79
+ return 16;
80
+ }
81
+ return 32;
82
+ };
67
83
  },
68
84
  // if you need to add row instance APIs...
69
85
  // createRow: <TData extends RowData>(row, table): void => {},
@@ -87,10 +103,10 @@ const fuzzyFilter = (row, columnId, value, addMeta) => {
87
103
  // Return if the item should be filtered in/out
88
104
  return itemRank.passed;
89
105
  };
90
- const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, children, }) => {
106
+ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, density = 'sm', children, }) => {
91
107
  const [columnOrder, setColumnOrder] = react.useState([]);
92
108
  const [globalFilter, setGlobalFilter] = react.useState("");
93
- const [density, setDensity] = react.useState("1rem");
109
+ const [densityState, setDensity] = react.useState(density);
94
110
  const table = reactTable.useReactTable({
95
111
  _features: [DensityFeature],
96
112
  data: data,
@@ -107,7 +123,7 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
107
123
  state: {
108
124
  columnOrder,
109
125
  globalFilter,
110
- density,
126
+ density: densityState,
111
127
  },
112
128
  onColumnOrderChange: (state) => {
113
129
  setColumnOrder(state);
@@ -167,7 +183,7 @@ const useDataFromUrl = ({ url, params = {}, defaultData, }) => {
167
183
  return { data, loading, hasError, refreshData };
168
184
  };
169
185
 
170
- const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, children, }) => {
186
+ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, density = "sm", children, }) => {
171
187
  const [sorting, setSorting] = react.useState([]);
172
188
  const [columnFilters, setColumnFilters] = react.useState([]); // can set initial column filter state here
173
189
  const [pagination, setPagination] = react.useState({
@@ -177,7 +193,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
177
193
  const [rowSelection, setRowSelection] = react.useState({});
178
194
  const [columnOrder, setColumnOrder] = react.useState([]);
179
195
  const [globalFilter, setGlobalFilter] = react.useState("");
180
- const [density, setDensity] = react.useState("1rem");
196
+ const [densityState, setDensity] = react.useState(density);
181
197
  const { data, loading, hasError, refreshData } = useDataFromUrl({
182
198
  url: url,
183
199
  defaultData: {
@@ -221,7 +237,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
221
237
  rowSelection,
222
238
  columnOrder,
223
239
  globalFilter,
224
- density,
240
+ density: densityState
225
241
  },
226
242
  defaultColumn: {
227
243
  size: 150, //starting column size
@@ -429,8 +445,22 @@ const Table = ({ children, ...props }) => {
429
445
 
430
446
  const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
431
447
  const { table: table$1 } = react.useContext(TableContext);
432
- return (jsxRuntime.jsx(table.Tbody, { children: table$1.getRowModel().rows.map((row) => {
433
- 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")
434
464
  ? {
435
465
  left: `0px`,
436
466
  backgroundColor: pinnedBgColor.light,
@@ -438,14 +468,14 @@ const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, })
438
468
  zIndex: 1,
439
469
  _dark: { backgroundColor: pinnedBgColor.dark },
440
470
  }
441
- : {}), children: jsxRuntime.jsx(react$1.Checkbox, { padding: table$1.getState().density, isChecked: row.getIsSelected(),
442
- disabled: !row.getCanSelect(),
443
- // indeterminate: row.getIsSomeSelected(),
444
- onChange: row.getToggleSelectedHandler() }) }), row.getVisibleCells().map((cell) => {
445
- return (jsxRuntime.jsx(table.Td, { padding: table$1.getState().density,
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) => {
475
+ return (jsxRuntime.jsx(table.Td, { padding: `${table$1.getDensityValue()}px`,
446
476
  // styling resize and pinning start
447
477
  maxWidth: `${cell.column.getSize()}px`, width: `${cell.column.getSize()}px`, left: cell.column.getIsPinned()
448
- ? `${cell.column.getStart("left") + 32}px`
478
+ ? `${cell.column.getStart("left") + SELECTION_BOX_WIDTH + table$1.getDensityValue() * 2}px`
449
479
  : undefined, backgroundColor: cell.column.getIsPinned() ? pinnedBgColor.light : undefined, position: cell.column.getIsPinned() ? "sticky" : "relative", zIndex: cell.column.getIsPinned() ? 1 : 0, _dark: {
450
480
  backgroundColor: cell.column.getIsPinned()
451
481
  ? pinnedBgColor.dark
@@ -473,12 +503,25 @@ const TableCards = ({}) => {
473
503
 
474
504
  const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
475
505
  const table = useDataTable().table;
476
- const SELECTION_BOX_WIDTH = 32;
477
- 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
478
521
  // styling resize and pinning start
479
522
  , {
480
523
  // styling resize and pinning start
481
- padding: table.getState().density, ...(table.getIsSomeColumnsPinned("left")
524
+ padding: `${table.getDensityValue()}px`, ...(table.getIsSomeColumnsPinned("left")
482
525
  ? {
483
526
  left: `0px`,
484
527
  backgroundColor: pinnedBgColor.light,
@@ -486,19 +529,21 @@ const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }
486
529
  zIndex: 1,
487
530
  _dark: { backgroundColor: pinnedBgColor.dark },
488
531
  }
489
- : {}), children: jsxRuntime.jsx(react$1.Checkbox, { isChecked: table.getIsAllRowsSelected(),
490
- // indeterminate: table.getIsSomeRowsSelected(),
491
- 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,
492
537
  // styling resize and pinning start
493
538
  maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, left: header.column.getIsPinned()
494
- ? `${header.getStart("left") + SELECTION_BOX_WIDTH}px`
539
+ ? `${header.getStart("left") + SELECTION_BOX_WIDTH + table.getDensityValue() * 2}px`
495
540
  : undefined, backgroundColor: header.column.getIsPinned() ? pinnedBgColor.light : undefined, position: header.column.getIsPinned() ? "sticky" : "relative", zIndex: header.column.getIsPinned() ? 1 : undefined, _dark: {
496
541
  backgroundColor: header.column.getIsPinned()
497
542
  ? pinnedBgColor.dark
498
543
  : undefined,
499
544
  },
500
545
  // styling resize and pinning end
501
- display: "grid", children: jsxRuntime.jsx(react$1.Menu, { children: jsxRuntime.jsx(react$1.MenuButton, { as: react$1.Box, padding: table.getState().density, display: "flex", alignItems: "center", justifyContent: "start", borderRadius: "0rem", _hover: { backgroundColor: "gray.100" }, children: jsxRuntime.jsxs(react$1.Flex, { gap: "0.5rem", alignItems: "center", children: [header.isPlaceholder
546
+ display: "grid", children: jsxRuntime.jsx(react$1.Menu, { children: jsxRuntime.jsx(react$1.MenuButton, { as: react$1.Box, padding: `${table.getDensityValue()}px`, display: "flex", alignItems: "center", justifyContent: "start", borderRadius: "0rem", _hover: { backgroundColor: "gray.100" }, children: jsxRuntime.jsxs(react$1.Flex, { gap: "0.5rem", alignItems: "center", children: [header.isPlaceholder
502
547
  ? null
503
548
  : reactTable.flexRender(header.column.columnDef.footer, header.getContext()), jsxRuntime.jsx(react$1.Box, { children: header.column.getCanSort() && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [header.column.getIsSorted() === false && (
504
549
  // <UpDownIcon />
@@ -507,8 +552,21 @@ const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }
507
552
 
508
553
  const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
509
554
  const { table } = useDataTable();
510
- const SELECTION_BOX_WIDTH = 32;
511
- 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
512
570
  // styling resize and pinning start
513
571
  , { ...(table.getIsSomeColumnsPinned("left")
514
572
  ? {
@@ -520,9 +578,9 @@ const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gra
520
578
  }
521
579
  : {}),
522
580
  // styling resize and pinning end
523
- padding: "0rem", children: jsxRuntime.jsx(react$1.Checkbox, { padding: table.getState().density, isChecked: table.getIsAllRowsSelected(),
524
- // indeterminate: table.getIsSomeRowsSelected(),
525
- 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) => {
526
584
  const resizeProps = {
527
585
  onClick: () => header.column.resetSize(),
528
586
  onMouseDown: header.getResizeHandler(),
@@ -532,14 +590,14 @@ const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gra
532
590
  return (jsxRuntime.jsxs(react$1.Th, { padding: "0rem", colSpan: header.colSpan,
533
591
  // styling resize and pinning start
534
592
  maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, left: header.column.getIsPinned()
535
- ? `${header.getStart("left") + SELECTION_BOX_WIDTH}px`
593
+ ? `${header.getStart("left") + SELECTION_BOX_WIDTH + table.getDensityValue() * 2}px`
536
594
  : undefined, backgroundColor: header.column.getIsPinned() ? pinnedBgColor.light : undefined, position: header.column.getIsPinned() ? "sticky" : "relative", zIndex: header.column.getIsPinned() ? 1 : undefined, _dark: {
537
595
  backgroundColor: header.column.getIsPinned()
538
596
  ? pinnedBgColor.dark
539
597
  : undefined,
540
598
  },
541
599
  // styling resize and pinning end
542
- display: "grid", children: [jsxRuntime.jsxs(react$1.Menu, { children: [jsxRuntime.jsx(react$1.MenuButton, { as: react$1.Box, padding: table.getState().density, display: "flex", alignItems: "center", justifyContent: "start", borderRadius: "0rem", _hover: { backgroundColor: "gray.100" }, children: jsxRuntime.jsxs(react$1.Flex, { gap: "0.5rem", alignItems: "center", children: [header.isPlaceholder
600
+ display: "grid", children: [jsxRuntime.jsxs(react$1.Menu, { children: [jsxRuntime.jsx(react$1.MenuButton, { as: react$1.Box, padding: `${table.getDensityValue()}px`, display: "flex", alignItems: "center", justifyContent: "start", borderRadius: "0rem", _hover: { backgroundColor: "gray.100" }, children: jsxRuntime.jsxs(react$1.Flex, { gap: "0.5rem", alignItems: "center", children: [header.isPlaceholder
543
601
  ? null
544
602
  : reactTable.flexRender(header.column.columnDef.header, header.getContext()), jsxRuntime.jsx(react$1.Box, { children: header.column.getCanSort() && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [header.column.getIsSorted() === false && (
545
603
  // <UpDownIcon />
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';
@@ -25,7 +25,7 @@ const DensityFeature = {
25
25
  // define the new feature's initial state
26
26
  getInitialState: (state) => {
27
27
  return {
28
- density: "1rem",
28
+ density: "sm",
29
29
  ...state,
30
30
  };
31
31
  },
@@ -53,15 +53,31 @@ const DensityFeature = {
53
53
  table.setDensity((old) => {
54
54
  if (value)
55
55
  return value;
56
- if (old === "0.5rem") {
57
- return "1rem";
56
+ if (old === "sm") {
57
+ return "md";
58
58
  }
59
- if (old === "1rem") {
60
- return "2rem";
59
+ if (old === "md") {
60
+ return "lg";
61
61
  }
62
- return "0.5rem";
62
+ return "sm";
63
63
  });
64
64
  };
65
+ table.getDensityValue = (value) => {
66
+ let density;
67
+ if (value) {
68
+ density = value;
69
+ }
70
+ else {
71
+ density = table.getState().density;
72
+ }
73
+ if (density === "sm") {
74
+ return 8;
75
+ }
76
+ if (density === "md") {
77
+ return 16;
78
+ }
79
+ return 32;
80
+ };
65
81
  },
66
82
  // if you need to add row instance APIs...
67
83
  // createRow: <TData extends RowData>(row, table): void => {},
@@ -85,10 +101,10 @@ const fuzzyFilter = (row, columnId, value, addMeta) => {
85
101
  // Return if the item should be filtered in/out
86
102
  return itemRank.passed;
87
103
  };
88
- const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, children, }) => {
104
+ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, density = 'sm', children, }) => {
89
105
  const [columnOrder, setColumnOrder] = useState([]);
90
106
  const [globalFilter, setGlobalFilter] = useState("");
91
- const [density, setDensity] = useState("1rem");
107
+ const [densityState, setDensity] = useState(density);
92
108
  const table = useReactTable({
93
109
  _features: [DensityFeature],
94
110
  data: data,
@@ -105,7 +121,7 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
105
121
  state: {
106
122
  columnOrder,
107
123
  globalFilter,
108
- density,
124
+ density: densityState,
109
125
  },
110
126
  onColumnOrderChange: (state) => {
111
127
  setColumnOrder(state);
@@ -165,7 +181,7 @@ const useDataFromUrl = ({ url, params = {}, defaultData, }) => {
165
181
  return { data, loading, hasError, refreshData };
166
182
  };
167
183
 
168
- const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, children, }) => {
184
+ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, density = "sm", children, }) => {
169
185
  const [sorting, setSorting] = useState([]);
170
186
  const [columnFilters, setColumnFilters] = useState([]); // can set initial column filter state here
171
187
  const [pagination, setPagination] = useState({
@@ -175,7 +191,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
175
191
  const [rowSelection, setRowSelection] = useState({});
176
192
  const [columnOrder, setColumnOrder] = useState([]);
177
193
  const [globalFilter, setGlobalFilter] = useState("");
178
- const [density, setDensity] = useState("1rem");
194
+ const [densityState, setDensity] = useState(density);
179
195
  const { data, loading, hasError, refreshData } = useDataFromUrl({
180
196
  url: url,
181
197
  defaultData: {
@@ -219,7 +235,7 @@ const DataTableServer = ({ columns, url, enableRowSelection = true, enableMultiR
219
235
  rowSelection,
220
236
  columnOrder,
221
237
  globalFilter,
222
- density,
238
+ density: densityState
223
239
  },
224
240
  defaultColumn: {
225
241
  size: 150, //starting column size
@@ -427,8 +443,22 @@ const Table = ({ children, ...props }) => {
427
443
 
428
444
  const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
429
445
  const { table } = useContext(TableContext);
430
- return (jsx(Tbody, { children: table.getRowModel().rows.map((row) => {
431
- 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")
432
462
  ? {
433
463
  left: `0px`,
434
464
  backgroundColor: pinnedBgColor.light,
@@ -436,14 +466,14 @@ const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, })
436
466
  zIndex: 1,
437
467
  _dark: { backgroundColor: pinnedBgColor.dark },
438
468
  }
439
- : {}), children: jsx(Checkbox, { padding: table.getState().density, isChecked: row.getIsSelected(),
440
- disabled: !row.getCanSelect(),
441
- // indeterminate: row.getIsSomeSelected(),
442
- onChange: row.getToggleSelectedHandler() }) }), row.getVisibleCells().map((cell) => {
443
- return (jsx(Td, { padding: table.getState().density,
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) => {
473
+ return (jsx(Td, { padding: `${table.getDensityValue()}px`,
444
474
  // styling resize and pinning start
445
475
  maxWidth: `${cell.column.getSize()}px`, width: `${cell.column.getSize()}px`, left: cell.column.getIsPinned()
446
- ? `${cell.column.getStart("left") + 32}px`
476
+ ? `${cell.column.getStart("left") + SELECTION_BOX_WIDTH + table.getDensityValue() * 2}px`
447
477
  : undefined, backgroundColor: cell.column.getIsPinned() ? pinnedBgColor.light : undefined, position: cell.column.getIsPinned() ? "sticky" : "relative", zIndex: cell.column.getIsPinned() ? 1 : 0, _dark: {
448
478
  backgroundColor: cell.column.getIsPinned()
449
479
  ? pinnedBgColor.dark
@@ -471,12 +501,25 @@ const TableCards = ({}) => {
471
501
 
472
502
  const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
473
503
  const table = useDataTable().table;
474
- const SELECTION_BOX_WIDTH = 32;
475
- 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
476
519
  // styling resize and pinning start
477
520
  , {
478
521
  // styling resize and pinning start
479
- padding: table.getState().density, ...(table.getIsSomeColumnsPinned("left")
522
+ padding: `${table.getDensityValue()}px`, ...(table.getIsSomeColumnsPinned("left")
480
523
  ? {
481
524
  left: `0px`,
482
525
  backgroundColor: pinnedBgColor.light,
@@ -484,19 +527,21 @@ const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }
484
527
  zIndex: 1,
485
528
  _dark: { backgroundColor: pinnedBgColor.dark },
486
529
  }
487
- : {}), children: jsx(Checkbox, { isChecked: table.getIsAllRowsSelected(),
488
- // indeterminate: table.getIsSomeRowsSelected(),
489
- 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,
490
535
  // styling resize and pinning start
491
536
  maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, left: header.column.getIsPinned()
492
- ? `${header.getStart("left") + SELECTION_BOX_WIDTH}px`
537
+ ? `${header.getStart("left") + SELECTION_BOX_WIDTH + table.getDensityValue() * 2}px`
493
538
  : undefined, backgroundColor: header.column.getIsPinned() ? pinnedBgColor.light : undefined, position: header.column.getIsPinned() ? "sticky" : "relative", zIndex: header.column.getIsPinned() ? 1 : undefined, _dark: {
494
539
  backgroundColor: header.column.getIsPinned()
495
540
  ? pinnedBgColor.dark
496
541
  : undefined,
497
542
  },
498
543
  // styling resize and pinning end
499
- display: "grid", children: jsx(Menu, { children: jsx(MenuButton, { as: Box, padding: table.getState().density, display: "flex", alignItems: "center", justifyContent: "start", borderRadius: "0rem", _hover: { backgroundColor: "gray.100" }, children: jsxs(Flex, { gap: "0.5rem", alignItems: "center", children: [header.isPlaceholder
544
+ display: "grid", children: jsx(Menu, { children: jsx(MenuButton, { as: Box, padding: `${table.getDensityValue()}px`, display: "flex", alignItems: "center", justifyContent: "start", borderRadius: "0rem", _hover: { backgroundColor: "gray.100" }, children: jsxs(Flex, { gap: "0.5rem", alignItems: "center", children: [header.isPlaceholder
500
545
  ? null
501
546
  : flexRender(header.column.columnDef.footer, header.getContext()), jsx(Box, { children: header.column.getCanSort() && (jsxs(Fragment, { children: [header.column.getIsSorted() === false && (
502
547
  // <UpDownIcon />
@@ -505,8 +550,21 @@ const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }
505
550
 
506
551
  const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
507
552
  const { table } = useDataTable();
508
- const SELECTION_BOX_WIDTH = 32;
509
- 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
510
568
  // styling resize and pinning start
511
569
  , { ...(table.getIsSomeColumnsPinned("left")
512
570
  ? {
@@ -518,9 +576,9 @@ const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gra
518
576
  }
519
577
  : {}),
520
578
  // styling resize and pinning end
521
- padding: "0rem", children: jsx(Checkbox, { padding: table.getState().density, isChecked: table.getIsAllRowsSelected(),
522
- // indeterminate: table.getIsSomeRowsSelected(),
523
- 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) => {
524
582
  const resizeProps = {
525
583
  onClick: () => header.column.resetSize(),
526
584
  onMouseDown: header.getResizeHandler(),
@@ -530,14 +588,14 @@ const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gra
530
588
  return (jsxs(Th, { padding: "0rem", colSpan: header.colSpan,
531
589
  // styling resize and pinning start
532
590
  maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, left: header.column.getIsPinned()
533
- ? `${header.getStart("left") + SELECTION_BOX_WIDTH}px`
591
+ ? `${header.getStart("left") + SELECTION_BOX_WIDTH + table.getDensityValue() * 2}px`
534
592
  : undefined, backgroundColor: header.column.getIsPinned() ? pinnedBgColor.light : undefined, position: header.column.getIsPinned() ? "sticky" : "relative", zIndex: header.column.getIsPinned() ? 1 : undefined, _dark: {
535
593
  backgroundColor: header.column.getIsPinned()
536
594
  ? pinnedBgColor.dark
537
595
  : undefined,
538
596
  },
539
597
  // styling resize and pinning end
540
- display: "grid", children: [jsxs(Menu, { children: [jsx(MenuButton, { as: Box, padding: table.getState().density, display: "flex", alignItems: "center", justifyContent: "start", borderRadius: "0rem", _hover: { backgroundColor: "gray.100" }, children: jsxs(Flex, { gap: "0.5rem", alignItems: "center", children: [header.isPlaceholder
598
+ display: "grid", children: [jsxs(Menu, { children: [jsx(MenuButton, { as: Box, padding: `${table.getDensityValue()}px`, display: "flex", alignItems: "center", justifyContent: "start", borderRadius: "0rem", _hover: { backgroundColor: "gray.100" }, children: jsxs(Flex, { gap: "0.5rem", alignItems: "center", children: [header.isPlaceholder
541
599
  ? null
542
600
  : flexRender(header.column.columnDef.header, header.getContext()), jsx(Box, { children: header.column.getCanSort() && (jsxs(Fragment, { children: [header.column.getIsSorted() === false && (
543
601
  // <UpDownIcon />
package/dist/types/components/DataTable.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import { ColumnDef, FilterFn } from "@tanstack/react-table";
3
3
  import { RankingInfo } from "@tanstack/match-sorter-utils";
4
+ import { DensityState } from "./DensityFeature";
4
5
  declare module "@tanstack/react-table" {
5
6
  interface FilterFns {
6
7
  fuzzy: FilterFn<unknown>;
@@ -13,8 +14,9 @@ export interface DataTableProps<T> {
13
14
  children: JSX.Element | JSX.Element[];
14
15
  data: T[];
15
16
  columns: ColumnDef<T, any>[];
17
+ density?: DensityState;
16
18
  enableRowSelection?: boolean;
17
19
  enableMultiRowSelection?: boolean;
18
20
  enableSubRowSelection?: boolean;
19
21
  }
20
- export declare const DataTable: <TData>({ columns, data, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, children, }: DataTableProps<TData>) => import("react/jsx-runtime").JSX.Element;
22
+ export declare const DataTable: <TData>({ columns, data, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, density, children, }: DataTableProps<TData>) => import("react/jsx-runtime").JSX.Element;
package/dist/types/components/DataTableServer.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import { ColumnDef, RowData } from "@tanstack/react-table";
3
+ import { DensityState } from "./DensityFeature";
3
4
  export interface DataTableServerProps<T> {
4
5
  children: JSX.Element | JSX.Element[];
5
6
  url: string;
@@ -7,6 +8,7 @@ export interface DataTableServerProps<T> {
7
8
  enableRowSelection?: boolean;
8
9
  enableMultiRowSelection?: boolean;
9
10
  enableSubRowSelection?: boolean;
11
+ density?: DensityState;
10
12
  }
11
13
  export interface Result<T> {
12
14
  results: T[];
@@ -21,4 +23,4 @@ declare module "@tanstack/react-table" {
21
23
  displayName: string;
22
24
  }
23
25
  }
24
- export declare const DataTableServer: <TData>({ columns, url, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, children, }: DataTableServerProps<TData>) => import("react/jsx-runtime").JSX.Element;
26
+ export declare const DataTableServer: <TData>({ columns, url, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, density, children, }: DataTableServerProps<TData>) => import("react/jsx-runtime").JSX.Element;
package/dist/types/components/DensityFeature.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { OnChangeFn, Updater, RowData, TableFeature } from "@tanstack/react-table";
2
- export type DensityState = "0.5rem" | "1rem" | "2rem";
2
+ export type DensityState = "sm" | "md" | "lg";
3
3
  export interface DensityTableState {
4
4
  density: DensityState;
5
5
  }
@@ -10,6 +10,7 @@ export interface DensityOptions {
10
10
  export interface DensityInstance {
11
11
  setDensity: (updater: Updater<DensityState>) => void;
12
12
  toggleDensity: (value?: DensityState) => void;
13
+ getDensityValue: (value?: DensityState) => number;
13
14
  }
14
15
  declare module "@tanstack/react-table" {
15
16
  interface TableState extends DensityTableState {
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.27",
3
+ "version": "1.0.29",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",