es-grid-template 1.7.24 → 1.7.25

package/es/table-component/footer/TableFooterCell.js

@@ -1,16 +1,58 @@
-import React from "react";
+import React, { useContext } from "react";
 // import type { Person } from "../makeData";
-import { getCommonPinningStyles } from "../hook/utils";
+import { checkDecimalSeparator, checkThousandSeparator, getCommonPinningStyles, getFormat, isEmpty } from "../hook/utils";
+import { TableContext } from "../useContext";
+import classNames from "classnames";
+import { sumByField } from "../../grid-component/hooks";
+import { numericFormatter } from "react-numeric-component";
 // import type { Person } from "../../tanstack-table/makeData";
 
 const TableFooterCell = ({
   header
 }) => {
+  const isPinned = header.column.getIsPinned();
+  const isLastLeftPinnedColumn = isPinned === 'left' && header.column.getIsLastColumn('left');
+  const isFirstRightPinnedColumn = isPinned === 'right' && header.column.getIsFirstColumn('right');
+  const {
+    prefix,
+    format,
+    dataSource
+  } = useContext(TableContext);
+  const col = header.column.columnDef.meta ?? {};
+  const colFormat = typeof col.format === 'function' ? col.format({}) : col.format;
+  const cellFormat = getFormat(colFormat, format);
+  const thousandSeparator = cellFormat?.thousandSeparator;
+  const decimalSeparator = cellFormat?.decimalSeparator;
+
+  // const dec = (col.format?.decimalScale || col.format?.decimalScale === 0) ? col.format?.decimalScale : format?.decimalScale
+  const dec = cellFormat?.decimalScale;
+
+  // const sumValue = col.type === 'number' ? sumDataByField(filterDataByColumns4(dataSource, filterStates) as any[], col?.key as string) : 0
+  const sumValue = col.type === 'number' ? sumByField(dataSource, col?.field) : 0;
+  const value = !isEmpty(sumValue) ? dec || dec === 0 ? parseFloat(Number(sumValue).toFixed(dec)).toString() : sumValue.toString() : '0';
+  const cellValue = col.type === 'number' && col.isSummary !== false ? value : '';
+  const numberValue = Number(value);
+  const numericFormatProps = {
+    thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
+    decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
+    allowNegative: cellFormat?.allowNegative ?? false,
+    prefix: cellFormat?.prefix,
+    suffix: cellFormat?.suffix,
+    decimalScale: dec,
+    fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
+  };
   return /*#__PURE__*/React.createElement("td", {
     // ref={el => {
     //   if (el) columnVirtualizer.measureElement(el)
     // }}
     // data-index={header.id}
+
+    className: classNames(`${prefix}-grid-cell`, {
+      //  [`${prefix}-grid-cell-ellipsis`]:!wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header')),
+      //  [`${prefix}-grid-cell-wrap`]:  wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header'),
+      [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
+      [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn
+    }),
     key: header.id,
     colSpan: header.colSpan,
     style: {
@@ -19,6 +61,6 @@ const TableFooterCell = ({
       width: header?.getSize() ?? header.column.getSize(),
       backgroundColor: "#fafafa"
     }
-  }, header.column.id !== "id" && header.column.id !== "selection_column" ? /*#__PURE__*/React.createElement("span", null, "aaa") : '');
+  }, header.column.id !== "id" && header.column.id !== "selection_column" ? /*#__PURE__*/React.createElement("span", null, col.summaryTemplate ? col.summaryTemplate(numberValue, col.field) : numericFormatter(cellValue, numericFormatProps)) : '');
 };
 export default TableFooterCell;

package/es/table-component/footer/TableFooterRow.js

@@ -22,7 +22,9 @@ const TableFooterRow = ({
     style: {
       display: "flex",
       width: "100%",
-      borderTop: "1px solid #e0e0e0"
+      borderBottom: "1px solid #e0e0e0",
+      borderTop: "1px solid #e0e0e0",
+      height: 37
     }
   }, fixedLeftColumns.length > 0 ? fixedLeftColumns.map(column => {
     return /*#__PURE__*/React.createElement(TableFooterCell, {

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

@@ -12,6 +12,7 @@ import { booleanOperator, nonActionColumn, numberOperator, stringOperator, trans
 import { extendsObject, getCommonPinningStyles, getDefaultOperator, getTypeFilter } from "../hook/utils";
 import { TableContext } from "../useContext";
 import { renderFilter } from "./renderFilter";
+import ReactDOMServer from 'react-dom/server';
 // import { ColumnTable } from "../type";
 
 // import { Tooltip } from 'react-tooltip'
@@ -32,7 +33,8 @@ const TableHeadCell = props => {
     wrapSettings,
     selectionSettings,
     setIsSelectionChange,
-    id
+    id,
+    locale
   } = useContext(TableContext);
   const isPinned = header.column.getIsPinned();
   const isLastLeftPinnedColumn = isPinned === 'left' && header.column.getIsLastColumn('left');
@@ -47,6 +49,9 @@ const TableHeadCell = props => {
   const column = header.column.columnDef;
   const originalColumn = header.column.columnDef.meta ?? {};
   const filtered = (header.column.getFilterValue() ?? []).length > 0;
+  const cellContent = flexRender(header.column.columnDef.header, header.getContext());
+  const html = ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.Fragment, null, cellContent));
+  const hasValue = html.trim().length > 0;
 
   // const filtered = header.column.getIsFiltered()
 
@@ -248,7 +253,9 @@ const TableHeadCell = props => {
       width: header.getSize(),
       ...getCommonPinningStyles(header.column),
       ...style
-    }
+    },
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-html": !hasValue ? '' : ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement("div", null, cellContent))
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames('', {
       [`${prefix}-grid-filter-column`]: header.column.id !== 'selection_column',
@@ -275,11 +282,12 @@ const TableHeadCell = props => {
       [`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header')),
       [`${prefix}-grid-cell-text-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header')
     })
-  }, flexRender(header.column.columnDef.header, header.getContext()))), !nonActionColumn.includes(header.id) && /*#__PURE__*/React.createElement("span", {
+  }, cellContent)), !nonActionColumn.includes(header.id) && /*#__PURE__*/React.createElement("span", {
     className: "ui-rc-header-trigger"
   }, header.column.getCanSort() && /*#__PURE__*/React.createElement("div", {
     style: {
-      marginInlineEnd: 6
+      marginInlineEnd: 6,
+      cursor: 'pointer'
     },
     onClick: e => {
       setSorterChange(true);
@@ -290,17 +298,28 @@ const TableHeadCell = props => {
     }
   }, header.column.getIsSorted() ? header.column.getIsSorted() === 'asc' ? /*#__PURE__*/React.createElement(ArrowUp, {
     fontSize: 15,
-    color: '#000',
-    "data-tooltip-id": `${id}-tooltip-header-trigger`,
-    "data-tooltip-content": "Nh\u1EA5p \u0111\u1EC3 s\u1EAFp x\u1EBFp gi\u1EA3m d\u1EA7n"
+    color: '#000'
+    // data-tooltip-id={`${id}-tooltip-header-trigger`}
+    ,
+    "data-tooltip-id": `${id}-tooltip-content`
+    // data-tooltip-content='Nhấp để sắp xếp giảm dần'
+    ,
+    "data-tooltip-content": locale?.triggerDesc ?? 'Click to sort descending'
   }) : /*#__PURE__*/React.createElement(ArrowDown, {
     fontSize: 15,
     color: '#000',
-    "data-tooltip-id": `${id}-tooltip-header-trigger`,
-    "data-tooltip-content": "Nh\u1EA5p \u0111\u1EC3 h\u1EE7y s\u1EAFp x\u1EBFp"
-  }) : /*#__PURE__*/React.createElement(SortCancel, {
-    "data-tooltip-id": `${id}-tooltip-header-trigger`,
-    "data-tooltip-content": "Nh\u1EA5p \u0111\u1EC3 s\u1EAFp x\u1EBFp t\u0103ng d\u1EA7n",
+    "data-tooltip-id": `${id}-tooltip-content`
+    // data-tooltip-id={`${id}-tooltip-header-trigger`}
+    // data-tooltip-content='Nhấp để hủy sắp xếp'
+    ,
+    "data-tooltip-content": locale?.cancelSort ?? 'Click to cancel sorting'
+  }) : /*#__PURE__*/React.createElement(SortCancel
+  // data-tooltip-id={`${id}-tooltip-header-trigger`}
+  , {
+    "data-tooltip-id": `${id}-tooltip-content`
+    // data-tooltip-content='Nhấp để sắp xếp tăng dần'
+    ,
+    "data-tooltip-content": locale?.triggerAsc ?? 'Click to sort ascending',
     fontSize: 15,
     style: {
       display: 'flex'

package/es/table-component/header/TableHeadRow.d.ts

@@ -12,5 +12,5 @@ interface TableHeadRowProps<T> {
     fixedRightColumns: Column<T, unknown>[];
     rowHeaderVirtual: VirtualItem;
 }
-declare const TableHeadRow: ({ table, columnVirtualizer, rowHeaderVirtualizer, headerGroup, virtualPaddingLeft, virtualPaddingRight, fixedLeftColumns, fixedRightColumns, rowHeaderVirtual }: TableHeadRowProps<any>) => React.JSX.Element;
+declare const TableHeadRow: ({ table, columnVirtualizer, rowHeaderVirtualizer, headerGroup, fixedLeftColumns, fixedRightColumns, rowHeaderVirtual }: TableHeadRowProps<any>) => React.JSX.Element;
 export default TableHeadRow;

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

@@ -8,8 +8,8 @@ const TableHeadRow = ({
   columnVirtualizer,
   rowHeaderVirtualizer,
   headerGroup,
-  virtualPaddingLeft,
-  virtualPaddingRight,
+  // virtualPaddingLeft,
+  // virtualPaddingRight,
   fixedLeftColumns,
   fixedRightColumns,
   rowHeaderVirtual
@@ -17,7 +17,12 @@ const TableHeadRow = ({
   const {
     prefix
   } = React.useContext(TableContext);
-  const virtualColumns = columnVirtualizer.getVirtualItems();
+
+  // const virtualColumns = columnVirtualizer.getVirtualItems()
+  const virtualColumns = columnVirtualizer.measurementsCache;
+
+  // console.log('virtualColumns', virtualColumns)
+
   const columnOrder = table.getState().columnOrder;
   return /*#__PURE__*/React.createElement("tr", {
     key: headerGroup.id,
@@ -45,15 +50,9 @@ const TableHeadRow = ({
       header: headerGroup.headers.find(h => h.column.id === column.id)
       // column={column as any}
     });
-  }) : null, virtualPaddingLeft ? /*#__PURE__*/React.createElement("th", {
-    className: "",
-    style: {
-      display: 'flex',
-      width: virtualPaddingLeft
-    }
   }) : null, virtualColumns.map(virtualColumn => {
     const header = headerGroup.headers[virtualColumn.index];
-    const isFixed = table.getState().columnPinning.left?.includes(header.column.id) || table.getState().columnPinning.right?.includes(header.column.id);
+    const isFixed = table.getState().columnPinning.left?.includes(header?.column?.id) || table.getState().columnPinning.right?.includes(header?.column?.id);
     if (header && !isFixed) {
       return /*#__PURE__*/React.createElement(TableHeadCell, {
         key: header.id,
@@ -72,15 +71,6 @@ const TableHeadRow = ({
     key: column.id,
     header: headerGroup.headers.find(h => h.column.id === column.id)
     // column={column as any}
-  })) : null, virtualPaddingRight ?
-  /*#__PURE__*/
-  //fake empty column to the right for virtualization scroll padding
-  React.createElement("th", {
-    className: "nnnnnnnnnnnn",
-    style: {
-      display: 'flex',
-      width: virtualPaddingRight
-    }
-  }) : null));
+  })) : null));
 };
 export default TableHeadRow;

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

@@ -1,11 +1,9 @@
-import type { ColumnTable, ExpandableConfig, IFormat } from '../type';
-import type { ColumnDef, ExpandedState } from '@tanstack/react-table';
+import type { ColumnsTable, ColumnTable, IFormat } from '../type';
+import type { ColumnDef } from '@tanstack/react-table';
 export declare const renderValueCell: <T>(column: ColumnTable<T>, value: any, record: T, rowIndex: number, colIndex: number, format?: IFormat, editAble?: boolean) => any;
-export declare function convertToTanStackColumns<T>({ columns, expanded, setExpanded, expandable, format, editAble }: {
-    columns: ColumnTable<T>[];
-    expanded: ExpandedState;
-    setExpanded: any;
-    expandable?: ExpandableConfig<T>;
+export declare function convertToTanStackColumns<T>({ t, columns, format, editAble }: {
+    t?: any;
+    columns: ColumnsTable<T>;
     format?: IFormat;
     editAble?: boolean;
 }): ColumnDef<T, any>[];

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

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import ControlCheckbox from "../components/ControlCheckbox";
-import { checkDecimalSeparator, checkThousandSeparator, getFormat, isColor, isEmpty } from "./utils";
+import { checkDecimalSeparator, checkThousandSeparator, getFormat, isColor, isEmpty, sortByType } from "./utils";
 import { numericFormatter } from 'react-numeric-component';
 import dayjs from 'dayjs';
 import moment from 'moment';
@@ -57,13 +57,6 @@ export const renderValueCell = (column, value, record, rowIndex, colIndex, forma
         }
       }));
     case 'checkbox':
-      // return (
-      //   <Checkbox
-      //     checked={!!value}
-      //
-      //   />
-      // )
-
       return /*#__PURE__*/React.createElement(ControlCheckbox, {
         column: column,
         record: record,
@@ -84,15 +77,17 @@ export const renderValueCell = (column, value, record, rowIndex, colIndex, forma
   }
 };
 export function convertToTanStackColumns({
+  t,
   columns,
-  expanded,
-  setExpanded,
-  expandable,
+  // expanded,
+  // setExpanded,
+  // expandable,
   format,
   editAble
 }) {
-  const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
-  return columns.map(col => {
+  // const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0
+
+  return sortByType(columns).map(col => {
     const {
       headerText,
       headerTemplate,
@@ -116,14 +111,13 @@ export function convertToTanStackColumns({
             return headerTemplate;
           }
         } else {
-          return headerText;
+          return t ? t(headerText) : headerText;
         }
       },
       cell: props => {
         const {
           getValue,
-          cell,
-          row
+          cell
         } = props;
         const cellValue = props.renderValue() ?? null;
         const record = cell.row.original;
@@ -141,43 +135,11 @@ export function convertToTanStackColumns({
             return template;
           }
         } else {
-          return /*#__PURE__*/React.createElement(Fragment, null, cell.column.getIndex() === expandIconColumnIndex && /*#__PURE__*/React.createElement("div", {
-            className: "ui-rc-table-row-expand-trigger",
-            style: {
-              paddingLeft: `${row.depth * 25}px`
-            }
-          }, /*#__PURE__*/React.createElement("div", null, row.getCanExpand() ? /*#__PURE__*/React.createElement("button", {
-            // onClick: row.getToggleExpandedHandler(),
-            onClick: () => {
-              const keys = Object.keys(expanded);
-              // @ts-ignore
-              const tmp = {
-                ...expanded
-              };
-              if (keys.includes(row.id)) {
-                delete tmp[row.id];
-                setExpanded(tmp);
-              } else {
-                setExpanded(old => ({
-                  ...old,
-                  [row.id]: true
-                }));
-              }
-            },
-            style: {
-              cursor: "pointer"
-            },
-            className: "ui-rc-table-row-expand"
-          }, row.getIsExpanded() ? /*#__PURE__*/React.createElement("span", {
-            className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
-          }) : /*#__PURE__*/React.createElement("span", {
-            className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
-          })) : /*#__PURE__*/React.createElement("span", {
-            className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
-          }))), renderValueCell(col, cellValue, record, rowIndex, colIndex, format, editAble));
+          return /*#__PURE__*/React.createElement(Fragment, null, renderValueCell(col, cellValue, record, rowIndex, colIndex, format, editAble));
         }
       },
       enableResizing: allowResizing !== false,
+      enableHiding: false,
       // enableResizing: true,
       id: field,
       size: width,
@@ -187,16 +149,14 @@ export function convertToTanStackColumns({
       // maxSize: maxWidth,
       enableSorting: allowSorter !== false || col.sorter !== false
     };
-
-    // if (field) {
-    //   // @ts-ignore
-    //   newCol.accessorKey = field;
-
-    // }
-
     if (children) {
       // @ts-ignore
-      newCol.columns = convertToTanStackColumns(children);
+      newCol.columns = convertToTanStackColumns({
+        columns: children,
+        editAble,
+        format,
+        t
+      });
     }
     const meta = {
       ...restProps

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

@@ -5,6 +5,8 @@ import type { AnyObject, ColumnsTable, ColumnTable, EditType, FilterOperator, IC
 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;
@@ -116,6 +118,16 @@ export declare function addRowsUp(array: any, n: number): {
 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 getDiffent2Array: (a: any[], b: any[]) => any[];

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

@@ -1681,6 +1681,24 @@ export const getAllVisibleKeys = columns => {
   traverse(columns);
   return keys;
 };
+export const getAllVisibleKeys1 = columns => {
+  const keys = [];
+  const traverse = (cols, parentHidden = false) => {
+    for (const col of cols) {
+      if (col.visible === false || parentHidden) {
+        continue;
+      }
+      if (col.field) {
+        keys.push(col.field);
+      }
+      if (col.children) {
+        traverse(col.children, col.visible);
+      }
+    }
+  };
+  traverse(columns);
+  return keys;
+};
 export function getHiddenParentKeys(columns, parentKeys = []) {
   const hiddenParents = new Set();
   for (const column of columns) {
@@ -1697,11 +1715,32 @@ export function getHiddenParentKeys(columns, parentKeys = []) {
   }
   return Array.from(hiddenParents);
 }
+export function getHiddenParentKeys1(columns, parentKeys = []) {
+  const hiddenParents = new Set();
+  for (const column of columns) {
+    if (column.children) {
+      const currentPath = column.field ? [...parentKeys, column.field] : [...parentKeys];
+      const childHiddenParents = getHiddenParentKeys(column.children, currentPath);
+      if (childHiddenParents.length > 0) {
+        childHiddenParents.forEach(key => hiddenParents.add(key));
+        currentPath.forEach(key => hiddenParents.add(key));
+      }
+    } else if (column.visible !== false) {
+      parentKeys.forEach(key => hiddenParents.add(key));
+    }
+  }
+  return Array.from(hiddenParents);
+}
 export const getVisibleColumnKeys = columns => {
   const allKeys = getAllVisibleKeys(columns);
   const allParentKeys = getHiddenParentKeys(columns);
   return allKeys.filter(item => !allParentKeys.includes(item));
 };
+export const getVisibleColumnKeys1 = columns => {
+  const allKeys = getAllVisibleKeys1(columns);
+  const allParentKeys = getHiddenParentKeys1(columns);
+  return allKeys.filter(item => !allParentKeys.includes(item));
+};
 export function isObjEqual(obj1, obj2) {
   // Trường hợp tham chiếu bằng nhau
   if (obj1 === obj2) return true;
@@ -1724,4 +1763,108 @@ export function isObjEqual(obj1, obj2) {
     if (!isObjEqual(obj1[key], obj2[key])) return false;
   }
   return true;
-}
+}
+
+// Sorting function
+export const sortByType = arr => {
+  if (arr) {
+    return arr.sort((a, b) => {
+      if (a.fixed === 'left' && b.fixed !== 'left') {
+        return -1;
+      } else if (a.fixed !== 'left' && b.fixed === 'left') {
+        return 1;
+      } else if (a.fixed === 'right' && b.fixed !== 'right') {
+        return 1;
+      } else if (a.fixed !== 'right' && b.fixed === 'right') {
+        return -1;
+      }
+      return 0;
+    });
+  } else {
+    return [];
+  }
+};
+export function convertColumnsToTreeData(columns, groupColumns) {
+  // return columns.map((col) => {
+  //   const node: TreeDataNode = {
+  //     key: String(col.id ?? col.id ?? col.header), // key duy nhất
+  //     title: String(col.header ?? col.id ?? ''),            // tiêu đề
+  //   }
+
+  //   // Nếu có children (nested columns)
+  //   if ('columns' in col && Array.isArray((col as any).columns)) {
+  //     node.children = convertColumnsToTreeData(
+  //       (col as any).columns as ColumnDef<T, any>[]
+  //     )
+  //   }
+
+  //   return node
+  // })
+
+  return columns.filter(col => {
+    const meta = col.meta ?? {};
+    const inGroup = groupColumns ? groupColumns.includes(String(col.id ?? col.id)) : false;
+
+    // Điều kiện filter:
+    // - Nếu meta.showInColumnChoose = false => loại bỏ
+    // - Nếu không nằm trong groupColumns và không phải column group => loại bỏ
+    if (meta.showInColumnChoose === false) return false;
+    if (inGroup && !('columns' in col && Array.isArray(col.columns))) {
+      return false;
+    }
+    return true;
+  }).map(col => {
+    const node = {
+      key: String(col.id ?? col.id ?? col.header),
+      // title: () => col.header as any
+      title: col.header
+
+      // title: String(col.header ?? col.id ?? ''),
+    };
+    if ('columns' in col && Array.isArray(col.columns)) {
+      const children = convertColumnsToTreeData(col.columns, groupColumns);
+      if (children.length > 0) {
+        node.children = children;
+      }
+    }
+    return node;
+  });
+}
+export const updateColumns1 = (columns, includes) => {
+  return columns.map(column => {
+    const newColumn = {
+      ...column
+    };
+    let hasVisibleChild = false;
+    if (!column.field) {
+      return column;
+    }
+    if (newColumn.children) {
+      newColumn.children = updateColumns1(newColumn.children, includes);
+      hasVisibleChild = newColumn.children.some(child => !child.hidden);
+    }
+
+    // newColumn.hidden = newColumn.key && !includes.includes(newColumn.key)
+    newColumn.visible = !!(newColumn.field && includes.includes(newColumn.field));
+    // newColumn.fixed = newColumn.field && !includes.includes(newColumn.field) ? undefined : newColumn.fixed
+
+    if (newColumn.children && newColumn.children.length > 0) {
+      newColumn.visible = !hasVisibleChild;
+      // newColumn.fixed = !hasVisibleChild ? undefined : newColumn.fixed
+    }
+    return newColumn;
+  });
+};
+export const convertToObj = arr => {
+  // const result = Object.keys(obj).reduce((acc: any, key) => {
+  //   acc[key] = false;
+  //   return acc;
+  // }, {});
+
+  // return result
+
+  return Object.fromEntries(arr.map(key => [key, false]));
+};
+export const getDiffent2Array = (a, b) => {
+  return [...a.filter(x => !b.includes(x)), ...b.filter(x => !a.includes(x))];
+};

package/es/table-component/style.scss

@@ -494,6 +494,25 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
           background-color: $cell-selected-bg !important;
         }
 
+        &.disable {
+          padding: 7px 8px !important;
+          background-color: #f0f0f0;
+        }
+
+
+        &.isValid {
+          &::after {
+            content: "";
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 0;
+            height: 0;
+            border-top: 0 solid transparent;
+            border-right: 8px solid red;
+            border-bottom: 8px solid transparent;
+          }
+        }
       }
 
     }
@@ -960,7 +979,8 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
 .#{$prefix}-checkbox-indeterminate {
   &:hover {
     .#{$prefix}-checkbox-inner {
-      border-color: $primary !important;;
+      border-color: $primary !important;
+      ;
     }
   }
 
@@ -970,6 +990,7 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
     }
   }
 }
+
 //.#{$prefix}-checkbox-input {
 //  &:focus-visible {
 //    outline: none;
@@ -1024,6 +1045,7 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
       border-color: $primary;
     }
   }
+
   &:hover {
     .ui-rc-radio-inner {
       border-color: $primary;
@@ -1080,4 +1102,28 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
       border-color: $primary;
     }
   }
+}
+
+.ui-rc-pagination {
+  border-bottom: 1px solid #e0e0e0;
+  border-top: 1px solid #e0e0e0;
+  margin: 0;
+  padding: .75rem 1rem;
+  background-color: #ffffff;
+
+  .ui-rc-pagination-total-text {
+    order: 2;
+    margin-left: auto;
+  }
+
+
+
+  &.pagination-template {
+    position: relative;
+
+
+  }
+
+
+
 }

package/es/table-component/table/Grid.d.ts

@@ -8,16 +8,17 @@ type Props<T> = Omit<TableProps<T>, 'columns'> & {
     prefix: string;
     columns: ColumnDef<T>[];
     propsColumns: ColumnsTable;
-    columnVisibility: VisibilityState;
+    columnHidden: VisibilityState;
     expanded: ExpandedState;
+    setExpanded: any;
     columnPinning: ColumnPinningState;
     originData: T[];
     mergedFilterKeys: any;
     setMergedFilterKeys: any;
-    isFullScreen: boolean;
     triggerFilter: Dispatch<SetStateAction<any>>;
     triggerSorter: Dispatch<SetStateAction<Sorter[]>>;
     onContextMenu?: (data: T) => (event: any) => void;
+    triggerChangeColumns?: (args: any, keys: any) => void;
 };
 declare const Grid: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
 export default Grid;