es-grid-template 1.9.20 → 1.9.22

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

@@ -166,7 +166,7 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
     haveSum?: boolean;
     isSummary?: boolean;
     sumGroup?: boolean;
-    summaryTemplate?: (data: number, key: string) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    summaryTemplate?: (data: number, key: string) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode;
     sorter?: boolean;
     allowFiltering?: boolean;
     allowSortering?: boolean;
@@ -178,26 +178,26 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
     showFilterSearch?: boolean;
     hidden?: boolean;
     visible?: boolean;
-    headerTooltip?: string | boolean | (() => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
+    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").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | ((column: ColumnTable<RecordType>) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
+    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;
-    template?: import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
+    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").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
-    onCellStyles?: Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width">);
-    onCellHeaderStyles?: Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width">);
+    }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
+    onCellStyles?: Omit<CSSProperties, "display" | "left" | "minWidth" | "position" | "right" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "display" | "left" | "minWidth" | "position" | "right" | "width">);
+    onCellHeaderStyles?: Omit<CSSProperties, "display" | "left" | "minWidth" | "position" | "right" | "width"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "display" | "left" | "minWidth" | "position" | "right" | "width">);
     onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
-    onCellFooterStyles?: Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width">);
+    onCellFooterStyles?: Omit<CSSProperties, "display" | "left" | "minWidth" | "position" | "right" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "display" | "left" | "minWidth" | "position" | "right" | "width">);
     getValue?: (row: any, rowIndex: number) => any;
     getCellProps?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").CellProps;
     headerCellProps?: import("./../../grid-component/type").CellProps;

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/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/style.scss

@@ -152,8 +152,8 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
     }
 
     .#{$prefix}-grid-thead {
-      // background-color: #ffffff;
-      background-color: inherit;
+      background-color: #ffffff;
+      // background-color: inherit;
        font-weight: 500;
 
       .#{$prefix}-grid-cell {

package/es/table-component/table/Grid.js

@@ -125,9 +125,9 @@ const Grid = props => {
       }
       return true;
     },
-    initialState: {
-      rowSelection: {}
-    },
+    // initialState: {
+    //   rowSelection: {}
+    // },
     onRowSelectionChange: setRowSelection,
     // RowSelection
 
