@bsol-oss/react-datatable5 7.4.1 → 7.5.0

package/dist/index.d.ts

@@ -489,6 +489,12 @@ interface RangeDatePickerProps extends Props, RangeCalendarProps {
 
 declare module "@tanstack/react-table" {
     interface ColumnMeta<TData extends RowData, TValue> {
+        /**
+         * If `showCustomDisplay` is `true`, it will use the cell render to render the value.
+         *
+         * Effective in components: `DataDisplay`
+         */
+        showCustomDisplay?: boolean;
         /**
          * The display name of the column, used for rendering headers.
          */

package/dist/index.js

@@ -12,13 +12,13 @@ var bi = require('react-icons/bi');
 var cg = require('react-icons/cg');
 var io = require('react-icons/io');
 var hi2 = require('react-icons/hi2');
-var hi = require('react-icons/hi');
 var reactTable = require('@tanstack/react-table');
 var matchSorterUtils = require('@tanstack/match-sorter-utils');
 var bs = require('react-icons/bs');
 var gr = require('react-icons/gr');
 var reactQuery = require('@tanstack/react-query');
 var io5 = require('react-icons/io5');
+var hi = require('react-icons/hi');
 var adapter = require('@atlaskit/pragmatic-drag-and-drop/element/adapter');
 var invariant = require('tiny-invariant');
 var axios = require('axios');
@@ -612,27 +612,12 @@ const snakeToLabel = (str) => {
         .join(" "); // Join with space
 };
 
-const ToggleTip = React__namespace.forwardRef(function ToggleTip(props, ref) {
-    const { showArrow, children, portalled = true, content, portalRef, ...rest } = props;
-    return (jsxRuntime.jsxs(react.Popover.Root, { ...rest, positioning: { ...rest.positioning, gutter: 4 }, children: [jsxRuntime.jsx(react.Popover.Trigger, { asChild: true, children: children }), jsxRuntime.jsx(react.Portal, { disabled: !portalled, container: portalRef, children: jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsxs(react.Popover.Content, { width: "auto", px: "2", py: "1", textStyle: "xs", rounded: "sm", ref: ref, children: [showArrow && (jsxRuntime.jsx(react.Popover.Arrow, { children: jsxRuntime.jsx(react.Popover.ArrowTip, {}) })), content] }) }) })] }));
-});
-const InfoTip = React__namespace.forwardRef(function InfoTip(props, ref) {
-    const { children, ...rest } = props;
-    return (jsxRuntime.jsx(ToggleTip, { content: children, ...rest, ref: ref, children: jsxRuntime.jsx(react.IconButton, { variant: "ghost", "aria-label": "info", size: "2xs", colorPalette: "gray", children: jsxRuntime.jsx(hi.HiOutlineInformationCircle, {}) }) }));
-});
-
-const DataListRoot = react.DataList.Root;
-const DataListItem = React__namespace.forwardRef(function DataListItem(props, ref) {
-    const { label, info, value, children, grow, ...rest } = props;
-    return (jsxRuntime.jsxs(react.DataList.Item, { ref: ref, ...rest, children: [jsxRuntime.jsxs(react.DataList.ItemLabel, { flex: grow ? "1" : undefined, children: [label, info && jsxRuntime.jsx(InfoTip, { children: info })] }), jsxRuntime.jsx(react.DataList.ItemValue, { flex: grow ? "1" : undefined, children: value }), children] }));
-});
-
-const RecordDisplay = ({ object, dataListProps, }) => {
+const RecordDisplay = ({ object, boxProps }) => {
     if (object === null) {
         return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "null" });
     }
-    return (jsxRuntime.jsx(DataListRoot, { gap: 4, padding: 4, display: "grid", variant: "subtle", orientation: "horizontal", overflow: "auto", ...dataListProps, children: Object.entries(object).map(([field, value]) => {
-            return (jsxRuntime.jsx(DataListItem, { label: snakeToLabel(field), value: JSON.stringify(value) }, field));
+    return (jsxRuntime.jsx(react.Box, { rowGap: 1, columnGap: 2, display: "grid", gridTemplateColumns: "auto 1fr", overflow: "auto", ...boxProps, children: Object.entries(object).map(([field, value]) => {
+            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 })] }));
         }) }));
 };
 
