es-grid-template 1.9.39 → 1.9.41

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

@@ -657,6 +657,7 @@ export type ToolbarItem = {
     title?: React.ReactNode;
     disabled?: boolean;
     hasMenu?: boolean;
+    fixedRight?: boolean;
     [key: string]: any;
 };
 export type LoadOptionsArgs = {

package/es/group-component/InternalTable.js

@@ -166,6 +166,16 @@ const InternalTable = props => {
       ...a
     });
   }, [columns]);
+
+  // React.useEffect(() => {
+  //     const a = getInvisibleColumns(columns)
+
+  //      const bcd = convertToObj(groupColumns)
+
+  //     setColumnVisibility({...a, ...bcd})
+
+  //   }, [columns, groupColumns])
+
   const [columnsHiddenKeys, setColumnsHiddenKeys] = useMergedState(undefined, {
     value: undefined
   });

package/es/group-component/TableContainerEdit.js

@@ -1432,6 +1432,221 @@ const TableContainerEdit = props => {
       triggerChangeData?.([...newData]);
     }
   };
+  const toolbarItemsTop = React.useMemo(() => {
+    if (!rowsFocus || rowsFocus.length === 0) {
+      return toolbarItems?.filter(it => it.position !== 'Bottom' && it.fixedRight !== false && it.visible !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER' && it.key !== 'DELETE_ROWS' && it.key !== 'INSERT_CHILDREN').map(item => {
+        if (item.key === 'ADD') {
+          return {
+            ...item,
+            template: () => {
+              return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'ADD' && /*#__PURE__*/React.createElement("div", {
+                className: classNames(`be-toolbar-item`, item?.className)
+              }, /*#__PURE__*/React.createElement(Dropdown.Button, {
+                overlayClassName: 'be-popup-container',
+                trigger: ['click'],
+                style: {
+                  color: '#28c76f',
+                  borderColor: '#28c76f'
+                },
+                className: 'toolbar-button toolbar-dropdown-button',
+                menu: {
+                  items: itemsAdd,
+                  onClick: e => handleAddMulti(item, Number(e.key))
+                }
+              }, /*#__PURE__*/React.createElement("span", {
+                style: {
+                  color: '#28c76f'
+                },
+                onClick: () => handleAddMulti(item, 1)
+              }, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item'))));
+            }
+          };
+        }
+        if (item.key === 'DELETE') {
+          return {
+            ...item,
+            template: () => {
+              return /*#__PURE__*/React.createElement("div", {
+                className: classNames(`be-toolbar-item`, item?.className)
+              }, /*#__PURE__*/React.createElement(Button, {
+                style: {
+                  color: '#eb4619',
+                  borderColor: '#eb4619'
+                },
+                variant: 'outlined',
+                onClick: () => handleDeleteAll(item),
+                className: "d-flex toolbar-button"
+              }, item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item'));
+            }
+          };
+        }
+        return {
+          ...item
+        };
+      });
+    }
+    return toolbarItems?.filter(it => it.position === 'Bottom' && it.visible !== false).map(item => {
+      if (item.key === 'ADD') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'ADD' && /*#__PURE__*/React.createElement("div", {
+              className: classNames(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/React.createElement(Dropdown.Button, {
+              overlayClassName: 'be-popup-container',
+              style: {
+                color: '#28c76f',
+                borderColor: '#28c76f'
+              },
+              className: 'toolbar-button toolbar-dropdown-button',
+              menu: {
+                items: itemsAdd,
+                onClick: e => handleAddMulti(item, Number(e.key))
+              }
+            }, /*#__PURE__*/React.createElement("span", {
+              style: {
+                color: '#28c76f'
+              },
+              onClick: () => handleAddMulti(item, 1)
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item'))));
+          }
+        };
+      }
+      if (item.key === 'DUPLICATE') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'DUPLICATE' && item.visible !== false && rowsFocus.length > 0 && /*#__PURE__*/React.createElement("div", {
+              className: classNames(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/React.createElement(Button, {
+              style: {
+                color: '#28c76f',
+                borderColor: '#28c76f'
+              },
+              variant: 'outlined',
+              onClick: handleDuplicate,
+              className: "d-flex toolbar-button"
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Duplicate') : 'Duplicate')));
+          }
+        };
+      }
+      if (item.key === 'INSERT_BEFORE') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+              className: classNames(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/React.createElement(Dropdown.Button, {
+              overlayClassName: 'be-popup-container',
+              style: {
+                color: '#28c76f',
+                borderColor: '#28c76f'
+              },
+              className: 'toolbar-button toolbar-dropdown-button',
+              menu: {
+                items: itemsAdd,
+                onClick: e => handleInsertBefore(item, Number(e.key))
+              }
+            }, /*#__PURE__*/React.createElement("span", {
+              style: {
+                color: '#28c76f'
+              },
+              onClick: () => handleInsertBefore(item, 1)
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before'))));
+          }
+        };
+      }
+      if (item.key === 'INSERT_AFTER') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+              className: classNames(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/React.createElement(Dropdown.Button, {
+              overlayClassName: 'be-popup-container',
+              style: {
+                color: '#28c76f',
+                borderColor: '#28c76f'
+              },
+              className: 'toolbar-button toolbar-dropdown-button',
+              menu: {
+                items: itemsAdd,
+                onClick: e => handleInsertAfter(item, Number(e.key))
+              }
+            }, /*#__PURE__*/React.createElement("span", {
+              style: {
+                color: '#28c76f'
+              },
+              onClick: () => handleInsertAfter(item, 1)
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after'))));
+          }
+        };
+      }
+      if (item.key === 'INSERT_CHILDREN') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+              className: classNames(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/React.createElement(Button, {
+              style: {
+                color: '#28c76f',
+                borderColor: '#28c76f'
+              },
+              variant: 'outlined',
+              onClick: () => handleInsertChild(item),
+              className: "d-flex toolbar-button"
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Insert item children') : 'Insert item children')));
+          }
+        };
+      }
+      if (item.key === 'DELETE') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/React.createElement("div", {
+              className: classNames(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/React.createElement(Button, {
+              style: {
+                color: '#eb4619',
+                borderColor: '#eb4619'
+              },
+              variant: 'outlined',
+              onClick: handleDeleteAll,
+              className: "d-flex toolbar-button"
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item'));
+          }
+        };
+      }
+      if (item.key === 'DELETE_ROWS') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/React.createElement("div", {
+              className: classNames(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/React.createElement(Button, {
+              style: {
+                color: '#eb4619',
+                borderColor: '#eb4619'
+              },
+              variant: 'outlined',
+              onClick: () => handleDeleteRows(item),
+              className: "d-flex toolbar-button"
+            }, t ? `${t('Delete')} ${rowsFocus.length} ${t('row')}` : `Delete ${rowsFocus.length} item`));
+          }
+        };
+      }
+      return {
+        ...item
+      };
+    });
+  }, [handleAddMulti, handleDeleteAll, handleDeleteRows, handleDuplicate, handleInsertAfter, handleInsertBefore, handleInsertChild, itemsAdd, rowsFocus, t, toolbarItems]);
+  const toolbarItemTopRight = React.useMemo(() => {
+    if (!toolbarItems) {
+      return undefined;
+    }
+    return toolbarItems.filter(it => it.position !== 'Bottom' && it.fixedRight && it.visible !== false);
+  }, [toolbarItems]);
   const toolbarItemsBottom = React.useMemo(() => {
     if (!rowsFocus || rowsFocus.length === 0) {
       return toolbarItems?.filter(it => it.position === 'Bottom' && it.visible !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER' && it.key !== 'DELETE_ROWS' && it.key !== 'INSERT_CHILDREN').map(item => {
@@ -1900,7 +2115,7 @@ const TableContainerEdit = props => {
       overflow: 'hidden'
     }
   }, /*#__PURE__*/React.createElement(Toolbar, {
-    items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
+    items: toolbarItemsTop ?? [],
     mode: 'scroll'
   })), /*#__PURE__*/React.createElement("div", {
     style: {
@@ -1917,7 +2132,15 @@ const TableContainerEdit = props => {
     showTotal: (total, range) =>
     // @ts-ignore
     `${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
-  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
+  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, toolbarItemTopRight && /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement(Toolbar, {
+    items: toolbarItemTopRight,
+    mode: 'responsive'
+  })), fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
     fontSize: 16,
     onClick: () => {
       setIsFullScreen(!isFullScreen);
@@ -1959,7 +2182,10 @@ const TableContainerEdit = props => {
       originData,
       wrapSettings,
       recordDoubleClick,
-      selectionSettings,
+      selectionSettings: {
+        ...selectionSettings,
+        checkboxOnly: true
+      },
       isSelectionChange,
       setIsSelectionChange,
       // onContextMenu,

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

@@ -194,10 +194,10 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
         value: any;
         rowData: RecordType;
     }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
-    onCellStyles?: Omit<CSSProperties, "width" | "minWidth" | "right" | "left" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "right" | "left" | "position" | "display">);
-    onCellHeaderStyles?: Omit<CSSProperties, "width" | "minWidth" | "right" | "left" | "position" | "display"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "right" | "left" | "position" | "display">);
+    onCellStyles?: Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position">);
+    onCellHeaderStyles?: Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position">);
     onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
-    onCellFooterStyles?: Omit<CSSProperties, "width" | "minWidth" | "right" | "left" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "right" | "left" | "position" | "display">);
+    onCellFooterStyles?: Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position">);
     getValue?: (row: any, rowIndex: number) => any;
     getCellProps?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").CellProps;
     headerCellProps?: import("./../../grid-component/type").CellProps;

package/es/group-component/useContext.d.ts

@@ -1,5 +1,5 @@
 import type { Dispatch, SetStateAction } from 'react';
-import type { ColumnTable, ExpandableConfig, IFormat, IWrapSettings, Locale, PaginationConfig, RangeState, RecordDoubleClickEventArgs, RowClassName, SelectionSettings, SourceFilter } from "./../grid-component/type";
+import type { ColumnTable, ExpandableConfig, IFormat, IGroupSetting, IWrapSettings, Locale, PaginationConfig, RangeState, RecordDoubleClickEventArgs, RowClassName, SelectionSettings, SourceFilter } from "./../grid-component/type";
 import type { SubmitHandler } from "react-hook-form";
 import type { ExpandedState, Row, Table } from '@tanstack/react-table';
 export type IPositionCell = {
@@ -84,6 +84,7 @@ export interface IContext<T> {
     onRowFooterStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | (() => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
     dataSourceFilter?: SourceFilter[];
     groupColumns?: string[];
+    groupSetting?: IGroupSetting;
 }
 export declare const TableContext: import("react").Context<IContext<any>>;
 export type ContextCellChange = {

package/es/table-component/TableContainer.js

@@ -89,7 +89,6 @@ const TableContainer = props => {
   const [tableHeight, settableHeight] = React.useState(0);
   const [focusedCell, setFocusedCell] = React.useState(undefined);
   React.useEffect(() => {
-    // const totalHeight = minHeight ?? height
     const totalHeight = getTableHeight(height, minHeight);
     if (totalHeight) {
       const topHeight = topToolbarRef.current ? topToolbarRef.current.offsetHeight : 0;
@@ -197,6 +196,24 @@ const TableContainer = props => {
       // })
     }
   }, [columnSizingInfo]);
+  const toolbarItemTop = React.useMemo(() => {
+    if (!toolbarItems) {
+      return undefined;
+    }
+    return toolbarItems.filter(it => it.position !== 'Bottom' && it.fixedRight !== false);
+  }, [toolbarItems]);
+  const toolbarItemBottom = React.useMemo(() => {
+    if (!toolbarItems) {
+      return undefined;
+    }
+    return toolbarItems.filter(it => it.position === 'Bottom');
+  }, [toolbarItems]);
+  const toolbarItemTopRight = React.useMemo(() => {
+    if (!toolbarItems) {
+      return undefined;
+    }
+    return toolbarItems.filter(it => it.position !== 'Bottom' && it.fixedRight);
+  }, [toolbarItems]);
   const triggerCommandClick = args => {
     // const { id: idCommand, rowId, rowData, index } = args
 
@@ -219,7 +236,8 @@ const TableContainer = props => {
     style: {
       display: 'flex',
       justifyContent: 'space-between',
-      alignItems: 'center'
+      alignItems: 'center',
+      gap: '1rem'
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
@@ -227,7 +245,7 @@ const TableContainer = props => {
       overflow: 'hidden'
     }
   }, /*#__PURE__*/React.createElement(Toolbar, {
-    items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom')
+    items: toolbarItemTop ?? []
     // mode={'scroll'}
     ,
     mode: toolbarMode
@@ -246,7 +264,15 @@ const TableContainer = props => {
     showTotal: (totalItems, range) =>
     // @ts-ignore
     `${range[0]}-${range[1]} / ${totalItems} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
-  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
+  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, toolbarItemTopRight && /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement(Toolbar, {
+    items: toolbarItemTopRight,
+    mode: toolbarMode
+  })), fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
     fontSize: 16,
     onClick: () => {
       setIsFullScreen(!isFullScreen);
@@ -341,7 +367,17 @@ const TableContainer = props => {
     fixedRightColumns: fixedRightColumns
   }))), /*#__PURE__*/React.createElement("div", {
     ref: bottomToolbarRef
-  }, pagination && !infiniteScroll && /*#__PURE__*/React.createElement(Pagination, _extends({
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement(Toolbar, {
+    items: toolbarItemBottom ?? []
+    // mode={'scroll'}
+    ,
+    mode: toolbarMode
+  })), pagination && !infiniteScroll && /*#__PURE__*/React.createElement(Pagination, _extends({
     pageSizeOptions: [20, 50, 100, 1000, 10000],
     rootClassName: 'pagination-template',
     showSizeChanger: true,

package/es/table-component/TableContainerEdit.js

@@ -1575,7 +1575,7 @@ const TableContainerEdit = props => {
   const toolbarItemsTop = React.useMemo(() => {
     // Chưa có dòng| ô được chọn
     if (!rowsFocus || rowsFocus.length === 0) {
-      return toolbarItems?.filter(it => it.position !== 'Bottom' && it.visible !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER' && it.key !== 'DELETE_ROWS' && it.key !== 'INSERT_CHILDREN').map(item => {
+      return toolbarItems?.filter(it => it.position !== 'Bottom' && it.visible !== false && it.fixedRight !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER' && it.key !== 'DELETE_ROWS' && it.key !== 'INSERT_CHILDREN').map(item => {
         if (item.key === 'ADD') {
           return {
             ...item,
@@ -1636,7 +1636,7 @@ const TableContainerEdit = props => {
         };
       });
     }
-    return toolbarItems?.filter(it => it.position !== 'Bottom' && it.visible !== false).map(item => {
+    return toolbarItems?.filter(it => it.position !== 'Bottom' && it.visible !== false && it.fixedRight !== false).map(item => {
       if (item.key === 'ADD') {
         return {
           ...item,
@@ -1824,6 +1824,12 @@ const TableContainerEdit = props => {
       };
     });
   }, [handleAddMulti, handleDeleteAll, handleDeleteRows, handleDuplicate, handleInsertAfter, handleInsertBefore, handleInsertChild, itemsAdd, rowsFocus, t, toolbarItems]);
+  const toolbarItemTopRight = React.useMemo(() => {
+    if (!toolbarItems) {
+      return undefined;
+    }
+    return toolbarItems.filter(it => it.position !== 'Bottom' && it.fixedRight);
+  }, [toolbarItems]);
   const triggerCommandClick = args => {
     const {
       id: idCommand,
@@ -2032,7 +2038,8 @@ const TableContainerEdit = props => {
     style: {
       display: 'flex',
       justifyContent: 'space-between',
-      alignItems: 'center'
+      alignItems: 'center',
+      gap: '1rem'
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
@@ -2067,7 +2074,15 @@ const TableContainerEdit = props => {
     showTotal: (total, range) =>
     // @ts-ignore
     `${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
-  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
+  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, toolbarItemTopRight && /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement(Toolbar, {
+    items: toolbarItemTopRight,
+    mode: toolbarMode
+  })), fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
     fontSize: 16,
     onClick: () => {
       setIsFullScreen(!isFullScreen);

package/es/table-virtuoso/body/TableBodyCell.js

@@ -244,7 +244,12 @@ const TableBodyCell = props => {
       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"
-    }))), renderCellIndex({
+    }))), isLastLeftPinnedColumn ? /*#__PURE__*/React.createElement("span", {
+      className: "ui-rc_cell-content"
+    }, renderCellIndex({
+      cell,
+      pagination
+    })) : renderCellIndex({
       cell,
       pagination
     }));
@@ -335,7 +340,7 @@ const TableBodyCell = props => {
     className: classNames(`${prefix}-grid-cell`, {
       // [`${prefix}-grid-cell-ellipsis`]: true,
 
-      [`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content')),
+      [`${prefix}-grid-cell-ellipsis`]: !isLastLeftPinnedColumn && !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content')),
       [`${prefix}-grid-cell-text-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content'),
       // [`${prefix}-grid-cell-selected`]: isCellSelected,
 
@@ -466,6 +471,17 @@ const TableBodyCell = props => {
     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"
-  }))), groupValue ? groupValue : cellContent) : /*#__PURE__*/React.createElement(React.Fragment, null, groupValue ? groupValue : cellContent));
+  }))), groupValue ? groupValue : cellContent) : /*#__PURE__*/React.createElement(React.Fragment, null, isLastLeftPinnedColumn ? /*#__PURE__*/React.createElement("div", {
+    className: classNames('ui-rc_cell-content', {
+      [`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content')),
+      [`${prefix}-grid-cell-text-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content'),
+      // [`${prefix}-grid-cell-selected`]: isCellSelected,
+
+      [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
+      [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
+      [`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === 'center',
+      [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right' || columnMeta.type === 'number'
+    })
+  }, groupValue ? groupValue : cellContent) : groupValue ? groupValue : cellContent));
 };
 export default TableBodyCell;

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

@@ -234,6 +234,10 @@ export function groupArrayByColumns(arr, columns) {
 
       columns.forEach((column, index) => {
         const value = item[column];
+        if (value === null || value === undefined) {
+          // Nếu giá trị nhóm là null/undefined thì bỏ qua cột này
+          return;
+        }
 
         // Tạo key unique cho group dựa trên value của cột
         // Tìm existing item ở level hiện tại

package/es/table-virtuoso/style.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 type GridProps = {
     $theme: {
-        theme?: "light" | "dark";
+        theme?: 'light' | 'dark';
         backgroundColor?: string;
         color?: string;
     };

package/es/table-virtuoso/style.js

@@ -1,14 +1,14 @@
-import styled from "styled-components";
-const color = "#000000de";
-const BgColor = "#ffffff";
-const rowSelectedBg = "#FEF2EF";
-const cellSelectedBg = "#F3F8FF";
-const borderSelectedColor = "#0550C5";
-const tableBorderColor = "#e0e0e0";
-const tableBorderColorDark = "#44485E";
-const BgColorDark = "#343e59";
-const colorDark = "#e6e4f3e6";
+import styled from 'styled-components';
+const color = '#000000de';
+const BgColor = '#ffffff';
+const rowSelectedBg = '#FEF2EF';
+const cellSelectedBg = '#F3F8FF';
+const borderSelectedColor = '#0550C5';
+const tableBorderColor = '#e0e0e0';
+const tableBorderColorDark = '#44485E';
+const BgColorDark = '#343e59';
+const colorDark = '#e6e4f3e6';
 export const GridStyle = styled.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-rs980s-0"
-})(["&.", "-grid{color:", ";font-size:13px;background-color:", ";table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";.", "-grid-thead{&:has(.resizer.isResizing){.", "-grid-cell{touch-action:none;user-select:none;}}.", "-grid-cell{background-color:#ffffff;&:has(.resizer.isResizing){touch-action:none;user-select:none;}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:5px;}}}tbody{.", "-grid-row{&.", "-grid-row-parent{.", "-grid-cell{font-weight:600;background-color:#f5f5f5;}}}}.", "-grid-tfoot{z-index:3 !important;.ui-rc-grid-footer-row{.ui-rc-grid-cell{border-top:1px solid ", ";border-bottom:1px solid ", ";font-weight:500;}}}.", "-grid-cell{padding:5px 8px;.class-content:has(*){background:lightblue;}.class-content:not(:has(*)){background:lightgreen;}&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-righ{text-align:right;justify-content:flex-end;}}.", "-grid-cell:not(:has(*)){&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{text-align:right;justify-content:flex-end;}&.", "-grid-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}}&.", "-grid-light{.", "-grid-container{.", "-grid-thead{z-index:3 !important;background-color:", ";font-weight:500;.", "-grid-cell{font-weight:inherit;color:", ";background-color:#ffffff;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";}}tbody{background-color:", ";color:", ";.", "-grid-row{&.ui-rc-grid-row-selected{.", "-grid-cell{background-color:", ";}}}.", "-grid-cell{outline:none;background-color:#ffffff;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-selected{background-color:", " !important;}&.disable{background-color:#f0f0f0;}&.cell-editable{user-select:none;&.cell-border-top{&::after{content:\"\";position:absolute;top:0px;left:0;height:1px;width:100%;border-top:1px solid ", ";pointer-events:none;z-index:1;}}&.cell-border-bottom{border-bottom:1px solid ", ";}&.cell-border-left{&::before{content:\"\";position:absolute;top:0;left:0;height:102%;width:1px;border-left:1px solid ", ";pointer-events:none;z-index:1;}}&.cell-border-right{border-inline-end:1px solid ", ";}&.cell-paste-border-top{&::after{content:\"\";position:absolute;top:0px;left:0;height:1px;width:100%;border-top:1px dashed #949494;pointer-events:none;z-index:1;}&.ui-rc-grid-cell-fix-left-last{&::after{left:-100%;}}&.ui-rc-grid-cell-fix-right-first{&::after{left:100%;}}}&.cell-paste-border-bottom{border-bottom:1px dashed #949494;}&.cell-paste-border-left{&::before{content:\"\";position:absolute;top:0;left:0;height:102%;width:1px;border-left:1px dashed #949494;pointer-events:none;z-index:1;}}&.cell-paste-border-right{border-inline-end:1px dashed #949494;}.dragging-point{width:6px;height:6px;position:absolute;cursor:crosshair;right:0px;bottom:0px;&.hidden{display:none;}.dot-point{position:absolute;width:6px;height:6px;border-radius:0px;background-color:", ";bottom:0;right:0;}}}&.cell-editing{padding:0;&:focus-visible{outline:none;}.ant-form-item,.ant-row.ant-form-item-row,.ant-col.ant-form-item-control,.ant-form-item-control-input,.ant-form-item-control-input-content,.ant-input{height:100% !important;&:focus-visible{outline:none;}}textarea.ant-input{line-height:1.8;height:36px !important;min-height:36px !important;}input.be-cell-editing,.ant-picker,.ui-rc-select-selector,.ui-rc-table-select-selector{padding-inline:7px;}.", "-checkbox-wrapper{.", "-checkbox{background-color:red;}.", "-checkbox-input{&:focus-visible{outline:none;}}}.ant-input,.ant-picker{border-radius:0;}.ant-color-picker-trigger{height:100%;border-radius:0;.ant-color-picker-color-block{height:100%;width:100%;}}.", "-table-select-single .", "-table-select-selector,.", "-select-single .", "-select-selector,.ui-rc-table-select-selector{border-radius:0 !important;}.", "-table-select-single:not(.", "-table-select-customize-input){.", "-table-select-selector{.", "-table-select-selection-search-input{height:auto;}}}}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}}"], props => props.$prefix, color, BgColor, props => props.$prefix, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, rowSelectedBg, props => props.$prefix, tableBorderColor, tableBorderColor, cellSelectedBg, borderSelectedColor, borderSelectedColor, borderSelectedColor, borderSelectedColor, borderSelectedColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);
+})(["&.", "-grid{color:", ";font-size:13px;background-color:", ";table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";.", "-grid-thead{&:has(.resizer.isResizing){.", "-grid-cell{touch-action:none;user-select:none;}}.", "-grid-cell{background-color:#ffffff;&:has(.resizer.isResizing){touch-action:none;user-select:none;}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:5px;}}}tbody{.", "-grid-row{&.", "-grid-row-parent{.", "-grid-cell{font-weight:600;background-color:#f5f5f5;}}}}.", "-grid-tfoot{z-index:3 !important;.ui-rc-grid-footer-row{.ui-rc-grid-cell{border-top:1px solid ", ";border-bottom:1px solid ", ";font-weight:500;}}}.", "-grid-cell{padding:5px 8px;&.", "-grid-cell-fix-left-last{.", "-grid-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}&::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);}}&.", "-grid-cell-fix-right-first{.", "-grid-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}&::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;}}.class-content:has(*){background:lightblue;}.class-content:not(:has(*)){background:lightgreen;}&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-righ{text-align:right;justify-content:flex-end;}}.", "-grid-cell:not(:has(*)){&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{text-align:right;justify-content:flex-end;}&.", "-grid-cell-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}}&.", "-grid-light{.", "-grid-container{.", "-grid-thead{z-index:3 !important;background-color:", ";font-weight:500;.", "-grid-cell{font-weight:inherit;color:", ";background-color:#ffffff;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";}}tbody{background-color:", ";color:", ";.", "-grid-row{&.ui-rc-grid-row-selected{.", "-grid-cell{background-color:", ";}}}.", "-grid-cell{outline:none;background-color:#ffffff;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-selected{background-color:", " !important;}&.disable{background-color:#f0f0f0;}&.cell-editable{user-select:none;&.cell-border-top{&::after{content:'';position:absolute;top:0px;left:0;height:1px;width:100%;border-top:1px solid ", ";pointer-events:none;z-index:1;}}&.cell-border-bottom{border-bottom:1px solid ", ";}&.cell-border-left{&::before{content:'';position:absolute;top:0;left:0;height:102%;width:1px;border-left:1px solid ", ";pointer-events:none;z-index:1;}}&.cell-border-right{border-inline-end:1px solid ", ";}&.cell-paste-border-top{&::after{content:'';position:absolute;top:0px;left:0;height:1px;width:100%;border-top:1px dashed #949494;pointer-events:none;z-index:1;}&.ui-rc-grid-cell-fix-left-last{&::after{left:-100%;}}&.ui-rc-grid-cell-fix-right-first{&::after{left:100%;}}}&.cell-paste-border-bottom{border-bottom:1px dashed #949494;}&.cell-paste-border-left{&::before{content:'';position:absolute;top:0;left:0;height:102%;width:1px;border-left:1px dashed #949494;pointer-events:none;z-index:1;}}&.cell-paste-border-right{border-inline-end:1px dashed #949494;}.dragging-point{width:6px;height:6px;position:absolute;cursor:crosshair;right:0px;bottom:0px;&.hidden{display:none;}.dot-point{position:absolute;width:6px;height:6px;border-radius:0px;background-color:", ";bottom:0;right:0;}}}&.cell-editing{padding:0;&:focus-visible{outline:none;}.ant-form-item,.ant-row.ant-form-item-row,.ant-col.ant-form-item-control,.ant-form-item-control-input,.ant-form-item-control-input-content,.ant-input{height:100% !important;&:focus-visible{outline:none;}}textarea.ant-input{line-height:1.8;height:36px !important;min-height:36px !important;}input.be-cell-editing,.ant-picker,.ui-rc-select-selector,.ui-rc-table-select-selector{padding-inline:7px;}.", "-checkbox-wrapper{.", "-checkbox{background-color:red;}.", "-checkbox-input{&:focus-visible{outline:none;}}}.ant-input,.ant-picker{border-radius:0;}.ant-color-picker-trigger{height:100%;border-radius:0;.ant-color-picker-color-block{height:100%;width:100%;}}.", "-table-select-single .", "-table-select-selector,.", "-select-single .", "-select-selector,.ui-rc-table-select-selector{border-radius:0 !important;}.", "-table-select-single:not(.", "-table-select-customize-input){.", "-table-select-selector{.", "-table-select-selection-search-input{height:auto;}}}}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}}"], props => props.$prefix, color, BgColor, props => props.$prefix, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, rowSelectedBg, props => props.$prefix, tableBorderColor, tableBorderColor, cellSelectedBg, borderSelectedColor, borderSelectedColor, borderSelectedColor, borderSelectedColor, borderSelectedColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);

package/es/table-virtuoso/table/TableContainer.js

@@ -109,6 +109,18 @@ const TableContainer = props => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, []);
+  const toolbarItemTop = React.useMemo(() => {
+    if (!toolbarItems) {
+      return undefined;
+    }
+    return toolbarItems.filter(it => it.position !== 'Bottom' && it.fixedRight !== false);
+  }, [toolbarItems]);
+  const toolbarItemTopRight = React.useMemo(() => {
+    if (!toolbarItems) {
+      return undefined;
+    }
+    return toolbarItems.filter(it => it.position !== 'Bottom' && it.fixedRight);
+  }, [toolbarItems]);
   const triggerCommandClick = args => {
     // const { id: idCommand, rowId, rowData, index } = args
 
@@ -181,7 +193,7 @@ const TableContainer = props => {
       overflow: 'hidden'
     }
   }, /*#__PURE__*/React.createElement(Toolbar, {
-    items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
+    items: toolbarItemTop ?? [],
     mode: toolbarMode
   })), /*#__PURE__*/React.createElement("div", {
     style: {
@@ -198,7 +210,15 @@ const TableContainer = props => {
     showTotal: (totalItems, range) =>
     // @ts-ignore
     `${range[0]}-${range[1]} / ${totalItems} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
-  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
+  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, toolbarItemTopRight && /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement(Toolbar, {
+    items: toolbarItemTopRight,
+    mode: toolbarMode
+  })), fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
     fontSize: 16,
     onClick: () => {
       setIsFullScreen(!isFullScreen);