es-grid-template 1.2.0 → 1.2.2

package/es/grid-component/hooks/useColumns.js

@@ -0,0 +1,280 @@
+import * as React from 'react';
+// import type {Key} from 'react';
+import { Fragment, useCallback } from 'react';
+// import Command from "../Command";
+import { Button, Space } from "antd";
+import { Select } from "rc-master-ui";
+import { getTypeFilter } from "./utils";
+import { booleanOperator, numberOperator, stringOperator, translateOption } from "./constant";
+import { flatColumns2, renderContent, renderFilter } from "./columns";
+import { SearchOutlined } from "@ant-design/icons";
+import { ArrowDown, ArrowUp, FilterFill } from "becoxy-icons";
+import classNames from "classnames";
+import HeaderContent from "./content/HeaderContent";
+const ASCEND = 'ascend';
+const DESCEND = 'descend';
+export const SELECTION_COLUMN = {};
+
+// const EMPTY_LIST: React.Key[] = [];
+
+const useColumns = config => {
+  // const {
+  //   preserveSelectedRowKeys,
+  //   selectedRowKeys,
+  //   defaultSelectedRowKeys,
+  //   onSelectMultiple,
+  //   columnWidth: selectionColWidth,
+  //   type: selectionType,
+  //   selections,
+  //   fixed,
+  // } = rowSelection || {};
+
+  const {
+    t,
+    dataSourceFilter,
+    buddhistLocale,
+    locale,
+    sortMultiple,
+    format,
+    handleResize,
+    groupAble,
+    groupColumns,
+    groupSetting
+  } = config;
+
+  // ====================== Selections ======================
+
+  const handleSearch = (selectedKeys, confirm) => {
+    confirm();
+  };
+  const getColumnSearchProps = useCallback(column => ({
+    filterDropdown: ({
+      setSelectedKeys,
+      selectedKeys,
+      confirm,
+      // close,
+      setOperatorKey,
+      operatorKey,
+      visible,
+      searchValue,
+      setSearchValue
+    }) => {
+      const type = getTypeFilter(column);
+      // const operatorOptions  = !type || type === 'Text' ? stringOperator : numberOperator
+      // const operatorOptions  = type === 'Checkbox' || type === 'Dropdown' || type === 'DropTree' || ty
+      const operatorOptions = type === ('Checkbox' || 'Dropdown' || 'DropTree' || 'CheckboxDropdown') ? booleanOperator : !type || type === 'Text' ? stringOperator : numberOperator;
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          padding: 8,
+          minWidth: 275
+        },
+        onKeyDown: e => e.stopPropagation()
+      }, column?.showOperator !== false && column?.typeFilter !== 'DateRange' && column?.typeFilter !== 'NumberRange' && /*#__PURE__*/React.createElement("div", {
+        className: 'mb-1'
+      }, /*#__PURE__*/React.createElement(Select, {
+        options: translateOption(operatorOptions, t),
+        style: {
+          width: '100%',
+          marginBottom: 8
+        },
+        value: operatorKey,
+        onChange: val => {
+          setOperatorKey(val);
+        }
+      })), /*#__PURE__*/React.createElement("div", {
+        style: {
+          marginBottom: 8
+        }
+      }, renderFilter(column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, dataSourceFilter, buddhistLocale, locale, t)), /*#__PURE__*/React.createElement(Space, {
+        style: {
+          justifyContent: 'end',
+          width: '100%'
+        }
+      }, /*#__PURE__*/React.createElement(Button, {
+        type: "primary",
+        onClick: () => {
+          confirm({
+            closeDropdown: false
+          });
+          handleSearch(selectedKeys, confirm);
+        },
+        icon: /*#__PURE__*/React.createElement(SearchOutlined, null),
+        size: "small",
+        style: {
+          width: 90
+        }
+      }, t ? t('Filter') : 'Filter'), /*#__PURE__*/React.createElement(Button, {
+        type: "link",
+        size: "small",
+        onClick: () => {
+          // setSearchValue('')
+          setSelectedKeys([]);
+          confirm();
+          // handleSearch()
+          // close()
+        }
+      }, t ? t("Clear") : 'Clear')));
+    },
+    filterIcon: filtered => /*#__PURE__*/React.createElement(FilterFill, {
+      fontSize: 12
+      // onClick={() => {
+      //   onFilterClick?.(column, onFilterCallback)
+      // }}
+      ,
+      style: {
+        color: filtered ? '#E3165B' : '#283046'
+      }
+    }),
+    filterDropdownProps: {
+      onOpenChange(open) {
+        if (open) {
+          // setTimeout(() => searchInput.current?.select(), 100)
+        }
+      }
+    }
+  }), [buddhistLocale, dataSourceFilter, locale, t]);
+
+  // ======================= Columns ========================
+  const transformColumns = useCallback(columns => {
+    // >>>>>>>>>>> Support selection
+    const cloneColumns = [...columns];
+    const firstNonGroupColumn = flatColumns2(cloneColumns).find(col => col.field && !groupColumns?.includes(col.field) && col.hidden !== true);
+    const nonGroupColumns = flatColumns2(cloneColumns).filter(col => col.field && !groupColumns?.includes(col.field) && col.hidden !== true);
+
+    // ===================== Render =====================
+
+    const convertColumns = cols => {
+      return cols.map(col => {
+        const colIndex = flatColumns2(cols).findIndex(it => it.field === col.field);
+        if (col === SELECTION_COLUMN) {
+          return SELECTION_COLUMN;
+        }
+        const transformedColumn = {
+          ...col,
+          dataIndex: col.field ?? col.dataIndex,
+          key: col.field ?? col.dataIndex ?? col.key,
+          // title: t ? t(col.columnGroupText ?? col.headerText ?? col.title) : col.columnGroupText ?? col.headerText ?? col.title,
+          // title: () => (<span>aaa</span>),
+          title: () => /*#__PURE__*/React.createElement(HeaderContent, {
+            column: {
+              ...col
+            },
+            t: t
+          }),
+          // title: () => (<span>{t ? t(col.columnGroupText ?? col.headerText ?? col.title) : col.columnGroupText ?? col.headerText ?? col.title}</span>),
+          ellipsis: col.ellipsis !== false,
+          align: col.textAlign ?? col.align,
+          fixed: col.frozen ? col.frozen.toLowerCase() : col.fixed
+        };
+        if (transformedColumn.children && transformedColumn.children?.length) {
+          return {
+            ...transformedColumn,
+            children: convertColumns(transformedColumn.children)
+          };
+        }
+        if (["index", "#"].includes(col.field)) {
+          return {
+            ...transformedColumn,
+            onCell: () => ({
+              className: 'cell-number'
+            }),
+            render: (_, __, rowIndex) => rowIndex + 1
+          };
+        }
+        if (col.key === 'command') {
+          return {
+            ...transformedColumn,
+            onCell: () => ({
+              className: 'cell-number',
+              style: {
+                padding: '2px 8px'
+              }
+            })
+          };
+        }
+        return {
+          ...transformedColumn,
+          ...(transformedColumn.allowFiltering === false ? {} : {
+            ...getColumnSearchProps(col)
+          }),
+          sorter: col.sorter === false ? undefined : {
+            compare: a => a,
+            multiple: sortMultiple ? colIndex : undefined
+          },
+          sortIcon: args => {
+            const {
+              sortOrder
+            } = args;
+            return /*#__PURE__*/React.createElement(Fragment, null, !sortOrder && /*#__PURE__*/React.createElement(ArrowUp, {
+              fontSize: 15,
+              style: {
+                display: 'flex',
+                opacity: 0,
+                marginLeft: 4
+              },
+              className: classNames(`ui-rc-table-column-sorter-up`, {
+                active: true
+              })
+            }), sortOrder === ASCEND && /*#__PURE__*/React.createElement("span", {
+              className: classNames(`ui-rc-table-column-sorter-up`, {
+                active: sortOrder === ASCEND
+              }),
+              style: {
+                display: 'flex',
+                marginLeft: 4
+              }
+            }, /*#__PURE__*/React.createElement(ArrowUp, {
+              fontSize: 15,
+              color: '#000'
+            })), sortOrder === DESCEND && /*#__PURE__*/React.createElement("span", {
+              className: classNames(`ui-rc-table-column-sorter-up`, {
+                active: sortOrder === DESCEND
+              }),
+              style: {
+                display: 'flex',
+                marginLeft: 4
+              }
+            }, /*#__PURE__*/React.createElement(ArrowDown, {
+              fontSize: 15,
+              color: '#000'
+            })));
+          },
+          onHeaderCell: () => ({
+            width: col.width,
+            onResize: handleResize?.(col)
+          }),
+          onCell: data => {
+            return {
+              colSpan: data.children && col.field === firstNonGroupColumn?.field ? 2 : data.children && nonGroupColumns[1].field === col.field ? 0 : 1,
+              zIndex: data.children && col.field === firstNonGroupColumn?.field ? 11 : undefined,
+              className: classNames('', {
+                'cell-group': data.children,
+                'cell-group-fixed': data.children && col.field === firstNonGroupColumn?.field
+              })
+            };
+          },
+          render: (value, record, rowIndex) => {
+            if (groupSetting && groupSetting.hiddenColumnGroup === false) {
+              if (record.children) {
+                return renderContent(col, value, record, rowIndex, format);
+              }
+              if (groupColumns?.includes(col.field)) {
+                return '';
+              }
+              return renderContent(col, value, record, rowIndex, format);
+            }
+            if (col.field === firstNonGroupColumn?.field && record.children) {
+              const currentGroupColumn = flatColumns2(cols).find(it => it.field === record.field);
+              return /*#__PURE__*/React.createElement("span", null, currentGroupColumn?.headerText, ": ", renderContent(currentGroupColumn, record[record.field], record, rowIndex, format));
+            }
+            return renderContent(col, value, record, rowIndex, format);
+          },
+          hidden: groupSetting && groupSetting.hiddenColumnGroup === false ? col.hidden : groupAble && groupColumns && groupColumns.includes(col.field) ? true : col.hidden
+        };
+      });
+    };
+    return convertColumns(cloneColumns);
+  }, [format, getColumnSearchProps, groupAble, groupColumns, groupSetting, handleResize, sortMultiple, t]);
+  return [transformColumns];
+};
+export default useColumns;