@@ -656,9 +641,19 @@ const DataDisplay = ({ variant = "" }) => {
     if (variant == "horizontal") {
         return (jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: "1", children: table.getRowModel().rows.map((row) => {
                 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) => {
+                                const showCustomDataDisplay = cell.column.columnDef.meta?.showCustomDisplay ?? false;
+                                if (showCustomDataDisplay) {
+                                    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }));
+                                }
                                 const value = cell.getValue();
                                 if (typeof value === "object") {
-                                    return jsxRuntime.jsx(RecordDisplay, { object: value });
+                                    return (jsxRuntime.jsxs(react.DataList.Item, { children: [jsxRuntime.jsx(react.DataList.ItemLabel, { children: snakeToLabel(cell.column.id) }), jsxRuntime.jsx(RecordDisplay, { boxProps: {
+                                                    borderWidth: 1,
+                                                    borderRadius: 4,
+                                                    borderColor: "gray.400",
+                                                    paddingX: 4,
+                                                    paddingY: 2,
+                                                }, object: value })] }, cell.id));
                                 }
                                 return (jsxRuntime.jsxs(react.DataList.Item, { children: [jsxRuntime.jsx(react.DataList.ItemLabel, { children: snakeToLabel(cell.column.id) }), jsxRuntime.jsx(react.DataList.ItemValue, { wordBreak: "break-word", textOverflow: "ellipsis", overflow: "hidden", children: `${formatValue(cell.getValue())}` })] }, cell.id));
                             }) }) }) }, `chakra-table-card-${row.id}`));
@@ -667,9 +662,19 @@ const DataDisplay = ({ variant = "" }) => {
     if (variant == "stats") {
         return (jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: "1", children: table.getRowModel().rows.map((row) => {
                 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) => {
+                                const showCustomDataDisplay = cell.column.columnDef.meta?.showCustomDisplay ?? false;
+                                if (showCustomDataDisplay) {
+                                    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }));
+                                }
                                 const value = cell.getValue();
                                 if (typeof value === "object") {
-                                    return jsxRuntime.jsx(RecordDisplay, { object: value });
+                                    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: {
+                                                    borderWidth: 1,
+                                                    borderRadius: 4,
+                                                    borderColor: "gray.400",
+                                                    paddingX: 4,
+                                                    paddingY: 2,
+                                                }, object: value })] }));
                                 }
                                 return (jsxRuntime.jsxs(react.DataList.Item, { display: "flex", justifyContent: "center", alignItems: "center", flex: "1 0 0%", children: [jsxRuntime.jsx(react.DataList.ItemLabel, { children: snakeToLabel(cell.column.id) }), jsxRuntime.jsx(react.DataList.ItemValue, { wordBreak: "break-word", textOverflow: "ellipsis", overflow: "hidden", children: `${formatValue(cell.getValue())}` })] }, cell.id));
                             }) }) }) }, `chakra-table-card-${row.id}`));
@@ -677,9 +682,19 @@ const DataDisplay = ({ variant = "" }) => {
     }
     return (jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: "1", children: table.getRowModel().rows.map((row) => {
             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) => {
+                            const showCustomDataDisplay = cell.column.columnDef.meta?.showCustomDisplay ?? false;
+                            if (showCustomDataDisplay) {
+                                return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }));
+                            }
                             const value = cell.getValue();
                             if (typeof value === "object") {
-                                return jsxRuntime.jsx(RecordDisplay, { object: value });
+                                return (jsxRuntime.jsxs(react.DataList.Item, { children: [jsxRuntime.jsx(react.DataList.ItemLabel, { children: snakeToLabel(cell.column.id) }), jsxRuntime.jsx(RecordDisplay, { boxProps: {
+                                                borderWidth: 1,
+                                                borderRadius: 4,
+                                                borderColor: "gray.400",
+                                                paddingX: 4,
+                                                paddingY: 2,
+                                            }, object: value })] }, cell.id));
                             }
                             return (jsxRuntime.jsxs(react.DataList.Item, { children: [jsxRuntime.jsx(react.DataList.ItemLabel, { children: snakeToLabel(cell.column.id) }), jsxRuntime.jsx(react.DataList.ItemValue, { wordBreak: "break-word", textOverflow: "ellipsis", overflow: "hidden", children: `${formatValue(cell.getValue())}` })] }, cell.id));
                         }) }) }) }, `chakra-table-card-${row.id}`));
