es-grid-template 1.2.0 → 1.2.1

package/es/grid-component/hooks/{useColumns → columns}/index.js

@@ -1,5 +1,3 @@
-// import * as React from 'react'
-
 import { checkDecimalSeparator, checkThousandSeparator, convertDateToDayjs, convertDayjsToDate, getDatepickerFormat, getDateString, getTypeFilter, isColor, isEmpty } from "../utils";
 import { NumericFormat, numericFormatter } from "react-numeric-component";
 import dayjs from "dayjs";
@@ -34,15 +32,16 @@ export function flatColumns(columns, parentKey = 'key') {
     }];
   }, []);
 }
-export function flatColumns2(columns, parentKey = 'key') {
+export function flatColumns2(columns
+// parentKey = 'key'
+) {
   // @ts-ignore
-  return columns.reduce((list, column, index) => {
-    const {
-      fixed
-    } = column;
+  return columns.reduce((list, column) => {
+    // const { fixed } = column
     // Convert `fixed='true'` to `fixed='left'` instead
-    const parsedFixed = fixed === true ? 'left' : fixed;
-    const mergedKey = `${parentKey}-${index}`;
+    // const parsedFixed = fixed === true ? 'left' : fixed
+    // const mergedKey = `${parentKey}-${index}`
+
     const subColumns = column.children;
     if (column === SELECTION_COLUMN) {
       return [...list, {
@@ -50,15 +49,15 @@ export function flatColumns2(columns, parentKey = 'key') {
       }];
     }
     if (subColumns && subColumns.length > 0) {
-      return [...list, ...flatColumns(subColumns, mergedKey).map(subColum => ({
-        fixed: parsedFixed,
+      return [...list, ...flatColumns(subColumns).map(subColum => ({
+        // fixed: parsedFixed,
         ...subColum
       }))];
     }
     return [...list, {
-      key: mergedKey,
-      ...column,
-      fixed: parsedFixed
+      // key: mergedKey,
+      ...column
+      // fixed: parsedFixed
     }];
   }, []);
 }
@@ -125,8 +124,13 @@ export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, vis
   const type = getTypeFilter(column);
   const dateFormat = getDatepickerFormat(column?.typeFilter ?? column?.type, column) ?? 'DD/MM/YYYY';
   const dateRangeFormat = getDatepickerFormat(column?.type, column) ?? 'DD/MM/YYYY';
-  const find = dataSourceFilter?.find(it => it.key === column?.key);
+  const find = dataSourceFilter?.find(it => it.key === column?.field);
   const options = find ? find.data : [];
+
+  // console.log('dataSourceFilter', dataSourceFilter)
+  // console.log('options', options)
+  // console.log('column', column)
+
   switch (type) {
     case 'Number':
       return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
@@ -361,7 +365,7 @@ export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, vis
       }, /*#__PURE__*/React.createElement(Select
       // options={translateOption(numberOperator, t)}
       , {
-        options: options,
+        options: find ? options : column.source ?? [],
         style: {
           width: '100%',
           marginBottom: 8

package/es/grid-component/hooks/content/HeaderContent.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { ColumnTable } from "../../type";
+type Props = {
+    t?: any;
+    content?: string;
+    column?: ColumnTable;
+    template?: React.ReactElement | React.ReactNode | (() => React.ReactElement | React.ReactNode);
+    tooltip?: string | number | React.ReactElement | React.ReactNode | (() => React.ReactElement | React.ReactNode);
+};
+declare const HeaderContent: (props: Props) => React.JSX.Element;
+export default HeaderContent;

package/es/grid-component/hooks/content/HeaderContent.js

@@ -0,0 +1,80 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { Fragment, useState } from "react";
+import classnames from "classnames";
+import { useFloating, autoUpdate, offset, flip, shift, useHover, useFocus, useDismiss, useRole, useInteractions, FloatingPortal
+// useClick
+} from "@floating-ui/react";
+import styled from "styled-components";
+import { getTemplate } from "../utils";
+const TooltipStyle = styled.div.withConfig({
+  displayName: "TooltipStyle",
+  componentId: "es-grid-template__sc-ibhq66-0"
+})(["width:max-content;background-color:#444;color:white;font-size:90%;padding:4px 8px;border-radius:4px;opacity:0.9;z-index:9999;max-width:450px;"]);
+const HeaderContent = props => {
+  const {
+    t
+  } = props;
+  const {
+    headerTooltip,
+    headerText,
+    columnGroupText,
+    headerTemplate,
+    title
+  } = props.column ?? {};
+  const text = React.useMemo(() => {
+    return columnGroupText ?? headerText ?? title;
+  }, [columnGroupText, headerText, title]);
+  const tooltip = React.useMemo(() => {
+    return headerTooltip ?? columnGroupText ?? headerText ?? title;
+  }, [columnGroupText, headerText, headerTooltip, title]);
+  const [isOpen, setIsOpen] = useState(false);
+  const {
+    refs,
+    floatingStyles,
+    context
+  } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    placement: "top",
+    whileElementsMounted: autoUpdate,
+    middleware: [offset(5), flip({
+      fallbackAxisSideDirection: "start"
+    }), shift()]
+  });
+  const hover = useHover(context, {
+    move: false
+  });
+  const focus = useFocus(context);
+  const dismiss = useDismiss(context);
+  const role = useRole(context, {
+    role: "tooltip"
+  });
+  const {
+    getReferenceProps,
+    getFloatingProps
+  } = useInteractions([hover, focus, dismiss, role]);
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
+    ref: refs.setReference
+  }, getReferenceProps(), {
+    tabIndex: -1,
+    style: {
+      flex: 1,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      wordBreak: 'keep-all'
+    }
+    // style={{flex: 1}}
+    ,
+    className: classnames('', {})
+  }), headerTemplate ? getTemplate(headerTemplate) : t ? t(text) : text), isOpen && (headerTooltip !== false || headerTemplate || headerTooltip || columnGroupText || headerText || title) && /*#__PURE__*/React.createElement(FloatingPortal, {
+    root: document.body
+  }, /*#__PURE__*/React.createElement(TooltipStyle, _extends({
+    className: "Tooltip",
+    ref: refs.setFloating,
+    style: {
+      ...floatingStyles,
+      zIndex: 1999
+    }
+  }, getFloatingProps()), headerTooltip && typeof headerTooltip === 'function' ? headerTooltip() : t ? t(tooltip) : tooltip)));
+};
+export default HeaderContent;

package/es/grid-component/hooks/content/TooltipContent.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactElement, ReactNode } from "react";
+type Props = {
+    t?: any;
+    content?: any;
+    value?: any;
+    record?: any;
+    rowIndex?: any;
+    template?: React.ReactElement | React.ReactNode | (() => React.ReactElement | React.ReactNode);
+    tooltip?: ReactNode | ReactElement | ((value: any, record: any, index: number) => ReactNode | ReactElement);
+    showTooltip?: boolean;
+};
+declare const TooltipContent: (props: Props) => React.JSX.Element;
+export default TooltipContent;

package/es/grid-component/hooks/content/TooltipContent.js

@@ -0,0 +1,74 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { Fragment, useState } from "react";
+import classnames from "classnames";
+import { useFloating, autoUpdate, offset, flip, shift, useHover, useFocus, useDismiss, useRole, useInteractions, FloatingPortal
+// useClick
+} from "@floating-ui/react";
+import styled from "styled-components";
+import { useIsOverflow } from "../useIsOverflow";
+// import {getTemplate} from "../utils";
+
+const TooltipStyle = styled.div.withConfig({
+  displayName: "TooltipStyle",
+  componentId: "es-grid-template__sc-7yfbzv-0"
+})(["width:max-content;background-color:#444;color:white;font-size:90%;padding:4px 8px;border-radius:4px;opacity:0.9;z-index:9999;max-width:450px;"]);
+const TooltipContent = props => {
+  const {
+    content,
+    tooltip,
+    value,
+    record,
+    rowIndex,
+    showTooltip
+  } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  const {
+    refs,
+    floatingStyles,
+    context
+  } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    placement: "top",
+    whileElementsMounted: autoUpdate,
+    middleware: [offset(5), flip({
+      fallbackAxisSideDirection: "start"
+    }), shift()]
+  });
+  const isOverflow = useIsOverflow(refs.reference);
+  const hover = useHover(context, {
+    move: false
+  });
+  const focus = useFocus(context);
+  const dismiss = useDismiss(context);
+  const role = useRole(context, {
+    role: "tooltip"
+  });
+  const {
+    getReferenceProps,
+    getFloatingProps
+  } = useInteractions([hover, focus, dismiss, role]);
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
+    ref: refs.setReference
+  }, getReferenceProps(), {
+    style: {
+      flex: 1,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      wordBreak: 'keep-all'
+    },
+    className: classnames('', {})
+  }), content()), isOpen && showTooltip !== false && isOverflow &&
+  /*#__PURE__*/
+  // {true  && (
+  React.createElement(FloatingPortal, {
+    root: document.body
+  }, /*#__PURE__*/React.createElement(TooltipStyle, _extends({
+    className: "Tooltip",
+    ref: refs.setFloating,
+    style: {
+      ...floatingStyles
+    }
+  }, getFloatingProps()), tooltip && typeof tooltip === 'function' ? tooltip(value, record, rowIndex) : tooltip ?? content())));
+};
+export default TooltipContent;

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

