es-grid-template 1.9.51 → 1.9.53

package/es/ali-table/utils/convertColumnsChoose.d.ts

@@ -1,5 +1,5 @@
-import { TreeDataNode } from "antd";
-import { ColumnTable } from "../../grid-component";
+import type { TreeDataNode } from "antd";
+import type { ColumnTable } from "../../grid-component";
 export declare function convertColumnsToTreeData(columns: ColumnTable[], groupColumns?: string[], t?: any): TreeDataNode[];
 export declare function filterColumnsByField(columns: ColumnTable[], fieldList: string[]): ColumnTable[];
 export declare function filterVisibleColumns(columns: ColumnTable[]): ColumnTable[];

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

@@ -194,10 +194,10 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
         value: any;
         rowData: RecordType;
     }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
-    onCellStyles?: Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position">);
-    onCellHeaderStyles?: Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position">);
+    onCellStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
+    onCellHeaderStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
     onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
-    onCellFooterStyles?: Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position">);
+    onCellFooterStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
     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/TableContainerEdit.js

@@ -3,7 +3,8 @@ import React, { Fragment } from "react";
 import { useCopyToClipboard } from 'usehooks-ts';
 import { checkDecimalSeparator, checkThousandSeparator,
 // convertDateToDayjs,
-detectSeparators, findItemByKey, flattenArray, flattenData, getAllRowKey, getColIdsBetween, getDatepickerFormat,
+detectSeparators, findItemByKey, flattenArray, flattenData, getAllRowKey, getColIdsBetween,
+// getDatepickerFormat,
 // getDatepickerFormat,
 getDefaultValue, getEditType, getFormat, getRowIdsBetween, getSelectedCellMatrix, getTableHeight, isDateValue, isEditable, isEmpty, isFormattedNumber, newGuid, parseExcelClipboard,
 // parseExcelClipboardText,
@@ -256,39 +257,6 @@ const TableContainerEdit = props => {
   const rowsFocus = React.useMemo(() => {
     return startCell && endCell ? getRowIdsBetween(table, startCell.rowId, endCell.rowId) : [];
   }, [endCell, startCell, table]);
-  const copySelectionToClipboard = React.useCallback(() => {
-    if (!startCell || !endCell) {
-      return;
-    }
-
-    // const allRows = table.getRowModel().rows;
-    const allRows = table.getRowModel().flatRows;
-    // const allColumns = table.getAllLeafColumns();
-
-    const rowIds = getRowIdsBetween(table, startCell.rowId, endCell.rowId);
-    const colIds = getColIdsBetween(table, startCell.colId, endCell.colId);
-    const dataToCopy = [];
-    rowIds.forEach(rowId => {
-      const row = allRows.find(r => r.id === rowId);
-      if (!row) return;
-      const rowData = [];
-      colIds.forEach(colId => {
-        const cellll = row.getVisibleCells().find(c => c.column.id === colId);
-        const value = cellll?.getValue();
-        rowData.push(value !== undefined ? String(value) : '');
-      });
-      dataToCopy.push(rowData);
-    });
-
-    // Convert to TSV string
-    const tsv = dataToCopy.map(row => row.join('\t')).join('\n');
-
-    // Copy to clipboard
-    // navigator.clipboard.writeText(tsv).then(() => {
-    // });
-
-    copy(tsv).then(() => {}).catch(() => {});
-  }, [startCell, endCell, table]);
   const triggerChangeData = React.useCallback((newData, args) => {
     onDataChange?.(newData, args);
   }, [onDataChange, dataSource]);
@@ -329,6 +297,55 @@ const TableContainerEdit = props => {
       });
     }
   }, [onCellPaste, originData, triggerChangeData]);