@@ -1814,6 +1829,21 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
                                                 }, children: showMore ?? "Show More" }) }))] })] }) })] }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: fieldRequired ?? "The field is requried" }))] }));
 };
 
+const ToggleTip = React__namespace.forwardRef(function ToggleTip(props, ref) {
+    const { showArrow, children, portalled = true, content, portalRef, ...rest } = props;
+    return (jsxRuntime.jsxs(react.Popover.Root, { ...rest, positioning: { ...rest.positioning, gutter: 4 }, children: [jsxRuntime.jsx(react.Popover.Trigger, { asChild: true, children: children }), jsxRuntime.jsx(react.Portal, { disabled: !portalled, container: portalRef, children: jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsxs(react.Popover.Content, { width: "auto", px: "2", py: "1", textStyle: "xs", rounded: "sm", ref: ref, children: [showArrow && (jsxRuntime.jsx(react.Popover.Arrow, { children: jsxRuntime.jsx(react.Popover.ArrowTip, {}) })), content] }) }) })] }));
+});
+const InfoTip = React__namespace.forwardRef(function InfoTip(props, ref) {
+    const { children, ...rest } = props;
+    return (jsxRuntime.jsx(ToggleTip, { content: children, ...rest, ref: ref, children: jsxRuntime.jsx(react.IconButton, { variant: "ghost", "aria-label": "info", size: "2xs", colorPalette: "gray", children: jsxRuntime.jsx(hi.HiOutlineInformationCircle, {}) }) }));
+});
+
+const DataListRoot = react.DataList.Root;
+const DataListItem = React__namespace.forwardRef(function DataListItem(props, ref) {
+    const { label, info, value, children, grow, ...rest } = props;
+    return (jsxRuntime.jsxs(react.DataList.Item, { ref: ref, ...rest, children: [jsxRuntime.jsxs(react.DataList.ItemLabel, { flex: grow ? "1" : undefined, children: [label, info && jsxRuntime.jsx(InfoTip, { children: info })] }), jsxRuntime.jsx(react.DataList.ItemValue, { flex: grow ? "1" : undefined, children: value }), children] }));
+});
+
 const IdViewer = ({ value, in_table, column_ref, display_column, column, }) => {
     const { schema, serverUrl } = useSchemaContext();
     if (schema.properties == undefined) {

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Button as Button$1, AbsoluteCenter, Spinner, Span, IconButton, Portal, Dialog, RadioGroup as RadioGroup$1, Grid, Box, Slider as Slider$1, HStack, For, Flex, Text, Tag as Tag$1, Input, useDisclosure, DialogBackdrop, Menu, createRecipeContext, createContext as createContext$1, Pagination, usePaginationContext, Image, Popover, DataList, Card, Checkbox as Checkbox$1, Table as Table$1, Tooltip as Tooltip$1, Icon, MenuRoot as MenuRoot$1, MenuTrigger as MenuTrigger$1, EmptyState as EmptyState$2, VStack, List, CheckboxCard as CheckboxCard$1, Alert, Group, InputElement, Field as Field$1, NumberInput, Accordion, Show, RadioCard, CheckboxGroup, Heading, Center } from '@chakra-ui/react';
+import { Button as Button$1, AbsoluteCenter, Spinner, Span, IconButton, Portal, Dialog, RadioGroup as RadioGroup$1, Grid, Box, Slider as Slider$1, HStack, For, Flex, Text, Tag as Tag$1, Input, useDisclosure, DialogBackdrop, Menu, createRecipeContext, createContext as createContext$1, Pagination, usePaginationContext, Image, Card, DataList, Checkbox as Checkbox$1, Table as Table$1, Tooltip as Tooltip$1, Icon, MenuRoot as MenuRoot$1, MenuTrigger as MenuTrigger$1, EmptyState as EmptyState$2, VStack, List, CheckboxCard as CheckboxCard$1, Alert, Group, InputElement, Popover, Field as Field$1, NumberInput, Accordion, Show, RadioCard, CheckboxGroup, Heading, Center } from '@chakra-ui/react';
 import { AiOutlineColumnWidth } from 'react-icons/ai';
 import * as React from 'react';
 import React__default, { createContext, useContext, useState, useEffect, useRef, useMemo } from 'react';
@@ -11,13 +11,13 @@ import { BiDownArrow, BiUpArrow } from 'react-icons/bi';
 import { CgClose } from 'react-icons/cg';
 import { IoMdEye, IoMdCheckbox } from 'react-icons/io';
 import { HiMiniEllipsisHorizontal, HiChevronLeft, HiChevronRight } from 'react-icons/hi2';
-import { HiOutlineInformationCircle, HiColorSwatch } from 'react-icons/hi';
-import { makeStateUpdater, functionalUpdate, useReactTable, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getPaginationRowModel, flexRender, createColumnHelper } from '@tanstack/react-table';
+import { flexRender, makeStateUpdater, functionalUpdate, useReactTable, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getPaginationRowModel, createColumnHelper } from '@tanstack/react-table';
 import { rankItem } from '@tanstack/match-sorter-utils';
 import { BsExclamationCircleFill } from 'react-icons/bs';
 import { GrAscend, GrDescend } from 'react-icons/gr';
 import { useQueryClient, useQuery, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { IoReload } from 'react-icons/io5';
+import { HiColorSwatch, HiOutlineInformationCircle } from 'react-icons/hi';
 import { monitorForElements, draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import invariant from 'tiny-invariant';
 import axios from 'axios';
@@ -592,27 +592,12 @@ const snakeToLabel = (str) => {
         .join(" "); // Join with space
 };
 
-const ToggleTip = React.forwardRef(function ToggleTip(props, ref) {
-    const { showArrow, children, portalled = true, content, portalRef, ...rest } = props;
-    return (jsxs(Popover.Root, { ...rest, positioning: { ...rest.positioning, gutter: 4 }, children: [jsx(Popover.Trigger, { asChild: true, children: children }), jsx(Portal, { disabled: !portalled, container: portalRef, children: jsx(Popover.Positioner, { children: jsxs(Popover.Content, { width: "auto", px: "2", py: "1", textStyle: "xs", rounded: "sm", ref: ref, children: [showArrow && (jsx(Popover.Arrow, { children: jsx(Popover.ArrowTip, {}) })), content] }) }) })] }));
-});
-const InfoTip = React.forwardRef(function InfoTip(props, ref) {
-    const { children, ...rest } = props;
-    return (jsx(ToggleTip, { content: children, ...rest, ref: ref, children: jsx(IconButton, { variant: "ghost", "aria-label": "info", size: "2xs", colorPalette: "gray", children: jsx(HiOutlineInformationCircle, {}) }) }));
-});
-
-const DataListRoot = DataList.Root;
-const DataListItem = React.forwardRef(function DataListItem(props, ref) {
-    const { label, info, value, children, grow, ...rest } = props;
-    return (jsxs(DataList.Item, { ref: ref, ...rest, children: [jsxs(DataList.ItemLabel, { flex: grow ? "1" : undefined, children: [label, info && jsx(InfoTip, { children: info })] }), jsx(DataList.ItemValue, { flex: grow ? "1" : undefined, children: value }), children] }));
-});
-
-const RecordDisplay = ({ object, dataListProps, }) => {
+const RecordDisplay = ({ object, boxProps }) => {
     if (object === null) {
         return jsx(Fragment, { children: "null" });
     }
-    return (jsx(DataListRoot, { gap: 4, padding: 4, display: "grid", variant: "subtle", orientation: "horizontal", overflow: "auto", ...dataListProps, children: Object.entries(object).map(([field, value]) => {
-            return (jsx(DataListItem, { label: snakeToLabel(field), value: JSON.stringify(value) }, field));
+    return (jsx(Box, { rowGap: 1, columnGap: 2, display: "grid", gridTemplateColumns: "auto 1fr", overflow: "auto", ...boxProps, children: Object.entries(object).map(([field, value]) => {
+            return (jsxs(Fragment, { children: [jsx(Text, { color: "gray.400", children: snakeToLabel(field) }), jsx(Text, { children: typeof value === "object" ? JSON.stringify(value) : value })] }));
         }) }));
 };
 
@@ -636,9 +621,19 @@ const DataDisplay = ({ variant = "" }) => {
     if (variant == "horizontal") {
         return (jsx(Flex, { flexFlow: "column", gap: "1", children: table.getRowModel().rows.map((row) => {
                 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) => {
+                                const showCustomDataDisplay = cell.column.columnDef.meta?.showCustomDisplay ?? false;
+                                if (showCustomDataDisplay) {
+                                    return (jsx(Fragment, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }));
+                                }
                                 const value = cell.getValue();
                                 if (typeof value === "object") {
-                                    return jsx(RecordDisplay, { object: value });
+                                    return (jsxs(DataList.Item, { children: [jsx(DataList.ItemLabel, { children: snakeToLabel(cell.column.id) }), jsx(RecordDisplay, { boxProps: {
+                                                    borderWidth: 1,
+                                                    borderRadius: 4,
+                                                    borderColor: "gray.400",
+                                                    paddingX: 4,
+                                                    paddingY: 2,
+                                                }, object: value })] }, cell.id));
                                 }
                                 return (jsxs(DataList.Item, { children: [jsx(DataList.ItemLabel, { children: snakeToLabel(cell.column.id) }), jsx(DataList.ItemValue, { wordBreak: "break-word", textOverflow: "ellipsis", overflow: "hidden", children: `${formatValue(cell.getValue())}` })] }, cell.id));
                             }) }) }) }, `chakra-table-card-${row.id}`));
@@ -647,9 +642,19 @@ const DataDisplay = ({ variant = "" }) => {
     if (variant == "stats") {
         return (jsx(Flex, { flexFlow: "column", gap: "1", children: table.getRowModel().rows.map((row) => {
                 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) => {
+                                const showCustomDataDisplay = cell.column.columnDef.meta?.showCustomDisplay ?? false;
+                                if (showCustomDataDisplay) {
+                                    return (jsx(Fragment, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }));
+                                }
                                 const value = cell.getValue();
                                 if (typeof value === "object") {
-                                    return jsx(RecordDisplay, { object: value });
+                                    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: {
+                                                    borderWidth: 1,
+                                                    borderRadius: 4,
+                                                    borderColor: "gray.400",
+                                                    paddingX: 4,
+                                                    paddingY: 2,
+                                                }, object: value })] }));
                                 }
                                 return (jsxs(DataList.Item, { display: "flex", justifyContent: "center", alignItems: "center", flex: "1 0 0%", children: [jsx(DataList.ItemLabel, { children: snakeToLabel(cell.column.id) }), jsx(DataList.ItemValue, { wordBreak: "break-word", textOverflow: "ellipsis", overflow: "hidden", children: `${formatValue(cell.getValue())}` })] }, cell.id));
                             }) }) }) }, `chakra-table-card-${row.id}`));
