es-grid-template 1.8.71 → 1.8.72

package/lib/group-component/hook/useColumns.js

@@ -0,0 +1,318 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.convertToTanStackColumns = convertToTanStackColumns;
+exports.toggleRowSelection = exports.renderValueCell = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ControlCheckbox = _interopRequireDefault(require("../components/ControlCheckbox"));
+var _utils = require("./utils");
+var _reactNumericComponent = require("react-numeric-component");
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _moment = _interopRequireDefault(require("moment"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const renderValueCell = (column, value, record, rowIndex, colIndex, format, editAble) => {
+  switch (column?.type) {
+    case 'number':
+      const colFormat = typeof column.format === 'function' ? column.format(record) : column.format;
+      const cellFormat = (0, _utils.getFormat)(colFormat, format);
+      const thousandSeparator = cellFormat?.thousandSeparator;
+      const decimalSeparator = cellFormat?.decimalSeparator;
+      const dec = cellFormat?.decimalScale;
+
+      // const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? parseFloat(Number(value).toFixed(dec)).toString() : value.toString()) : '0'
+
+      const tmpval = typeof value === 'string' ? Number(value) : value;
+      const numericFormatProps = {
+        thousandSeparator: (0, _utils.checkThousandSeparator)(thousandSeparator, decimalSeparator),
+        decimalSeparator: (0, _utils.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
+        allowNegative: cellFormat?.allowNegative ?? true,
+        prefix: cellFormat?.prefix,
+        suffix: cellFormat?.suffix,
+        decimalScale: dec,
+        fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
+      };
+
+      // if ( typeof value === "string") {
+      //   const ttt =  removeNumericFormat(value, undefined, numericFormatProps )
+      //
+      // }
+
+      const contentNumber = !(0, _utils.isEmpty)(value) ? dec || dec === 0 ? parseFloat(tmpval.toFixed(dec)).toString() : tmpval.toString() : '0';
+      // const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? tmpval.toString() : tmpval.toString()) : '0'
+
+      return !(0, _utils.isEmpty)(contentNumber) ? (0, _reactNumericComponent.numericFormatter)(contentNumber, numericFormatProps) : '';
+    case 'date':
+      return value ? (0, _dayjs.default)(value).format(format?.dateFormat ?? 'DD/MM/YYYY') : '';
+    case 'time':
+      return value ? value : '';
+    case 'year':
+      const year = value ? (0, _moment.default)(value).format('yyyy') : '';
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, year);
+    case 'datetime':
+      return value ? (0, _moment.default)(value).format(format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm') : '';
+    case 'boolean':
+      return value ? 'true' : 'false';
+    case 'color':
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+        className: 'w-100 h-100',
+        style: {
+          backgroundColor: (0, _utils.isColor)(value) ? value : '#fff',
+          border: '1px solid #f0f0f0',
+          height: '100%',
+          minHeight: 20
+        }
+      }));
+    case 'checkbox':
+      return /*#__PURE__*/_react.default.createElement(_ControlCheckbox.default, {
+        column: column,
+        record: record,
+        rowIndex: rowIndex,
+        colIndex: colIndex,
+        checked: !!value,
+        checkValue: value,
+        editAble: editAble
+      });
+    case 'file':
+      const nameFile = typeof value === 'object' && !Array.isArray(value) ? value.name : Array.isArray(value) ? value.map(it => typeof it === 'object' ? it.name : it).filter(Boolean).join(", ") : '';
+      return value ? nameFile : '';
+    default:
+      if (Array.isArray(value)) {
+        return value.join(', ');
+      }
+      return value;
+  }
+};
+exports.renderValueCell = renderValueCell;
+function convertToTanStackColumns({
+  t,
+  columns,
+  // expanded,
+  // setExpanded,
+  // expandable,
+  format,
+  editAble
+}) {
+  // const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0
+
+  return (0, _utils.sortByType)(columns).map(col => {
+    const {
+      headerText,
+      headerTemplate,
+      field,
+      width,
+      allowResizing,
+      minWidth,
+      template,
+      allowSortering,
+      allowFiltering
+    } = col;
+    const {
+      children,
+      ...restProps
+    } = col;
+    const newCol = {
+      header: () => {
+        if (headerTemplate) {
+          if (typeof headerTemplate === 'function') {
+            return headerTemplate(col);
+          } else {
+            return headerTemplate;
+          }
+        } else {
+          return t ? t(headerText) : headerText;
+          // return field
+        }
+      },
+      cell: props => {
+        const {
+          getValue,
+          cell
+        } = props;
+        const cellValue = props.renderValue() ?? null;
+        const record = cell.row.original;
+        const colIndex = cell.column.getIndex();
+        const rowIndex = cell.row.index;
+        if (template) {
+          if (typeof template === 'function') {
+            return template({
+              field: field ?? '',
+              index: cell.row.index,
+              rowData: cell.row.original,
+              value: getValue()
+            });
+          } else {
+            return template;
+          }
+        } else {
+          return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, renderValueCell(col, cellValue, record, rowIndex, colIndex, format, editAble));
+        }
+      },
+      enableResizing: allowResizing !== false,
+      // enableHiding: false,
+      // enableResizing: true,
+      id: field,
+      size: width,
+      accessorKey: field,
+      sortDescFirst: false,
+      minSize: minWidth,
+      // maxSize: maxWidth,
+      enableSorting: allowSortering !== false,
+      // enableSorting: false,
+      // enableColumnFilter: allowFiltering !== false && !nonActionColumn.includes(field)
+      enableColumnFilter: allowFiltering !== false
+    };
+    if (children) {
+      newCol.size = undefined;
+      // @ts-ignore
+      newCol.columns = convertToTanStackColumns({
+        columns: children,
+        editAble,
+        format,
+        t
+      });
+    }
+    const meta = {
+      ...restProps
+    };
+    if (Object.keys(meta).length > 0) {
+      newCol.meta = meta;
+    }
+    return newCol;
+  });
+}
+const toggleRowSelection = props => {
+  const {
+    selectionSettings,
+    cell,
+    isSelectionChange,
+    e,
+    setIsSelectionChange
+  } = props;
+  const {
+    row
+  } = cell;
+  const {
+    rowsData
+  } = isSelectionChange ?? {};
+  const prevSelected = rowsData && rowsData.length > 0 ? [...rowsData] : [];
+  if (selectionSettings?.checkStrictly || selectionSettings?.type === 'single') {
+    row.getToggleSelectedHandler()(e);
+    if (row.getIsSelected()) {
+      // đã chọn
+
+      // xóa row ra list selected 
+      const newRowsSelected = prevSelected.filter(it => it.id !== row.id);
+      setIsSelectionChange({
+        isChange: true,
+        type: 'rowSelected',
+        rowData: row.original,
+        rowsData: newRowsSelected ?? []
+      });
+    } else {
+      // chưa selected
+
+      const checkedRows = [...prevSelected, row];
+      setIsSelectionChange({
+        isChange: true,
+        type: 'rowSelected',
+        rowData: row.original,
+        rowsData: selectionSettings?.type === 'single' ? [row] : checkedRows
+      });
+    }
+    return;
+  }
+  if (row.subRows && row.subRows.length > 0) {
+    // click vào row cha
+
+    const allChild = (0, _utils.getAllChildren)(row);
+    (0, _utils.toggleRowAndChildren)(row, !row.getIsSelected());
+    if (row.getIsSelected()) {
+      // đã chọn
+
+      // const aaa = isSelectionChange?.rowsData.filter((it) => it.id !== row.id)
+
+      const newRowsSelected = (0, _utils.excludeItems)(prevSelected, [...allChild, row]);
+      setIsSelectionChange({
+        isChange: true,
+        type: 'rowSelected',
+        rowData: row.original,
+        rowsData: newRowsSelected ?? []
+      });
+    } else {
+      // chưa selected
+
+      let checkedRows = [];
+      if (row.subRows && row.subRows.length > 0) {
+        checkedRows = [...prevSelected, row, ...allChild];
+      } else {
+        checkedRows = [...prevSelected, row];
+      }
+      setIsSelectionChange({
+        isChange: true,
+        type: 'rowSelected',
+        rowData: row.original,
+        rowsData: checkedRows
+      });
+    }
+  } else {
+    // click vào row không có cha
+
+    row.getToggleSelectedHandler()(e);
+    if (row.getIsSelected()) {
+      // đã chọn
+
+      const rowParent = row.getParentRow();
+      // const rowParent1 = row.getParentRows()
+
+      let newCheckedRows = [];
+      if (rowParent) {}
+      if (rowParent && (0, _utils.countUnselectedChildren)(row) === 1) {
+        newCheckedRows = prevSelected.filter(it => it.id !== row.id && it.id !== rowParent.id);
+      } else {
+        // xóa row ra list selected 
+        // const newRowsSelected = prevSelected.filter((it) => it.id !== row.id)
+        newCheckedRows = prevSelected.filter(it => it.id !== row.id);
+      }
+      setIsSelectionChange({
+        isChange: true,
+        type: 'rowSelected',
+        rowData: row.original,
+        rowsData: newCheckedRows ?? []
+      });
+    } else {
+      // chưa selected
+
+      let checkedRows = [];
+      const rowParent = row.getParentRow();
+
+      // nếu có cha và cha chưa được chọn và tất cả con đã chọn => thêm row cha vào 
+      if (rowParent && !rowParent.getIsSelected() && (0, _utils.countUnselectedChildren)(row) === 1) {
+        rowParent.toggleSelected(!rowParent.getIsSelected());
+        checkedRows = [...prevSelected, row, rowParent];
+      } else {
+        // chỉ thêm vào row hiện tại
+
+        const isInclude = prevSelected.findIndex(it => it.id === cell.row.id);
+        if (isInclude > -1) {
+          // cập nhật data row hiện tại
+
+          prevSelected[isInclude] = row;
+          checkedRows = [...prevSelected];
+        } else {
+          checkedRows = [...prevSelected, row];
+        }
+      }
+      setIsSelectionChange({
+        isChange: true,
+        type: 'rowSelected',
+        rowData: row.original,
+        rowsData: checkedRows
+      });
+    }
+  }
+};
+exports.toggleRowSelection = toggleRowSelection;

