es-grid-template 1.9.53 → 1.9.55

package/es/table-component/ColumnsConfig.js

@@ -0,0 +1,302 @@
+import React, { useEffect, useState } from "react";
+import { Button, Checkbox, Drawer, Input, InputNumber, Select, Space } from "rc-master-ui";
+import { Info, Settings } from "becoxy-icons";
+import TableAli from "../ali-table";
+import { updateArrayByKey } from "../grid-component/hooks";
+const align = {
+  left: 'Left',
+  right: 'Right'
+};
+export const ColumnsConfig = props => {
+  const {
+    originColumns,
+    triggerChangeColumns,
+    t,
+    id,
+    locale,
+    tableLocal
+  } = props;
+  const [tmpColumn, settmpColumn] = useState([...originColumns]);
+  useEffect(() => {
+    if (originColumns) {
+      settmpColumn([...originColumns]);
+    }
+  }, [originColumns]);
+
+  // const treeColumns = React.useMemo(() => {
+  //   return convertColumnsToTreeData(propsColumns, columnsGroup)
+  // }, [propsColumns, columnsGroup])
+
+  // const [mergedSelectedKeys, setMergedSelectedKeys] = useMergedState(
+  //   defaultSelectedKeys && defaultSelectedKeys.length ? defaultSelectedKeys : undefined,
+  //   {
+  //     value: undefined,
+  //   },
+  // );
+  const getWindowSize = () => {
+    const {
+      innerWidth,
+      innerHeight
+    } = window;
+    return {
+      innerWidth,
+      innerHeight
+    };
+  };
+  const [windowSize, setWindowSize] = useState(getWindowSize());
+  const [open, setOpen] = useState(false);
+  const [currentRow, setCurrentRow] = useState('');
+  useEffect(() => {
+    const handleWindowResize = () => {
+      setWindowSize(getWindowSize());
+    };
+    window.addEventListener('resize', handleWindowResize);
+    return () => {
+      window.removeEventListener('resize', handleWindowResize);
+    };
+  }, []);
+  const onClose = () => {
+    setOpen(!open);
+  };
+  const handleAccept = () => {
+    triggerChangeColumns?.(tmpColumn, [], 'columnChoose');
+    onClose();
+  };
+  const handleChange = newElemt => {
+    const newEle = {
+      ...newElemt
+    };
+    const abc = updateArrayByKey(tmpColumn, newEle, 'field');
+    settmpColumn(abc);
+  };
+  const columns = [{
+    field: 'headerText1',
+    headerText: 'Tên cột',
+    template: args => {
+      const {
+        rowData
+      } = args;
+      return /*#__PURE__*/React.createElement("span", null, rowData.headerText);
+    },
+    getCellProps(value, row) {
+      return {
+        style: {},
+        onClick: () => {
+          setCurrentRow(row.field);
+        }
+      };
+    }
+  }, {
+    field: 'headerText',
+    headerText: 'Tên cột hiển thị',
+    width: 200,
+    getCellProps(value, row) {
+      return {
+        style: {
+          paddingBlock: currentRow === row.field ? 0 : undefined
+        },
+        onClick: () => {
+          setCurrentRow(row.field);
+        }
+      };
+    },
+    template: args => {
+      const {
+        value,
+        rowData
+      } = args;
+      if (currentRow === rowData.field) {
+        return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Input, {
+          defaultValue: value,
+          allowClear: true,
+          onBlur: e => {
+            const newData = {
+              ...rowData,
+              visible: e.target.value
+            };
+            handleChange(newData);
+          }
+        }));
+      }
+      return /*#__PURE__*/React.createElement("span", null, value);
+    }
+  }, {
+    field: 'visible',
+    headerText: 'Hiển thị',
+    textAlign: 'center',
+    headerTextAlign: 'center',
+    width: 80,
+    template: args => {
+      const {
+        value,
+        rowData
+      } = args;
+      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Checkbox, {
+        defaultChecked: value !== false,
+        onChange: e => {
+          const newData = {
+            ...rowData,
+            visible: e.target.checked
+          };
+          handleChange(newData);
+        }
+      }));
+    }
+  }, {
+    field: 'fixed',
+    headerText: 'Cố định cột',
+    getCellProps(value, row) {
+      return {
+        style: {
+          paddingBlock: currentRow === row.field ? 0 : undefined
+        },
+        onClick: () => {
+          setCurrentRow(row.field);
+        }
+      };
+    },
+    template: args => {
+      const {
+        value,
+        rowData
+      } = args;
+      const rs = value ?? rowData.fixedType;
+      if (currentRow === rowData.field) {
+        return /*#__PURE__*/React.createElement(Select, {
+          value: rs,
+          allowClear: true,
+          style: {
+            width: '100%'
+          },
+          options: [{
+            value: 'left',
+            label: 'Trái'
+          }, {
+            value: 'right',
+            label: 'Phải'
+          }],
+          onChange: val => {
+            const newData = {
+              ...rowData,
+              fixed: val
+            };
+            handleChange(newData);
+          }
+        });
+      }
+      if (rs) {
+        return /*#__PURE__*/React.createElement("span", null, t ? t?.(align[rs]) : align[rs]);
+      }
+      return '';
+    }
+  }, {
+    field: 'width',
+    headerText: 'Độ rộng cột (px)',
+    getCellProps(value, row) {
+      return {
+        style: {
+          paddingBlock: currentRow === row.field ? 0 : undefined
+        },
+        onClick: () => {
+          setCurrentRow(row.field);
+        }
+      };
+    },
+    template: args => {
+      const {
+        value,
+        rowData
+      } = args;
+      if (currentRow === rowData.field) {
+        return /*#__PURE__*/React.createElement(InputNumber, {
+          defaultValue: value,
+          style: {
+            width: '100%'
+          },
+          changeOnWheel: true,
+          onBlur: e => {
+            const newData = {
+              ...rowData,
+              visible: e.target.value
+            };
+            handleChange(newData);
+          }
+        });
+      }
+      return /*#__PURE__*/React.createElement("span", null, value);
+    }
+  }];
+  const handleReset = () => {
+    settmpColumn([...originColumns]);
+  };
+  const footer = /*#__PURE__*/React.createElement("div", {
+    className: "d-flex justify-content-end gap-2 w-100"
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    onClick: () => handleReset(),
+    styles: {
+      icon: {}
+    }
+  }, "Thi\u1EBFt l\u1EADp l\u1EA1i"), /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    styles: {
+      icon: {}
+    },
+    onClick: () => handleAccept()
+  }, "X\xE1c nh\u1EADn"), /*#__PURE__*/React.createElement(Button, {
+    onClick: () => onClose(),
+    styles: {
+      icon: {}
+    }
+  }, "Cancel"));
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Settings, {
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-content": locale?.table?.setting || tableLocal?.setting || 'Setting',
+    fontSize: 16,
+    style: {
+      cursor: 'pointer'
+    },
+    className: "toolbar-icon",
+    onClick: () => setOpen(true)
+  }), /*#__PURE__*/React.createElement(Drawer, {
+    title: `Cấu hình cột`,
+    placement: "right"
+    // size={'large'}
+    ,
+    styles: {
+      wrapper: {
+        width: 1200
+      },
+      body: {
+        paddingBlock: 6
+      }
+    },
+    onClose: onClose,
+    open: open,
+    footer: footer,
+    extra: /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Info, {
+      "data-tooltip-id": `${id}-tooltip-content`,
+      "data-tooltip-content": 'Click vào dòng để chỉnh sửa'
+    }))
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TableAli, {
+    fullScreen: false,
+    columns: columns,
+    dataSource: tmpColumn,
+    gridLines: "Horizontal",
+    height: windowSize.innerHeight - 125,
+    minHeight: windowSize.innerHeight - 125,
+    rowDnd: {
+      enabled: true,
+      onChange: args => {
+        settmpColumn(args.rows);
+      }
+    },
+    expandable: {
+      expandIconColumnIndex: 1,
+      defaultExpandAllRows: true
+    },
+    useOuterBorder: true,
+    allowFiltering: false,
+    allowResizing: false
+  }))));
+};