@@ -657,9 +662,19 @@ const DataDisplay = ({ variant = "" }) => {
     }
     return (jsx(Flex, { flexFlow: "column", gap: "1", children: table.getRowModel().rows.map((row) => {
             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) => {
+                            const showCustomDataDisplay = cell.column.columnDef.meta?.showCustomDisplay ?? false;
+                            if (showCustomDataDisplay) {
+                                return (jsx(Fragment, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }));
+                            }
                             const value = cell.getValue();
                             if (typeof value === "object") {
-                                return jsx(RecordDisplay, { object: value });
+                                return (jsxs(DataList.Item, { children: [jsx(DataList.ItemLabel, { children: snakeToLabel(cell.column.id) }), jsx(RecordDisplay, { boxProps: {
+                                                borderWidth: 1,
+                                                borderRadius: 4,
+                                                borderColor: "gray.400",
+                                                paddingX: 4,
+                                                paddingY: 2,
+                                            }, object: value })] }, cell.id));
                             }
                             return (jsxs(DataList.Item, { children: [jsx(DataList.ItemLabel, { children: snakeToLabel(cell.column.id) }), jsx(DataList.ItemValue, { wordBreak: "break-word", textOverflow: "ellipsis", overflow: "hidden", children: `${formatValue(cell.getValue())}` })] }, cell.id));
                         }) }) }) }, `chakra-table-card-${row.id}`));