package/lib/group-component/hook/useFilterOperator.d.ts

@@ -0,0 +1,7 @@
+import type { Table } from '@tanstack/react-table';
+import type { FilterOperator } from '../../grid-component/type';
+export declare function useFilterOperator(table: Table<any>): {
+    setFilterOperator: (columnId: string, operator: FilterOperator) => void;
+    getFilterOperator: (columnId: string) => FilterOperator;
+};
+export declare function customStringFilterFn(row: any, columnId: any, filterValue: any): boolean;

package/lib/group-component/hook/useFilterOperator.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.customStringFilterFn = customStringFilterFn;
+exports.useFilterOperator = useFilterOperator;
+function useFilterOperator(table) {
+  const setFilterOperator = (columnId, operator) => {
+    const filters = table.getState().columnFilters;
+    const next = filters.map(f => f.id === columnId ? {
+      ...f,
+      operator
+    } : f);
+    table.setColumnFilters(next);
+  };
+  const getFilterOperator = columnId => {
+    const filters = table.getState().columnFilters;
+    return filters.find(f => f.id === columnId)?.operator ?? 'contains';
+  };
+  return {
+    setFilterOperator,
+    getFilterOperator
+  };
+}
+function customStringFilterFn(row, columnId, filterValue) {
+  const filters = row.table.getState().columnFilters;
+  const operator = filters.find(f => f.id === columnId)?.operator ?? 'contains';
+  const cellValue = String(row.getValue(columnId) ?? '');
+  switch (operator) {
+    case 'equal':
+      return cellValue === filterValue;
+    case 'startsWith':
+      return cellValue.toLowerCase().startsWith(filterValue.toLowerCase());
+    case 'endsWith':
+      return cellValue.toLowerCase().endsWith(filterValue.toLowerCase());
+    default:
+      return cellValue.toLowerCase().includes(filterValue.toLowerCase());
+  }
+}

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

