es-grid-template 1.9.19 → 1.9.21

package/es/grid-component/type.d.ts

@@ -135,95 +135,175 @@ export interface SpanRect {
     right: number;
 }
 export type ColumnTable<RecordType = AnyObject> = {
+    /** Field key dùng để mapping dữ liệu */
     field: string;
+    /** Text hiển thị ở header */
+    headerText?: string;
+    /** Field gốc trước khi transform */
     fieldOriginal?: string;
+    /** Độ rộng column */
     width?: number;
+    /** Độ rộng tối đa */
     maxWidth?: number;
+    /** Độ rộng tối thiểu */
     minWidth?: number;
+    /** Hiển thị trong popup chọn column */
+    showInColumnChoose?: boolean;
+    /** Kiểu dữ liệu của column */
     type?: IColumnType;
+    /** Format hiển thị dữ liệu column type = number */
+    format?: IFormat | ((rowData: any) => IFormat);
+    /**
+       * @deprecated Please use `isSummary` instead.
+       * @since  1.7.25
+       */
     haveSum?: boolean;
+    /** Có tính tổng column type = number hay không
+     *
+     * Mặc định = true
+     */
     isSummary?: boolean;
+    /** Có tính tổng theo group */
+    sumGroup?: boolean;
+    /** Template custom cho ô summary */
     summaryTemplate?: (data: number, key: string) => ReactElement | ReactNode;
-    /** Custom method to get cell props */
-    format?: IFormat | ((rowData: any) => IFormat);
-    allowFiltering?: boolean;
     /**
       * @deprecated Please use `allowSortering` instead.
       * @since  1.7.25
       */
     sorter?: boolean;
+    /** Cho phép filter
+     *
+     * Mặc định = true
+     */
+    allowFiltering?: boolean;
+    /** Cho phép sort dữ liệu
+     *
+     *  Mặc định = true
+     * */
     allowSortering?: boolean;
+    /** Kiểu filter */
+    typeFilter?: TypeFilter;
+    /** Toán tử filter mặc định */
     operator?: FilterOperator;
+    /** Ẩn phần chọn toán tử filter
+     *  mặc đinh = false
+     */
     hideOperator?: boolean;
+    /** Custom Placeholder cho input/ Select/ Date.... filter */
     placeholder?: string;
-    showInColumnChoose?: boolean;
-    typeFilter?: TypeFilter;
+    /** Data source cho select/filter */
     source?: any[];
+    /** Hiển thị ô search trong select filter */
     showFilterSearch?: boolean;
-    headerText?: string;
     /**
       * @deprecated Please use `visible` instead.
       * @since  1.7.33
       */
     hidden?: boolean;
+    /** Hiển thị / ẩn column
+     *  mặc định = true
+     * */
     visible?: boolean;
+    /** Tooltip cho header */
     headerTooltip?: boolean | string | (() => ReactNode | ReactElement);
+    /** Tên group header */
     columnGroupText?: string;
-    /**
-     * @deprecated Please use `textAlign` instead.
-     * @since  1.7.34
-     */
-    align?: ITextAlign;
-    textAlign?: ITextAlign;
+    /** Canh lề nội dung header */
     headerTextAlign?: ITextAlign;
-    template?: ReactNode | ReactElement | ((args: ColumnTemplate<RecordType>) => ReactNode | ReactElement);
-    showTooltip?: boolean;
-    tooltipDescription?: string | ((args: {
-        value: any;
-        rowData: RecordType;
-    }) => ReactNode | ReactElement);
+    /** Template custom render header */
     headerTemplate?: React.ReactNode | React.ReactElement | ((column: ColumnTable<RecordType>) => React.ReactNode | React.ReactElement);
-    commandItems?: CommandItem[];
-    children?: ColumnTable<RecordType>[];
-    editType?: EditType | ((rowData?: RecordType) => EditType);
-    disable?: boolean | ((rowData: any) => boolean);
-    editEnable?: boolean | ((rowData: any) => boolean);
-    isClearable?: boolean;
-    maxDate?: any;
-    minDate?: any;
-    maxTime?: any;
-    minTime?: any;
-    max?: number;
-    min?: number;
-    editSelectSettings?: IEditSelectSettings;
-    editFromSettings?: IEditFromSettings;
     /**
      * @deprecated Please use `fixed` instead.
      * @since 1.7.25
      */
     fixedType?: FixedType;
+    /** Fixed column trái/phải */
     fixed?: FixedType;
     /**
-      * @deprecated Please use `wrapSettings` instead.
+      * @deprecated Please use `wrapSettings` on Table instead.
       * @since 1.7.34
       */
     headerTextWrap?: boolean;
+    /** Hiển thị dấu ... khi text overflow */
     ellipsis?: boolean;
+    /** Cho phép resize column
+     *
+     * Mặc định = true
+     */
     allowResizing?: boolean;
-    allowSelection?: boolean | ((rowData: RecordType) => boolean);
+    /**
+     * @deprecated Please use `textAlign` instead.
+     * @since  1.7.34
+     */
+    align?: ITextAlign;
+    /** Canh lề nội dung cell */
+    textAlign?: ITextAlign;
+    /** Template custom render cell */
+    template?: ReactNode | ReactElement | ((args: ColumnTemplate<RecordType>) => ReactNode | ReactElement);
+    /** Hiển thị tooltip cell */
+    showTooltip?: boolean;
+    /** Nội dung tooltip của cell */
+    tooltipDescription?: string | ((args: {
+        value: any;
+        rowData: RecordType;
+    }) => ReactNode | ReactElement);
+    /**
+    * @deprecated Please use `getCellProps` instead.
+    * @since 1.7.34
+    */
     onCellStyles?: Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'> | ((cellValue: any, cell: Cell<RecordType, unknown>) => Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'>);
