es-grid-template 1.7.26 → 1.7.28

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

@@ -1,14 +1,13 @@
 import type { Table } from '@tanstack/react-table';
 import { type Header } from '@tanstack/react-table';
 import React from 'react';
-import type { Virtualizer } from '@tanstack/react-virtual';
 interface TableHeadCellProps<T> {
     t?: any;
     table: Table<T>;
     header: Header<T, unknown>;
     getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
-    columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
-    rowHeaderVirtualizer: Virtualizer<HTMLDivElement, HTMLTableRowElement>;
+    colSpan: any;
+    rowSpan: any;
 }
 declare const TableHeadCell: <RecordType extends object>(props: TableHeadCellProps<RecordType>) => React.JSX.Element;
 export default TableHeadCell;

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

@@ -3,7 +3,7 @@
 import { flexRender } from '@tanstack/react-table';
 import React, { useContext } from 'react';
 // import { CSS } from '@dnd-kit/utilities'
-
+// import type { Virtualizer } from '@tanstack/react-virtual'
 import { Button, Space } from 'antd';
 import { ArrowDown, ArrowUp, FilterFill, SortCancel } from 'becoxy-icons';
 import classNames from 'classnames';
@@ -23,8 +23,10 @@ const TableHeadCell = props => {
     getPopupContainer,
     table,
     t,
-    columnVirtualizer,
-    rowHeaderVirtualizer
+    // columnVirtualizer,
+    // rowHeaderVirtualizer,
+    colSpan,
+    rowSpan
   } = props;
   const {
     prefix,
@@ -37,7 +39,7 @@ const TableHeadCell = props => {
     locale
   } = useContext(TableContext);
   const isPinned = header.column.getIsPinned();
-  const isLastLeftPinnedColumn = isPinned === 'left' && header.column.getIsLastColumn('left');
+  // const isLastLeftPinnedColumn = isPinned === 'left' && header.column.getIsLastColumn('left')
   const isFirstRightPinnedColumn = isPinned === 'right' && header.column.getIsFirstColumn('right');
   const [selectedKeys, setSelectedKeys] = React.useState([]);
   const [visible, setVisible] = React.useState(false);
@@ -110,9 +112,9 @@ const TableHeadCell = props => {
   };
   const doFilter = type => {
     if (type) {
-      header.column.setFilterValue(selectedKeys);
+      header.column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? [''] : selectedKeys);
     } else {
-      header.column.setFilterValue('');
+      header.column.setFilterValue(undefined);
       setSelectedKeys([]);
     }
     setFilterChange(true);
@@ -200,57 +202,24 @@ const TableHeadCell = props => {
       // return dropdownContent;
     }
   });
-
-  // if (header.column.id === "#" || header.column.id === "selection_column") {
-  //   return (
-  //     <th
-  //       ref={el => {
-  //         if (el) columnVirtualizer.measureElement(el)
-  //       }}
-  //       data-index={header.id}
-  //       // ref={setNodeRef}
-  //       key={header.id}
-  //       colSpan={header.colSpan}
-  //       style={{
-  //         display: 'flex',
-  //         ...getCommonPinningStyles(header.column),
-  //         ...style,
-  //         width: header?.getSize() ?? header.column.getSize()
-  //       }}
-  //     >
-
-  //       {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-  //       {/* <div> */}
-
-  //       <div
-  //         {...{
-  //           onDoubleClick: () => header.column.resetSize(),
-
-  //           onMouseDown: header.getResizeHandler(),
-  //           onTouchStart: header.getResizeHandler(),
-
-  //           className: `resizer ${header.column.getIsResizing() ? "isResizing" : ""
-  //             }`,
-  //         }}
-  //       />
-
-  //       {/* </div> */}
-  //     </th>
-  //   )
-  // }
-
   return /*#__PURE__*/React.createElement("th", {
     // ref={setNodeRef}
     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
+      // [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
+      [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
+      [`${prefix}-grid-cell-text-center`]: originalColumn?.headerTextAlign === 'center',
+      [`${prefix}-grid-cell-text-right`]: originalColumn?.headerTextAlign === 'right'
     }),
+    colSpan: colSpan,
+    rowSpan: rowSpan,
     key: header.id,
     style: {
-      display: 'flex',
+      // display: 'flex',
       width: header.getSize(),
+      minWidth: header.getSize(),
+      maxWidth: header.getSize(),
       ...getCommonPinningStyles(header.column),
       ...style
     },
@@ -282,7 +251,7 @@ 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')
     })
