@bsol-oss/react-datatable5 9.1.0 → 9.2.0

package/dist/index.d.ts

@@ -433,9 +433,10 @@ interface GetColumnsConfigs<K extends RowData> {
         [key in K as string]?: object;
     };
     defaultWidth?: number;
+    translate?: UseTranslationResponse<any, any>;
 }
 declare const widthSanityCheck: <K extends unknown>(widthList: number[], ignoreList: K[], properties: { [key in K as string]?: object | undefined; }) => void;
-declare const getColumns: <TData extends unknown>({ schema, ignore, width, meta, defaultWidth, }: GetColumnsConfigs<TData>) => ColumnDef<TData>[];
+declare const getColumns: <TData extends unknown>({ schema, ignore, width, meta, defaultWidth, translate, }: GetColumnsConfigs<TData>) => ColumnDef<TData>[];
 
 interface EmptyStateProps {
     title?: string;
@@ -537,8 +538,10 @@ interface RangeDatePickerProps extends Props, RangeCalendarProps {
 interface RecordDisplayProps {
     object: object | null;
     boxProps?: BoxProps;
+    translate?: UseTranslationResponse<any, any>;
+    prefix?: string;
 }
-declare const RecordDisplay: ({ object, boxProps }: RecordDisplayProps) => react_jsx_runtime.JSX.Element;
+declare const RecordDisplay: ({ object, boxProps, translate, prefix, }: RecordDisplayProps) => react_jsx_runtime.JSX.Element;
 
 declare module "@tanstack/react-table" {
     interface ColumnMeta<TData extends RowData, TValue> {

package/dist/index.js

@@ -2606,12 +2606,18 @@ const snakeToLabel = (str) => {
         .join(" "); // Join with space
 };
 
-const RecordDisplay = ({ object, boxProps }) => {
+const RecordDisplay = ({ object, boxProps, translate, prefix = "", }) => {
+    const getColumn = ({ field }) => {
+        if (translate !== undefined) {
+            return translate.t(`${prefix}${field}`);
+        }
+        return snakeToLabel(field);
+    };
     if (object === null) {
         return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "null" });
     }
     return (jsxRuntime.jsx(react.Grid, { rowGap: 1, padding: 1, overflow: "auto", ...boxProps, children: Object.entries(object).map(([field, value]) => {
-            return (jsxRuntime.jsxs(react.Grid, { columnGap: 2, gridTemplateColumns: "auto 1fr", children: [jsxRuntime.jsx(react.Text, { color: "gray.400", children: snakeToLabel(field) }), typeof value === "object" ? (jsxRuntime.jsx(RecordDisplay, { object: value })) : (jsxRuntime.jsx(react.Text, { children: JSON.stringify(value) }))] }, field));
+            return (jsxRuntime.jsxs(react.Grid, { columnGap: 2, gridTemplateColumns: "auto 1fr", children: [jsxRuntime.jsx(react.Text, { color: "gray.400", children: getColumn({ field }) }), typeof value === "object" ? (jsxRuntime.jsx(RecordDisplay, { object: value, prefix: `${prefix}${field}.`, translate: translate })) : (jsxRuntime.jsx(react.Text, { children: JSON.stringify(value) }))] }, field));
         }) }));
 };
 
@@ -3481,11 +3487,17 @@ const widthSanityCheck = (widthList, ignoreList, properties) => {
         throw new Error(`The width list is too long given from the number of remaining properties after ignore some.`);
     }
 };
-const getColumns = ({ schema, ignore = [], width = [], meta = {}, defaultWidth = 400, }) => {
+const getColumns = ({ schema, ignore = [], width = [], meta = {}, defaultWidth = 400, translate, }) => {
     const { properties } = schema;
     idListSanityCheck("ignore", ignore, properties);
     widthSanityCheck(width, ignore, properties);
     idListSanityCheck("meta", Object.keys(meta), properties);
+    const getColumn = ({ column }) => {
+        if (translate !== undefined) {
+            return translate.t(`${column}`);
+        }
+        return snakeToLabel(column);
+    };
     const keys = Object.keys(properties);
     const ignored = keys.filter((key) => {
         return !ignore.some((shouldIgnoreKey) => key === shouldIgnoreKey);
@@ -3499,18 +3511,18 @@ const getColumns = ({ schema, ignore = [], width = [], meta = {}, defaultWidth =
                     // @ts-expect-error find type for unknown
                     const value = props.row.original[column];
                     if (typeof value === "object") {
-                        return (jsxRuntime.jsx(react.Grid, { overflow: "auto", children: jsxRuntime.jsx(RecordDisplay, { object: value }) }));
+                        return (jsxRuntime.jsx(react.Grid, { overflow: "auto", children: jsxRuntime.jsx(RecordDisplay, { object: value, translate }) }));
                     }
                     return jsxRuntime.jsx(TextCell, { children: value });
                 },
                 header: (columnHeader) => {
                     const displayName = columnHeader.column.columnDef.meta?.displayName ??
-                        snakeToLabel(column);
+                        getColumn({ column });
                     return jsxRuntime.jsx("span", { children: displayName });
                 },
                 footer: (columnFooter) => {
                     const displayName = columnFooter.column.columnDef.meta?.displayName ??
-                        snakeToLabel(column);
+                        getColumn({ column });
                     return jsxRuntime.jsx("span", { children: displayName });
                 },
                 size: width[index] ?? defaultWidth,

package/dist/index.mjs

@@ -2586,12 +2586,18 @@ const snakeToLabel = (str) => {
         .join(" "); // Join with space
 };
 
-const RecordDisplay = ({ object, boxProps }) => {
+const RecordDisplay = ({ object, boxProps, translate, prefix = "", }) => {
+    const getColumn = ({ field }) => {
+        if (translate !== undefined) {
+            return translate.t(`${prefix}${field}`);
+        }
+        return snakeToLabel(field);
+    };
     if (object === null) {
         return jsx(Fragment, { children: "null" });
     }
     return (jsx(Grid, { rowGap: 1, padding: 1, overflow: "auto", ...boxProps, children: Object.entries(object).map(([field, value]) => {
-            return (jsxs(Grid, { columnGap: 2, gridTemplateColumns: "auto 1fr", children: [jsx(Text, { color: "gray.400", children: snakeToLabel(field) }), typeof value === "object" ? (jsx(RecordDisplay, { object: value })) : (jsx(Text, { children: JSON.stringify(value) }))] }, field));
+            return (jsxs(Grid, { columnGap: 2, gridTemplateColumns: "auto 1fr", children: [jsx(Text, { color: "gray.400", children: getColumn({ field }) }), typeof value === "object" ? (jsx(RecordDisplay, { object: value, prefix: `${prefix}${field}.`, translate: translate })) : (jsx(Text, { children: JSON.stringify(value) }))] }, field));
         }) }));
 };
 
@@ -3461,11 +3467,17 @@ const widthSanityCheck = (widthList, ignoreList, properties) => {
         throw new Error(`The width list is too long given from the number of remaining properties after ignore some.`);
     }
 };
-const getColumns = ({ schema, ignore = [], width = [], meta = {}, defaultWidth = 400, }) => {
+const getColumns = ({ schema, ignore = [], width = [], meta = {}, defaultWidth = 400, translate, }) => {
     const { properties } = schema;
     idListSanityCheck("ignore", ignore, properties);
     widthSanityCheck(width, ignore, properties);
     idListSanityCheck("meta", Object.keys(meta), properties);
+    const getColumn = ({ column }) => {
+        if (translate !== undefined) {
+            return translate.t(`${column}`);
+        }
+        return snakeToLabel(column);
+    };
     const keys = Object.keys(properties);
     const ignored = keys.filter((key) => {
         return !ignore.some((shouldIgnoreKey) => key === shouldIgnoreKey);
@@ -3479,18 +3491,18 @@ const getColumns = ({ schema, ignore = [], width = [], meta = {}, defaultWidth =
                     // @ts-expect-error find type for unknown
                     const value = props.row.original[column];
                     if (typeof value === "object") {
-                        return (jsx(Grid, { overflow: "auto", children: jsx(RecordDisplay, { object: value }) }));
+                        return (jsx(Grid, { overflow: "auto", children: jsx(RecordDisplay, { object: value, translate }) }));
                     }
                     return jsx(TextCell, { children: value });
                 },
                 header: (columnHeader) => {
                     const displayName = columnHeader.column.columnDef.meta?.displayName ??
-                        snakeToLabel(column);
+                        getColumn({ column });
                     return jsx("span", { children: displayName });
                 },
                 footer: (columnFooter) => {
                     const displayName = columnFooter.column.columnDef.meta?.displayName ??
-                        snakeToLabel(column);
+                        getColumn({ column });
                     return jsx("span", { children: displayName });
                 },
                 size: width[index] ?? defaultWidth,

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

@@ -1,6 +1,9 @@
 import { BoxProps } from "@chakra-ui/react";
+import { UseTranslationResponse } from "react-i18next";
 export interface RecordDisplayProps {
     object: object | null;
     boxProps?: BoxProps;
+    translate?: UseTranslationResponse<any, any>;
+    prefix?: string;
 }
-export declare const RecordDisplay: ({ object, boxProps }: RecordDisplayProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RecordDisplay: ({ object, boxProps, translate, prefix, }: RecordDisplayProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DataTable/utils/getColumns.d.ts

@@ -1,5 +1,6 @@
 import { ColumnDef, RowData } from "@tanstack/react-table";
 import { JSONSchema7 } from "json-schema";
+import { UseTranslationResponse } from "react-i18next";
 export interface GetColumnsConfigs<K extends RowData> {
     schema: JSONSchema7;
     ignore?: K[];
@@ -8,6 +9,7 @@ export interface GetColumnsConfigs<K extends RowData> {
         [key in K as string]?: object;
     };
     defaultWidth?: number;
+    translate?: UseTranslationResponse<any, any>;
 }
 export declare const widthSanityCheck: <K extends unknown>(widthList: number[], ignoreList: K[], properties: { [key in K as string]?: object | undefined; }) => void;
-export declare const getColumns: <TData extends unknown>({ schema, ignore, width, meta, defaultWidth, }: GetColumnsConfigs<TData>) => ColumnDef<TData>[];
+export declare const getColumns: <TData extends unknown>({ schema, ignore, width, meta, defaultWidth, translate, }: GetColumnsConfigs<TData>) => ColumnDef<TData>[];

package/package.json

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