@bsol-oss/react-datatable5 9.0.2 → 9.2.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 (7) hide show
  1. package/dist/index.d.ts +9 -5
  2. package/dist/index.js +31 -13
  3. package/dist/index.mjs +31 -13
  4. package/dist/types/components/DataTable/DataDisplay.d.ts +3 -1
  5. package/dist/types/components/DataTable/components/RecordDisplay.d.ts +4 -1
  6. package/dist/types/components/DataTable/utils/getColumns.d.ts +3 -1
  7. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -5,14 +5,14 @@ import React__default, { ReactNode, Dispatch, SetStateAction } from 'react';
5
5
  import * as react_jsx_runtime from 'react/jsx-runtime';
6
6
  import { ImageProps, TableHeaderProps as TableHeaderProps$1, TableRootProps, GridProps, CardBodyProps, FlexProps, TextProps, BoxProps } from '@chakra-ui/react';
7
7
  import { IconType } from 'react-icons';
8
+ import * as react_i18next from 'react-i18next';
9
+ import { UseTranslationResponse } from 'react-i18next';
8
10
  import { RankingInfo } from '@tanstack/match-sorter-utils';
9
11
  import { UseQueryResult } from '@tanstack/react-query';
10
12
  import { JSONSchema7 } from 'json-schema';
11
13
  import { ForeignKeyProps } from '@/components/Form/components/StringInputField';
12
14
  import * as react_hook_form from 'react-hook-form';
13
15
  import { FieldValues, UseFormReturn, SubmitHandler } from 'react-hook-form';
14
- import * as react_i18next from 'react-i18next';
15
- import { UseTranslationResponse } from 'react-i18next';
16
16
  import { RenderProps, Props } from '@bsol-oss/dayzed-react19';
17
17
 