+    /**
+    * @deprecated Please use `headerCellProps` instead.
+    * @since 1.7.34
+    */
     onCellHeaderStyles?: Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'> | ((cell: Header<RecordType, unknown>) => Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'>);
+    /**
+      * @deprecated Please use `getCellProps` instead.
+      * @since 1.7.34
+      */
+    onCell?: (rowData: RecordType, index: number) => React.TdHTMLAttributes<HTMLTableCellElement>;
     onCellFooterStyles?: Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'> | ((cellValue: any, cell: Header<RecordType, unknown>) => Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'>);
-    sumGroup?: boolean;
     /** Custom data retrieval method */
+    /** Custom method lấy value cell */
     getValue?: (row: any, rowIndex: number) => any;
-    /** Custom render method */
     /** Custom method to get cell props */
     getCellProps?: (value: any, row: any, rowIndex: number) => CellProps;
     /** Props for the header cell */
     headerCellProps?: CellProps;
     /** Custom method to get cell SpanRect */
+    /** Custom merge cell */
     getSpanRect?: (value: any, row: any, rowIndex: number) => SpanRect;
+    /** Kiểu editor khi edit cell */
+    editType?: EditType | ((rowData?: RecordType) => EditType);
+    /** Disable editor */
+    disable?: boolean | ((rowData: any) => boolean);
+    /** Cho phép edit */
+    editEnable?: boolean | ((rowData: any) => boolean);
+    /** Cho phép clear value khi edit */
+    isClearable?: boolean;
+    /** Ngày lớn nhất cho date picker */
+    maxDate?: any;
+    /** Ngày nhỏ nhất cho date picker */
+    minDate?: any;
+    /** Thời gian lớn nhất */
+    maxTime?: any;
+    /** Thời gian nhỏ nhất */
+    minTime?: any;
+    /** Giá trị số lớn nhất khi editType : number */
+    max?: number;
+    /** Giá trị số nhỏ nhất khi editType : number */
+    min?: number;
+    /** Config select editor */
+    editSelectSettings?: IEditSelectSettings;
+    /** Config form editor */
+    editFromSettings?: IEditFromSettings;
+    /** Cho phép select column */
+    allowSelection?: boolean | ((rowData: RecordType) => boolean);
+    /** Danh sách command/action trong column type  = command  */
+    commandItems?: CommandItem[];
+    /** Column con (multi header/group column) */
+    children?: ColumnTable<RecordType>[];
 };
 export type ColumnsTable<RecordType = AnyObject> = ColumnTable<RecordType>[];
 export type IFTheme = {

package/es/group-component/hook/utils.d.ts

@@ -155,42 +155,53 @@ export declare const removeColumns: <RecordType>(columns: ColumnTable<RecordType
 export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordType>[], fixedFields: string[]) => {
     fixed: string;
     field: string;
+    headerText?: string;
     fieldOriginal?: string;
     width?: number;
     maxWidth?: number;
     minWidth?: number;
+    showInColumnChoose?: boolean;
     type?: IColumnType;
+    format?: IFormat | ((rowData: any) => IFormat);
     haveSum?: boolean;
     isSummary?: boolean;
+    sumGroup?: boolean;
     summaryTemplate?: (data: number, key: string) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode;
-    format?: IFormat | ((rowData: any) => IFormat);
-    allowFiltering?: boolean;
     sorter?: boolean;
+    allowFiltering?: boolean;
     allowSortering?: boolean;
+    typeFilter?: TypeFilter;
     operator?: FilterOperator;
     hideOperator?: boolean;
     placeholder?: string;
-    showInColumnChoose?: boolean;
-    typeFilter?: TypeFilter;
     source?: any[];
     showFilterSearch?: boolean;
-    headerText?: string;
     hidden?: boolean;
     visible?: boolean;
     headerTooltip?: string | boolean | (() => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
     columnGroupText?: string;
+    headerTextAlign?: import("./../../grid-component/type").ITextAlign;
+    headerTemplate?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode | ((column: ColumnTable<RecordType>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
+    fixedType?: import("./../../grid-component/type").FixedType;
+    headerTextWrap?: boolean;
+    ellipsis?: boolean;
+    allowResizing?: boolean;
     align?: import("./../../grid-component/type").ITextAlign;
     textAlign?: import("./../../grid-component/type").ITextAlign;
-    headerTextAlign?: import("./../../grid-component/type").ITextAlign;
     template?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
     showTooltip?: boolean;
     tooltipDescription?: string | ((args: {
         value: any;
         rowData: RecordType;
     }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
-    headerTemplate?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode | ((column: ColumnTable<RecordType>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
-    commandItems?: import("./../../grid-component/type").CommandItem[];
-    children?: ColumnTable<RecordType>[];
+    onCellStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "display" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "display" | "position">);
+    onCellHeaderStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "display" | "position"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "display" | "position">);
+    onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
+    onCellFooterStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "display" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "display" | "position">);
+    getValue?: (row: any, rowIndex: number) => any;
+    getCellProps?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").CellProps;
+    headerCellProps?: import("./../../grid-component/type").CellProps;
+    getSpanRect?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").SpanRect;
     editType?: EditType | ((rowData?: RecordType) => EditType);
     disable?: boolean | ((rowData: any) => boolean);
     editEnable?: boolean | ((rowData: any) => boolean);
@@ -203,18 +214,8 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
     min?: number;
     editSelectSettings?: import("./../../grid-component/type").IEditSelectSettings;
     editFromSettings?: import("./../../grid-component/type").IEditFromSettings;
-    fixedType?: import("./../../grid-component/type").FixedType;
-    headerTextWrap?: boolean;
-    ellipsis?: boolean;
-    allowResizing?: boolean;
     allowSelection?: boolean | ((rowData: RecordType) => boolean);
-    onCellStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
-    onCellHeaderStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
-    onCellFooterStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
-    sumGroup?: boolean;
-    getValue?: (row: any, rowIndex: number) => any;
-    getCellProps?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").CellProps;
-    headerCellProps?: import("./../../grid-component/type").CellProps;
-    getSpanRect?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").SpanRect;
+    commandItems?: import("./../../grid-component/type").CommandItem[];
+    children?: ColumnTable<RecordType>[];
 }[];
 export declare function sortColumnsByField<T extends ColumnTable>(columns: T[], priorityFields: string[]): T[];

package/es/table-component/body/EditableCell.js

@@ -525,9 +525,8 @@ const EditableCell = props => {
           placeholder: t && column.placeholder ? t(column.placeholder) : tableLocal?.selectPlaceholder,
           allowClear: column.isClearable ?? false,
           maxTagCount: 'responsive',
-          popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined
-          // optionFilterProp="label"
-          ,
+          popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
+          optionFilterProp: "label",
           popupClassName: 'be-popup-container',
           status: isInvalid ? 'error' : undefined,
           filterOption: filterKey ? (input, option) => {
@@ -664,9 +663,8 @@ const EditableCell = props => {
           placeholder: t && column.placeholder ? t(column.placeholder) : tableLocal?.selectPlaceholder,
           allowClear: column.isClearable ?? false,
           maxTagCount: 'responsive',
-          popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined
-          // optionFilterProp="label"
-          ,
+          popupMatchSelectWidth: menuWidth ? menuWidth + 10 : undefined,
+          optionFilterProp: "label",
           popupClassName: 'be-popup-container',
           loadOptions: loadOptions,
           status: isInvalid ? 'error' : undefined,

package/es/table-component/body/TableBodyCell.js

@@ -5,7 +5,7 @@ import Checkbox from "rc-master-ui/es/checkbox/Checkbox";
 import classNames from "classnames";
 import React from "react";
 import { TableContext } from "../useContext";
-import { renderValueCell, toggleRowSelection } from "../hook/useColumns";
+import { getValueCellString, renderValueCell, toggleRowSelection } from "../hook/useColumns";
 const renderCellIndex = props => {
   const {
     parrents,
@@ -184,17 +184,6 @@ const TableBodyCell = props => {
   const record = cell.row.original;
   const columnMeta = cell.column.columnDef.meta ?? {};
   const cellStyles = typeof columnMeta.onCellStyles === 'function' ? columnMeta.onCellStyles(cell.getValue(), cell) : columnMeta.onCellStyles;
-  const tooltipContent = React.useMemo(() => {
-    if (isOpenTooltip === false) {
-      return '';
-    } else {
-      const abc = columnMeta?.tooltipDescription ? typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({
-        value: cell.getValue(),
-        rowData: record
-      }) : columnMeta.tooltipDescription : cell.getValue();
-      return abc;
-    }
-  }, [cell, columnMeta, isOpenTooltip, record]);
 
   // const tooltipContent: any = (isOpenTooltip === false)
   //   ? ''
@@ -220,6 +209,18 @@ const TableBodyCell = props => {
   const cellValue = cell.getValue();
   const rowIndex = cell.row.index;
   const fomatedValue = renderValueCell(columnMeta, cellValue, record, rowIndex, colIndex, format, false);
+  const valueCellString = getValueCellString(columnMeta, cellValue, record, rowIndex, colIndex, format);
+  const tooltipContent = React.useMemo(() => {
+    if (isOpenTooltip === false) {
+      return '';
+    } else {
+      const abc = columnMeta?.tooltipDescription ? typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({
+        value: cell.getValue(),
+        rowData: record
+      }) : columnMeta.tooltipDescription : valueCellString;
+      return abc;
+    }
+  }, [cell, columnMeta, isOpenTooltip, record, valueCellString]);
   if (cell.column.id === "#") {
     return /*#__PURE__*/React.createElement("div", {
       key: cell.id,

package/es/table-component/body/TableBodyCellEdit.js

@@ -7,7 +7,7 @@ import React from "react";
 import { TableContext } from "../useContext";
 import EditableCell from "./EditableCell";
 import { nonActionColumn } from "../../grid-component/hooks";
-import { renderValueCell, toggleRowSelection } from "../hook/useColumns";
+import { getValueCellString, renderValueCell, toggleRowSelection } from "../hook/useColumns";
 const renderCellIndex = props => {
   const {
     parrents,
@@ -237,10 +237,13 @@ const TableBodyCellEdit = props => {
   const [isOpenTooltip, setIsOpenTooltip] = React.useState(false);
   const rowError = dataErrors ? dataErrors.find(it => it.id === cell.row.id) : undefined;
   const message = rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : undefined;
-  const tooltipContent = isOpenTooltip === false ? '' : columnMeta?.tooltipDescription ? typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({
-    value: cell.getValue(),
-    rowData: record
-  }) : columnMeta.tooltipDescription : cell.getValue();
+
+  // const tooltipContent = (isOpenTooltip === false)
+  //   ? ''
+  //   : columnMeta?.tooltipDescription
+  //     ? (typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({ value: cell.getValue(), rowData: record }) : columnMeta.tooltipDescription)
+  //     : cell.getValue()
+
   const canEdit = isEditable(cell.column.columnDef.meta, record) && isRowEditable !== false;
 
   // const allRows = table.getRowModel().rows;
@@ -292,6 +295,19 @@ const TableBodyCellEdit = props => {
   const isLeftPaste = colIdxPaste === pasteRangeState.startColIndex;
   const isRightPaste = colIdxPaste === pasteRangeState.endColIndex;
   const parrents = cell.row.getParentRows();
+  const valeOfCell = cell.getValue();
+  const valueCellString = getValueCellString(columnMeta, valeOfCell, record, rowNumber, colIndex, format);
+  const tooltipContent = React.useMemo(() => {
+    if (isOpenTooltip === false) {
+      return '';
+    } else {
+      const abc = columnMeta?.tooltipDescription ? typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({
+        value: cell.getValue(),
+        rowData: record
+      }) : columnMeta.tooltipDescription : valueCellString;
+      return abc;
+    }
+  }, [cell, columnMeta, isOpenTooltip, record, valueCellString]);
   const triggerDragPaste = (pasteState, ctrlKey) => {
     const tmpCols = table.getVisibleLeafColumns();
     const rowPasteIds = getRowIdsBetween(table, startPasteCell?.rowId ?? '', endPasteCell?.rowId ?? '');

package/es/table-component/header/TableHeadCell2.js

@@ -194,7 +194,9 @@ const TableHeadCell2 = props => {
         doFilter,
         format,
         dataSourceFilter,
-        tableLocal
+        tableLocal,
+        prevFilterValue: column.getFilterValue(),
+        triggerVisible
       })), /*#__PURE__*/React.createElement(Space, {
         style: {
           justifyContent: 'end',

package/es/table-component/header/renderFilter.d.ts

@@ -16,6 +16,8 @@ type RenderFilterProps<RecordType> = {
     dateRangeLocale?: any;
     doFilter?: (type: boolean) => void;
     tableLocal: any;
+    prevFilterValue?: string[];
+    triggerVisible?: (visible: boolean) => void;
 };
 export declare const renderFilter: <RecordType>(args: RenderFilterProps<RecordType>) => React.JSX.Element;
 export {};

package/es/table-component/header/renderFilter.js

@@ -10,6 +10,16 @@ import { convertDateToDayjs, convertDayjsToDate, convertFormat, getDatepickerFor
 import NumberInput from "../components/number";
 import NumberRange from "../components/number-range";
 import CheckboxFilter from "../components/checkbox-filter/CheckboxFilter";
+const isEqualDateArray = (arr1, arr2) => {
+  if (arr1?.length !== arr2?.length) {
+    return false;
+  }
+  return arr1?.every((item, index) => {
+    const date1 = new Date(item).getTime();
+    const date2 = new Date(arr2?.[index]).getTime();
+    return date1 === date2;
+  });
+};
 export const renderFilter = args => {
   const {
     column,
@@ -20,7 +30,9 @@ export const renderFilter = args => {
     dataSourceFilter,
     format,
     doFilter,
-    tableLocal
+    tableLocal,
+    prevFilterValue,
+    triggerVisible
   } = args;
   const {
     format: columnFormat,
@@ -97,10 +109,26 @@ export const renderFilter = args => {
         onChange: value => {
           const newDateRangeValue = value ? [value[0] ? moment(value[0]).format() : '', value[1] ? moment(value[1]).format() : ''] : [];
           setSelectedKeys(newDateRangeValue);
-        }
+        },
+        onOk: value => {
+          const newDateRangeValue = value ? [value[0] ? moment(value[0]).format() : '', value[1] ? moment(value[1]).format() : ''] : [];
+          setSelectedKeys(newDateRangeValue);
+        },
+        onExit: () => {
+          // clear nhưng chưa ấn OK
+          if (!dateRangeValue) {
+            return;
+          }
 
-        // onSelect={(val) => {
-        // }}
+          // Click ok
+          if (!isEqualDateArray(dateRangeValue, prevFilterValue)) {
+            // giá trị khác nhau
+            doFilter?.(true);
+          } else {
+            // giá trị = nhau
+            triggerVisible?.(false);
+          }
+        }
 
         // menuClassName="rc-menu-popup"
         ,

package/es/table-component/hook/useColumns.d.ts

@@ -2,6 +2,7 @@ import type { Dispatch, SetStateAction } from "react";
 import type { ColumnsTable, ColumnTable, IFormat, SelectionSettings } from '../../grid-component/type';
 import type { Cell, ColumnDef } from '@tanstack/react-table';
 export declare const renderValueCell: <T>(column: ColumnTable<T>, value: any, record: T, rowIndex: number, colIndex: number, format?: IFormat, editAble?: boolean) => any;
+export declare const getValueCellString: <T>(column: ColumnTable<T>, value: any, record: T, rowIndex: number, colIndex: number, format?: IFormat) => any;
 export declare function convertToTanStackColumns<T>({ t, columns, format, editAble }: {
     t?: any;
     columns: ColumnsTable<T>;

package/es/table-component/hook/useColumns.js

@@ -41,7 +41,7 @@ export const renderValueCell = (column, value, record, rowIndex, colIndex, forma
       return value ? value : '';
     case 'year':
       const year = value ? moment(value).format('yyyy') : '';
-      return /*#__PURE__*/React.createElement(Fragment, null, year);
+      return year;
     case 'datetime':
       return value ? moment(value).format(format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm') : '';
     case 'boolean':
@@ -76,6 +76,61 @@ export const renderValueCell = (column, value, record, rowIndex, colIndex, forma
       return value;
   }
 };
+export const getValueCellString = (column, value, record, rowIndex, colIndex, format) => {
+  const colFormat = typeof column.format === 'function' ? column.format(record) : column.format;
+  const cellFormat = getFormat(colFormat, format);
+  switch (column?.type) {
+    case 'number':
+      // const colFormat = typeof column.format === 'function' ? column.format(record) : column.format
+
+      // const cellFormat = getFormat(colFormat, format)
+
+      const thousandSeparator = cellFormat?.thousandSeparator;
+      const decimalSeparator = cellFormat?.decimalSeparator;
+      const dec = cellFormat?.decimalScale;
+
+      // const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? parseFloat(Number(value).toFixed(dec)).toString() : value.toString()) : '0'
+
+      const tmpval = typeof value === 'string' ? Number(value) : value;
+      const numericFormatProps = {
+        thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
+        decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
+        allowNegative: cellFormat?.allowNegative ?? true,
+        prefix: cellFormat?.prefix,
+        suffix: cellFormat?.suffix,
+        decimalScale: dec,
+        fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
+      };
+
+      // if ( typeof value === "string") {
+      //   const ttt =  removeNumericFormat(value, undefined, numericFormatProps )
+      //
+      // }
+
+      const contentNumber = !isEmpty(value) ? dec || dec === 0 ? parseFloat(tmpval.toFixed(dec)).toString() : tmpval.toString() : '0';
+      // const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? tmpval.toString() : tmpval.toString()) : '0'
+
+      return !isEmpty(contentNumber) ? numericFormatter(contentNumber, numericFormatProps) : '';
+    case 'date':
+      return value ? dayjs(value).format(cellFormat?.dateFormat ?? 'DD/MM/YYYY') : '';
+    case 'time':
+      return value ? value : '';
+    case 'year':
+      const year = value ? moment(value).format('yyyy') : '';
+      return year;
+    case 'datetime':
+      return value ? moment(value).format(cellFormat?.datetimeFormat ?? 'DD/MM/YYYY HH:mm') : '';
+    case 'boolean':
+      return value ? 'true' : 'false';
+      const nameFile = typeof value === 'object' && !Array.isArray(value) ? value.name : Array.isArray(value) ? value.map(it => typeof it === 'object' ? it.name : it).filter(Boolean).join(", ") : '';
+      return value ? nameFile : '';
+    default:
+      if (Array.isArray(value)) {
+        return value.join(', ');
+      }
+      return value;
+  }
+};
 export function convertToTanStackColumns({
   t,
   columns,

package/es/table-component/hook/utils.d.ts

@@ -67,6 +67,8 @@ export declare const detectSeparators: (str: string) => {
     thousandSeparator: string;
     decimalSeparator: string;
 };
+export declare const isDateValue: (value: any) => boolean;
+export declare const convertFomatedDateToDate: (value: string) => Date | null;
 export declare function isDateString(str: any): boolean;
 export declare function compareDates(date1: any, date2: any): boolean;
 export declare function compareDate(itemValue: any, value: any): boolean;