@bsol-oss/react-datatable5 7.4.2 → 7.5.1

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 (5) hide show
  1. package/dist/index.d.ts +6 -0
  2. package/dist/index.js +22 -10
  3. package/dist/index.mjs +23 -11
  4. package/dist/types/index.d.ts +6 -0
  5. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -489,6 +489,12 @@ interface RangeDatePickerProps extends Props, RangeCalendarProps {
489
489
 
490
490
  declare module "@tanstack/react-table" {
491
491
  interface ColumnMeta<TData extends RowData, TValue> {
492
+ /**
493
+ * If `showCustomDisplay` is `true`, it will use the cell render to render the value.
494
+ *
495
+ * Effective in components: `DataDisplay`
496
+ */
497
+ showCustomDisplay?: boolean;
492
498
  /**
493
499
  * The display name of the column, used for rendering headers.
494
500
  */
package/dist/index.js CHANGED
@@ -616,8 +616,8 @@ const RecordDisplay = ({ object, boxProps }) => {
616
616
  if (object === null) {
617
617
  return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "null" });
618
618
  }
619
- return (jsxRuntime.jsx(react.Box, { rowGap: 1, columnGap: 2, display: "grid", gridTemplateColumns: "auto 1fr", overflow: "auto", ...boxProps, children: Object.entries(object).map(([field, value]) => {
620
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Text, { color: "gray.400", children: snakeToLabel(field) }), jsxRuntime.jsx(react.Text, { children: typeof value === "object" ? JSON.stringify(value) : value })] }));
619
+ return (jsxRuntime.jsx(react.Grid, { rowGap: 1, overflow: "auto", ...boxProps, children: Object.entries(object).map(([field, value]) => {
620
+ return (jsxRuntime.jsxs(react.Grid, { columnGap: 2, gridTemplateColumns: "auto 1fr", children: [jsxRuntime.jsx(react.Text, { color: "gray.400", children: snakeToLabel(field) }), jsxRuntime.jsx(react.Text, { children: typeof value === "object" ? JSON.stringify(value) : value })] }, field));
621
621
  }) }));
622
622
  };
623
623
 
@@ -641,6 +641,10 @@ const DataDisplay = ({ variant = "" }) => {
641
641
  if (variant == "horizontal") {
642
642
  return (jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: "1", children: table.getRowModel().rows.map((row) => {
643
643
  return (jsxRuntime.jsx(react.Card.Root, { children: jsxRuntime.jsx(react.Card.Body, { children: jsxRuntime.jsx(react.DataList.Root, { gap: 4, padding: 4, display: "grid", variant: "subtle", orientation: "horizontal", overflow: "auto", children: row.getVisibleCells().map((cell) => {
644
+ const showCustomDataDisplay = cell.column.columnDef.meta?.showCustomDisplay ?? false;
645
+ if (showCustomDataDisplay) {
646
+ return (jsxRuntime.jsx(react.Flex, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
647
+ }
644
648
  const value = cell.getValue();
645
649
  if (typeof value === "object") {
646
650
  return (jsxRuntime.jsxs(react.DataList.Item, { children: [jsxRuntime.jsx(react.DataList.ItemLabel, { children: snakeToLabel(cell.column.id) }), jsxRuntime.jsx(RecordDisplay, { boxProps: {
@@ -658,6 +662,10 @@ const DataDisplay = ({ variant = "" }) => {
658
662
  if (variant == "stats") {
659
663
  return (jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: "1", children: table.getRowModel().rows.map((row) => {
660
664
  return (jsxRuntime.jsx(react.Card.Root, { children: jsxRuntime.jsx(react.Card.Body, { children: jsxRuntime.jsx(react.DataList.Root, { gap: 4, padding: 4, display: "flex", flexFlow: "row", variant: "subtle", overflow: "auto", children: row.getVisibleCells().map((cell) => {
665
+ const showCustomDataDisplay = cell.column.columnDef.meta?.showCustomDisplay ?? false;
666
+ if (showCustomDataDisplay) {
667
+ return (jsxRuntime.jsx(react.Flex, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
668
+ }
661
669
  const value = cell.getValue();
662
670
  if (typeof value === "object") {
663
671
  return (jsxRuntime.jsxs(react.DataList.Item, { display: "inline-flex", flexFlow: "column", justifyContent: "center", alignItems: "center", flex: "1 0 0%", children: [jsxRuntime.jsx(react.DataList.ItemLabel, { children: snakeToLabel(cell.column.id) }), jsxRuntime.jsx(RecordDisplay, { boxProps: {
@@ -674,6 +682,10 @@ const DataDisplay = ({ variant = "" }) => {
674
682
  }
675
683
  return (jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: "1", children: table.getRowModel().rows.map((row) => {
676
684
  return (jsxRuntime.jsx(react.Card.Root, { children: jsxRuntime.jsx(react.Card.Body, { children: jsxRuntime.jsx(react.DataList.Root, { gap: 4, padding: 4, display: "grid", variant: "subtle", gridTemplateColumns: "repeat(auto-fit, minmax(20rem, 1fr))", children: row.getVisibleCells().map((cell) => {
685
+ const showCustomDataDisplay = cell.column.columnDef.meta?.showCustomDisplay ?? false;
686
+ if (showCustomDataDisplay) {
687
+ return (jsxRuntime.jsx(react.Flex, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
688
+ }
677
689
  const value = cell.getValue();
678
690
  if (typeof value === "object") {
679
691
  return (jsxRuntime.jsxs(react.DataList.Item, { children: [jsxRuntime.jsx(react.DataList.ItemLabel, { children: snakeToLabel(cell.column.id) }), jsxRuntime.jsx(RecordDisplay, { boxProps: {
@@ -1770,13 +1782,13 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
1770
1782
  gridRow, children: [isMultiple && (jsxRuntime.jsxs(react.Flex, { flexFlow: "wrap", gap: 1, children: [selectedIds.map((id) => {
1771
1783
  const item = idMap[id];
1772
1784
  if (item === undefined) {
1773
- return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "undefined" });
1785
+ return jsxRuntime.jsx(react.Text, { children: "undefined" }, id);
1774
1786
  }
1775
1787
  return (jsxRuntime.jsx(Tag, { closable: true, onClick: () => {
1776
1788
  setValue(column, watchIds.filter((id) => id != item[column_ref]));
1777
1789
  }, children: !!renderDisplay === true
1778
1790
  ? renderDisplay(item)
1779
- : item[display_column] }));
1791
+ : item[display_column] }, id));
1780
1792
  }), jsxRuntime.jsx(Tag, { cursor: "pointer", onClick: () => {
1781
1793
  setOpenSearchResult(true);
1782
1794
  }, children: "Add" })] })), !isMultiple && (jsxRuntime.jsx(Button, { variant: "outline", onClick: () => {
@@ -1805,7 +1817,7 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
1805
1817
  setValue(column, [...newSet]);
1806
1818
  }, opacity: 0.7, _hover: { opacity: 1 }, ...(selected ? { color: "gray.400/50" } : {}), children: !!renderDisplay === true
1807
1819
  ? renderDisplay(item)
1808
- : item[display_column] }));
1820
+ : item[display_column] }, item[column_ref]));
1809
1821
  }) }), isDirty && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [dataList.length <= 0 && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Empty Search Result" }), " "] })), count > dataList.length && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(Button, { onClick: async () => {
1810
1822
  setLimit((limit) => limit + 10);
1811
1823
  await getTableData({
@@ -1929,7 +1941,7 @@ const BooleanPicker = ({ column }) => {
1929
1941
  const { gridColumn, gridRow, title } = schema.properties[column];
1930
1942
  return (jsxRuntime.jsxs(Field, { label: `${title ?? snakeToLabel(column)}`, required: isRequired, alignItems: "stretch", gridColumn,
1931
1943
  gridRow, children: [jsxRuntime.jsx(CheckboxCard, { checked: value, variant: "surface", onSelect: () => {
1932
- setValue(column, !getValues(column));
1944
+ setValue(column, !value);
1933
1945
  } }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: fieldRequired ?? "The field is requried" }))] }));
1934
1946
  };
1935
1947
 
@@ -2171,7 +2183,7 @@ const TagPicker = ({ column }) => {
2171
2183
  return (jsxRuntime.jsx(CheckboxCard, { label: tagName, value: id, flex: "0 0 0%", disabled: true, colorPalette: "blue" }, `${tagName}-${id}`));
2172
2184
  }
2173
2185
  return (jsxRuntime.jsx(CheckboxCard, { label: tagName, value: id, flex: "0 0 0%" }, `${tagName}-${id}`));
2174
- }) }) }))] }));
2186
+ }) }) }))] }, `tag-${parent_tag_name}`));
2175
2187
  }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: (errors[`${column}`]?.message ?? "No error message") }))] }));
2176
2188
  };
2177
2189
 
@@ -2527,12 +2539,12 @@ const FormInternal = () => {
2527
2539
  if (variant === "file-picker") {
2528
2540
  return jsxRuntime.jsx(FilePicker, { column: key }, `form-${key}`);
2529
2541
  }
2530
- return jsxRuntime.jsx(jsxRuntime.Fragment, { children: `array ${column}` });
2542
+ return jsxRuntime.jsx(react.Text, { children: `array ${column}` }, `form-${key}`);
2531
2543
  }
2532
2544
  if (type === "null") {
2533
- return jsxRuntime.jsx(jsxRuntime.Fragment, { children: `null ${column}` });
2545
+ return jsxRuntime.jsx(react.Text, { children: `null ${column}` }, `form-${key}`);
2534
2546
  }
2535
- return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "missing type" });
2547
+ return jsxRuntime.jsx(react.Text, { children: "missing type" }, `form-${key}`);
2536
2548
  }) }), jsxRuntime.jsx(Button, { onClick: () => {
2537
2549
  methods.handleSubmit(onValid)();
2538
2550
  }, formNoValidate: true, children: submit ?? "Submit" })] }), isError && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: ["isError", jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [" ", `${error}`] })] }))] }));
package/dist/index.mjs CHANGED
@@ -11,7 +11,7 @@ import { BiDownArrow, BiUpArrow } from 'react-icons/bi';
11
11
  import { CgClose } from 'react-icons/cg';
12
12
  import { IoMdEye, IoMdCheckbox } from 'react-icons/io';
13
13
  import { HiMiniEllipsisHorizontal, HiChevronLeft, HiChevronRight } from 'react-icons/hi2';
14
- import { makeStateUpdater, functionalUpdate, useReactTable, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getPaginationRowModel, flexRender, createColumnHelper } from '@tanstack/react-table';
14
+ import { flexRender, makeStateUpdater, functionalUpdate, useReactTable, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getPaginationRowModel, createColumnHelper } from '@tanstack/react-table';
15
15
  import { rankItem } from '@tanstack/match-sorter-utils';
16
16
  import { BsExclamationCircleFill } from 'react-icons/bs';
17
17
  import { GrAscend, GrDescend } from 'react-icons/gr';
@@ -596,8 +596,8 @@ const RecordDisplay = ({ object, boxProps }) => {
596
596
  if (object === null) {
597
597
  return jsx(Fragment, { children: "null" });
598
598
  }
599
- return (jsx(Box, { rowGap: 1, columnGap: 2, display: "grid", gridTemplateColumns: "auto 1fr", overflow: "auto", ...boxProps, children: Object.entries(object).map(([field, value]) => {
600
- return (jsxs(Fragment, { children: [jsx(Text, { color: "gray.400", children: snakeToLabel(field) }), jsx(Text, { children: typeof value === "object" ? JSON.stringify(value) : value })] }));
599
+ return (jsx(Grid, { rowGap: 1, overflow: "auto", ...boxProps, children: Object.entries(object).map(([field, value]) => {
600
+ return (jsxs(Grid, { columnGap: 2, gridTemplateColumns: "auto 1fr", children: [jsx(Text, { color: "gray.400", children: snakeToLabel(field) }), jsx(Text, { children: typeof value === "object" ? JSON.stringify(value) : value })] }, field));
601
601
  }) }));
602
602
  };
603
603
 
@@ -621,6 +621,10 @@ const DataDisplay = ({ variant = "" }) => {
621
621
  if (variant == "horizontal") {
622
622
  return (jsx(Flex, { flexFlow: "column", gap: "1", children: table.getRowModel().rows.map((row) => {
623
623
  return (jsx(Card.Root, { children: jsx(Card.Body, { children: jsx(DataList.Root, { gap: 4, padding: 4, display: "grid", variant: "subtle", orientation: "horizontal", overflow: "auto", children: row.getVisibleCells().map((cell) => {
624
+ const showCustomDataDisplay = cell.column.columnDef.meta?.showCustomDisplay ?? false;
625
+ if (showCustomDataDisplay) {
626
+ return (jsx(Flex, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
627
+ }
624
628
  const value = cell.getValue();
625
629
  if (typeof value === "object") {
626
630
  return (jsxs(DataList.Item, { children: [jsx(DataList.ItemLabel, { children: snakeToLabel(cell.column.id) }), jsx(RecordDisplay, { boxProps: {
@@ -638,6 +642,10 @@ const DataDisplay = ({ variant = "" }) => {
638
642
  if (variant == "stats") {
639
643
  return (jsx(Flex, { flexFlow: "column", gap: "1", children: table.getRowModel().rows.map((row) => {
640
644
  return (jsx(Card.Root, { children: jsx(Card.Body, { children: jsx(DataList.Root, { gap: 4, padding: 4, display: "flex", flexFlow: "row", variant: "subtle", overflow: "auto", children: row.getVisibleCells().map((cell) => {
645
+ const showCustomDataDisplay = cell.column.columnDef.meta?.showCustomDisplay ?? false;
646
+ if (showCustomDataDisplay) {
647
+ return (jsx(Flex, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
648
+ }
641
649
  const value = cell.getValue();
642
650
  if (typeof value === "object") {
643
651
  return (jsxs(DataList.Item, { display: "inline-flex", flexFlow: "column", justifyContent: "center", alignItems: "center", flex: "1 0 0%", children: [jsx(DataList.ItemLabel, { children: snakeToLabel(cell.column.id) }), jsx(RecordDisplay, { boxProps: {
@@ -654,6 +662,10 @@ const DataDisplay = ({ variant = "" }) => {
654
662
  }
655
663
  return (jsx(Flex, { flexFlow: "column", gap: "1", children: table.getRowModel().rows.map((row) => {
656
664
  return (jsx(Card.Root, { children: jsx(Card.Body, { children: jsx(DataList.Root, { gap: 4, padding: 4, display: "grid", variant: "subtle", gridTemplateColumns: "repeat(auto-fit, minmax(20rem, 1fr))", children: row.getVisibleCells().map((cell) => {
665
+ const showCustomDataDisplay = cell.column.columnDef.meta?.showCustomDisplay ?? false;
666
+ if (showCustomDataDisplay) {
667
+ return (jsx(Flex, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
668
+ }
657
669
  const value = cell.getValue();
658
670
  if (typeof value === "object") {
659
671
  return (jsxs(DataList.Item, { children: [jsx(DataList.ItemLabel, { children: snakeToLabel(cell.column.id) }), jsx(RecordDisplay, { boxProps: {
@@ -1750,13 +1762,13 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
1750
1762
  gridRow, children: [isMultiple && (jsxs(Flex, { flexFlow: "wrap", gap: 1, children: [selectedIds.map((id) => {
1751
1763
  const item = idMap[id];
1752
1764
  if (item === undefined) {
1753
- return jsx(Fragment, { children: "undefined" });
1765
+ return jsx(Text, { children: "undefined" }, id);
1754
1766
  }
1755
1767
  return (jsx(Tag, { closable: true, onClick: () => {
1756
1768
  setValue(column, watchIds.filter((id) => id != item[column_ref]));
1757
1769
  }, children: !!renderDisplay === true
1758
1770
  ? renderDisplay(item)
1759
- : item[display_column] }));
1771
+ : item[display_column] }, id));
1760
1772
  }), jsx(Tag, { cursor: "pointer", onClick: () => {
1761
1773
  setOpenSearchResult(true);
1762
1774
  }, children: "Add" })] })), !isMultiple && (jsx(Button, { variant: "outline", onClick: () => {
@@ -1785,7 +1797,7 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
1785
1797
  setValue(column, [...newSet]);
1786
1798
  }, opacity: 0.7, _hover: { opacity: 1 }, ...(selected ? { color: "gray.400/50" } : {}), children: !!renderDisplay === true
1787
1799
  ? renderDisplay(item)
1788
- : item[display_column] }));
1800
+ : item[display_column] }, item[column_ref]));
1789
1801
  }) }), isDirty && (jsxs(Fragment, { children: [dataList.length <= 0 && jsx(Fragment, { children: "Empty Search Result" }), " "] })), count > dataList.length && (jsx(Fragment, { children: jsx(Button, { onClick: async () => {
1790
1802
  setLimit((limit) => limit + 10);
1791
1803
  await getTableData({
@@ -1909,7 +1921,7 @@ const BooleanPicker = ({ column }) => {
1909
1921
  const { gridColumn, gridRow, title } = schema.properties[column];
1910
1922
  return (jsxs(Field, { label: `${title ?? snakeToLabel(column)}`, required: isRequired, alignItems: "stretch", gridColumn,
1911
1923
  gridRow, children: [jsx(CheckboxCard, { checked: value, variant: "surface", onSelect: () => {
1912
- setValue(column, !getValues(column));
1924
+ setValue(column, !value);
1913
1925
  } }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: fieldRequired ?? "The field is requried" }))] }));
1914
1926
  };
1915
1927
 
@@ -2151,7 +2163,7 @@ const TagPicker = ({ column }) => {
2151
2163
  return (jsx(CheckboxCard, { label: tagName, value: id, flex: "0 0 0%", disabled: true, colorPalette: "blue" }, `${tagName}-${id}`));
2152
2164
  }
2153
2165
  return (jsx(CheckboxCard, { label: tagName, value: id, flex: "0 0 0%" }, `${tagName}-${id}`));
2154
- }) }) }))] }));
2166
+ }) }) }))] }, `tag-${parent_tag_name}`));
2155
2167
  }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: (errors[`${column}`]?.message ?? "No error message") }))] }));
2156
2168
  };
2157
2169
 
@@ -2507,12 +2519,12 @@ const FormInternal = () => {
2507
2519
  if (variant === "file-picker") {
2508
2520
  return jsx(FilePicker, { column: key }, `form-${key}`);
2509
2521
  }
2510
- return jsx(Fragment, { children: `array ${column}` });
2522
+ return jsx(Text, { children: `array ${column}` }, `form-${key}`);
2511
2523
  }
2512
2524
  if (type === "null") {
2513
- return jsx(Fragment, { children: `null ${column}` });
2525
+ return jsx(Text, { children: `null ${column}` }, `form-${key}`);
2514
2526
  }
2515
- return jsx(Fragment, { children: "missing type" });
2527
+ return jsx(Text, { children: "missing type" }, `form-${key}`);
2516
2528
  }) }), jsx(Button, { onClick: () => {
2517
2529
  methods.handleSubmit(onValid)();
2518
2530
  }, formNoValidate: true, children: submit ?? "Submit" })] }), isError && (jsxs(Fragment, { children: ["isError", jsxs(Fragment, { children: [" ", `${error}`] })] }))] }));
package/dist/types/index.d.ts CHANGED
@@ -2,6 +2,12 @@ import { Column, RowData } from "@tanstack/react-table";
2
2
  import { ReactNode } from "react";
3
3
  declare module "@tanstack/react-table" {
4
4
  interface ColumnMeta<TData extends RowData, TValue> {
5
+ /**
6
+ * If `showCustomDisplay` is `true`, it will use the cell render to render the value.
7
+ *
8
+ * Effective in components: `DataDisplay`
9
+ */
10
+ showCustomDisplay?: boolean;
5
11
  /**
6
12
  * The display name of the column, used for rendering headers.
7
13
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bsol-oss/react-datatable5",
3
- "version": "7.4.2",
3
+ "version": "7.5.1",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",