18
18
  interface DensityToggleButtonProps {
@@ -88,8 +88,9 @@ declare const CardHeader: <TData>({ row, imageColumnId, titleColumnId, tagColumn
88
88
 
89
89
  interface DataDisplayProps {
90
90
  variant?: "horizontal" | "stats" | "";
91
+ translate?: UseTranslationResponse<any, any>;
91
92
  }
92
- declare const DataDisplay: ({ variant }: DataDisplayProps) => react_jsx_runtime.JSX.Element;
93
+ declare const DataDisplay: ({ variant, translate }: DataDisplayProps) => react_jsx_runtime.JSX.Element;
93
94
 
94
95
  type DensityState = "sm" | "md" | "lg";
95
96
  interface DensityTableState {
@@ -432,9 +433,10 @@ interface GetColumnsConfigs<K extends RowData> {
432
433
  [key in K as string]?: object;
433
434
  };
434
435
  defaultWidth?: number;
436
+ translate?: UseTranslationResponse<any, any>;
435
437
  }
436
438
  declare const widthSanityCheck: <K extends unknown>(widthList: number[], ignoreList: K[], properties: { [key in K as string]?: object | undefined; }) => void;
437
- declare const getColumns: <TData extends unknown>({ schema, ignore, width, meta, defaultWidth, }: GetColumnsConfigs<TData>) => ColumnDef<TData>[];
439
+ declare const getColumns: <TData extends unknown>({ schema, ignore, width, meta, defaultWidth, translate, }: GetColumnsConfigs<TData>) => ColumnDef<TData>[];
438
440
 
439
441
  interface EmptyStateProps {
440
442
  title?: string;
@@ -536,8 +538,10 @@ interface RangeDatePickerProps extends Props, RangeCalendarProps {
536
538
  interface RecordDisplayProps {
537
539
  object: object | null;
538
540
  boxProps?: BoxProps;
541
+ translate?: UseTranslationResponse<any, any>;
542
+ prefix?: string;
539
543
  }
540
- declare const RecordDisplay: ({ object, boxProps }: RecordDisplayProps) => react_jsx_runtime.JSX.Element;
544
+ declare const RecordDisplay: ({ object, boxProps, translate, prefix, }: RecordDisplayProps) => react_jsx_runtime.JSX.Element;
541
545
 
542
546
  declare module "@tanstack/react-table" {
543
547
  interface ColumnMeta<TData extends RowData, TValue> {
package/dist/index.js CHANGED
@@ -2606,12 +2606,18 @@ const snakeToLabel = (str) => {
2606
2606
  .join(" "); // Join with space
2607
2607
  };
2608
2608
 
2609
- const RecordDisplay = ({ object, boxProps }) => {
2609
+ const RecordDisplay = ({ object, boxProps, translate, prefix = "", }) => {
2610
+ const getColumn = ({ field }) => {
2611
+ if (translate !== undefined) {
2612
+ return translate.t(`${prefix}${field}`);
2613
+ }
2614
+ return snakeToLabel(field);
2615
+ };
2610
2616
  if (object === null) {
2611
2617
  return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "null" });
2612
2618
  }
2613
2619
  return (jsxRuntime.jsx(react.Grid, { rowGap: 1, padding: 1, overflow: "auto", ...boxProps, children: Object.entries(object).map(([field, value]) => {
2614
- 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));
2620
+ 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));
2615
2621
  }) }));
2616
2622
  };
2617
2623
 
@@ -2630,8 +2636,14 @@ const formatValue = (value) => {
2630
2636
  }
2631
2637
  throw new Error(`value is unknown, ${typeof value}`);
2632
2638
  };
2633
- const DataDisplay = ({ variant = "" }) => {
2639
+ const DataDisplay = ({ variant = "", translate }) => {
2634
2640
  const { table } = useDataTableContext();
2641
+ const getLabel = ({ columnId }) => {
2642
+ if (translate !== undefined) {
2643
+ return translate.t(`${columnId}`);
2644
+ }
2645
+ return snakeToLabel(columnId);
2646
+ };
2635
2647
  if (variant == "horizontal") {
2636
2648
  return (jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: "1", children: table.getRowModel().rows.map((row) => {
2637
2649
  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) => {
@@ -2641,7 +2653,7 @@ const DataDisplay = ({ variant = "" }) => {
2641
2653
  }
2642
2654
  const value = cell.getValue();
2643
2655
  if (typeof value === "object") {
2644
- return (jsxRuntime.jsxs(react.DataList.Item, { children: [jsxRuntime.jsx(react.DataList.ItemLabel, { children: snakeToLabel(cell.column.id) }), jsxRuntime.jsx(RecordDisplay, { boxProps: {
2656
+ return (jsxRuntime.jsxs(react.DataList.Item, { children: [jsxRuntime.jsx(react.DataList.ItemLabel, { children: getLabel({ columnId: cell.column.id }) }), jsxRuntime.jsx(RecordDisplay, { boxProps: {
2645
2657
  borderWidth: 1,
2646
2658
  borderRadius: 4,
2647
2659
  borderColor: "gray.400",
@@ -2649,7 +2661,7 @@ const DataDisplay = ({ variant = "" }) => {
2649
2661
  paddingY: 2,
2650
2662
  }, object: value })] }, cell.id));
2651
2663
  }
2652
- 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));
2664
+ return (jsxRuntime.jsxs(react.DataList.Item, { children: [jsxRuntime.jsx(react.DataList.ItemLabel, { children: getLabel({ columnId: cell.column.id }) }), jsxRuntime.jsx(react.DataList.ItemValue, { wordBreak: "break-word", textOverflow: "ellipsis", overflow: "hidden", children: `${formatValue(cell.getValue())}` })] }, cell.id));
2653
2665
  }) }) }) }, `chakra-table-card-${row.id}`));
2654
2666
  }) }));
2655
2667
  }
@@ -2662,7 +2674,7 @@ const DataDisplay = ({ variant = "" }) => {
2662
2674
  }
2663
2675
  const value = cell.getValue();
2664
2676
  if (typeof value === "object") {
2665
- 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: {
2677
+ 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: getLabel({ columnId: cell.column.id }) }), jsxRuntime.jsx(RecordDisplay, { boxProps: {
2666
2678
  borderWidth: 1,
2667
2679
  borderRadius: 4,
2668
2680
  borderColor: "gray.400",
@@ -2670,7 +2682,7 @@ const DataDisplay = ({ variant = "" }) => {
2670
2682
  paddingY: 2,
2671
2683
  }, object: value })] }));