-  }, cellContent)), !nonActionColumn.includes(header.id) && /*#__PURE__*/React.createElement("span", {
+  }, cellContent)), !nonActionColumn.includes(header.column.id) && header.subHeaders.length < 2 && /*#__PURE__*/React.createElement("span", {
     className: "ui-rc-header-trigger"
   }, header.column.getCanSort() && /*#__PURE__*/React.createElement("div", {
     style: {
@@ -331,12 +300,13 @@ const TableHeadCell = props => {
     onDoubleClick: () => header.column.resetSize(),
     onMouseDown: header.getResizeHandler(),
     onTouchStart: header.getResizeHandler(),
-    onMouseUp: () => {
-      requestAnimationFrame(() => {
-        columnVirtualizer.measure();
-        rowHeaderVirtualizer.measure();
-      });
-    },
+    // onMouseUp: () => {
+    //   requestAnimationFrame(() => {
+    //     columnVirtualizer.measure()
+    //     rowHeaderVirtualizer.measure()
+    //   })
+    // },
+
     className: `resizer ${header.column.getIsResizing() ? 'isResizing' : ''}`
   }));
 };

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

@@ -1,16 +1,15 @@
-import type { Column, HeaderGroup, Table } from '@tanstack/react-table';
-import type { VirtualItem, Virtualizer } from '@tanstack/react-virtual';
+import type { Column } from '@tanstack/react-table';
+import { type HeaderGroup, type Table } from '@tanstack/react-table';
 import React from 'react';
+import type { Virtualizer } from '@tanstack/react-virtual';
 interface TableHeadRowProps<T> {
-    columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
-    rowHeaderVirtualizer: Virtualizer<HTMLDivElement, HTMLTableRowElement>;
     headerGroup: HeaderGroup<T>;
+    table: Table<T>;
+    columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
     virtualPaddingLeft: number | undefined;
     virtualPaddingRight: number | undefined;
-    table: Table<T>;
     fixedLeftColumns: Column<T, unknown>[];
     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, headerGroup, }: TableHeadRowProps<any>) => React.JSX.Element;
 export default TableHeadRow;

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