@@ -0,0 +1,220 @@
+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, FilterOperator, IColumnType, IFormat, RangeState, 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";
+export declare const newGuid: () => any;
+export declare const convertDayjsToDate: (dateString: string, format?: string) => Date;
+export declare const convertDateToDayjs: (date: Date | undefined, format?: string) => dayjs.Dayjs;
+export declare const getCommonPinningStyles: (column: Column<any>) => CSSProperties;
+export declare const getCommonPinningStyles2: (header: any) => CSSProperties;
+export declare const sumSize: (items: any) => number;
+export declare const appendIfNotExists: (a: VirtualItem[], b: VirtualItem[]) => VirtualItem[];
+export declare const getNewItemsOnly: (a: VirtualItem[], b: VirtualItem[]) => VirtualItem[];
+export declare const extendsObject: <T extends AnyObject = AnyObject>(...list: T[]) => AnyObject;
+export declare const isEmpty: (d: any) => boolean;
+export declare const getFormat: (colFormat?: IFormat, format?: IFormat) => {
+    thousandSeparator: string;
+    decimalSeparator: string;
+    decimalScale: number;
+    allowNegative: boolean;
+    prefix: string;
+    suffix: string;
+    fixedDecimalScale: boolean;
+    dateFormat: string;
+    datetimeFormat: string;
+    timeFormat: string;
+    weekFormat: string;
+    monthFormat: string;
+    yearFormat: string;
+};
+export declare function convertFormat(formatStr: string): string;
+export declare const getDatepickerFormat: (type: EditType | TypeFilter | IColumnType, format?: IFormat) => string;
+export declare const getDateRangeFormat: (type: EditType | TypeFilter | IColumnType, format?: IFormat) => string;
+export declare const getTypeFilter: (col: any) => TypeFilter;
+export declare const addRowIdArray: (inputArray: any[]) => any[];
+export declare function groupArrayByColumns(arr: any[], columns: string[] | undefined): any;
+export declare const flatColumns2: <RecordType>(columns: ColumnsTable<RecordType>) => ColumnsTable<RecordType>;
+export declare const checkThousandSeparator: (thousandSeparator: string | undefined, decimalSeparator: string | undefined) => string;
+export declare const checkDecimalSeparator: (thousandSeparator: string | undefined, decimalSeparator: string | undefined) => string;
+export declare const getFixedFields: <T>(columns: ColumnsTable<T>, type: 'left' | 'right') => string[];
+export declare function areStringArraysEqual(a: string[], b: string[]): boolean;
+export declare const getDefaultOperator: (col: ColumnTable) => FilterOperator;
+export declare function isEqualSet(setA: any, setB: any): boolean;
+export declare const getLastSelectCell: (selectCells: any) => {
+    row: number;
+    col: number;
+};
+export declare function getCellsByPosition(cellSet: any, position?: string): any[];
+export declare const onAddBgSelectedCell: (selectedCells: any, id?: string, isFocusCellIndex?: boolean) => void;
+export declare const onRemoveBgSelectedCell: (selectedCells: any, id?: string, rowsSelected?: any) => void;
+export declare function getColIdsBetween(table: Table<any>, a: string, b: string): string[];
+export declare function getRowIdsBetween(table: Table<any>, a: string, b: string): string[];
+export declare const updateArrayByKey: (arr: any[], element: any, key: string) => any[];
+export declare const unFlattenData: <RecordType extends AnyObject = AnyObject>(data: RecordType[]) => RecordType[];
+export declare const flattenArray: <RecordType extends AnyObject = AnyObject>(arr: any[]) => RecordType[];
+export declare function updateOrInsert(dataArray: any[], dataFilter: any[]): any[];
+export declare const findItemByKey: (array: any, key: string | number, value: any) => any;
+export declare const isFormattedNumber: (str: string) => boolean;
+export declare const detectSeparators: (str: string) => {
+    thousandSeparator: string;
+    decimalSeparator: string;
+};
+export declare function isDateString(str: any): boolean;
+export declare function compareDates(date1: any, date2: any): boolean;
+export declare function compareDate(itemValue: any, value: any): boolean;
+export declare const removeVietnameseTones: (str: any) => any;
+export declare const shouldInclude: (item: any, queries: any[]) => any;
+export declare function sortData(data: any[], sorter: Sorter[]): any[];
+export declare function filterDataByColumns(data: any[], queries: any[], sorter: Sorter[], keysFilter: string[] | undefined): any[];
+export declare const getAllRowKey: (data: any[]) => any[];
+export declare const isEditable: <RecordType>(column: ColumnTable, rowData: RecordType) => boolean | ((rowData: any) => boolean);
+export declare const checkFieldKey: (key: string | undefined) => string;
+export declare const convertArrayWithIndent: (inputArray: any[], parentIndent?: number) => any[];
+export declare const convertLabelToTitle: (data: any[]) => any[];
+export declare const isNullOrUndefined: (d: any) => boolean;
+export declare const isObjEmpty: (obj: any) => boolean;
+export declare const isDisable: <T>(column: ColumnTable<T>, rowData?: any) => boolean;
+export declare const customWeekStartEndFormat: (value: any, weekFormat: string) => string;
+export declare const parseBooleanToValue: (value: boolean, type: 'boolean' | 'number') => number | boolean;
+export declare const isNameColor: (strColor: string) => boolean;
+export declare const isColor: (value: string) => boolean;
+export declare const genPresets: (presets?: import("@ant-design/colors").PalettesProps) => import("antd/es/color-picker/interface").PresetsItem[];
+export declare const getEditType: <T>(column: ColumnTable<T>, rowData?: any) => EditType;
+export declare const getDefaultValue: (defaultValue: any) => AnyObject;
+export declare const flattenData: <RecordType extends AnyObject = AnyObject>(childrenColumnName: string, data?: RecordType[]) => RecordType[];
+export declare const getSelectedCellMatrix: (table: Table<any>, startCell: IPositionCell | undefined, endCell: IPositionCell | undefined) => RangeState;
+export declare function addRowsDownWithCtrl(arr: any, n: number): {
+    combined: any;
+    addedRows: any[];
+} | {
+    combined: any[];
+    addedRows: any[];
+};
+export declare function addRowsDown(arr: any, n: number): {
+    combined: any;
+    addedRows: any[];
+} | {
+    combined: any[];
+    addedRows: any[];
+};
+export declare function addRowsUpWithCtrl(array: any, n: number): {
+    combined: any;
+    addedRows: any[];
+} | {
+    combined: any[];
+    addedRows: any[];
+};
+export declare function addRowsUp(array: any, n: number): {
+    combined: any;
+    addedRows: any[];
+} | {
+    combined: any[];
+    addedRows: any[];
+};
+export declare const convertFilters: (filters: any[]) => any[];
+export declare function getInvisibleColumns(columns: ColumnTable[]): Record<string, boolean>;
+export declare const getAllVisibleKeys: (columns: any[]) => any[];
+export declare const getAllVisibleKeys1: (columns: ColumnTable[]) => any[];
+export declare function getHiddenParentKeys(columns: any[], parentKeys?: string[]): string[];
+export declare function getHiddenParentKeys1(columns: ColumnTable[], parentKeys?: string[]): string[];
+export declare const getVisibleColumnKeys: (columns: any[]) => string[];
+export declare const getVisibleColumnKeys1: (columns: any[]) => string[];
+export declare function isObjEqual(obj1: any, obj2: any): boolean;
+export declare const sortByType: <T>(arr: ColumnTable<T>[]) => 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) => {
+    [k: string]: any;
+};
+export declare const convertToObjTrue: (arr: any) => {
+    [k: string]: any;
+};
+export declare const getDiffent2Array: (a: any[], b: any[]) => any[];
+export declare function findFirst(items: Column<any>[]): Column<any, unknown>;
+export declare function isTreeArray(arr: any[]): boolean;
+export declare function updateColumnWidthsRecursive(columns: any[], sizing: Record<string, number>): any[];
+export declare function updateWidthsByOther(source: any[], target: any[]): any[];
+export declare function findAllChildrenKeys2<RecordType>(data: readonly RecordType[], rowKey: any, childrenColumnName: string): Key[];
+export declare function parseExcelText(text: string): string[][];
+export declare function parseExcelClipboard(e: React.ClipboardEvent): string[][];
+export declare function parseExcelClipboardText(text: string): string[][];
+export declare function parseClipboardEvent(e: ClipboardEvent | React.ClipboardEvent): string[][];
+export declare function arraysEqualIgnoreOrderFast(a: any[], b: any[]): boolean;
+export declare function filterByIds(a: any[], b: any[]): any[];
+export declare function excludeItems(arrayA: any[], arrayB: any[]): any[];
+export declare function getAllChildren(row: any): any;
+export declare function toggleRowAndChildren(row: Row<any>, isSelected?: boolean): void;
+export declare function countUnselectedChildren(row: Row<any>): number;
+export declare function removeDuplicatesByKey(arr: any[], key?: string): any[];
+export declare const getTableHeight: (height?: number, minHeight?: number) => number;
+export declare const convertFlatColumn1: (array: ColumnsTable) => ColumnsTable[];
+export declare const updateColumnsByGroup: (columns: any[], columnsGroup: string[]) => any[];
+export declare const removeColumns: <RecordType>(columns: ColumnTable<RecordType>[], groupColumns: string[]) => ColumnsTable<RecordType>;
+export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordType>[], fixedFields: string[]) => {
+    fixed: string;
+    field: string;
+    width?: number;
+    maxWidth?: number;
+    minWidth?: number;
+    type?: IColumnType;
+    haveSum?: boolean;
+    isSummary?: boolean;
+    summaryTemplate?: (data: number, key: string) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    format?: IFormat | ((rowData: any) => IFormat);
+    allowFiltering?: boolean;
+    sorter?: boolean;
+    allowSortering?: boolean;
+    operator?: FilterOperator;
+    hideOperator?: boolean;
+    placeholder?: string;
+    showInColumnChoose?: boolean;
+    typeFilter?: TypeFilter;
+    source?: any[];
+    showFilterSearch?: boolean;
+    headerText?: string;
+    hidden?: boolean;
+    visible?: boolean;
+    headerTooltip?: string | boolean | (() => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
+    columnGroupText?: string;
+    align?: import("./../../grid-component/type").ITextAlign;
+    textAlign?: import("./../../grid-component/type").ITextAlign;
+    headerTextAlign?: import("./../../grid-component/type").ITextAlign;
+    template?: import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
+    showTooltip?: boolean;
+    tooltipDescription?: string | ((args: {
+        value: any;
+        record: RecordType;
+    }) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
+    headerTemplate?: import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | ((column: ColumnTable<RecordType>) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
+    commandItems?: import("./../../grid-component/type").CommandItem[];
+    children?: ColumnTable<RecordType>[];
+    editType?: EditType | ((rowData?: RecordType) => EditType);
+    disable?: boolean | ((rowData: any) => boolean);
+    editEnable?: boolean | ((rowData: any) => boolean);
+    isClearable?: boolean;
+    maxDate?: any;
+    minDate?: any;
+    maxTime?: any;
+    minTime?: any;
+    max?: number;
+    min?: number;
+    editSelectSettings?: import("./../../grid-component/type").IEditSelectSettings;
+    editFromSettings?: import("./../../grid-component/type").IEditFromSettings;
+    fixedType?: import("./../../grid-component/type").FixedType;
+    headerTextWrap?: boolean;
+    ellipsis?: boolean;
+    allowResizing?: boolean;
+    allowSelection?: boolean | ((rowData: RecordType) => boolean);
+    onCellStyles?: Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width">);
+    onCellHeaderStyles?: Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width">);
+    onCellFooterStyles?: Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width">);
+    sumGroup?: boolean;
+    onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
+}[];
+export declare function sortColumnsByField<T extends ColumnTable>(columns: T[], priorityFields: string[]): T[];