2672
2684
  }
2673
- 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));
2685
+ return (jsxRuntime.jsxs(react.DataList.Item, { display: "flex", justifyContent: "center", alignItems: "center", flex: "1 0 0%", children: [jsxRuntime.jsx(react.DataList.ItemLabel, { children: getLabel({ columnId: cell.column.id }) }), jsxRuntime.jsx(react.DataList.ItemValue, { wordBreak: "break-word", textOverflow: "ellipsis", overflow: "hidden", children: `${formatValue(cell.getValue())}` })] }, cell.id));
2674
2686
  }) }) }) }, `chakra-table-card-${row.id}`));
2675
2687
  }) }));
2676
2688
  }
@@ -2682,7 +2694,7 @@ const DataDisplay = ({ variant = "" }) => {
2682
2694
  }
2683
2695
  const value = cell.getValue();
2684
2696
  if (typeof value === "object") {
2685
- return (jsxRuntime.jsxs(react.DataList.Item, { children: [jsxRuntime.jsx(react.DataList.ItemLabel, { children: snakeToLabel(cell.column.id) }), jsxRuntime.jsx(RecordDisplay, { boxProps: {
2697
+ return (jsxRuntime.jsxs(react.DataList.Item, { children: [jsxRuntime.jsx(react.DataList.ItemLabel, { children: getLabel({ columnId: cell.column.id }) }), jsxRuntime.jsx(RecordDisplay, { boxProps: {
2686
2698
  borderWidth: 1,
2687
2699
  borderRadius: 4,
2688
2700
  borderColor: "gray.400",
@@ -2690,7 +2702,7 @@ const DataDisplay = ({ variant = "" }) => {
2690
2702
  paddingY: 2,
2691
2703
  }, object: value })] }, cell.id));
2692
2704
  }
2693
- 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));
2705
+ return (jsxRuntime.jsxs(react.DataList.Item, { children: [jsxRuntime.jsx(react.DataList.ItemLabel, { children: getLabel({ columnId: cell.column.id }) }), jsxRuntime.jsx(react.DataList.ItemValue, { wordBreak: "break-word", textOverflow: "ellipsis", overflow: "hidden", children: `${formatValue(cell.getValue())}` })] }, cell.id));
2694
2706
  }) }) }) }, `chakra-table-card-${row.id}`));
2695
2707
  }) }));
2696
2708
  };
@@ -3475,11 +3487,17 @@ const widthSanityCheck = (widthList, ignoreList, properties) => {
3475
3487
  throw new Error(`The width list is too long given from the number of remaining properties after ignore some.`);
3476
3488
  }
3477
3489
  };