@@ -202,6 +202,14 @@ const Grid = props => {
     const isEqual = isObjEqual(convertToObjTrue(mergedSelectedKeys), rowSelection);
     if (!isEqual) {
       setRowSelection(convertToObjTrue(mergedSelectedKeys));
+      // table.setRowSelection(convertToObjTrue(mergedSelectedKeys))
+
+      if (mergedSelectedKeys.length === 0) {
+        setIsSelectionChange(prev => ({
+          ...prev,
+          rowsData: []
+        }));
+      }
     }
   }, [mergedSelectedKeys]);
   React.useEffect(() => {

package/es/table-virtuoso/body/TableBodyRow.js

@@ -66,7 +66,6 @@ const TableBodyRow = ({
           rowData: row.original,
           field: colKey
         })(e);
-        onContextMenu?.(row.original)(e);
       }
     }
   }), visibleCells.map(cell => {

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

@@ -533,9 +533,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) => {
@@ -672,9 +671,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/lib/table-component/body/TableBodyCell.js

@@ -191,17 +191,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.default.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)
   //   ? ''
@@ -227,6 +216,18 @@ const TableBodyCell = props => {
   const cellValue = cell.getValue();
   const rowIndex = cell.row.index;
   const fomatedValue = (0, _useColumns.renderValueCell)(columnMeta, cellValue, record, rowIndex, colIndex, format, false);
+  const valueCellString = (0, _useColumns.getValueCellString)(columnMeta, cellValue, record, rowIndex, colIndex, format);
+  const tooltipContent = _react.default.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.default.createElement("div", {
       key: cell.id,

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

@@ -244,10 +244,13 @@ const TableBodyCellEdit = props => {
   const [isOpenTooltip, setIsOpenTooltip] = _react.default.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 = (0, _utils.isEditable)(cell.column.columnDef.meta, record) && isRowEditable !== false;
 
   // const allRows = table.getRowModel().rows;
@@ -299,6 +302,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 = (0, _useColumns.getValueCellString)(columnMeta, valeOfCell, record, rowNumber, colIndex, format);
+  const tooltipContent = _react.default.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 = (0, _utils.getRowIdsBetween)(table, startPasteCell?.rowId ?? '', endPasteCell?.rowId ?? '');

package/lib/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/lib/table-component/hook/useColumns.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.convertToTanStackColumns = convertToTanStackColumns;
-exports.toggleRowSelection = exports.renderValueCell = void 0;
+exports.toggleRowSelection = exports.renderValueCell = exports.getValueCellString = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _ControlCheckbox = _interopRequireDefault(require("../components/ControlCheckbox"));
 var _utils = require("./utils");
@@ -51,7 +51,7 @@ const renderValueCell = (column, value, record, rowIndex, colIndex, format, edit
       return value ? value : '';
     case 'year':
       const year = value ? (0, _moment.default)(value).format('yyyy') : '';
-      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, year);
+      return year;
     case 'datetime':
       return value ? (0, _moment.default)(value).format(format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm') : '';
     case 'boolean':
@@ -87,6 +87,62 @@ const renderValueCell = (column, value, record, rowIndex, colIndex, format, edit
   }
 };
 exports.renderValueCell = renderValueCell;
+const getValueCellString = (column, value, record, rowIndex, colIndex, format) => {
+  const colFormat = typeof column.format === 'function' ? column.format(record) : column.format;
+  const cellFormat = (0, _utils.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: (0, _utils.checkThousandSeparator)(thousandSeparator, decimalSeparator),
+        decimalSeparator: (0, _utils.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 = !(0, _utils.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 !(0, _utils.isEmpty)(contentNumber) ? (0, _reactNumericComponent.numericFormatter)(contentNumber, numericFormatProps) : '';
+    case 'date':
+      return value ? (0, _dayjs.default)(value).format(cellFormat?.dateFormat ?? 'DD/MM/YYYY') : '';
+    case 'time':
+      return value ? value : '';
+    case 'year':
+      const year = value ? (0, _moment.default)(value).format('yyyy') : '';
+      return year;
+    case 'datetime':
+      return value ? (0, _moment.default)(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;
+  }
+};
+exports.getValueCellString = getValueCellString;
 function convertToTanStackColumns({
   t,
   columns,

package/lib/table-component/style.scss

@@ -152,8 +152,8 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
     }
 
     .#{$prefix}-grid-thead {
-      // background-color: #ffffff;
-      background-color: inherit;
+      background-color: #ffffff;
+      // background-color: inherit;
        font-weight: 500;
 
       .#{$prefix}-grid-cell {

package/lib/table-component/table/Grid.js

@@ -130,9 +130,9 @@ const Grid = props => {
       }
       return true;
     },
-    initialState: {
-      rowSelection: {}
-    },
+    // initialState: {
+    //   rowSelection: {}
+    // },
     onRowSelectionChange: setRowSelection,
     // RowSelection
 
@@ -207,6 +207,14 @@ const Grid = props => {
     const isEqual = (0, _utils.isObjEqual)((0, _utils.convertToObjTrue)(mergedSelectedKeys), rowSelection);
     if (!isEqual) {
       setRowSelection((0, _utils.convertToObjTrue)(mergedSelectedKeys));
+      // table.setRowSelection(convertToObjTrue(mergedSelectedKeys))
+
+      if (mergedSelectedKeys.length === 0) {
+        setIsSelectionChange(prev => ({
+          ...prev,
+          rowsData: []
+        }));
+      }
     }
   }, [mergedSelectedKeys]);
   _react.default.useEffect(() => {

package/lib/table-virtuoso/body/TableBodyRow.js

@@ -73,7 +73,6 @@ const TableBodyRow = ({
           rowData: row.original,
           field: colKey
         })(e);
-        onContextMenu?.(row.original)(e);
       }
     }
   }), visibleCells.map(cell => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.9.20",
+  "version": "1.9.22",
   "description": "es-grid-template",
   "keywords": [
     "react",