package/es/table-component/ContextMenu.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Dropdown, Menu } from "antd";
+import { Dropdown, Menu } from "rc-master-ui";
 export const findItemByKey = (array, key, value) => {
   for (let i = 0; i < array.length; i++) {
     const item = array[i];

package/es/table-component/InternalTable.js

@@ -9,7 +9,11 @@ import "./style.scss";
 import { faker } from '@faker-js/faker';
 import useMergedState from "rc-util/es/hooks/useMergedState";
 import Grid from "./table/Grid";
-import { addRowIdArray, convertFlatColumn1, convertToObj, convertToObjTrue, filterDataByColumns, findAllChildrenKeys2, flatColumns2, getAllRowKey, getDiffent2Array, getFixedFields, getInvisibleColumns, getTreeDepth, groupArrayByColumns, isTreeArray, updateWidthsByOther } from "./hook/utils";
+import { addRowIdArray, convertFlatColumn1,
+// convertToObj,
+convertToObjTrue, filterDataByColumns, findAllChildrenKeys2, flatColumns2, getAllRowKey,
+// getDiffent2Array,
+getFixedFields, getInvisibleColumns, getTreeDepth, groupArrayByColumns, isTreeArray, updateWidthsByOther } from "./hook/utils";
 import { convertToTanStackColumns } from "./hook/useColumns";
 import { convertColumns } from "./hook/convert";
 import { removeInvisibleColumns } from "../grid-component/hooks";
@@ -98,6 +102,12 @@ const InternalTable = props => {
   const depthData = React.useMemo(() => {
     return getTreeDepth(convertData);
   }, [convertData]);
+
+  //  const dataIds = React.useMemo<UniqueIdentifier[]>(
+  //   () => convertData.map((it: any) => it.rowId),
+  //   [convertData],
+  // )
+
   const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
   const flatColumns = React.useMemo(() => {
     return flatColumns2(propsColumns);
@@ -164,17 +174,26 @@ const InternalTable = props => {
   const columnVisibility = React.useMemo(() => {
     return getInvisibleColumns(columns);
   }, [columns]);
-  const [columnsHiddenKeys, setColumnsHiddenKeys] = useMergedState(undefined, {
-    value: undefined
-  });
+
+  // const [columnsHiddenKeys, setColumnsHiddenKeys] = useMergedState(
+  //   undefined,
+  //   {
+  //     value: undefined,
+  //   },
+  // );
+
   const triggerChangeColumns = (cols, keys, type) => {
     if (type === 'cellClick') {
       setColumns(cols);
     } else {
       setColumns(cols);
-      const aa = flatColumns2(columns).map(it => it.field);
-      const rsss = getDiffent2Array(aa, keys);
-      setColumnsHiddenKeys(rsss);
+
+      // const aa = flatColumns2(columns).map((it) => it.field)
+
+      // const rsss = getDiffent2Array(aa, keys)
+
+      // setColumnsHiddenKeys(rsss as any)
+
       onChooseColumns?.({
         showColumns: removeInvisibleColumns([...cols]),
         columns: [...cols],
@@ -246,8 +265,10 @@ const InternalTable = props => {
     groupSetting: groupSetting,
     groupAble: groupAble,
     groupColumns: groupColumns,
-    columnPinning: columnPinning,
-    columnHidden: columnsHiddenKeys ? convertToObj(columnsHiddenKeys) : columnVisibility,
+    columnPinning: columnPinning
+    // columnHidden={columnsHiddenKeys ? convertToObj(columnsHiddenKeys) : columnVisibility}
+    ,
+    columnHidden: columnVisibility,
     triggerFilter: setFilterState,
     triggerSorter: setSorterStates,
     defaultFilter: defaultFilter,

package/es/table-component/TableContainer.js

@@ -5,12 +5,14 @@ import { TableContext } from "./useContext";
 import Pagination from 'rc-master-ui/es/pagination';
 import { Toolbar } from 'rc-master-ui';
 import { Maximize, Minimize } from 'becoxy-icons';
-import { ColumnsChoose } from "./ColumnsChoose";
 import { numericFormatter } from 'react-numeric-component';
 import TableWrapper from "./table/TableWrapper";
 import { getTableHeight, sumSize, updateColumnWidthsRecursive } from "./hook/utils";
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useLocale } from "rc-master-ui/es/locale";
+
+// import { ColumnsChoose } from './ColumnsChoose'
+import { ColumnsConfig } from "./ColumnsConfig";
 const TableContainer = props => {
   const {
     t,
@@ -287,7 +289,7 @@ const TableContainer = props => {
     },
     "data-tooltip-id": `${id}-tooltip-content`,
     "data-tooltip-content": locale?.table?.fullScreen || tableLocal?.fullScreen || 'Full screen'
-  })), showColumnChoose && /*#__PURE__*/React.createElement(ColumnsChoose, {
+  })), showColumnChoose && /*#__PURE__*/React.createElement(ColumnsConfig, {
     id: id,
     table: table,
     locale: locale,

package/es/table-component/TableContainerEdit.js

@@ -13,7 +13,7 @@ sumSize,
 unFlattenData, updateArrayByKey, updateColumnWidthsRecursive, updateOrInsert } from "./hook/utils";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { useForm } from 'react-hook-form';
-import { Modal, Typography } from "antd";
+import { Modal, Typography } from "rc-master-ui";
 import Button from "rc-master-ui/es/button";
 import Dropdown from "rc-master-ui/es/dropdown";
 import Pagination from "rc-master-ui/es/pagination";
@@ -23,7 +23,7 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { Toolbar } from "rc-master-ui";
 import classNames from "classnames";
 import { Maximize, Minimize } from "becoxy-icons";
-import { ColumnsChoose } from "./ColumnsChoose";
+import { ColumnsConfig } from "./ColumnsConfig";
 import TableWrapper from "./table/TableWrapper";
 import withReactContent from "sweetalert2-react-content";
 import Swal from "sweetalert2";
@@ -2113,7 +2113,7 @@ const TableContainerEdit = props => {
     },
     "data-tooltip-id": `${id}-tooltip-content`,
     "data-tooltip-content": locale?.table?.fullScreen || tableLocal?.fullScreen || 'Full screen'
-  })), showColumnChoose && /*#__PURE__*/React.createElement(ColumnsChoose, {
+  })), showColumnChoose && /*#__PURE__*/React.createElement(ColumnsConfig, {
     table: table,
     columns: columns,
     originColumns: propsColumns,

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext } from "react";
 import { DatePicker, TimePicker, ColorPicker, Input } from "rc-master-ui";
-import { Divider, Row, Col, Button } from "antd";
+import { Divider, Row, Col, Button } from "rc-master-ui";
 import { checkDecimalSeparator, checkThousandSeparator, checkFieldKey, convertArrayWithIndent, convertDateToDayjs, convertLabelToTitle, getDatepickerFormat, isDisable, isEmpty, isNullOrUndefined, customWeekStartEndFormat, convertDayjsToDate, parseBooleanToValue, isColor, genPresets, getFormat, removeVietnameseTones, getDateValueType } from "../hook/utils";
 import classNames from "classnames";
 import { NumericFormat } from "react-numeric-component";
@@ -667,8 +667,11 @@ const EditableCell = props => {
               indexRow,
               type: 'blur'
             });
-          },
-          autoDestroy: true,
+          }
+          // destroyOnHidden
+          // des
+          // autoDestroy={true}
+          ,
           showSearch: true,
           mode: isMulti || selectMode === 'checkbox' ? 'multiple' : undefined,
           valueSelectAble: true,
@@ -805,8 +808,9 @@ const EditableCell = props => {
               indexRow,
               type: 'blur'
             });
-          },
-          autoDestroy: true,
+          }
+          // autoDestroy={true}
+          ,
           showSearch: true,
           defaultOpen: column.field === startCell?.colId,
           autoFocus: column.field === startCell?.colId,

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