3478
- const getColumns = ({ schema, ignore = [], width = [], meta = {}, defaultWidth = 400, }) => {
3490
+ const getColumns = ({ schema, ignore = [], width = [], meta = {}, defaultWidth = 400, translate, }) => {
3479
3491
  const { properties } = schema;
3480
3492
  idListSanityCheck("ignore", ignore, properties);
3481
3493
  widthSanityCheck(width, ignore, properties);
3482
3494
  idListSanityCheck("meta", Object.keys(meta), properties);
3495
+ const getColumn = ({ column }) => {
3496
+ if (translate !== undefined) {
3497
+ return translate.t(`${column}`);
3498
+ }
3499
+ return snakeToLabel(column);
3500
+ };
3483
3501
  const keys = Object.keys(properties);
3484
3502
  const ignored = keys.filter((key) => {
3485
3503
  return !ignore.some((shouldIgnoreKey) => key === shouldIgnoreKey);
@@ -3493,18 +3511,18 @@ const getColumns = ({ schema, ignore = [], width = [], meta = {}, defaultWidth =
3493
3511
  // @ts-expect-error find type for unknown
3494
3512
  const value = props.row.original[column];
3495
3513
  if (typeof value === "object") {
3496
- return (jsxRuntime.jsx(react.Grid, { overflow: "auto", children: jsxRuntime.jsx(RecordDisplay, { object: value }) }));
3514
+ return (jsxRuntime.jsx(react.Grid, { overflow: "auto", children: jsxRuntime.jsx(RecordDisplay, { object: value, translate }) }));
3497
3515
  }
3498
3516
  return jsxRuntime.jsx(TextCell, { children: value });
3499
3517
  },
3500
3518
  header: (columnHeader) => {
3501
3519
  const displayName = columnHeader.column.columnDef.meta?.displayName ??
3502
- snakeToLabel(column);
3520
+ getColumn({ column });
3503
3521
  return jsxRuntime.jsx("span", { children: displayName });
3504
3522
  },
3505
3523
  footer: (columnFooter) => {
3506
3524
  const displayName = columnFooter.column.columnDef.meta?.displayName ??
3507
- snakeToLabel(column);
3525
+ getColumn({ column });
3508
3526
  return jsxRuntime.jsx("span", { children: displayName });
3509
3527
  },
3510
3528
  size: width[index] ?? defaultWidth,
package/dist/index.mjs CHANGED
@@ -2586,12 +2586,18 @@ const snakeToLabel = (str) => {
2586
2586
  .join(" "); // Join with space
2587
2587
  };
2588
2588
 
2589
- const RecordDisplay = ({ object, boxProps }) => {
2589
+ const RecordDisplay = ({ object, boxProps, translate, prefix = "", }) => {
2590
+ const getColumn = ({ field }) => {
2591
+ if (translate !== undefined) {
2592
+ return translate.t(`${prefix}${field}`);
2593
+ }
2594
+ return snakeToLabel(field);
2595
+ };
2590
2596
  if (object === null) {
2591
2597
  return jsx(Fragment, { children: "null" });
2592
2598
  }
2593
2599
  return (jsx(Grid, { rowGap: 1, padding: 1, overflow: "auto", ...boxProps, children: Object.entries(object).map(([field, value]) => {
2594
- 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));
2600
+ 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));
2595
2601
  }) }));
2596
2602
  };
2597
2603
 
@@ -2610,8 +2616,14 @@ const formatValue = (value) => {
2610
2616
  }
2611
2617
  throw new Error(`value is unknown, ${typeof value}`);
2612
2618
  };
2613
- const DataDisplay = ({ variant = "" }) => {
2619
+ const DataDisplay = ({ variant = "", translate }) => {
2614
2620
  const { table } = useDataTableContext();
2621
+ const getLabel = ({ columnId }) => {
2622
+ if (translate !== undefined) {
2623
+ return translate.t(`${columnId}`);
2624
+ }
2625
+ return snakeToLabel(columnId);
2626
+ };
2615
2627
  if (variant == "horizontal") {
2616
2628
  return (jsx(Flex, { flexFlow: "column", gap: "1", children: table.getRowModel().rows.map((row) => {
2617
2629
  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) => {
@@ -2621,7 +2633,7 @@ const DataDisplay = ({ variant = "" }) => {
2621
2633
  }
2622
2634
  const value = cell.getValue();
2623
2635
  if (typeof value === "object") {
2624
- return (jsxs(DataList.Item, { children: [jsx(DataList.ItemLabel, { children: snakeToLabel(cell.column.id) }), jsx(RecordDisplay, { boxProps: {
2636
+ return (jsxs(DataList.Item, { children: [jsx(DataList.ItemLabel, { children: getLabel({ columnId: cell.column.id }) }), jsx(RecordDisplay, { boxProps: {
2625
2637
  borderWidth: 1,
2626
2638
  borderRadius: 4,
2627
2639
  borderColor: "gray.400",
@@ -2629,7 +2641,7 @@ const DataDisplay = ({ variant = "" }) => {
2629
2641
  paddingY: 2,
2630
2642
  }, object: value })] }, cell.id));
2631
2643
  }
2632
- 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));
2644
+ return (jsxs(DataList.Item, { children: [jsx(DataList.ItemLabel, { children: getLabel({ columnId: cell.column.id }) }), jsx(DataList.ItemValue, { wordBreak: "break-word", textOverflow: "ellipsis", overflow: "hidden", children: `${formatValue(cell.getValue())}` })] }, cell.id));
2633
2645
  }) }) }) }, `chakra-table-card-${row.id}`));
2634
2646
  }) }));
2635
2647
  }
