@bsol-oss/react-datatable5 7.4.2 → 7.5.0

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 +12 -0
  3. package/dist/index.mjs +13 -1
  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
@@ -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(jsxRuntime.Fragment, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }));
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(jsxRuntime.Fragment, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }));
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(jsxRuntime.Fragment, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }));
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: {
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';
@@ -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(Fragment, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }));
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(Fragment, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }));
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(Fragment, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }));
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: {
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.0",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",