@@ -1794,6 +1809,21 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
                                                 }, children: showMore ?? "Show More" }) }))] })] }) })] }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: fieldRequired ?? "The field is requried" }))] }));
 };
 
+const ToggleTip = React.forwardRef(function ToggleTip(props, ref) {
+    const { showArrow, children, portalled = true, content, portalRef, ...rest } = props;
+    return (jsxs(Popover.Root, { ...rest, positioning: { ...rest.positioning, gutter: 4 }, children: [jsx(Popover.Trigger, { asChild: true, children: children }), jsx(Portal, { disabled: !portalled, container: portalRef, children: jsx(Popover.Positioner, { children: jsxs(Popover.Content, { width: "auto", px: "2", py: "1", textStyle: "xs", rounded: "sm", ref: ref, children: [showArrow && (jsx(Popover.Arrow, { children: jsx(Popover.ArrowTip, {}) })), content] }) }) })] }));
+});
+const InfoTip = React.forwardRef(function InfoTip(props, ref) {
+    const { children, ...rest } = props;
+    return (jsx(ToggleTip, { content: children, ...rest, ref: ref, children: jsx(IconButton, { variant: "ghost", "aria-label": "info", size: "2xs", colorPalette: "gray", children: jsx(HiOutlineInformationCircle, {}) }) }));
+});
+
+const DataListRoot = DataList.Root;
+const DataListItem = React.forwardRef(function DataListItem(props, ref) {
+    const { label, info, value, children, grow, ...rest } = props;
+    return (jsxs(DataList.Item, { ref: ref, ...rest, children: [jsxs(DataList.ItemLabel, { flex: grow ? "1" : undefined, children: [label, info && jsx(InfoTip, { children: info })] }), jsx(DataList.ItemValue, { flex: grow ? "1" : undefined, children: value }), children] }));
+});
+
 const IdViewer = ({ value, in_table, column_ref, display_column, column, }) => {
     const { schema, serverUrl } = useSchemaContext();
     if (schema.properties == undefined) {

package/dist/types/components/DataTable/components/RecordDisplay.d.ts

@@ -1,6 +1,6 @@
-import { DataListRootProps } from "@chakra-ui/react";
+import { BoxProps } from "@chakra-ui/react";
 export interface RecordDisplayProps {
     object: object | null;
-    dataListProps?: DataListRootProps;
+    boxProps?: BoxProps;
 }
-export declare const RecordDisplay: ({ object, dataListProps, }: RecordDisplayProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RecordDisplay: ({ object, boxProps }: RecordDisplayProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/index.d.ts

@@ -2,6 +2,12 @@ import { Column, RowData } from "@tanstack/react-table";
 import { ReactNode } from "react";
 declare module "@tanstack/react-table" {
     interface ColumnMeta<TData extends RowData, TValue> {
+        /**
+         * If `showCustomDisplay` is `true`, it will use the cell render to render the value.
+         *
+         * Effective in components: `DataDisplay`
+         */
+        showCustomDisplay?: boolean;
         /**
          * The display name of the column, used for rendering headers.
          */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsol-oss/react-datatable5",
-  "version": "7.4.1",
+  "version": "7.5.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.mjs",