@bsol-oss/react-datatable5 1.0.26 → 1.0.28

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 (8) hide show
  1. package/README.md +20 -8
  2. package/dist/index.d.ts +27 -3
  3. package/dist/index.js +41 -24
  4. package/dist/index.mjs +41 -24
  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/package.json +1 -1
package/README.md CHANGED
@@ -12,18 +12,18 @@ npm install @tanstack/react-table @chakra-ui/react @bsol-oss/react-datatable5
12
12
 
13
13
  ```tsx
14
14
  <DataTable columns={columns} data={data}>
15
- <Flex gap="0.25rem">
15
+ <Flex>
16
16
  <TablePagination />
17
17
  <ButtonGroup isAttached>
18
18
  <EditViewButton />
19
19
  <EditFilterButton />
20
- <EditSortingButton />
21
20
  </ButtonGroup>
22
21
  <EditOrderButton />
23
22
  <PageSizeControl />
24
23
  <ButtonGroup isAttached>
25
24
  <TableSelector />
26
25
  </ButtonGroup>
26
+ <GlobalFilter />
27
27
  </Flex>
28
28
  <Table>
29
29
  <TableHeader canResize />
@@ -42,31 +42,43 @@ npm install @tanstack/react-table @chakra-ui/react @bsol-oss/react-datatable5
42
42
  columns={columns}
43
43
  url={"http://localhost:8333/api/v1/gpt/chat/history/all"}
44
44
  >
45
- <Flex gap="0.25rem">
45
+ <Flex>
46
46
  <TablePagination />
47
47
  <ButtonGroup isAttached>
48
48
  <EditViewButton />
49
49
  <EditFilterButton />
50
- <EditSortingButton />
50
+ <DensityToggleButton />
51
51
  </ButtonGroup>
52
52
  <EditOrderButton />
53
53
  <PageSizeControl />
54
54
  <ButtonGroup isAttached>
55
55
  <TableSelector />
56
56
  </ButtonGroup>
57
+ <GlobalFilter />
57
58
  </Flex>
58
59
  <Table>
59
60
  <TableHeader canResize />
60
61
  <TableBody />
61
62
  <TableFooter />
62
63
  </Table>
63
- <PageSizeControl />
64
- <TablePagination />
64
+ <Flex gap="0.25rem">
65
+ <TablePagination />
66
+ <ButtonGroup isAttached>
67
+ <EditViewButton />
68
+ <EditFilterButton />
69
+ </ButtonGroup>
70
+ <EditOrderButton />
71
+ <PageSizeControl />
72
+ <ButtonGroup isAttached>
73
+ <TableSelector />
74
+ </ButtonGroup>
75
+ </Flex>
65
76
  </DataTableServer>
66
77
  ```
67
78
 
68
79
  Example Url generated by the DataTableServer
69
80
 