@@ -59,17 +59,12 @@ const TableBodyRow = ({
       [`${prefix}-grid-row-even`]: striped && virtualRow.index % 2 === 0
     }),
     style: {
-      // display: 'flex',
       display: 'grid',
-      // position: 'absolute',
       transform: `translateY(${virtualRow.start}px)`,
       //this should always be a `style` as it changes on scroll
-      // height: isEditing ? '36px' : undefined,
       gridTemplateColumns: `${templateColumns.map(n => `${n}fr`).join(" ")}`,
       height: isEditing ? virtualRow.size : undefined,
       minHeight: isEditing ? undefined : virtualRow.size,
-      // backgroundColor: Array.isArray(row.originalSubRows) ? '#f5f5f5' : undefined,
-      // fontWeight: Array.isArray(row.originalSubRows) ? '500' : undefined,
       ...rowStyles
     },
     onDoubleClick: e => {

package/es/table-component/components/EditForm/EditForm.js

@@ -4,10 +4,7 @@ import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { Col, Row } from "rc-master-ui/es/grid";
 import { isNullOrUndefined, isObjEmpty } from "../../hook/utils";
-import { Input } from "rc-master-ui";
-import { Dropdown } from "antd";
-import Divider from "rc-master-ui/es/divider";
-import Button from "rc-master-ui/es/button";
+import { Input, Dropdown, Divider, Button } from "rc-master-ui";
 import InputControl from "../InputControl/InputControl";
 export const SelectStyle = styled.div.withConfig({
   displayName: "SelectStyle",

package/es/table-component/components/InputControl/InputControl.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { Controller } from "react-hook-form";
 import { Input } from "rc-master-ui";
-import { Typography } from "antd";
+import { Typography } from "rc-master-ui";
 import classnames from "classnames";
 import React, { Fragment } from "react";
 import { Col, Row } from "rc-master-ui/es/grid";

package/es/table-component/components/checkbox-filter/CheckboxFilter.js

@@ -1,7 +1,6 @@
 import * as React from "react";
 import classNames from "classnames";
-import { Checkbox, Menu, Radio, Empty } from "rc-master-ui";
-import { Tree } from "antd";
+import { Checkbox, Menu, Radio, Empty, Tree } from "rc-master-ui";
 import { flattenKeys } from "rc-master-ui/es/table/hooks/useFilter";
 import FilterSearch from "./FilterSearch";
 function searchValueMatched(searchValue, text) {

package/es/table-component/components/checkbox-filter/FilterSearch.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { FilterSearchType, TableLocale } from "antd/es/table/interface";
 import type { AnyObject } from '../../../grid-component/type';
+import type { FilterSearchType, TableLocale } from 'rc-master-ui/es/table/interface';
 interface FilterSearchProps<RecordType = AnyObject> {
     value: string;
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;

package/es/table-component/components/checkbox-filter/FilterSearch.js

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import SearchOutlined from '@ant-design/icons/SearchOutlined';
 import { Input } from 'rc-master-ui';
+// import type {FilterSearchType, TableLocale} from "antd/es/table/interface"
 
+// import type { TableLocale } from 'rc-master-ui/es/locales';
 // import type {AnyObject} from "./../grid-component/type"
 
 const FilterSearch = props => {
@@ -9,8 +11,8 @@ const FilterSearch = props => {
     value,
     filterSearch,
     tablePrefixCls,
-    locale,
-    onChange
+    onChange,
+    locale
   } = props;
   if (!filterSearch) {
     return null;

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

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { Button, Space } from 'antd';
+import { Button, Space } from 'rc-master-ui';
 import { ArrowDown, ArrowUp, FilterFill, SortCancel } from 'becoxy-icons';
 import classNames from 'classnames';
 import { Checkbox, Dropdown, Select } from 'rc-master-ui';

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

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { Space } from 'antd';
+import { Space } from 'rc-master-ui';
 import Button from 'rc-master-ui/es/button';
 import { ArrowDown, ArrowUp, FilterFill, SortCancel } from 'becoxy-icons';
 import classNames from 'classnames';

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

@@ -1,4 +1,5 @@
-import { horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable';
+// import { horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable'
+
 import React from 'react';
 import { TableContext } from "../useContext";
 import TableHeadCell from "./TableHeadCell";
@@ -11,7 +12,9 @@ const TableHeadRow = ({
     prefix,
     onRowHeaderStyles
   } = React.useContext(TableContext);
-  const columnOrder = table.getState().columnOrder;
+
+  // const columnOrder = table.getState().columnOrder
+
   const rowStyles = typeof onRowHeaderStyles === 'function' ? onRowHeaderStyles() : onRowHeaderStyles;
   return /*#__PURE__*/React.createElement("div", {
     key: headerGroup.id
@@ -26,9 +29,6 @@ const TableHeadRow = ({
       ...rowStyles,
       width: '100%'
     }
-  }, /*#__PURE__*/React.createElement(SortableContext, {
-    items: columnOrder,
-    strategy: horizontalListSortingStrategy
   }, headerGroup.headers.map(header => {
     const columnRelativeDepth = header.depth - header.column.depth;
     if (columnRelativeDepth > 1) {
@@ -47,6 +47,6 @@ const TableHeadRow = ({
       colSpan: header.colSpan,
       rowSpan: rowSpan
     });
-  })));
+  }));
 };
 export default TableHeadRow;

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

@@ -1,13 +1,13 @@
 import type { Row, Table } from "@tanstack/react-table";
 import type { Column } from "@tanstack/react-table";
 import type { VirtualItem } from "@tanstack/react-virtual";
-import type { AnyObject, ColumnsTable, ColumnTable, EditType, FilterItem, FilterOperator, IColumnType, IFormat, RangeState, Sorter, TypeFilter } from "./../../grid-component/type";
+import type { AnyObject, ColumnsTable, ColumnTable, EditType, FilterItem, FilterOperator, IColumnType, IFormat, RangeState, RowDnd, Sorter, TypeFilter } from "./../../grid-component/type";
 import type { Key } from "react";
 import type { CSSProperties } from "react";
 import dayjs from "dayjs";
 import type { IPositionCell } from "../useContext";
 import type { ColumnDef } from "@tanstack/react-table";
-import type { TreeDataNode } from "antd";
+import type { TreeDataNode } from "rc-master-ui";
 import type { FilterState } from "../../ali-table/interfaces";
 export declare const newGuid: () => any;
 export declare const convertDayjsToDate: (dateString: string, format?: string) => Date;
@@ -136,7 +136,7 @@ export declare const getVisibleColumnKeys: (columns: any[]) => string[];
 export declare const getVisibleColumnKeys1: (columns: any[]) => string[];
 export declare function getVisibleFields(columns: ColumnTable[]): string[];
 export declare function isObjEqual(obj1: any, obj2: any): boolean;
-export declare const sortByType: <T>(arr: ColumnTable<T>[]) => ColumnTable<T>[];
+export declare const sortByType: <T>(arr: ColumnTable<T>[], rowDnd?: RowDnd) => ColumnTable<T>[];
 export declare function convertColumnsToTreeData<T>(columns: ColumnDef<T, any>[], groupColumns?: string[]): TreeDataNode[];
 export declare const updateColumns1: (columns: ColumnTable[], includes: string[]) => ColumnTable[];
 export declare const convertToObj: (arr: any) => {

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

@@ -2243,9 +2243,21 @@ export function isObjEqual(obj1, obj2) {
 }
 
 // Sorting function
-export const sortByType = arr => {
-  if (arr) {
-    return arr.sort((a, b) => {
+export const sortByType = (arr, rowDnd) => {
+  const colDnd = {
+    field: 'drag-handle',
+    width: 50,
+    fixed: 'left',
+    headerText: '',
+    allowFiltering: false,
+    allowResizing: false,
+    allowSortering: false
+  };
+  const cols = rowDnd?.enabled ? [{
+    ...colDnd
+  }, ...arr] : [...arr];
+  if (cols) {
+    return cols.sort((a, b) => {
       if ((a.fixed ?? a.fixedType) === 'left' && (b.fixed ?? b.fixedType) !== 'left') {
         return -1;
       } else if ((a.fixed ?? a.fixedType) !== 'left' && (b.fixed ?? b.fixedType) === 'left') {
@@ -2397,7 +2409,19 @@ export function updateColumnWidthsRecursive(columns, sizing) {
     return updated;
   });
 }
-export function updateWidthsByOther(source, target) {
+export function updateWidthsByOther(source, target
+// rowDnd?: RowDnd
+) {
+  // const columnDnd  = {
+  //   field: 'drag-handle',
+  //   headerText: '',
+  //   fixed: 'left',
+  //   width: 50
+  // }
+
+  // const tg = rowDnd?.enabled ? [{...columnDnd}, ...target] : [...target]
+  // const sour = rowDnd?.enabled ? [{...columnDnd}, ...source] : [...source]
+
   const targetMap = new Map();
 
   // tạo map {field -> width} từ target