@@ -2642,7 +2654,7 @@ const DataDisplay = ({ variant = "" }) => {
2642
2654
  }
2643
2655
  const value = cell.getValue();
2644
2656
  if (typeof value === "object") {
2645
- 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: {
2657
+ return (jsxs(DataList.Item, { display: "inline-flex", flexFlow: "column", justifyContent: "center", alignItems: "center", flex: "1 0 0%", children: [jsx(DataList.ItemLabel, { children: getLabel({ columnId: cell.column.id }) }), jsx(RecordDisplay, { boxProps: {
2646
2658
  borderWidth: 1,
2647
2659
  borderRadius: 4,
2648
2660
  borderColor: "gray.400",
@@ -2650,7 +2662,7 @@ const DataDisplay = ({ variant = "" }) => {
2650
2662
  paddingY: 2,
2651
2663
  }, object: value })] }));
2652
2664
  }
2653
- 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));
2665
+ return (jsxs(DataList.Item, { display: "flex", justifyContent: "center", alignItems: "center", flex: "1 0 0%", children: [jsx(DataList.ItemLabel, { children: getLabel({ columnId: cell.column.id }) }), jsx(DataList.ItemValue, { wordBreak: "break-word", textOverflow: "ellipsis", overflow: "hidden", children: `${formatValue(cell.getValue())}` })] }, cell.id));
2654
2666
  }) }) }) }, `chakra-table-card-${row.id}`));
2655
2667
  }) }));
2656
2668
  }
@@ -2662,7 +2674,7 @@ const DataDisplay = ({ variant = "" }) => {
2662
2674
  }
2663
2675
  const value = cell.getValue();
2664
2676
  if (typeof value === "object") {
2665
- return (jsxs(DataList.Item, { children: [jsx(DataList.ItemLabel, { children: snakeToLabel(cell.column.id) }), jsx(RecordDisplay, { boxProps: {
2677
+ return (jsxs(DataList.Item, { children: [jsx(DataList.ItemLabel, { children: getLabel({ columnId: cell.column.id }) }), jsx(RecordDisplay, { boxProps: {
2666
2678
  borderWidth: 1,
2667
2679
  borderRadius: 4,
2668
2680
  borderColor: "gray.400",
@@ -2670,7 +2682,7 @@ const DataDisplay = ({ variant = "" }) => {
2670
2682
  paddingY: 2,
2671
2683
  }, object: value })] }, cell.id));
2672
2684
  }
2673
- 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));
2685
+ return (jsxs(DataList.Item, { children: [jsx(DataList.ItemLabel, { children: getLabel({ columnId: cell.column.id }) }), jsx(DataList.ItemValue, { wordBreak: "break-word", textOverflow: "ellipsis", overflow: "hidden", children: `${formatValue(cell.getValue())}` })] }, cell.id));
2674
2686
  }) }) }) }, `chakra-table-card-${row.id}`));
2675
2687
  }) }));
2676
2688
  };
@@ -3455,11 +3467,17 @@ const widthSanityCheck = (widthList, ignoreList, properties) => {
3455
3467
  throw new Error(`The width list is too long given from the number of remaining properties after ignore some.`);
3456
3468
  }
3457
3469
  };