70
81
  ```
71
- GET http://localhost:8333/api/v1/gpt/chat/history/all?pagination={"offset":0,"rows":10}&sorting={"field":"session_id","sort":"asc"}&where={"last_user_message":"vdsdf"}
72
- ```
82
+ GET
83
+ http://localhost:8333/api/v1/gpt/chat/history/all?pagination={"offset":0,"rows":10}&sorting={}&where={}&searching=hello
84
+ ```
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
 
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,6 +445,7 @@ 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);
448
+ const SELECTION_BOX_WIDTH = 16;
432
449
  return (jsxRuntime.jsx(table.Tbody, { children: table$1.getRowModel().rows.map((row) => {
433
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")
434
451
  ? {
@@ -438,14 +455,14 @@ const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, })
438
455
  zIndex: 1,
439
456
  _dark: { backgroundColor: pinnedBgColor.dark },
440
457
  }
441
- : {}), children: jsxRuntime.jsx(react$1.Checkbox, { padding: table$1.getState().density, isChecked: row.getIsSelected(),
458
+ : {}), children: jsxRuntime.jsx(react$1.Checkbox, { padding: `${table$1.getDensityValue()}px`, isChecked: row.getIsSelected(),
442
459
  disabled: !row.getCanSelect(),
443
460
  // indeterminate: row.getIsSomeSelected(),
444
461
  onChange: row.getToggleSelectedHandler() }) }), row.getVisibleCells().map((cell) => {
445
- return (jsxRuntime.jsx(table.Td, { padding: table$1.getState().density,
462
+ return (jsxRuntime.jsx(table.Td, { padding: `${table$1.getDensityValue()}px`,
446
463
  // styling resize and pinning start
447
464
  maxWidth: `${cell.column.getSize()}px`, width: `${cell.column.getSize()}px`, left: cell.column.getIsPinned()
448
- ? `${cell.column.getStart("left") + 32}px`
465
+ ? `${cell.column.getStart("left") + SELECTION_BOX_WIDTH + table$1.getDensityValue() * 2}px`
449
466
  : undefined, backgroundColor: cell.column.getIsPinned() ? pinnedBgColor.light : undefined, position: cell.column.getIsPinned() ? "sticky" : "relative", zIndex: cell.column.getIsPinned() ? 1 : 0, _dark: {
450
467
  backgroundColor: cell.column.getIsPinned()
451
468
  ? pinnedBgColor.dark
@@ -473,12 +490,12 @@ const TableCards = ({}) => {
473
490
 
474
491
  const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
475
492
  const table = useDataTable().table;
476
- const SELECTION_BOX_WIDTH = 32;
493
+ const SELECTION_BOX_WIDTH = 16;
477
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
478
495
  // styling resize and pinning start
479
496
  , {
480
497
  // styling resize and pinning start
481
- padding: table.getState().density, ...(table.getIsSomeColumnsPinned("left")
498
+ padding: `${table.getDensityValue()}px`, ...(table.getIsSomeColumnsPinned("left")
482
499
  ? {
483
500
  left: `0px`,
484
501
  backgroundColor: pinnedBgColor.light,
@@ -491,14 +508,14 @@ const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }
491
508
  onChange: table.getToggleAllRowsSelectedHandler() }) }), footerGroup.headers.map((header) => (jsxRuntime.jsx(react$1.Th, { padding: "0", colSpan: header.colSpan,
492
509
  // styling resize and pinning start
493
510
  maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, left: header.column.getIsPinned()
494
- ? `${header.getStart("left") + SELECTION_BOX_WIDTH}px`
511
+ ? `${header.getStart("left") + SELECTION_BOX_WIDTH + table.getDensityValue() * 2}px`
495
512
  : undefined, backgroundColor: header.column.getIsPinned() ? pinnedBgColor.light : undefined, position: header.column.getIsPinned() ? "sticky" : "relative", zIndex: header.column.getIsPinned() ? 1 : undefined, _dark: {
496
513
  backgroundColor: header.column.getIsPinned()
497
514
  ? pinnedBgColor.dark
498
515
  : undefined,
499
516
  },
500
517
  // 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
518
+ 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
519
  ? null
503
520
  : 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
521
  // <UpDownIcon />
@@ -507,7 +524,7 @@ const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }
507
524
 
508
525
  const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
509
526
  const { table } = useDataTable();
510
- const SELECTION_BOX_WIDTH = 32;
527
+ const SELECTION_BOX_WIDTH = 16;
511
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
512
529
  // styling resize and pinning start
513
530
  , { ...(table.getIsSomeColumnsPinned("left")
@@ -520,7 +537,7 @@ const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gra
520
537
  }
521
538
  : {}),
522
539
  // styling resize and pinning end
523
- padding: "0rem", children: jsxRuntime.jsx(react$1.Checkbox, { padding: table.getState().density, isChecked: table.getIsAllRowsSelected(),
540
+ padding: "0rem", children: jsxRuntime.jsx(react$1.Checkbox, { padding: `${table.getDensityValue()}px`, isChecked: table.getIsAllRowsSelected(),
524
541
  // indeterminate: table.getIsSomeRowsSelected(),
525
542
  onChange: table.getToggleAllRowsSelectedHandler() }) }), headerGroup.headers.map((header) => {
526
543
  const resizeProps = {
@@ -532,14 +549,14 @@ const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gra
532
549
  return (jsxRuntime.jsxs(react$1.Th, { padding: "0rem", colSpan: header.colSpan,
533
550
  // styling resize and pinning start
534
551
  maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, left: header.column.getIsPinned()
535
- ? `${header.getStart("left") + SELECTION_BOX_WIDTH}px`
552
+ ? `${header.getStart("left") + SELECTION_BOX_WIDTH + table.getDensityValue() * 2}px`
536
553
  : undefined, backgroundColor: header.column.getIsPinned() ? pinnedBgColor.light : undefined, position: header.column.getIsPinned() ? "sticky" : "relative", zIndex: header.column.getIsPinned() ? 1 : undefined, _dark: {
537
554
  backgroundColor: header.column.getIsPinned()
538
555
  ? pinnedBgColor.dark
539
556
  : undefined,
540
557
  },
541
558
  // 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
559
+ 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
560
  ? null
544
561
  : 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
562
  // <UpDownIcon />
@@ -580,7 +597,7 @@ const TableSelector = () => {
580
597
 
581
598
  const TextCell = ({ label, noOfLines = [1], padding = "0rem", children, }) => {
582
599
  if (label) {
583
- return (jsxRuntime.jsx(react$1.Box, { padding: padding, children: jsxRuntime.jsx(react$1.Tooltip, { label: jsxRuntime.jsx(react$1.Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [5], children: label }), placement: "auto", children: jsxRuntime.jsx(react$1.Text, { as: "span", textOverflow: "ellipsis", noOfLines: noOfLines, children: children }) }) }));
600
+ return (jsxRuntime.jsx(react$1.Box, { padding: padding, children: jsxRuntime.jsx(react$1.Tooltip, { label: jsxRuntime.jsx(react$1.Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [5], children: label }), placement: "auto", children: jsxRuntime.jsx(react$1.Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "break-all", noOfLines: noOfLines, children: children }) }) }));
584
601
  }
585
602
  return (jsxRuntime.jsx(react$1.Box, { padding: padding, children: jsxRuntime.jsx(react$1.Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "break-all", noOfLines: noOfLines, children: children }) }));
586
603
  };
package/dist/index.mjs CHANGED
@@ -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,6 +443,7 @@ const Table = ({ children, ...props }) => {
427
443
 
428
444
  const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
429
445
  const { table } = useContext(TableContext);
446
+ const SELECTION_BOX_WIDTH = 16;
430
447
  return (jsx(Tbody, { children: table.getRowModel().rows.map((row) => {
431
448
  return (jsxs(Tr, { display: "flex", _hover: { backgroundColor: "rgba(178,178,178,0.1)" }, zIndex: 1, children: [jsx(Td, { padding: "0rem", ...(table.getIsSomeColumnsPinned("left")
432
449
  ? {
@@ -436,14 +453,14 @@ const TableBody = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, })
436
453
  zIndex: 1,
437
454
  _dark: { backgroundColor: pinnedBgColor.dark },
438
455
  }
439
- : {}), children: jsx(Checkbox, { padding: table.getState().density, isChecked: row.getIsSelected(),
456
+ : {}), children: jsx(Checkbox, { padding: `${table.getDensityValue()}px`, isChecked: row.getIsSelected(),
440
457
  disabled: !row.getCanSelect(),
441
458
  // indeterminate: row.getIsSomeSelected(),
442
459
  onChange: row.getToggleSelectedHandler() }) }), row.getVisibleCells().map((cell) => {
443
- return (jsx(Td, { padding: table.getState().density,
460
+ return (jsx(Td, { padding: `${table.getDensityValue()}px`,
444
461
  // styling resize and pinning start
445
462
  maxWidth: `${cell.column.getSize()}px`, width: `${cell.column.getSize()}px`, left: cell.column.getIsPinned()
446
- ? `${cell.column.getStart("left") + 32}px`
463
+ ? `${cell.column.getStart("left") + SELECTION_BOX_WIDTH + table.getDensityValue() * 2}px`
447
464
  : undefined, backgroundColor: cell.column.getIsPinned() ? pinnedBgColor.light : undefined, position: cell.column.getIsPinned() ? "sticky" : "relative", zIndex: cell.column.getIsPinned() ? 1 : 0, _dark: {
448
465
  backgroundColor: cell.column.getIsPinned()
449
466
  ? pinnedBgColor.dark
@@ -471,12 +488,12 @@ const TableCards = ({}) => {
471
488
 
472
489
  const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
473
490
  const table = useDataTable().table;
474
- const SELECTION_BOX_WIDTH = 32;
491
+ const SELECTION_BOX_WIDTH = 16;
475
492
  return (jsx(Tfoot, { children: table.getFooterGroups().map((footerGroup) => (jsxs(Tr$1, { display: "flex", children: [jsx(Th
476
493
  // styling resize and pinning start
477
494
  , {
478
495
  // styling resize and pinning start
479
- padding: table.getState().density, ...(table.getIsSomeColumnsPinned("left")
496
+ padding: `${table.getDensityValue()}px`, ...(table.getIsSomeColumnsPinned("left")
480
497
  ? {
481
498
  left: `0px`,
482
499
  backgroundColor: pinnedBgColor.light,
@@ -489,14 +506,14 @@ const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }
489
506
  onChange: table.getToggleAllRowsSelectedHandler() }) }), footerGroup.headers.map((header) => (jsx(Th, { padding: "0", colSpan: header.colSpan,
490
507
  // styling resize and pinning start
491
508
  maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, left: header.column.getIsPinned()
492
- ? `${header.getStart("left") + SELECTION_BOX_WIDTH}px`
509
+ ? `${header.getStart("left") + SELECTION_BOX_WIDTH + table.getDensityValue() * 2}px`
493
510
  : undefined, backgroundColor: header.column.getIsPinned() ? pinnedBgColor.light : undefined, position: header.column.getIsPinned() ? "sticky" : "relative", zIndex: header.column.getIsPinned() ? 1 : undefined, _dark: {
494
511
  backgroundColor: header.column.getIsPinned()
495
512
  ? pinnedBgColor.dark
496
513
  : undefined,
497
514
  },
498
515
  // 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
516
+ 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
517
  ? null
501
518
  : flexRender(header.column.columnDef.footer, header.getContext()), jsx(Box, { children: header.column.getCanSort() && (jsxs(Fragment, { children: [header.column.getIsSorted() === false && (
502
519
  // <UpDownIcon />
@@ -505,7 +522,7 @@ const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }
505
522
 
506
523
  const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gray.700" }, }) => {
507
524
  const { table } = useDataTable();
508
- const SELECTION_BOX_WIDTH = 32;
525
+ const SELECTION_BOX_WIDTH = 16;
509
526
  return (jsx(Thead, { children: table.getHeaderGroups().map((headerGroup) => (jsxs(Tr$1, { display: "flex", children: [jsx(Th
510
527
  // styling resize and pinning start
511
528
  , { ...(table.getIsSomeColumnsPinned("left")
@@ -518,7 +535,7 @@ const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gra
518
535
  }
519
536
  : {}),
520
537
  // styling resize and pinning end
521
- padding: "0rem", children: jsx(Checkbox, { padding: table.getState().density, isChecked: table.getIsAllRowsSelected(),
538
+ padding: "0rem", children: jsx(Checkbox, { padding: `${table.getDensityValue()}px`, isChecked: table.getIsAllRowsSelected(),
522
539
  // indeterminate: table.getIsSomeRowsSelected(),
523
540
  onChange: table.getToggleAllRowsSelectedHandler() }) }), headerGroup.headers.map((header) => {
524
541
  const resizeProps = {
@@ -530,14 +547,14 @@ const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gra
530
547
  return (jsxs(Th, { padding: "0rem", colSpan: header.colSpan,
531
548
  // styling resize and pinning start
532
549
  maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, left: header.column.getIsPinned()
533
- ? `${header.getStart("left") + SELECTION_BOX_WIDTH}px`
550
+ ? `${header.getStart("left") + SELECTION_BOX_WIDTH + table.getDensityValue() * 2}px`
534
551
  : undefined, backgroundColor: header.column.getIsPinned() ? pinnedBgColor.light : undefined, position: header.column.getIsPinned() ? "sticky" : "relative", zIndex: header.column.getIsPinned() ? 1 : undefined, _dark: {
535
552
  backgroundColor: header.column.getIsPinned()
536
553
  ? pinnedBgColor.dark
537
554
  : undefined,
538
555
  },
539
556
  // 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
557
+ 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
558
  ? null
542
559
  : flexRender(header.column.columnDef.header, header.getContext()), jsx(Box, { children: header.column.getCanSort() && (jsxs(Fragment, { children: [header.column.getIsSorted() === false && (
543
560
  // <UpDownIcon />
@@ -578,7 +595,7 @@ const TableSelector = () => {
578
595
 
579
596
  const TextCell = ({ label, noOfLines = [1], padding = "0rem", children, }) => {
580
597
  if (label) {
581
- return (jsx(Box, { padding: padding, children: jsx(Tooltip, { label: jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [5], children: label }), placement: "auto", children: jsx(Text, { as: "span", textOverflow: "ellipsis", noOfLines: noOfLines, children: children }) }) }));
598
+ return (jsx(Box, { padding: padding, children: jsx(Tooltip, { label: jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", noOfLines: [5], children: label }), placement: "auto", children: jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "break-all", noOfLines: noOfLines, children: children }) }) }));
582
599
  }
583
600
  return (jsx(Box, { padding: padding, children: jsx(Text, { as: "span", overflow: "hidden", textOverflow: "ellipsis", wordBreak: "break-all", noOfLines: noOfLines, children: children }) }));
584
601
  };
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bsol-oss/react-datatable5",
3
- "version": "1.0.26",
3
+ "version": "1.0.28",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",