@@ -0,0 +1,16 @@
+import type { AnyObject, IGroupSetting } from "../type";
+export declare const SELECTION_COLUMN: {};
+interface UseColumnsConfig {
+    t?: any;
+    buddhistLocale?: any;
+    dataSourceFilter?: any;
+    locale?: any;
+    format?: any;
+    handleResize?: any;
+    sortMultiple?: boolean;
+    groupAble?: boolean;
+    groupSetting?: IGroupSetting;
+    groupColumns?: string[];
+}
+declare const useColumns: <RecordType extends AnyObject = AnyObject>(config: UseColumnsConfig) => readonly [any];
+export default useColumns;

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

@@ -0,0 +1,272 @@
+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
+          };
+        }
+        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 "../type";
 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,49 @@ 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 const mmm: (string | number | boolean)[][];
+export declare function cloneRows(array: any[], numRows: number): any[];
+export declare function addRows1(arr: any[], n: number): any[];
+export declare function addRows2(arr: any[], n: number): {
+    newArr: any[];
+    addedRows: any[];
+};
+export declare function addRows(arr: any[], n: number): {
+    newArr: any[];
+    addedRows: any[];
+};
+export declare function addRows4(arr: any[], n: number): {
+    newArr: any[];
+    addedRows: any[];
+};
+export declare function addRows6(arr: any, n: number): {
+    newArr: any[];
+    addedRows: any[];
+};
+export declare function addRows7(arr: any, n: number): any;
+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, groupColumns: string[]) => ColumnsTable<RecordType>;
+export declare const convertFlatColumn: (array: ColumnsTable) => ColumnsTable[];