3458
- const getColumns = ({ schema, ignore = [], width = [], meta = {}, defaultWidth = 400, }) => {
3470
+ const getColumns = ({ schema, ignore = [], width = [], meta = {}, defaultWidth = 400, translate, }) => {
3459
3471
  const { properties } = schema;
3460
3472
  idListSanityCheck("ignore", ignore, properties);
3461
3473
  widthSanityCheck(width, ignore, properties);
3462
3474
  idListSanityCheck("meta", Object.keys(meta), properties);
3475
+ const getColumn = ({ column }) => {
3476
+ if (translate !== undefined) {
3477
+ return translate.t(`${column}`);
3478
+ }
3479
+ return snakeToLabel(column);
3480
+ };
3463
3481
  const keys = Object.keys(properties);
3464
3482
  const ignored = keys.filter((key) => {
3465
3483
  return !ignore.some((shouldIgnoreKey) => key === shouldIgnoreKey);
@@ -3473,18 +3491,18 @@ const getColumns = ({ schema, ignore = [], width = [], meta = {}, defaultWidth =
3473
3491
  // @ts-expect-error find type for unknown
3474
3492
  const value = props.row.original[column];
3475
3493
  if (typeof value === "object") {
3476
- return (jsx(Grid, { overflow: "auto", children: jsx(RecordDisplay, { object: value }) }));
3494
+ return (jsx(Grid, { overflow: "auto", children: jsx(RecordDisplay, { object: value, translate }) }));
3477
3495
  }
3478
3496
  return jsx(TextCell, { children: value });
3479
3497
  },
3480
3498
  header: (columnHeader) => {
3481
3499
  const displayName = columnHeader.column.columnDef.meta?.displayName ??
3482
- snakeToLabel(column);
3500
+ getColumn({ column });
3483
3501
  return jsx("span", { children: displayName });
3484
3502
  },
3485
3503
  footer: (columnFooter) => {
3486
3504
  const displayName = columnFooter.column.columnDef.meta?.displayName ??
3487
- snakeToLabel(column);
3505
+ getColumn({ column });
3488
3506
  return jsx("span", { children: displayName });
3489
3507
  },
3490
3508
  size: width[index] ?? defaultWidth,
package/dist/types/components/DataTable/DataDisplay.d.ts CHANGED
@@ -1,4 +1,6 @@
1
+ import { UseTranslationResponse } from "react-i18next";
1
2
  export interface DataDisplayProps {
2
3
  variant?: "horizontal" | "stats" | "";
4
+ translate?: UseTranslationResponse<any, any>;
3
5
  }
4
- export declare const DataDisplay: ({ variant }: DataDisplayProps) => import("react/jsx-runtime").JSX.Element;
6
+ export declare const DataDisplay: ({ variant, translate }: DataDisplayProps) => import("react/jsx-runtime").JSX.Element;
package/dist/types/components/DataTable/components/RecordDisplay.d.ts CHANGED
@@ -1,6 +1,9 @@
1
1
  import { BoxProps } from "@chakra-ui/react";
2
+ import { UseTranslationResponse } from "react-i18next";
2
3
  export interface RecordDisplayProps {
3
4
  object: object | null;
4
5
  boxProps?: BoxProps;
6
+ translate?: UseTranslationResponse<any, any>;
7
+ prefix?: string;
5
8
  }
6
- export declare const RecordDisplay: ({ object, boxProps }: RecordDisplayProps) => import("react/jsx-runtime").JSX.Element;
9
+ export declare const RecordDisplay: ({ object, boxProps, translate, prefix, }: RecordDisplayProps) => import("react/jsx-runtime").JSX.Element;
package/dist/types/components/DataTable/utils/getColumns.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { ColumnDef, RowData } from "@tanstack/react-table";
2
2
  import { JSONSchema7 } from "json-schema";
3
+ import { UseTranslationResponse } from "react-i18next";
3
4
  export interface GetColumnsConfigs<K extends RowData> {
4
5
  schema: JSONSchema7;
5
6
  ignore?: K[];
@@ -8,6 +9,7 @@ export interface GetColumnsConfigs<K extends RowData> {
8
9
  [key in K as string]?: object;
9
10
  };
10
11
  defaultWidth?: number;
12
+ translate?: UseTranslationResponse<any, any>;
11
13
  }
12
14
  export declare const widthSanityCheck: <K extends unknown>(widthList: number[], ignoreList: K[], properties: { [key in K as string]?: object | undefined; }) => void;
13
- export declare const getColumns: <TData extends unknown>({ schema, ignore, width, meta, defaultWidth, }: GetColumnsConfigs<TData>) => ColumnDef<TData>[];
15
+ export declare const getColumns: <TData extends unknown>({ schema, ignore, width, meta, defaultWidth, translate, }: GetColumnsConfigs<TData>) => ColumnDef<TData>[];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bsol-oss/react-datatable5",
3
- "version": "9.0.2",
3
+ "version": "9.2.0",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",