package/es/grid-component/hooks/utils.d.ts

@@ -5,6 +5,7 @@ import type { ColumnEditType, ColumnsType, ColumnTable, GetRowKey } from "../typ
 import type { SelectionSettings } from "../type";
 import type { AnyObject } from "../type";
 import type { Key } from "react";
+import type { ColumnsTable } from "./../index";
 export declare const newGuid: () => any;
 export declare const sumDataByField: (data: any[], field: string) => any;
 export declare const checkThousandSeparator: (thousandSeparator: string | undefined, decimalSeparator: string | undefined) => string;
@@ -19,6 +20,7 @@ export declare const getAllVisibleKeys: (columns: any[]) => any[];
 export declare const getVisibleColumnKeys: (columns: any[]) => string[];
 export declare function getHiddenParentKeys(columns: any[], parentKeys?: string[]): string[];
 export declare const updateColumns: (columns: any[], includes: string[]) => any[];
+export declare const updateColumnsByGroup: (columns: any[], columnsGroup: string[]) => any[];
 export declare const getDatepickerFormat: (type: EditType | TypeFilter | IColumnType, col: ColumnTable<any>) => string;
 export declare const customWeekStartEndFormat: (value: any, weekFormat: string) => string;
 export declare const getTypeFilter: (col: ColumnTable<any>) => TypeFilter;