+
+  // Copy
+
+  const copySelectionToClipboard = React.useCallback(() => {
+    if (!startCell || !endCell) {
+      return;
+    }
+
+    // const allRows = table.getRowModel().rows;
+    const allRows = table.getRowModel().flatRows;
+    // const allColumns = table.getAllLeafColumns();
+
+    const rowIds = getRowIdsBetween(table, startCell.rowId, endCell.rowId);
+    const colIds = getColIdsBetween(table, startCell.colId, endCell.colId);
+    const dataToCopy = [];
+    rowIds.forEach(rowId => {
+      const row = allRows.find(r => r.id === rowId);
+      if (!row) return;
+      const rowData = [];
+      colIds.forEach(colId => {
+        const cellll = row.getVisibleCells().find(c => c.column.id === colId);
+        const value = cellll?.getValue();
+        rowData.push(value !== undefined ? String(value) : '');
+      });
+      dataToCopy.push(rowData);
+    });
+
+    // Convert to TSV string
+    const tsv = dataToCopy.map(row => row.join('\t')).join('\n');
+
+    // Copy to clipboard
+    // navigator.clipboard.writeText(tsv).then(() => {
+    // });
+
+    copy(tsv).then(() => {}).catch(() => {});
+  }, [startCell, endCell, table]);
+  React.useEffect(() => {
+    const handleKeyDown = e => {
+      if (e.ctrlKey && e.key === 'c' && startCell && endCell && !editingKey) {
+        e.preventDefault();
+        copySelectionToClipboard();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [startCell, endCell, table, copySelectionToClipboard, editingKey]);
+
+  // Paste
+
   const handlePasted = React.useCallback(pasteData => {
     if (!startCell) {
       return;
@@ -336,7 +353,8 @@ const TableContainerEdit = props => {
     const rows = pasteData.slice(0, onCellPaste?.maxRowsPaste ?? 200);
 
     // const allRows = table.getRowModel().rows;
-    const allRows = table.getRowModel().flatRows;
+    const flatRows = table.getRowModel().flatRows;
+    const allRows = flatRows.filter((item, index, self) => index === self.findIndex(x => x.id === item.id));
     const allCols = table.getVisibleLeafColumns();
     const startRowIdx = allRows.findIndex(r => r.id === startCell.rowId);
     const startColIdx = allCols.findIndex(c => c.id === startCell.colId);
@@ -360,7 +378,7 @@ const TableContainerEdit = props => {
         const targetRow = startRow + rowIndex;
 
         // Nếu vượt quá số dòng hiện có, thêm dòng mới
-        if (targetRow >= newData.length) {
+        if (targetRow > newData.length) {
           const newID = newGuid();
           const defaultRowValue = getDefaultValue(defaultValue);
           newData.push(defaultValue ? {
@@ -524,11 +542,17 @@ const TableContainerEdit = props => {
               }
             } else if (columnOri.type === 'data' || columnOri.type === 'datatime' || columnOri.editType === 'date' || columnOri.editType === 'datetime') {
               const isDate = isDateValue(cellValue.trim());
-              const colFormat = typeof columnOri?.format === 'function' ? columnOri?.format(record) : columnOri?.format;
-              const cellFormat = getFormat(colFormat, format);
-              const editType = getEditType(columnOri);
-              const dateFormat = getDatepickerFormat(editType, cellFormat);
-              const date = isDate && !isEmpty(cellValue.trim()) ? moment(cellValue.trim(), dateFormat).format("YYYY-MM-DDTHH:mm:ssZ") : null;
+
+              // const colFormat = typeof columnOri?.format === 'function' ? columnOri?.format(record) : columnOri?.format
+              // const cellFormat = getFormat(colFormat, format)
+
+              // const editType = getEditType(columnOri as any)
+
+              // const dateFormat = getDatepickerFormat(editType, cellFormat)
+
+              // const date = isDate && !isEmpty(cellValue.trim()) ? moment(cellValue.trim(), dateFormat).format("YYYY-MM-DDTHH:mm:ssZ") : null
+
+              const date = isDate && !isEmpty(cellValue.trim()) ? moment(cellValue.trim()).format() : null;
               childData[targetRow] = {
                 ...childData[targetRow],
                 [columnKey]: date
@@ -603,20 +627,6 @@ const TableContainerEdit = props => {
       handlePasted(rowsPasted);
     }
   }, [handlePasted, onCellPaste?.maxRowsPaste, startCell]);
-
-  // Copy
-  React.useEffect(() => {
-    const handleKeyDown = e => {
-      if (e.ctrlKey && e.key === 'c' && startCell && endCell && !editingKey) {
-        e.preventDefault();
-        copySelectionToClipboard();
-      }
-    };
-    document.addEventListener('keydown', handleKeyDown);
-    return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [startCell, endCell, table, copySelectionToClipboard, editingKey]);
-
-  // Paste
   React.useEffect(() => {
     const handlePaste = e => {
       if (startCell && !editingKey) {

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

@@ -194,6 +194,7 @@ export const convertToDate = (value, format) => {
   }
   const valueType = getDateValueType(value);
   if (valueType === 'time') {
+    // const date = dayjs(value, format ? [format, 'HH:mm:ss', 'HH:mm' ] : ['HH:mm:ss', 'HH:mm'], true);
     const date = dayjs(value, format ?? ['HH:mm:ss', 'HH:mm'], true);
     return date.isValid() ? moment(date.toDate()).format() : '';
   }
@@ -619,7 +620,9 @@ export function getColIdsBetween(table, a, b) {
 }
 export function getRowIdsBetween(table, a, b) {
   // const ids = table.getRowModel().rows.map(r => r.id);
-  const ids = table.getRowModel().flatRows.map(r => r.id);
+  const flatRows = table.getRowModel().flatRows;
+  const allRows = flatRows.filter((item, index, self) => index === self.findIndex(x => x.id === item.id));
+  const ids = allRows.map(r => r.id);
   const [start, end] = [ids.indexOf(a), ids.indexOf(b)].sort((x, y) => x - y);
   return ids.slice(start, end + 1);
 }
@@ -1365,7 +1368,10 @@ export const getSelectedCellMatrix = (table, startCell, endCell) => {
   };
 
   // const rowIds = table.getRowModel().rows.map(r => r.id);
-  const rowIds = table.getRowModel().flatRows.map(r => r.id);
+
+  const flatRows = table.getRowModel().flatRows;
+  const allRows = flatRows.filter((item, index, self) => index === self.findIndex(x => x.id === item.id));
+  const rowIds = allRows.map(r => r.id);
   const colIds = table.getVisibleLeafColumns().map(c => c.id);
 
   // const colIds = table.getAllLeafColumns().map(c => c.id);

package/es/table-component/style.js

@@ -48,4 +48,4 @@ const colorDark = '#e6e4f3e6 ';
 export const GridStyle = styled.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-hdqm5k-0"
-})(["&.", "-grid{color:", ";font-size:", ";background-color:", ";font-family:", ";&.", "-grid-editable{.", "-grid-container{.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#ffffff;font-weight:500;}}}}}table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:'';pointer-events:none;}.", "-grid-cell{padding:5px 8px;&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{justify-content:flex-end;text-align:right;}&.", "-grid-cell-ellipsis{.ui-rc_cell-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;&.select-cell{padding-right:18px;position:relative;}.caret-down{float:right;position:absolute;right:0;&::before{content:'';display:inline-block;margin-left:4px;vertical-align:middle;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #6f7777;}}}}&.", "-grid-cell-wrap{white-space:normal;text-overflow:ellipsis;word-break:break-word;}.", "-grid-header-text-wrap{white-space:normal;overflow:hidden;text-overflow:ellipsis;word-break:break-word;}}.", "-grid-thead{background-color:", ";font-weight:", ";.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;z-index:3;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{font-weight:", ";background-color:", ";color:", ";&.", "-grid-row-odd{background-color:#f9f8fd;}&.", "-grid-row-even{}&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}.ui-rc-toolbar-bottom{border-right:1px solid #e0e0e0;border-left:1px solid #e0e0e0;.be-toolbar-item{.ui-rc-btn{font-size:12px;}.toolbar-dropdown-button{font-size:12px;.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-color:#28c76f;}.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-color:#28c76f;.ui-rc-btn-icon{color:#28c76f;}}}}}.ui-rc-toolbar-bottom_border-bottom{border-bottom:1px solid #e0e0e0;}.ui-rc-toolbar-bottom{position:relative;padding:.15rem 0.5rem;background-color:#ffffff;.toolbar-button{border-radius:3px;}.ui-rc-btn{border-radius:3px;height:28px;&.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-start-start-radius:0;border-end-start-radius:0;}&.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-start-end-radius:0;border-end-end-radius:0;}}}}"], props => props.$prefix, color, fontSize, BgColor, fontFamily, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, fwHeader, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, fwBody, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);
+})(["&.", "-grid{color:", ";font-size:", ";background-color:", ";font-family:", ";&.", "-grid-editable{.", "-grid-container{.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#ffffff;font-weight:500;}}}}}table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:'';pointer-events:none;}.", "-grid-cell{padding:5px 8px;&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{justify-content:flex-end;text-align:right;}&.", "-grid-cell-ellipsis{.ui-rc_cell-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;&.select-cell{padding-right:18px;position:relative;}.caret-down{float:right;position:absolute;right:0;&::before{content:'';display:inline-block;margin-left:4px;vertical-align:middle;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #6f7777;}}}}&.", "-grid-cell-wrap{white-space:normal;text-overflow:ellipsis;word-break:break-word;}.", "-grid-header-text-wrap{white-space:normal;overflow:hidden;text-overflow:ellipsis;word-break:break-word;}}.", "-grid-thead{background-color:", ";font-weight:", ";.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;z-index:3;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{font-weight:", ";background-color:", ";color:", ";&.", "-grid-row-odd{background-color:#f9f8fd;}&.", "-grid-row-even{}&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}.ui-rc-toolbar-bottom{border-right:1px solid #e0e0e0;border-left:1px solid #e0e0e0;.be-toolbar-item{.ui-rc-btn{font-size:12px;line-height:1.5}.toolbar-dropdown-button{font-size:12px;.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-color:#28c76f;}.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-color:#28c76f;.ui-rc-btn-icon{color:#28c76f;}}}}}.ui-rc-toolbar-bottom_border-bottom{border-bottom:1px solid #e0e0e0;}.ui-rc-toolbar-bottom{position:relative;padding:.15rem 0.5rem;background-color:#ffffff;.toolbar-button{border-radius:3px;}.ui-rc-btn{border-radius:3px;height:28px;&.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-start-start-radius:0;border-end-start-radius:0;}&.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-start-end-radius:0;border-end-end-radius:0;}}}}"], props => props.$prefix, color, fontSize, BgColor, fontFamily, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, fwHeader, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, fwBody, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);

package/es/table-virtuoso/InternalTable.js

@@ -197,6 +197,8 @@ const InternalTable = props => {
       });
     }
   };
+  console.log('tableData', tableData);
+  console.log('isDataTree', isDataTree);
   const table = useReactTable({
     _features: [OperatorFeature],
     data: tableData,

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

@@ -1,5 +1,5 @@
 import Space from "rc-master-ui/es/space";
-import { getCommonPinningStyles } from "../hook/utils";
+import { getCommonPinningStyles, getFormat } from "../hook/utils";
 import Checkbox from "rc-master-ui/es/checkbox/Checkbox";
 import classNames from "classnames";
 import React from "react";
@@ -9,9 +9,10 @@ import { renderValueCell, toggleRowSelection } from "../../table-component/hook/
 const renderCellIndex = props => {
   const {
     cell,
-    pagination
+    pagination,
+    isDataTree
   } = props;
-  const parrents = cell.row.getParentRows();
+  const parrents = cell.row.parentId && isDataTree ? cell.row.getParentRows?.() : undefined;
   if (parrents && parrents.length > 0) {
     return /*#__PURE__*/React.createElement("span", {
       className: "ui-rc_cell-content"
@@ -250,10 +251,12 @@ const TableBodyCell = props => {
       className: "ui-rc_cell-content"
     }, renderCellIndex({
       cell,
-      pagination
+      pagination,
+      isDataTree
     })) : renderCellIndex({
       cell,
-      pagination
+      pagination,
+      isDataTree
     }));
   }
   if (cell.column.id === "command") {
@@ -313,8 +316,10 @@ const TableBodyCell = props => {
     })));
   }
   const cellValue = cell.getValue();
+  const colFormat = typeof columnMeta.format === 'function' ? columnMeta.format(record) : columnMeta.format;
+  const cellFormat = getFormat(colFormat, format);
   const rowIndex = cell.row.index;
-  const fomatedValue = renderValueCell(columnMeta, cellValue, record, rowIndex, colIndex, format, false);
+  const fomatedValue = renderValueCell(columnMeta, cellValue, record, rowIndex, colIndex, cellFormat, false);
   const cellContent = columnMeta.template ? typeof columnMeta.template === 'function' ? columnMeta.template({
     field: columnMeta.field,
     index: cell.row.index,

package/lib/ali-table/utils/convertColumnsChoose.d.ts

@@ -1,5 +1,5 @@
-import { TreeDataNode } from "antd";
-import { ColumnTable } from "../../grid-component";
+import type { TreeDataNode } from "antd";
+import type { ColumnTable } from "../../grid-component";
 export declare function convertColumnsToTreeData(columns: ColumnTable[], groupColumns?: string[], t?: any): TreeDataNode[];
 export declare function filterColumnsByField(columns: ColumnTable[], fieldList: string[]): ColumnTable[];
 export declare function filterVisibleColumns(columns: ColumnTable[]): ColumnTable[];

package/lib/table-component/TableContainerEdit.js

@@ -257,39 +257,6 @@ const TableContainerEdit = props => {
   const rowsFocus = _react.default.useMemo(() => {
     return startCell && endCell ? (0, _utils.getRowIdsBetween)(table, startCell.rowId, endCell.rowId) : [];
   }, [endCell, startCell, table]);
-  const copySelectionToClipboard = _react.default.useCallback(() => {
-    if (!startCell || !endCell) {
-      return;
-    }
-
-    // const allRows = table.getRowModel().rows;
-    const allRows = table.getRowModel().flatRows;
-    // const allColumns = table.getAllLeafColumns();
-
-    const rowIds = (0, _utils.getRowIdsBetween)(table, startCell.rowId, endCell.rowId);
-    const colIds = (0, _utils.getColIdsBetween)(table, startCell.colId, endCell.colId);
-    const dataToCopy = [];
-    rowIds.forEach(rowId => {
-      const row = allRows.find(r => r.id === rowId);
-      if (!row) return;
-      const rowData = [];
-      colIds.forEach(colId => {
-        const cellll = row.getVisibleCells().find(c => c.column.id === colId);
-        const value = cellll?.getValue();
-        rowData.push(value !== undefined ? String(value) : '');
-      });
-      dataToCopy.push(rowData);
-    });
-
-    // Convert to TSV string
-    const tsv = dataToCopy.map(row => row.join('\t')).join('\n');
-
-    // Copy to clipboard
-    // navigator.clipboard.writeText(tsv).then(() => {
-    // });
-
-    copy(tsv).then(() => {}).catch(() => {});
-  }, [startCell, endCell, table]);
   const triggerChangeData = _react.default.useCallback((newData, args) => {
     onDataChange?.(newData, args);
   }, [onDataChange, dataSource]);
@@ -330,6 +297,55 @@ const TableContainerEdit = props => {
       });
     }
   }, [onCellPaste, originData, triggerChangeData]);
+
+  // Copy
+
+  const copySelectionToClipboard = _react.default.useCallback(() => {
+    if (!startCell || !endCell) {
+      return;
+    }
+
+    // const allRows = table.getRowModel().rows;
+    const allRows = table.getRowModel().flatRows;
+    // const allColumns = table.getAllLeafColumns();
+
+    const rowIds = (0, _utils.getRowIdsBetween)(table, startCell.rowId, endCell.rowId);
+    const colIds = (0, _utils.getColIdsBetween)(table, startCell.colId, endCell.colId);
+    const dataToCopy = [];
+    rowIds.forEach(rowId => {
+      const row = allRows.find(r => r.id === rowId);
+      if (!row) return;
+      const rowData = [];
+      colIds.forEach(colId => {
+        const cellll = row.getVisibleCells().find(c => c.column.id === colId);
+        const value = cellll?.getValue();
+        rowData.push(value !== undefined ? String(value) : '');
+      });
+      dataToCopy.push(rowData);
+    });
+
+    // Convert to TSV string
+    const tsv = dataToCopy.map(row => row.join('\t')).join('\n');
+
+    // Copy to clipboard
+    // navigator.clipboard.writeText(tsv).then(() => {
+    // });
+
+    copy(tsv).then(() => {}).catch(() => {});
+  }, [startCell, endCell, table]);
+  _react.default.useEffect(() => {
+    const handleKeyDown = e => {
+      if (e.ctrlKey && e.key === 'c' && startCell && endCell && !editingKey) {
+        e.preventDefault();
+        copySelectionToClipboard();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [startCell, endCell, table, copySelectionToClipboard, editingKey]);
+
+  // Paste
+
   const handlePasted = _react.default.useCallback(pasteData => {
     if (!startCell) {
       return;
@@ -337,7 +353,8 @@ const TableContainerEdit = props => {
     const rows = pasteData.slice(0, onCellPaste?.maxRowsPaste ?? 200);
 
     // const allRows = table.getRowModel().rows;
-    const allRows = table.getRowModel().flatRows;
+    const flatRows = table.getRowModel().flatRows;
+    const allRows = flatRows.filter((item, index, self) => index === self.findIndex(x => x.id === item.id));
     const allCols = table.getVisibleLeafColumns();
     const startRowIdx = allRows.findIndex(r => r.id === startCell.rowId);
     const startColIdx = allCols.findIndex(c => c.id === startCell.colId);
@@ -361,7 +378,7 @@ const TableContainerEdit = props => {
         const targetRow = startRow + rowIndex;
 
         // Nếu vượt quá số dòng hiện có, thêm dòng mới
-        if (targetRow >= newData.length) {
+        if (targetRow > newData.length) {
           const newID = (0, _utils.newGuid)();
           const defaultRowValue = (0, _utils.getDefaultValue)(defaultValue);
           newData.push(defaultValue ? {
@@ -525,11 +542,17 @@ const TableContainerEdit = props => {
               }
             } else if (columnOri.type === 'data' || columnOri.type === 'datatime' || columnOri.editType === 'date' || columnOri.editType === 'datetime') {
               const isDate = (0, _utils.isDateValue)(cellValue.trim());
-              const colFormat = typeof columnOri?.format === 'function' ? columnOri?.format(record) : columnOri?.format;
-              const cellFormat = (0, _utils.getFormat)(colFormat, format);
-              const editType = (0, _utils.getEditType)(columnOri);
-              const dateFormat = (0, _utils.getDatepickerFormat)(editType, cellFormat);
-              const date = isDate && !(0, _utils.isEmpty)(cellValue.trim()) ? (0, _moment.default)(cellValue.trim(), dateFormat).format("YYYY-MM-DDTHH:mm:ssZ") : null;
+
+              // const colFormat = typeof columnOri?.format === 'function' ? columnOri?.format(record) : columnOri?.format
+              // const cellFormat = getFormat(colFormat, format)
+
+              // const editType = getEditType(columnOri as any)
+
+              // const dateFormat = getDatepickerFormat(editType, cellFormat)
+
+              // const date = isDate && !isEmpty(cellValue.trim()) ? moment(cellValue.trim(), dateFormat).format("YYYY-MM-DDTHH:mm:ssZ") : null
+
+              const date = isDate && !(0, _utils.isEmpty)(cellValue.trim()) ? (0, _moment.default)(cellValue.trim()).format() : null;
               childData[targetRow] = {
                 ...childData[targetRow],
                 [columnKey]: date
@@ -604,20 +627,6 @@ const TableContainerEdit = props => {
       handlePasted(rowsPasted);
     }
   }, [handlePasted, onCellPaste?.maxRowsPaste, startCell]);
-
-  // Copy
-  _react.default.useEffect(() => {
-    const handleKeyDown = e => {
-      if (e.ctrlKey && e.key === 'c' && startCell && endCell && !editingKey) {
-        e.preventDefault();
-        copySelectionToClipboard();
-      }
-    };
-    document.addEventListener('keydown', handleKeyDown);
-    return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [startCell, endCell, table, copySelectionToClipboard, editingKey]);
-
-  // Paste
   _react.default.useEffect(() => {
     const handlePaste = e => {
       if (startCell && !editingKey) {

package/lib/table-component/hook/utils.js

@@ -277,6 +277,7 @@ const convertToDate = (value, format) => {
   }
   const valueType = getDateValueType(value);
   if (valueType === 'time') {
+    // const date = dayjs(value, format ? [format, 'HH:mm:ss', 'HH:mm' ] : ['HH:mm:ss', 'HH:mm'], true);
     const date = (0, _dayjs.default)(value, format ?? ['HH:mm:ss', 'HH:mm'], true);
     return date.isValid() ? (0, _moment.default)(date.toDate()).format() : '';
   }
@@ -714,7 +715,9 @@ function getColIdsBetween(table, a, b) {
 }
 function getRowIdsBetween(table, a, b) {
   // const ids = table.getRowModel().rows.map(r => r.id);
-  const ids = table.getRowModel().flatRows.map(r => r.id);
+  const flatRows = table.getRowModel().flatRows;
+  const allRows = flatRows.filter((item, index, self) => index === self.findIndex(x => x.id === item.id));
+  const ids = allRows.map(r => r.id);
   const [start, end] = [ids.indexOf(a), ids.indexOf(b)].sort((x, y) => x - y);
   return ids.slice(start, end + 1);
 }
@@ -1486,7 +1489,10 @@ const getSelectedCellMatrix = (table, startCell, endCell) => {
   };
 
   // const rowIds = table.getRowModel().rows.map(r => r.id);
-  const rowIds = table.getRowModel().flatRows.map(r => r.id);
+
+  const flatRows = table.getRowModel().flatRows;
+  const allRows = flatRows.filter((item, index, self) => index === self.findIndex(x => x.id === item.id));
+  const rowIds = allRows.map(r => r.id);
   const colIds = table.getVisibleLeafColumns().map(c => c.id);
 
   // const colIds = table.getAllLeafColumns().map(c => c.id);

package/lib/table-component/style.js

@@ -55,4 +55,4 @@ const colorDark = '#e6e4f3e6 ';
 const GridStyle = exports.GridStyle = _styledComponents.default.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-hdqm5k-0"
-})(["&.", "-grid{color:", ";font-size:", ";background-color:", ";font-family:", ";&.", "-grid-editable{.", "-grid-container{.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#ffffff;font-weight:500;}}}}}table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:'';pointer-events:none;}.", "-grid-cell{padding:5px 8px;&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{justify-content:flex-end;text-align:right;}&.", "-grid-cell-ellipsis{.ui-rc_cell-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;&.select-cell{padding-right:18px;position:relative;}.caret-down{float:right;position:absolute;right:0;&::before{content:'';display:inline-block;margin-left:4px;vertical-align:middle;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #6f7777;}}}}&.", "-grid-cell-wrap{white-space:normal;text-overflow:ellipsis;word-break:break-word;}.", "-grid-header-text-wrap{white-space:normal;overflow:hidden;text-overflow:ellipsis;word-break:break-word;}}.", "-grid-thead{background-color:", ";font-weight:", ";.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;z-index:3;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{font-weight:", ";background-color:", ";color:", ";&.", "-grid-row-odd{background-color:#f9f8fd;}&.", "-grid-row-even{}&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}.ui-rc-toolbar-bottom{border-right:1px solid #e0e0e0;border-left:1px solid #e0e0e0;.be-toolbar-item{.ui-rc-btn{font-size:12px;}.toolbar-dropdown-button{font-size:12px;.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-color:#28c76f;}.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-color:#28c76f;.ui-rc-btn-icon{color:#28c76f;}}}}}.ui-rc-toolbar-bottom_border-bottom{border-bottom:1px solid #e0e0e0;}.ui-rc-toolbar-bottom{position:relative;padding:.15rem 0.5rem;background-color:#ffffff;.toolbar-button{border-radius:3px;}.ui-rc-btn{border-radius:3px;height:28px;&.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-start-start-radius:0;border-end-start-radius:0;}&.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-start-end-radius:0;border-end-end-radius:0;}}}}"], props => props.$prefix, color, fontSize, BgColor, fontFamily, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, fwHeader, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, fwBody, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);
+})(["&.", "-grid{color:", ";font-size:", ";background-color:", ";font-family:", ";&.", "-grid-editable{.", "-grid-container{.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#ffffff;font-weight:500;}}}}}table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:'';pointer-events:none;}.", "-grid-cell{padding:5px 8px;&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{justify-content:flex-end;text-align:right;}&.", "-grid-cell-ellipsis{.ui-rc_cell-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;&.select-cell{padding-right:18px;position:relative;}.caret-down{float:right;position:absolute;right:0;&::before{content:'';display:inline-block;margin-left:4px;vertical-align:middle;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #6f7777;}}}}&.", "-grid-cell-wrap{white-space:normal;text-overflow:ellipsis;word-break:break-word;}.", "-grid-header-text-wrap{white-space:normal;overflow:hidden;text-overflow:ellipsis;word-break:break-word;}}.", "-grid-thead{background-color:", ";font-weight:", ";.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;z-index:3;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{font-weight:", ";background-color:", ";color:", ";&.", "-grid-row-odd{background-color:#f9f8fd;}&.", "-grid-row-even{}&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}.ui-rc-toolbar-bottom{border-right:1px solid #e0e0e0;border-left:1px solid #e0e0e0;.be-toolbar-item{.ui-rc-btn{font-size:12px;line-height:1.5}.toolbar-dropdown-button{font-size:12px;.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-color:#28c76f;}.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-color:#28c76f;.ui-rc-btn-icon{color:#28c76f;}}}}}.ui-rc-toolbar-bottom_border-bottom{border-bottom:1px solid #e0e0e0;}.ui-rc-toolbar-bottom{position:relative;padding:.15rem 0.5rem;background-color:#ffffff;.toolbar-button{border-radius:3px;}.ui-rc-btn{border-radius:3px;height:28px;&.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-start-start-radius:0;border-end-start-radius:0;}&.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-start-end-radius:0;border-end-end-radius:0;}}}}"], props => props.$prefix, color, fontSize, BgColor, fontFamily, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, fwHeader, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, fwBody, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);

package/lib/table-virtuoso/InternalTable.js

@@ -207,6 +207,8 @@ const InternalTable = props => {
       });
     }
   };
+  console.log('tableData', tableData);
+  console.log('isDataTree', isDataTree);
   const table = (0, _reactTable.useReactTable)({
     _features: [_operator.OperatorFeature],
     data: tableData,

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

@@ -16,9 +16,10 @@ var _useColumns = require("../../table-component/hook/useColumns");
 const renderCellIndex = props => {
   const {
     cell,
-    pagination
+    pagination,
+    isDataTree
   } = props;
-  const parrents = cell.row.getParentRows();
+  const parrents = cell.row.parentId && isDataTree ? cell.row.getParentRows?.() : undefined;
   if (parrents && parrents.length > 0) {
     return /*#__PURE__*/_react.default.createElement("span", {
       className: "ui-rc_cell-content"
@@ -257,10 +258,12 @@ const TableBodyCell = props => {
       className: "ui-rc_cell-content"
     }, renderCellIndex({
       cell,
-      pagination
+      pagination,
+      isDataTree
     })) : renderCellIndex({
       cell,
-      pagination
+      pagination,
+      isDataTree
     }));
   }
   if (cell.column.id === "command") {
@@ -320,8 +323,10 @@ const TableBodyCell = props => {
     })));
   }
   const cellValue = cell.getValue();
+  const colFormat = typeof columnMeta.format === 'function' ? columnMeta.format(record) : columnMeta.format;
+  const cellFormat = (0, _utils.getFormat)(colFormat, format);
   const rowIndex = cell.row.index;
-  const fomatedValue = (0, _useColumns.renderValueCell)(columnMeta, cellValue, record, rowIndex, colIndex, format, false);
+  const fomatedValue = (0, _useColumns.renderValueCell)(columnMeta, cellValue, record, rowIndex, colIndex, cellFormat, false);
   const cellContent = columnMeta.template ? typeof columnMeta.template === 'function' ? columnMeta.template({
     field: columnMeta.field,
     index: cell.row.index,

package/package.json

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