@@ -1,90 +1,65 @@
 import { horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable';
+// import type { Virtualizer } from '@tanstack/react-virtual'
 // import type { Person } from "../../tanstack-table/makeData"
 import React from 'react';
 import { TableContext } from "../useContext";
 import TableHeadCell from "./TableHeadCell";
+// import { getCommonPinningStyles } from '../hook/utils'
+
 const TableHeadRow = ({
   table,
-  columnVirtualizer,
-  rowHeaderVirtualizer,
-  headerGroup,
-  virtualPaddingLeft,
-  virtualPaddingRight,
-  fixedLeftColumns,
-  fixedRightColumns,
-  rowHeaderVirtual
+  headerGroup
+
+  // columnVirtualizer,
+  // virtualPaddingLeft,
+  // virtualPaddingRight,
+  // fixedLeftColumns,
+  // fixedRightColumns
 }) => {
   const {
     prefix
   } = React.useContext(TableContext);
-  const virtualColumns = columnVirtualizer.getVirtualItems();
-  // const virtualColumns = columnVirtualizer.measurementsCache
 
-  // console.log('virtualColumns', virtualColumns)
+  // const virtualColumns = columnVirtualizer.getVirtualItems()
 
   const columnOrder = table.getState().columnOrder;
   return /*#__PURE__*/React.createElement("tr", {
-    key: headerGroup.id,
-    ref: el => {
-      if (el) rowHeaderVirtualizer.measureElement(el);
-    }
+    key: headerGroup.id
+    // ref={el => {
+    //   if (el) rowHeaderVirtualizer.measureElement(el)
+    // }}
     // data-index={rowHeaderVirtual?.index}
     ,
     "data-index": headerGroup.id,
     className: `${prefix}-grid-row`,
     style: {
-      display: 'flex',
-      width: '100%',
-      minHeight: rowHeaderVirtual?.size
+      // display: 'flex',
+      width: '100%'
+      // minHeight: rowHeaderVirtual?.size
     }
   }, /*#__PURE__*/React.createElement(SortableContext, {
     items: columnOrder,
     strategy: horizontalListSortingStrategy
-  }, fixedLeftColumns.length > 0 ? fixedLeftColumns.map(column => {
-    return /*#__PURE__*/React.createElement(TableHeadCell, {
-      columnVirtualizer: columnVirtualizer,
-      rowHeaderVirtualizer: rowHeaderVirtualizer,
-      key: column.id,
-      table: table,
-      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);
-    if (header && !isFixed) {
-      return /*#__PURE__*/React.createElement(TableHeadCell, {
-        key: header.id,
-        header: header,
-        table: table,
-        columnVirtualizer: columnVirtualizer,
-        rowHeaderVirtualizer: rowHeaderVirtualizer
-      });
+  }, headerGroup.headers.map(header => {
+    const columnRelativeDepth = header.depth - header.column.depth;
+    if (columnRelativeDepth > 1) {
+      return null;
     }
-  }),
-  //fake empty column to the right for virtualization scroll padding
-  fixedRightColumns.length > 0 ? fixedRightColumns.map(column => /*#__PURE__*/React.createElement(TableHeadCell, {
-    columnVirtualizer: columnVirtualizer,
-    rowHeaderVirtualizer: rowHeaderVirtualizer,
-    table: table,
-    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
+    let rowSpan = 1;
+    if (header.isPlaceholder) {
+      const leafs = header.getLeafHeaders();
+      rowSpan = leafs[leafs.length - 1].depth - header.depth;
     }
-  }) : null));
+    return /*#__PURE__*/React.createElement(TableHeadCell, {
+      key: header.id,
+      header: header,
+      table: table
+      // columnVirtualizer={columnVirtualizer}
+      // rowHeaderVirtualizer={rowHeaderVirtualizer}
+      ,
+      colSpan: header.colSpan,
+      rowSpan: rowSpan
+    });
+  })));
 };
 export default TableHeadRow;

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

@@ -0,0 +1 @@
+export declare function convertColumns(columns: any[]): any[];

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

@@ -0,0 +1,28 @@
+import { createColumnHelper } from '@tanstack/react-table';
+const columnHelper = createColumnHelper();
+export function convertColumns(columns) {
+  return columns.map(col => {
+    if (col.columns) {
+      // Group column
+      return columnHelper.group({
+        ...col,
+        columns: convertColumns(col.columns) // đệ quy
+      });
+    } else {
+      // Accessor column
+      let accessor;
+
+      // Ưu tiên accessorKey nếu có, nếu không thì dùng hàm row => row[col.id]
+      if (col.accessorKey) {
+        accessor = col.accessorKey;
+      } else if (col.id) {
+        accessor = row => row[col.id];
+      } else {
+        throw new Error('Column không có accessorKey hoặc id');
+      }
+      return columnHelper.accessor(accessor, {
+        ...col
+      });
+    }
+  });
+}

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

@@ -112,6 +112,7 @@ export function convertToTanStackColumns({
           }
         } else {
           return t ? t(headerText) : headerText;
+          // return field
         }
       },
       cell: props => {

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

@@ -44,6 +44,9 @@ export const getCommonPinningStyles = column => {
     position: isPinned ? "sticky" : "relative",
     width: column.getSize(),
     zIndex: isPinned ? 2 : 0
+    // border: '1px solid #e5e7eb',
+    // borderTop: 0,
+    // borderBottom: 0
   };
 };
 export const sumSize = items => {

package/es/table-component/style.scss

@@ -47,48 +47,23 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
     .#{$prefix}-grid-cell {
 
       padding: 7px 8px;
-      border-inline-end: 1px solid $tableBorderColor;
-      // border-bottom: 1px solid $tableBorderColor;
-      // &.#{$prefix}-grid-cell-fix-left-last {
-      //   &::after {
-      //     position: absolute;
-      //     top: 0;
-      //     right: 0;
-      //     bottom: -1px;
-      //     width: 30px;
-      //     transform: translateX(100%);
-      //     transition: box-shadow 0.3s;
-      //     content: "";
-      //     pointer-events: none;
-      //     box-shadow: inset 10px 0 8px -8px rgba(5, 5, 5, 0.09);
-      //   }
-      // }
-      // &.#{$prefix}-grid-cell-fix-right-first {
-      //   &::after {
-      //     position: absolute;
-      //     top: 0;
-      //     bottom: -1px;
-      //     left: 0;
-      //     width: 30px;
-      //     transform: translateX(-100%);
-      //     transition: box-shadow 0.3s;
-      //     content: "";
-      //     pointer-events: none;
-      //     box-shadow: inset -10px 0 8px -8px rgba(5, 5, 5, 0.09);
-      //   }
-      //   &::before {
-      //     content: "";
-      //     position: absolute;
-      //     inset-block: 0;
-      //     inset-inline-start: -1px;
-      //     border-inline-start: 1px solid #e0e0e0;
-      //   }
-      // }
+
+      &.#{$prefix}-grid-cell-text-center {
+        text-align: center;
+
+      }
+
+      &.#{$prefix}-grid-cell-text-right {
+        justify-content: flex-end;
+        text-align: right;
+
+      }
 
 
 
       &.#{$prefix}-grid-cell-ellipsis {
 