@@ -38,6 +40,29 @@ export declare const parseBooleanToValue: (value: boolean, type: 'boolean' | 'nu
 export declare const genPresets: (presets?: import("@ant-design/colors").PalettesProps) => import("antd/es/color-picker/interface").PresetsItem[];
 export declare function findAllChildrenKeys<RecordType>(data: readonly RecordType[], getRowKey: GetRowKey<RecordType>, childrenColumnName: string): Key[];
 export declare const flattenArray: <RecordType extends AnyObject = AnyObject>(arr: any[]) => RecordType[];
-export declare const flattenData: <RecordType extends AnyObject = AnyObject>(childrenColumnName: keyof RecordType, data?: RecordType[]) => RecordType[];
+export declare const flattenData: <RecordType extends AnyObject = AnyObject>(childrenColumnName: string, data?: RecordType[]) => RecordType[];
 export declare const countItemsBeforeIndex: (array: any[], index: number) => number;
 export declare const getRowNumber: (array: any[], rowKey: any, key: any) => number;
+export declare const getDefaultValue: (defaultValue: any) => AnyObject;
+export declare const addRowIdArray: (inputArray: any[]) => any[];
+export declare const findItemByKey: (array: any, key: string | number, value: any) => any;
+export declare const getLastSelectCell: (selectCells: any) => {
+    row: number;
+    col: number;
+};
+export declare const getFirstSelectCell: (selectCells: any) => {
+    row: number;
+    col: number;
+};
+export declare const getRowsPasteIndex: (pasteRows: any) => number[];
+export declare function addRows8(arr: any, n: number): {
+    combined: any;
+    addedRows: any[];
+} | {
+    combined: any[];
+    addedRows: any[];
+};
+export declare const transformColumns: <RecordType>(cols: ColumnsTable<RecordType>, convertColumns: any[], t?: any) => ColumnsTable<RecordType>;
+export declare const transformColumns1: <RecordType>(cols: ColumnsTable<RecordType>, sortMultiple?: boolean) => ColumnsTable<RecordType>;
+export declare const removeColumns: <RecordType>(columns: ColumnsTable<RecordType>, groupColumns: string[]) => ColumnsTable<RecordType>;
+export declare const convertFlatColumn: (array: ColumnsTable) => ColumnsTable[];

package/es/grid-component/hooks/utils.js

@@ -2,6 +2,8 @@ import dayjs from "dayjs";
 import moment from "moment/moment";
 import { v4 as uuidv4 } from 'uuid';
 import { presetPalettes } from "@ant-design/colors";
+import { Table } from "rc-master-ui";
+import { flatColumns2 } from "./columns";
 export const newGuid = () => {
   for (let i = 0; i < 20; i++) {
     // @ts-ignore
@@ -143,6 +145,26 @@ export const updateColumns = (columns, includes) => {
     return newColumn;
   });
 };
+export const updateColumnsByGroup = (columns, columnsGroup) => {
+  return columns.map(column => {
+    const newColumn = {
+      ...column
+    };
+    let hasVisibleChild = false;
+    if (!column.key && !column.dataIndex) {
+      return column;
+    }
+    if (newColumn.children) {
+      newColumn.children = updateColumnsByGroup(newColumn.children, columnsGroup);
+      hasVisibleChild = newColumn.children.some(child => !child.hidden);
+    }
+    newColumn.hidden = newColumn.key && columnsGroup.includes(newColumn.key);
+    if (newColumn.children && newColumn.children.length > 0) {
+      newColumn.hidden = !hasVisibleChild;
+    }
+    return newColumn;
+  });
+};
 export const getDatepickerFormat = (type, col) => {
   const typeFormat = type ? type.toLowerCase() : '';
   switch (typeFormat) {
@@ -197,7 +219,10 @@ export const getTypeFilter = col => {
 };
 export const updateArrayByKey = (arr, element, key) => {
   if (arr) {
-    return arr.map(item => {
+    return arr.map(it => {
+      const item = {
+        ...it
+      };
       if (item[key] === element[key]) {
         return {
           ...item,
@@ -381,4 +406,309 @@ export const getRowNumber = (array, rowKey, key) => {
   // const flattArray = flattenArray(array)
   const flattArray = flattenData('children', array);
   return flattArray.findIndex(it => it[key] === rowKey);
+};
+export const getDefaultValue = defaultValue => {
+  if (defaultValue && typeof defaultValue === 'function') {
+    return defaultValue();
+  }
+  return defaultValue;
+};
+export const addRowIdArray = inputArray => {
+  if (inputArray) {
+    return inputArray.map(item => {
+      if (item.children && item.children.length > 0) {
+        // item.children = convertArrayWithIndent(item.children)
+        item.children = addRowIdArray(item.children);
+      }
+
+      // return { ...item, rowId: item.rowId ? item.rowId : (item.id  ? item.id : newGuid())}
+      return {
+        ...item,
+        rowId: item.rowId ?? item.id ?? newGuid()
+      };
+    });
+  } else {
+    return [];
+  }
+};
+export const findItemByKey = (array, key, value) => {
+  for (let i = 0; i < array.length; i++) {
+    const item = array[i];
+    if (item[key] === value) {
+      return item;
+    }
+    if (item.children && item.children.length > 0) {
+      const foundInChildren = findItemByKey(item.children, key, value);
+      if (foundInChildren) {
+        return foundInChildren;
+      }
+    }
+  }
+  return null;
+};
+export const getLastSelectCell = selectCells => {
+  if (selectCells.size === 0) {
+    return {
+      row: 0,
+      col: 0
+    };
+  }
+  const lastValue = [...selectCells].at(-1);
+  const [row, col] = lastValue.split("-").map(Number);
+  return {
+    row,
+    col
+  };
+};
+export const getFirstSelectCell = selectCells => {
+  if (selectCells.size === 0) {
+    return {
+      row: 0,
+      col: 0
+    };
+  }
+  const firstValue = selectCells.values().next().value;
+  const [row, col] = firstValue.split("-").map(Number);
+  return {
+    row,
+    col
+  };
+};
+
+// export const getLastSelectCell = (selectCells: any): {row: number, col: number} => {
+//
+//   if (selectCells.size === 0) {
+//     return {row: 0, col: 0}
+//   }
+//   const lastValue = [...selectCells].pop();
+//
+//   const [row, col] = lastValue.split("-").map(Number);
+//   return {row, col};
+//
+// }
+
+export const getRowsPasteIndex = pasteRows => {
+  if (!pasteRows) {
+    return [];
+  }
+  const result = Array.from(pasteRows).map(item => parseInt(item.split("-")[0]));
+  return [...new Set(result)];
+};
+export function addRows8(arr, n) {
+  if (!Array.isArray(arr) || arr.length === 0) return {
+    combined: arr,
+    addedRows: []
+  };
+  const m = arr.length;
+  const numCols = arr[0].length;
+  const addedRows = [];
+
+  // Hàm kiểm tra kiểu date hợp lệ
+  const isValidDate = d => {
+    return !isNaN(Date.parse(d));
+  };
+
+  // Lấy giá trị mẫu của cột j từ hàng đầu tiên
+  const getSample = j => arr[0][j];
+
+  // Xác định chế độ xử lý cho mỗi cột:
+  // mode = 'number-stepping' | 'date-stepping' | 'number-constant' | 'cycle'
+  const modes = [];
+  const steps = []; // bước tăng, nếu có (cho number hoặc date)
+
+  for (let j = 0; j < numCols; j++) {
+    const sample = getSample(j);
+    if (m === 1) {
+      // Nếu mảng chỉ có 1 hàng: nếu là số thì giữ nguyên; nếu là date thì tăng 1 ngày; còn lại giữ nguyên.
+      if (typeof sample === "number") {
+        modes[j] = "number-constant";
+      } else if (isValidDate(sample)) {
+        modes[j] = "date-stepping";
+        steps[j] = 24 * 3600 * 1000; // 1 ngày = 86400000 ms
+      } else {
+        modes[j] = "cycle";
+      }
+    } else if (m === 2) {
+      // Nếu mảng có 2 hàng: nếu là số thì tính bước = row2 - row1, tương tự với date
+      const first = arr[0][j],
+        second = arr[1][j];
+      if (typeof first === "number" && typeof second === "number") {
+        modes[j] = "number-stepping";
+        steps[j] = second - first;
+      } else if (isValidDate(first) && isValidDate(second)) {
+        modes[j] = "date-stepping";
+        steps[j] = Date.parse(second) - Date.parse(first);
+      } else {
+        modes[j] = "cycle";
+      }
+    } else {
+      // Nếu mảng có >2 hàng
+      const first = arr[0][j],
+        second = arr[1][j],
+        third = arr[2][j];
+      if (typeof first === "number" && typeof second === "number" && typeof third === "number") {
+        const step1 = second - first;
+        const step2 = third - second;
+        if (step1 === step2) {
+          modes[j] = "number-stepping";
+          steps[j] = step1;
+        } else {
+          modes[j] = "cycle";
+        }
+      } else if (isValidDate(first) && isValidDate(second) && isValidDate(third)) {
+        const step1 = Date.parse(second) - Date.parse(first);
+        const step2 = Date.parse(third) - Date.parse(second);
+        if (step1 === step2) {
+          modes[j] = "date-stepping";
+          steps[j] = step1;
+        } else {
+          modes[j] = "cycle";
+        }
+      } else {
+        modes[j] = "cycle";
+      }
+    }
+  }
+
+  // Tạo các dòng mới (thêm n dòng)
+  // Với mỗi cột, nếu chế độ là stepping thì lấy giá trị cuối của mảng ban đầu và cộng thêm (i+1)*step
+  // Nếu chế độ là cycle thì dùng arr[i mod m][j]
+  for (let i = 0; i < n; i++) {
+    const newRow = [];
+    for (let j = 0; j < numCols; j++) {
+      let newValue;
+      switch (modes[j]) {
+        case "number-constant":
+          // Mảng có 1 hàng, số giữ nguyên
+          newValue = arr[0][j];
+          break;
+        case "number-stepping":
+          {
+            // Lấy giá trị cuối của cột j trong mảng ban đầu
+            const lastValue = arr[m - 1][j];
+            newValue = lastValue + (i + 1) * steps[j];
+          }
+          break;
+        case "date-stepping":
+          {
+            // Lấy giá trị cuối, chuyển về date, cộng thêm (i+1)*step, chuyển lại về định dạng ISO
+            const lastDate = new Date(arr[m - 1][j]);
+            const newTime = lastDate.getTime() + (i + 1) * steps[j];
+            newValue = moment(new Date(newTime)).format();
+          }
+          break;
+        case "cycle":
+        default:
+          // Lặp lại nội dung theo vòng tròn: dùng hàng thứ (i mod m)
+          newValue = arr[i % m][j];
+          break;
+      }
+      newRow.push(newValue);
+    }
+    addedRows.push(newRow);
+  }
+  const combined = arr.concat(addedRows);
+  return {
+    combined,
+    addedRows
+  };
+}
+export const transformColumns = (cols, convertColumns, t) => {
+  // @ts-ignore
+  return cols.map(column => {
+    const find = convertColumns.find(it => it.key === column.field);
+    if (!column?.field && !column?.key) {
+      return Table.SELECTION_COLUMN;
+    }
+    if (find) {
+      return {
+        ...find
+      };
+    }
+
+    // Xử lý đệ quy cho children
+    if (column.children?.length) {
+      return {
+        ...column,
+        key: column.field ?? column.dataIndex ?? column.key,
+        title: t ? t(column.headerText) : column.headerText,
+        ellipsis: column.ellipsis !== false,
+        align: column.textAlign ?? column.align,
+        children: transformColumns(column.children, convertColumns)
+      };
+    }
+  });
+};
+export const transformColumns1 = (cols, sortMultiple) => {
+  const convertColumns = flatColumns2(cols).map((column, colIndex) => {
+    if (!column?.field && !column?.key) {
+      return Table.SELECTION_COLUMN;
+    }
+    if (column.dataIndex === 'index' || column.field === 'index' || column.dataIndex === '#' || column.dataIndex === '#') {
+      return {
+        ...column
+      };
+    }
+    if ((column.key || column.field) === 'command') {
+      return {
+        ...column
+      };
+    }
+    return {
+      ...column,
+      key: column.field ?? column.dataIndex ?? column.key,
+      sorter: column.sorter === false ? undefined : {
+        compare: a => a,
+        multiple: sortMultiple ? colIndex : undefined
+      }
+    };
+  });
+
+  // @ts-ignore
+  return cols.map(column => {
+    const find = convertColumns.find(it => it.key === column.field);
+    if (!column?.field && !column?.key) {
+      return Table.SELECTION_COLUMN;
+    }
+    if (find) {
+      return {
+        ...find
+      };
+    }
+
+    // Xử lý đệ quy cho children
+    if (column.children?.length) {
+      return {
+        ...column,
+        key: column.field ?? column.dataIndex ?? column.key,
+        ellipsis: column.ellipsis !== false,
+        align: column.textAlign ?? column.align,
+        children: transformColumns(column.children, convertColumns)
+      };
+    }
+  });
+};
+export const removeColumns = (columns, groupColumns) => {
+  const ttt = [...columns];
+  return ttt.filter(column => !groupColumns.includes(column.field)).map(column => {
+    const newCol = {
+      ...column
+    };
+    if (newCol.children) {
+      newCol.children = removeColumns(newCol.children, groupColumns);
+    }
+    return newCol;
+  });
+};
+export const convertFlatColumn = array => {
+  const tmp = [...array];
+  let result = [];
+  tmp.forEach(item => {
+    if (item.children) {
+      result = result.concat(convertFlatColumn(item.children));
+    } else {
+      result.push(item);
+    }
+  });
+  return result;
 };

package/es/grid-component/index.js

@@ -1,2 +1,4 @@
+// import ConvertColumnTable  from './ConvertColumnTable'
 import InternalTable from "./InternalTable";
-export default InternalTable;
+export default InternalTable;
+// export default ConvertColumnTable