es-grid-template 1.8.63 → 1.8.65

package/es/grid-component/ColumnsGroup/ColumnsGroup.js

@@ -27,9 +27,12 @@ export const ColumnsGroup = props => {
   const menuRef = useRef();
   const [tempGroup, setTempGroup] = useState([]);
   const [clicked, setClicked] = useState(false);
+  console.log('columns', columns);
+  console.log('columnsGrouped', columnsGrouped);
   const rsCol = React.useMemo(() => {
-    return columns.filter(it => it.hidden !== true && !tempGroup.includes(it.field) && it.field !== '#' && it.field !== 'command');
+    return columns.filter(it => it.visible !== false && !tempGroup.includes(it.field) && it.field !== '#' && it.field !== 'selection_column' && it.field !== 'command');
   }, [columns, tempGroup]);
+  console.log('rsCol', rsCol);
   const options = React.useMemo(() => {
     return rsCol.map(it => ({
       ...it,

package/es/grid-component/TempTable.js

@@ -1,14 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { Fragment } from 'react';
 import Table from "../table-component";
-import InternalTable from "./InternalTable";
+import TableGroup from "../table-virtuoso";
 const TempTable = props => {
   const {
     groupAble,
     editAble,
     ...rest
   } = props;
-  const TabComponent = groupAble ? InternalTable : Table;
+  const TabComponent = groupAble ? TableGroup : Table;
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(TabComponent, _extends({}, rest, {
     groupAble: groupAble,
     editAble: editAble

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

@@ -2,7 +2,6 @@ import type * as React from "react";
 import dayjs from "dayjs";
 import type { EditType, IColumnType, TypeFilter } from "rc-master-ui";
 import type { ColumnTable, GetRowKey, IFormat } from "../type";
-import type { SelectionSettings } from "../type";
 import type { AnyObject } from "../type";
 import type { Key } from "react";
 import type { ColumnsTable } from "./../index";
@@ -50,9 +49,8 @@ export declare const checkFieldKey: (key: string | undefined) => string;
 export declare const convertLabelToTitle: (data: any[]) => any[];
 export declare const convertArrayWithIndent: (inputArray: any[], parentIndent?: number) => any[];
 export declare const getTemplate: (template: any, column?: ColumnTable) => React.ReactNode | React.ReactElement;
-export declare const totalFixedWidth: <T>(columns: ColumnsTable<T>, type: 'left' | 'right', selectionSettings?: SelectionSettings) => number;
 export declare const isObjEmpty: (obj: any) => boolean;
-export declare const getColumnsVisible: <T>(columns: ColumnsTable<T>, index: number) => ColumnTable<T>[];
+export declare const getColumnsVisible: <T>(columns: ColumnsTable<T>, index: number) => import("../../table-component/type").ColumnTable<T>[];
 export declare const updateData: <Record = AnyObject>(initData: Record[], rows: Record[], key: keyof Record) => Record[];
 export declare const parseBooleanToValue: (value: boolean, type: 'boolean' | 'number') => number | boolean;
 export declare const genPresets: (presets?: import("@ant-design/colors").PalettesProps) => import("antd/es/color-picker/interface").PresetsItem[];
@@ -103,15 +101,11 @@ export declare function addRowsUp(array: any, n: number): {
     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: ColumnTable<RecordType>[], groupColumns: string[]) => ColumnsTable<RecordType>;
 export declare const convertFlatColumn: (array: ColumnsTable) => ColumnsTable[];
-export declare const convertColumns: <RecordType>(cols: ColumnsTable<RecordType>) => ColumnsTable<RecordType>;
 export declare const checkChild: (inputArray: any[]) => boolean;
 export declare const isEditable: <RecordType>(column: ColumnTable, rowData: RecordType) => boolean | ((rowData: any) => boolean);
 export declare const isArraysEqual: (arr1: any[], arr2: any[]) => boolean;
-export declare const editAbleColumns: <T>(columns: ColumnsTable<T>) => ColumnTable<T>[];
+export declare const editAbleColumns: <T>(columns: ColumnsTable<T>) => import("../../table-component/type").ColumnTable<T>[];
 export declare const findItemPath: (tree: any[], targetItem: any, rowKey: any, currentPage?: number, pageSize?: number) => any;
 export declare const filterDataByColumns: (data: any[], queries: any) => any[];
 export declare const filterDataByColumns2: (data: any[], queries: any) => any[];

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

@@ -1,10 +1,13 @@
 import dayjs from "dayjs";
 import moment from "moment/moment";
+// import type {SelectionSettings} from "../type"
+
 import { v4 as uuidv4 } from 'uuid';
 import { presetPalettes } from "@ant-design/colors";
-import { Table } from "rc-master-ui";
-import { flatColumns2 } from "./columns";
-import { SELECTION_COLUMN } from "./useColumns";
+// import {Table} from "rc-master-ui"
+// import {flatColumns2} from "./columns"
+// import {SELECTION_COLUMN} from "./useColumns"
+
 export const newGuid = () => {
   for (let i = 0; i < 20; i++) {
     // @ts-ignore
@@ -387,15 +390,22 @@ export const getTemplate = (template, column) => {
   }
   return template;
 };
-export const totalFixedWidth = (columns, type, selectionSettings) => {
-  const totalFixedLeftWidth = columns.filter(column => column.fixed === type) // Lọc các cột có fixed
-  .reduce((sum, column) => {
-    const width = typeof column.width === 'number' ? column.width : parseInt(column.width, 10) || 0; // Chuyển từ chuỗi sang số, nếu không hợp lệ thì lấy 0
-    return sum + width;
-  }, 0);
-  const selectColumnWidth = !selectionSettings?.mode ? 0 : typeof selectionSettings?.columnWidth === 'number' ? selectionSettings?.columnWidth : parseInt(selectionSettings?.columnWidth, 10) || 50;
-  return totalFixedLeftWidth + selectColumnWidth;
-};
+
+// export const totalFixedWidth = <T, >(columns: ColumnsTable<T>, type: 'left' | 'right', selectionSettings?: SelectionSettings) => {
+//   const totalFixedLeftWidth: number = columns
+//     .filter(column => column.fixed === type) // Lọc các cột có fixed
+//     .reduce((sum, column) => {
+//       const width = typeof column.width === 'number' ? column.width : parseInt(column.width as string, 10) || 0 // Chuyển từ chuỗi sang số, nếu không hợp lệ thì lấy 0
+//       return sum + width
+//     }, 0)
+
+//   const selectColumnWidth: number = !selectionSettings?.mode ? 0 : (
+//     typeof selectionSettings?.columnWidth === 'number' ? selectionSettings?.columnWidth : parseInt(selectionSettings?.columnWidth as string, 10) || 50)
+
+//   return totalFixedLeftWidth + selectColumnWidth
+
+// }
+
 export const isObjEmpty = obj => {
   if (isNullOrUndefined(obj)) {
     return true;
@@ -1146,93 +1156,112 @@ export function addRowsUp(array, n) {
     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 === '#' || 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
-      }
-    };
-  });
+// export const transformColumns = <RecordType, >(cols: ColumnsTable<RecordType>, convertColumns: any[], t?: any): ColumnsTable<RecordType> => {
 
-  // @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
-      };
-    }
+//   // @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 = <RecordType, >(cols: ColumnsTable<RecordType>, sortMultiple?: boolean): ColumnsTable<RecordType> => {
+
+//   const  convertColumns = flatColumns2(cols).map((column: any, colIndex) => {
+
+//     if (!column?.field && !column?.key) {
+//       return Table.SELECTION_COLUMN
+//     }
+
+//     if (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: any) => 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 = <RecordType, >(columns: ColumnTable<RecordType>[], groupColumns: string[]): ColumnsTable<RecordType> => {
+
+//   const ttt: ColumnTable<RecordType>[] = [...columns]
+
+//   return ttt.filter(column => !groupColumns.includes(column.field as string)).map((column) => {
+//     const newCol = {...column}
+//     if (newCol?.children && newCol?.children.length >  0) {
+//       newCol.children = removeColumns(newCol.children, groupColumns) as any[]
+//     }
+//     return newCol
+//   })
+
+// }
 
-    // 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.length > 0) {
-      newCol.children = removeColumns(newCol.children, groupColumns);
-    }
-    return newCol;
-  });
-};
 export const convertFlatColumn = array => {
   const tmp = [...array];
   let result = [];
@@ -1245,54 +1274,56 @@ export const convertFlatColumn = array => {
   });
   return result;
 };
-export const convertColumns = cols => {
-  return cols.map(col => {
-    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: () => (<HeaderContent column={{...col} as any} 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.fixedType ?? 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
-    };
-  });
-};
+
+// export const convertColumns = <RecordType, >(cols: ColumnsTable<RecordType>): ColumnsTable<RecordType> => {
+
+//   return cols.map((col) => {
+
+//     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: () => (<HeaderContent column={{...col} as any} 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.fixedType ?? col.fixed
+//     }
+
+//     if (transformedColumn.children && transformedColumn.children?.length) {
+//       return {
+//         ...transformedColumn,
+//         children: convertColumns(transformedColumn.children)
+//       }
+//     }
+
+//     if (["index", "#"].includes(col.field as string)) {
+//       return {
+//         ...transformedColumn,
+//         onCell: () => ({className: 'cell-number'}),
+//         render: (_: any, __: any, rowIndex: number) => rowIndex + 1
+//       }
+//     }
+
+//     if (col.key === 'command') {
+//       return {
+//         ...transformedColumn,
+//         onCell: () => ({className: 'cell-number', style: {padding: '2px 8px'}})
+//       }
+//     }
+
+//     return {
+//       ...transformedColumn
+//     }
+//   })
+// }
+
 export const checkChild = inputArray => {
   return inputArray.some(item => item.children && item.children.length > 0);
 };

package/es/grid-component/index.d.ts

@@ -1,5 +1,5 @@
 import TempTable from './TempTable';
-import type { ColumnsTable, TableProps, ColumnTable, CommandItem, ContextMenuItem } from './type';
+import type { ColumnsTable, TableProps, ColumnTable, CommandItem, ContextMenuItem } from '../table-component/type';
 import type { ToolbarItem } from "rc-master-ui/es/toolbar";
 export type { ColumnsTable, TableProps, ColumnTable, ToolbarItem, CommandItem, ContextMenuItem };
 export default TempTable;

package/es/grid-component/index.js

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

package/es/grid-component/type.d.ts

@@ -285,6 +285,7 @@ export interface TableProps<RecordType = AnyObject> extends Omit<RcTableProps<Re
     onRowStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | ((data: RecordType, row: Row<RecordType>) => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
     onRowHeaderStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | (() => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
     onRowFooterStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | (() => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
+    fullScreenTitle?: ReactNode | (() => ReactNode);
 }
 export type PaginationConfig = TablePaginationConfig & {
     currentPage?: number;
@@ -311,14 +312,21 @@ export interface CommandItem {
     client?: boolean;
     confirmDialog?: boolean;
 }
+export type GroupTemplate = {
+    rowData: any;
+    value: any;
+    column: ColumnTable;
+};
 export type IGroupSetting = {
     client?: boolean;
     onGroup?: (props: IOnGroup) => void;
     groupColumnSpan?: number;
     hiddenColumnGroup?: boolean;
+    showHeaderColumn?: boolean;
     showGroupIcon?: boolean;
     unClearableLevel?: 1 | 2 | 3 | undefined;
     sumGroup?: boolean;
+    groupTemplate?: React.ReactNode | React.ReactElement | ((args: GroupTemplate) => React.ReactNode | React.ReactElement);
 };
 type IOnGroup = {
     columnGrouped: string[];

package/es/table-component/InternalTable.js

@@ -200,10 +200,7 @@ const InternalTable = props => {
     triggerSorter: setSorterStates,
     setMergedFilterKeys: setMergedFilterKeys,
     mergedFilterKeys: mergedFilterKeys,
-    expanded: expanded
-    // onContextMenu={onContextMenu}
-    // contextMenuItems={contextMenuItems}
-    ,
+    expanded: expanded,
     editAble: isFullScreen ? false : editAble,
     triggerChangeColumns: triggerChangeColumns,
     setExpanded: setExpanded,

package/es/table-component/TableContainer.js

@@ -185,10 +185,6 @@ const TableContainer = props => {
     ref: topToolbarRef,
     className: classNames(`${prefix}-grid-top-toolbar`, {})
   }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      textAlign: 'center'
-    }
-  }, typeof title === 'function' ? title?.(originData) : title), /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',
       justifyContent: 'space-between',
@@ -239,7 +235,11 @@ const TableContainer = props => {
     t: t,
     columnsGroup: groupColumns,
     triggerChangeColumns: triggerChangeColumns
-  })))), /*#__PURE__*/React.createElement(TableContext.Provider, {
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      textAlign: 'center'
+    }
+  }, typeof title === 'function' ? title?.(originData) : title)), /*#__PURE__*/React.createElement(TableContext.Provider, {
     value: {
       t,
       locale,