+
         .ui-rc_cell-content {
           width: 100%;
           overflow: hidden;
@@ -124,6 +99,7 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
 
       }
 
+    
 
       &.#{$prefix}-grid-cell-wrap {
         white-space: normal;
@@ -152,6 +128,16 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
       .#{$prefix}-grid-cell {
 
         background-color: $body-color;
+        // border-inline-end: 1px solid #e0e0e0;
+
+        &::before {
+          content: "";
+          position: absolute;
+          inset-block: 0;
+          right: 0;
+          inset-inline-start: 0px;
+          border-inline-end: 1px solid #e0e0e0;
+        }
 
         &.ui-rc-grid-cell-ellipsis {
 
@@ -195,6 +181,8 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
           justify-content: space-between;
           width: 100%;
           align-items: center;
+          position: relative;
+          z-index: 3;
         }
 
         .ui-rc-header-trigger {
@@ -216,6 +204,7 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
           position: absolute;
           right: 0;
           top: 0;
+          z-index: 3;
           touch-action: none;
           user-select: none;
           width: 5px;
@@ -267,9 +256,20 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
 
       .#{$prefix}-grid-cell {
         outline: none;
+        border-inline-end: 1px solid $tableBorderColor;
 
         background-color: $body-color;
 
+          &.#{$prefix}-grid-cell-ellipsis:not(:has(>.ui-rc_cell-content)) {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        word-break: keep-all;
+
+      }
+
+
+
         &.cell-editable {
 
           // padding: 0;
@@ -519,19 +519,19 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
         }
 
 
-        &.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;
-          }
-        }
+        // &.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;
+        //   }
+        // }
       }
 
     }
@@ -539,6 +539,7 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
     .#{$prefix}-grid-tfoot {
       .#{$prefix}-grid-cell {
         background-color: $body-color;
+        border-inline-end: 1px solid $tableBorderColor;
       }
     }
 
@@ -786,6 +787,16 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
     }
   }
 
+  .spinner-loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 4;
+    background-color: #ffffff80;
+  }
+
 
 
 }

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

@@ -15,10 +15,13 @@ type Props<T> = Omit<TableProps<T>, 'columns'> & {
     originData: T[];
     mergedFilterKeys: any;
     setMergedFilterKeys: any;
+    isFullScreen: boolean;
+    setIsFullScreen: Dispatch<SetStateAction<boolean>>;
     triggerFilter: Dispatch<SetStateAction<any>>;
     triggerSorter: Dispatch<SetStateAction<Sorter[]>>;
     onContextMenu?: (data: T) => (event: any) => void;
     triggerChangeColumns?: (args: any, keys: any) => void;
+    windowSize: any;
 };
 declare const Grid: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
 export default Grid;

package/es/table-component/table/Grid.js

@@ -45,6 +45,7 @@ const Grid = props => {
     height = 700,
     editAble,
     triggerChangeColumns,
+    infiniteScroll,
     ...rest
   } = props;
   const [columnResizeMode] = React.useState('onChange');
@@ -78,7 +79,8 @@ const Grid = props => {
       expanded,
       columnPinning,
       columnVisibility: columnHidden,
-      pagination: pagination ? paginationState : undefined,
+      pagination: pagination && !infiniteScroll ? paginationState : undefined,
+      // pagination: pagination ? paginationState : undefined,
       grouping,
       columnSizing,
       columnOrder,
@@ -120,12 +122,13 @@ const Grid = props => {
     getGroupedRowModel: getGroupedRowModel(),
     // onExpandedChange: setExpanded,
     getExpandedRowModel: getExpandedRowModel(),
-    getPaginationRowModel: pagination ? getPaginationRowModel() : undefined,
-    onPaginationChange: setPagination,
+    getPaginationRowModel: pagination && !infiniteScroll ? getPaginationRowModel() : undefined,
+    onPaginationChange: setPagination
+
     // onColumnVisibilityChange: setColumnVisibility,
     // onColumnPinningChange,
 
-    debugTable: true
+    // debugTable: true
   });
   React.useEffect(() => {
     if (isSelectionChange.isChange) {
@@ -229,7 +232,8 @@ const Grid = props => {
     triggerChangeColumns: triggerChangeColumns,
     columnHidden: columnHidden,
     setExpanded: setExpanded,
-    expanded: expanded
+    expanded: expanded,
+    infiniteScroll: infiniteScroll
   }))));
 };
 export default Grid;

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

@@ -0,0 +1,32 @@
+import { type Table } from "@tanstack/react-table";
+import type { CommandClick, ContextInfo, ContextMenuItem, PaginationConfig } from "../type";
+import React from "react";
+import type { Virtualizer } from "@tanstack/react-virtual";
+import type { Column } from "@tanstack/react-table";
+type Props<T> = {
+    prefix: string;
+    id: string;
+    tableContainerRef: React.RefObject<HTMLDivElement>;
+    height: number;
+    table: Table<T>;
+    summary?: boolean;
+    loading?: boolean;
+    commandClick?: (args: Omit<CommandClick<T>, 'rows'>) => void;
+    editAble?: boolean;
+    contextMenuItems?: ContextMenuItem[];
+    showEmptyText?: boolean;
+    contextMenuClick?: any;
+    contextMenuOpen?: (args: Omit<ContextInfo<T>, 'item'>) => void;
+    contextMenuHidden?: string[] | ((args?: Omit<ContextInfo<T>, 'item' | 'event'>) => string[]);
+    next?: () => void;
+    dataSource: T[];
+    pagination?: false | PaginationConfig;
+    infiniteScroll?: boolean;
+    columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
+    virtualPaddingLeft: number | undefined;
+    virtualPaddingRight: number | undefined;
+    fixedLeftColumns: Column<T, unknown>[];
+    fixedRightColumns: Column<T, unknown>[];
+};
+declare const TableWrapper: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
+export default TableWrapper;