es-grid-template 1.9.46 → 1.9.48

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

@@ -356,6 +356,8 @@ export type TableProps<RecordType = AnyObject> = {
     locale?: Locale;
     /** Cấu hình wrap text */
     wrapSettings?: IWrapSettings;
+    /** Hiển thị grid line */
+    gridLines?: "Both" | "Horizontal" | "Vertical" | "None";
     /** Bật chế độ tải dữ liệu vô hạn */
     infiniteScroll?: boolean;
     /** Hàm gọi khi cuộn đến cuối */

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" | "left" | "right" | "display" | "minWidth" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "width" | "left" | "right" | "display" | "minWidth" | "position">);
-    onCellHeaderStyles?: Omit<CSSProperties, "width" | "left" | "right" | "display" | "minWidth" | "position"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "left" | "right" | "display" | "minWidth" | "position">);
+    onCellStyles?: Omit<CSSProperties, "position" | "display" | "left" | "minWidth" | "right" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "position" | "display" | "left" | "minWidth" | "right" | "width">);
+    onCellHeaderStyles?: Omit<CSSProperties, "position" | "display" | "left" | "minWidth" | "right" | "width"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "display" | "left" | "minWidth" | "right" | "width">);
     onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
-    onCellFooterStyles?: Omit<CSSProperties, "width" | "left" | "right" | "display" | "minWidth" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "left" | "right" | "display" | "minWidth" | "position">);
+    onCellFooterStyles?: Omit<CSSProperties, "position" | "display" | "left" | "minWidth" | "right" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "display" | "left" | "minWidth" | "right" | "width">);
     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/table-component/TableContainer.js

@@ -244,7 +244,7 @@ const TableContainer = props => {
       flex: 1,
       overflow: 'hidden'
     }
-  }, /*#__PURE__*/React.createElement(Toolbar, {
+  }, toolbarItemTop && toolbarItemTop?.length > 0 && /*#__PURE__*/React.createElement(Toolbar, {
     items: toolbarItemTop ?? []
     // mode={'scroll'}
     ,
@@ -264,7 +264,7 @@ 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, toolbarItemTopRight && /*#__PURE__*/React.createElement("div", {
+  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, toolbarItemTopRight && toolbarItemTopRight.length > 0 && /*#__PURE__*/React.createElement("div", {
     style: {
       flex: 1,
       overflow: 'hidden'
@@ -367,7 +367,7 @@ const TableContainer = props => {
     fixedRightColumns: fixedRightColumns
   }))), /*#__PURE__*/React.createElement("div", {
     ref: bottomToolbarRef
-  }, /*#__PURE__*/React.createElement("div", {
+  }, toolbarItemBottom && toolbarItemBottom.length > 0 && false && /*#__PURE__*/React.createElement("div", {
     style: {
       flex: 1,
       overflow: 'hidden'

package/es/table-component/TableContainerEdit.js

@@ -2046,7 +2046,7 @@ const TableContainerEdit = props => {
       flex: 1,
       overflow: 'hidden'
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, toolbarItemsTop && toolbarItemsTop.length > 0 && /*#__PURE__*/React.createElement("div", {
     className: classNames('ui-rc-toolbar-bottom border-0', {
       'ui-rc-toolbar-bottom_border-bottom': !pagination || infiniteScroll
     })

package/es/table-component/body/EditableCell.js

@@ -308,13 +308,13 @@ const EditableCell = props => {
 
         //  chỉ nhận giá trị dạng HH:mm | mm:HH => convert
 
-        let time = value ?? null;
+        let time = value ?? undefined;
         const typeTime = getDateValueType(value);
         if (typeTime === 'time') {
-          time = value ? dayjs(value, timeFormat) : null;
+          time = value ? dayjs(value, timeFormat) : undefined;
         } else {
-          const abc = moment(value).format(timeFormat);
-          time = abc ? dayjs(abc, timeFormat) : null;
+          const abc = value ? moment(value).format(timeFormat) : undefined;
+          time = abc ? dayjs(abc, timeFormat) : undefined;
         }
         const maxTimeValue = !isEmpty(column.maxTime) ? dayjs(column.maxTime).format(timeFormat) : null;
         const minTimeValue = !isEmpty(column.minTime) ? dayjs(column.minTime).format(timeFormat) : null;
@@ -351,7 +351,7 @@ const EditableCell = props => {
             } else {
               // const datetime = dayjs(dateString as string, timeFormat, true);
 
-              const newVal = moment(newDate.toDate()).format();
+              const newVal = newDate ? moment(newDate.toDate()).format() : undefined;
 
               // const newVal = datetime.isValid() ? moment(datetime.toDate()).format() : ''
               onChange(newVal);
@@ -373,7 +373,7 @@ const EditableCell = props => {
               newValue = newState;
             } else {
               const datetime = dayjs(newState, timeFormat, true);
-              const newVal = datetime.isValid() ? moment(datetime.toDate()).format() : '';
+              const newVal = datetime.isValid() ? moment(datetime.toDate()).format() : undefined;
               onChange(newVal);
               newValue = newVal;
             }

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

@@ -182,8 +182,12 @@ const TableBodyCell = props => {
   const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
   const [isOpenTooltip, setIsOpenTooltip] = React.useState(false);
   const record = cell.row.original;
+  const allRows = table.getRowModel().flatRows;
+  const rowNumber = allRows.findIndex(it => it.id === cell.row.id);
   const columnMeta = React.useMemo(() => cell.column.columnDef.meta ?? {}, [cell.column.columnDef.meta]);
-  const cellStyles = typeof columnMeta.onCellStyles === 'function' ? columnMeta.onCellStyles(cell.getValue(), cell) : columnMeta.onCellStyles;
+  const cellStyles1 = typeof columnMeta.onCellStyles === 'function' ? columnMeta.onCellStyles(cell.getValue(), cell) : columnMeta.onCellStyles;
+  const cellStyles2 = typeof columnMeta.getCellProps === 'function' ? columnMeta.getCellProps(cell.getValue(), record, rowNumber).style : undefined;
+  const cellStyles = cellStyles2 ?? cellStyles1;
 
   // const tooltipContent: any = (isOpenTooltip === false)
   //   ? ''
@@ -191,8 +195,6 @@ const TableBodyCell = props => {
   //     ? (typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({ value: cell.getValue(), rowData: record }) : columnMeta.tooltipDescription)
   //     : cell.getValue()
 
-  const allRows = table.getRowModel().flatRows;
-  const rowNumber = allRows.findIndex(it => it.id === cell.row.id);
   const colIndex = cell.column.getIndex();
   const isPinned = cell.column.getIsPinned();
   const isLastLeftPinnedColumn = isPinned === "left" && cell.column.getIsLastColumn("left");

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

@@ -57,7 +57,9 @@ const TableHeadCell2 = props => {
   const originalColumn = column.columnDef.meta ?? {};
   const fieldOriginalKey = originalColumn?.fieldOriginal;
   const fieldOriginal = fieldOriginalKey ? visibleCols.find(it => it.id === fieldOriginalKey) : undefined;
-  const cellStyles = typeof originalColumn.onCellHeaderStyles === 'function' ? originalColumn.onCellHeaderStyles(header) : originalColumn.onCellHeaderStyles;
+  const cellStyles1 = typeof originalColumn.onCellHeaderStyles === 'function' ? originalColumn.onCellHeaderStyles(header) : originalColumn.onCellHeaderStyles;
+  const cellStyles2 = originalColumn?.headerCellProps?.style ?? undefined;
+  const cellStyles = cellStyles2 ?? cellStyles1;
   const filtered = ((fieldOriginal ? fieldOriginal.getFilterValue() : column.getFilterValue()) ?? []).length > 0;
 
   // const cellContent =  originalColumn.headerTemplate ? originalColumn.headerTemplate : (t ? t(originalColumn.headerText) : originalColumn.headerText) 

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

@@ -24,7 +24,9 @@ const TableHeadGroupCell = props => {
   const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
   const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');
   const originalColumn = column.columnDef.meta ?? {};
-  const cellStyles = typeof originalColumn.onCellHeaderStyles === 'function' ? originalColumn.onCellHeaderStyles(header) : originalColumn.onCellHeaderStyles;
+  const cellStyles1 = typeof originalColumn.onCellHeaderStyles === 'function' ? originalColumn.onCellHeaderStyles(header) : originalColumn.onCellHeaderStyles;
+  const cellStyles2 = originalColumn?.headerCellProps?.style ?? undefined;
+  const cellStyles = cellStyles2 ?? cellStyles1;
 
   // const cellContent = originalColumn.headerTemplate ? originalColumn.headerTemplate : (t ? t(originalColumn.headerText) : originalColumn.headerText)
 

package/es/table-component/style.js

@@ -48,4 +48,4 @@ const colorDark = '#e6e4f3e6 ';
 export const GridStyle = styled.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-hdqm5k-0"
-})(["&.", "-grid{color:", ";font-size:", ";background-color:", ";font-family:", ";&.", "-grid-editable{.", "-grid-container{.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#ffffff;font-weight:500;}}}}}table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:'';pointer-events:none;}.", "-grid-cell{padding:5px 8px;&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{justify-content:flex-end;text-align:right;}&.", "-grid-cell-ellipsis{.ui-rc_cell-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;&.select-cell{padding-right:18px;position:relative;}.caret-down{float:right;position:absolute;right:0;&::before{content:'';display:inline-block;margin-left:4px;vertical-align:middle;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #6f7777;}}}}&.", "-grid-cell-wrap{white-space:normal;text-overflow:ellipsis;word-break:break-word;}.", "-grid-header-text-wrap{white-space:normal;overflow:hidden;text-overflow:ellipsis;word-break:break-word;}}.", "-grid-thead{background-color:", ";font-weight:", ";.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;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;z-index:3;}.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;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{font-weight:", ";background-color:", ";color:", ";&.", "-grid-row-odd{background-color:#f9f8fd;}&.", "-grid-row-even{}&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}.", "-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, fontSize, BgColor, fontFamily, 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.$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.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, fwHeader, 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, fwBody, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, 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:", ";background-color:", ";font-family:", ";&.", "-grid-editable{.", "-grid-container{.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#ffffff;font-weight:500;}}}}}table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:'';pointer-events:none;}.", "-grid-cell{padding:5px 8px;&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{justify-content:flex-end;text-align:right;}&.", "-grid-cell-ellipsis{.ui-rc_cell-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;&.select-cell{padding-right:18px;position:relative;}.caret-down{float:right;position:absolute;right:0;&::before{content:'';display:inline-block;margin-left:4px;vertical-align:middle;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #6f7777;}}}}&.", "-grid-cell-wrap{white-space:normal;text-overflow:ellipsis;word-break:break-word;}.", "-grid-header-text-wrap{white-space:normal;overflow:hidden;text-overflow:ellipsis;word-break:break-word;}}.", "-grid-thead{background-color:", ";font-weight:", ";.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;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;z-index:3;}.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;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{font-weight:", ";background-color:", ";color:", ";&.", "-grid-row-odd{background-color:#f9f8fd;}&.", "-grid-row-even{}&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}.", "-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:", ";}}}.ui-rc-toolbar-bottom{border-right:1px solid #e0e0e0;border-left:1px solid #e0e0e0;.be-toolbar-item{.ui-rc-btn{font-size:12px;}.toolbar-dropdown-button{font-size:12px;.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-color:#28c76f;}.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-color:#28c76f;.ui-rc-btn-icon{color:#28c76f;}}}}}.ui-rc-toolbar-bottom_border-bottom{border-bottom:1px solid #e0e0e0;}.ui-rc-toolbar-bottom{position:relative;padding:.15rem 0.5rem;background-color:#ffffff;.toolbar-button{border-radius:3px;}.ui-rc-btn{border-radius:3px;height:28px;&.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-start-start-radius:0;border-end-start-radius:0;}&.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-start-end-radius:0;border-end-end-radius:0;}}}}"], props => props.$prefix, color, fontSize, BgColor, fontFamily, 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.$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.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, fwHeader, 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, fwBody, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, 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-component/style.scss

@@ -627,91 +627,6 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
   }
 
 
-
-  // bottom toolbar
-  .ui-rc-toolbar-bottom {
-    // border-bottom: 1px solid #e0e0e0;
-    border-right: 1px solid #e0e0e0;
-    border-left: 1px solid #e0e0e0;
-
-    .be-toolbar-item {
-      .ui-rc-btn {
-        font-size: 12px;
-      }
-
-      .toolbar-dropdown-button {
-        font-size: 12px;
-
-        .ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item {
-          border-color: #28c76f;
-        }
-
-        .ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item {
-          border-color: #28c76f;
-
-          .ui-rc-btn-icon {
-            color: #28c76f;
-          }
-        }
-      }
-
-    }
-  }
-
-  .ui-rc-toolbar-bottom_border-bottom {
-    border-bottom: 1px solid #e0e0e0;
-  }
-
-  .ui-rc-toolbar-bottom {
-    position: relative;
-    padding: .15rem 0.5rem;
-    background-color: #ffffff;
-
-    // &::before {
-    //   content: "";
-    //   position: absolute;
-    //   border-left: 1px solid #e0e0e0;
-    //   height: 100%;
-    //   bottom: 0;
-    //   left: 0;
-    //   //z-index: -1;
-    // }
-
-    // &::after {
-    //   content: "";
-    //   position: absolute;
-    //   border-left: 1px solid #e0e0e0;
-    //   height: 100%;
-    //   bottom: 0;
-    //   visibility: visible;
-    //   right: 0;
-    //   //z-index: -1;
-    // }
-
-    .toolbar-button {
-      border-radius: 3px;
-
-
-
-    }
-
-    .ui-rc-btn {
-      border-radius: 3px;
-      height: 28px;
-
-      &.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item {
-        border-start-start-radius: 0;
-        border-end-start-radius: 0;
-      }
-
-      &.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item {
-        border-start-end-radius: 0;
-        border-end-end-radius: 0;
-      }
-
-    }
-  }
-
   .spinner-loading {
     position: absolute;
     top: 0;
@@ -800,7 +715,7 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
 //   margin: 1rem auto;
 // }
 
-
+// ------------ expand icon -------------------- //
 .ui-rc-table-row-expand {
   color: inherit;
   text-decoration: none;
@@ -887,7 +802,7 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
 .ui-rc-table-row-expand-icon-collapsed::before {
   transform: rotate(-180deg);
 }
-
+// ------------ expand icon end -------------------- //
 
 .#{$prefix}-grid-filter-dropdown {
   box-sizing: border-box;

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

@@ -170,13 +170,15 @@ const TableBodyCell = props => {
   const [isOpenTooltip, setIsOpenTooltip] = React.useState(false);
   const record = cell.row.original;
   const columnMeta = cell.column.columnDef.meta ?? {};
-  const cellStyles = typeof columnMeta.onCellStyles === 'function' ? columnMeta.onCellStyles(cell.getValue(), cell) : columnMeta.onCellStyles;
+  const allRows = table.getRowModel().flatRows;
+  const rowNumber = allRows.findIndex(it => it.id === cell.row.id);
+  const cellStyles1 = typeof columnMeta.onCellStyles === 'function' ? columnMeta.onCellStyles(cell.getValue(), cell) : columnMeta.onCellStyles;
+  const cellStyles2 = typeof columnMeta.getCellProps === 'function' ? columnMeta.getCellProps(cell.getValue(), record, rowNumber).style : undefined;
+  const cellStyles = cellStyles2 ?? cellStyles1;
   const tooltipContent = isOpenTooltip === false ? '' : columnMeta?.tooltipDescription ? typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({
     value: cell.getValue(),
     rowData: record
   }) : columnMeta.tooltipDescription : cell.getValue();
-  const allRows = table.getRowModel().flatRows;
-  const rowNumber = allRows.findIndex(it => it.id === cell.row.id);
   const colIndex = cell.column.getIndex();
   const isPinned = cell.column.getIsPinned();
   const isLastLeftPinnedColumn = isPinned === "left" && cell.column.getIsLastColumn("left");

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

@@ -52,7 +52,11 @@ const TableHeadCell = props => {
   React.useEffect(() => {
     setSelectedKeys(filterValue);
   }, []);
+  const cellStyles1 = typeof originalColumn.onCellHeaderStyles === 'function' ? originalColumn.onCellHeaderStyles(header) : originalColumn.onCellHeaderStyles;
+  const cellStyles2 = originalColumn?.headerCellProps?.style ?? undefined;
+  const cellStyles = cellStyles2 ?? cellStyles1;
   const style = {
+    ...cellStyles,
     transition: 'width transform 0.2s ease-in-out',
     whiteSpace: 'nowrap',
     borderTopWidth: rowIndex > 0 ? 0 : undefined

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

@@ -356,6 +356,8 @@ export type TableProps<RecordType = AnyObject> = {
     locale?: Locale;
     /** Cấu hình wrap text */
     wrapSettings?: IWrapSettings;
+    /** Hiển thị grid line */
+    gridLines?: "Both" | "Horizontal" | "Vertical" | "None";
     /** Bật chế độ tải dữ liệu vô hạn */
     infiniteScroll?: boolean;
     /** Hàm gọi khi cuộn đến cuối */

package/lib/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, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
+    onCellHeaderStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
     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, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
     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/lib/table-component/TableContainer.js

@@ -251,7 +251,7 @@ const TableContainer = props => {
       flex: 1,
       overflow: 'hidden'
     }
-  }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
+  }, toolbarItemTop && toolbarItemTop?.length > 0 && /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
     items: toolbarItemTop ?? []
     // mode={'scroll'}
     ,
@@ -271,7 +271,7 @@ 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, toolbarItemTopRight && /*#__PURE__*/_react.default.createElement("div", {
+  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, toolbarItemTopRight && toolbarItemTopRight.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
     style: {
       flex: 1,
       overflow: 'hidden'
@@ -374,7 +374,7 @@ const TableContainer = props => {
     fixedRightColumns: fixedRightColumns
   }))), /*#__PURE__*/_react.default.createElement("div", {
     ref: bottomToolbarRef
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, toolbarItemBottom && toolbarItemBottom.length > 0 && false && /*#__PURE__*/_react.default.createElement("div", {
     style: {
       flex: 1,
       overflow: 'hidden'

package/lib/table-component/TableContainerEdit.js

@@ -2047,7 +2047,7 @@ const TableContainerEdit = props => {
       flex: 1,
       overflow: 'hidden'
     }
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, toolbarItemsTop && toolbarItemsTop.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('ui-rc-toolbar-bottom border-0', {
       'ui-rc-toolbar-bottom_border-bottom': !pagination || infiniteScroll
     })

package/lib/table-component/body/EditableCell.js

@@ -316,13 +316,13 @@ const EditableCell = props => {
 
         //  chỉ nhận giá trị dạng HH:mm | mm:HH => convert
 
-        let time = value ?? null;
+        let time = value ?? undefined;
         const typeTime = (0, _utils.getDateValueType)(value);
         if (typeTime === 'time') {
-          time = value ? (0, _dayjs.default)(value, timeFormat) : null;
+          time = value ? (0, _dayjs.default)(value, timeFormat) : undefined;
         } else {
-          const abc = (0, _moment.default)(value).format(timeFormat);
-          time = abc ? (0, _dayjs.default)(abc, timeFormat) : null;
+          const abc = value ? (0, _moment.default)(value).format(timeFormat) : undefined;
+          time = abc ? (0, _dayjs.default)(abc, timeFormat) : undefined;
         }
         const maxTimeValue = !(0, _utils.isEmpty)(column.maxTime) ? (0, _dayjs.default)(column.maxTime).format(timeFormat) : null;
         const minTimeValue = !(0, _utils.isEmpty)(column.minTime) ? (0, _dayjs.default)(column.minTime).format(timeFormat) : null;
@@ -359,7 +359,7 @@ const EditableCell = props => {
             } else {
               // const datetime = dayjs(dateString as string, timeFormat, true);
 
-              const newVal = (0, _moment.default)(newDate.toDate()).format();
+              const newVal = newDate ? (0, _moment.default)(newDate.toDate()).format() : undefined;
 
               // const newVal = datetime.isValid() ? moment(datetime.toDate()).format() : ''
               onChange(newVal);
@@ -381,7 +381,7 @@ const EditableCell = props => {
               newValue = newState;
             } else {
               const datetime = (0, _dayjs.default)(newState, timeFormat, true);
-              const newVal = datetime.isValid() ? (0, _moment.default)(datetime.toDate()).format() : '';
+              const newVal = datetime.isValid() ? (0, _moment.default)(datetime.toDate()).format() : undefined;
               onChange(newVal);
               newValue = newVal;
             }

package/lib/table-component/body/TableBodyCell.js

@@ -189,8 +189,12 @@ const TableBodyCell = props => {
   const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
   const [isOpenTooltip, setIsOpenTooltip] = _react.default.useState(false);
   const record = cell.row.original;
+  const allRows = table.getRowModel().flatRows;
+  const rowNumber = allRows.findIndex(it => it.id === cell.row.id);
   const columnMeta = _react.default.useMemo(() => cell.column.columnDef.meta ?? {}, [cell.column.columnDef.meta]);
-  const cellStyles = typeof columnMeta.onCellStyles === 'function' ? columnMeta.onCellStyles(cell.getValue(), cell) : columnMeta.onCellStyles;
+  const cellStyles1 = typeof columnMeta.onCellStyles === 'function' ? columnMeta.onCellStyles(cell.getValue(), cell) : columnMeta.onCellStyles;
+  const cellStyles2 = typeof columnMeta.getCellProps === 'function' ? columnMeta.getCellProps(cell.getValue(), record, rowNumber).style : undefined;
+  const cellStyles = cellStyles2 ?? cellStyles1;
 
   // const tooltipContent: any = (isOpenTooltip === false)
   //   ? ''
@@ -198,8 +202,6 @@ const TableBodyCell = props => {
   //     ? (typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({ value: cell.getValue(), rowData: record }) : columnMeta.tooltipDescription)
   //     : cell.getValue()
 
-  const allRows = table.getRowModel().flatRows;
-  const rowNumber = allRows.findIndex(it => it.id === cell.row.id);
   const colIndex = cell.column.getIndex();
   const isPinned = cell.column.getIsPinned();
   const isLastLeftPinnedColumn = isPinned === "left" && cell.column.getIsLastColumn("left");

package/lib/table-component/header/TableHeadCell2.js

@@ -66,7 +66,9 @@ const TableHeadCell2 = props => {
   const originalColumn = column.columnDef.meta ?? {};
   const fieldOriginalKey = originalColumn?.fieldOriginal;
   const fieldOriginal = fieldOriginalKey ? visibleCols.find(it => it.id === fieldOriginalKey) : undefined;
-  const cellStyles = typeof originalColumn.onCellHeaderStyles === 'function' ? originalColumn.onCellHeaderStyles(header) : originalColumn.onCellHeaderStyles;
+  const cellStyles1 = typeof originalColumn.onCellHeaderStyles === 'function' ? originalColumn.onCellHeaderStyles(header) : originalColumn.onCellHeaderStyles;
+  const cellStyles2 = originalColumn?.headerCellProps?.style ?? undefined;
+  const cellStyles = cellStyles2 ?? cellStyles1;
   const filtered = ((fieldOriginal ? fieldOriginal.getFilterValue() : column.getFilterValue()) ?? []).length > 0;
 
   // const cellContent =  originalColumn.headerTemplate ? originalColumn.headerTemplate : (t ? t(originalColumn.headerText) : originalColumn.headerText) 

package/lib/table-component/header/TableHeadGroupCell.js

@@ -33,7 +33,9 @@ const TableHeadGroupCell = props => {
   const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
   const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');
   const originalColumn = column.columnDef.meta ?? {};
-  const cellStyles = typeof originalColumn.onCellHeaderStyles === 'function' ? originalColumn.onCellHeaderStyles(header) : originalColumn.onCellHeaderStyles;
+  const cellStyles1 = typeof originalColumn.onCellHeaderStyles === 'function' ? originalColumn.onCellHeaderStyles(header) : originalColumn.onCellHeaderStyles;
+  const cellStyles2 = originalColumn?.headerCellProps?.style ?? undefined;
+  const cellStyles = cellStyles2 ?? cellStyles1;
 
   // const cellContent = originalColumn.headerTemplate ? originalColumn.headerTemplate : (t ? t(originalColumn.headerText) : originalColumn.headerText)
 

package/lib/table-component/style.js

@@ -55,4 +55,4 @@ const colorDark = '#e6e4f3e6 ';
 const GridStyle = exports.GridStyle = _styledComponents.default.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-hdqm5k-0"
-})(["&.", "-grid{color:", ";font-size:", ";background-color:", ";font-family:", ";&.", "-grid-editable{.", "-grid-container{.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#ffffff;font-weight:500;}}}}}table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:'';pointer-events:none;}.", "-grid-cell{padding:5px 8px;&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{justify-content:flex-end;text-align:right;}&.", "-grid-cell-ellipsis{.ui-rc_cell-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;&.select-cell{padding-right:18px;position:relative;}.caret-down{float:right;position:absolute;right:0;&::before{content:'';display:inline-block;margin-left:4px;vertical-align:middle;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #6f7777;}}}}&.", "-grid-cell-wrap{white-space:normal;text-overflow:ellipsis;word-break:break-word;}.", "-grid-header-text-wrap{white-space:normal;overflow:hidden;text-overflow:ellipsis;word-break:break-word;}}.", "-grid-thead{background-color:", ";font-weight:", ";.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;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;z-index:3;}.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;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{font-weight:", ";background-color:", ";color:", ";&.", "-grid-row-odd{background-color:#f9f8fd;}&.", "-grid-row-even{}&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}.", "-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, fontSize, BgColor, fontFamily, 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.$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.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, fwHeader, 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, fwBody, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, 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:", ";background-color:", ";font-family:", ";&.", "-grid-editable{.", "-grid-container{.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#ffffff;font-weight:500;}}}}}table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:'';pointer-events:none;}.", "-grid-cell{padding:5px 8px;&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{justify-content:flex-end;text-align:right;}&.", "-grid-cell-ellipsis{.ui-rc_cell-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;&.select-cell{padding-right:18px;position:relative;}.caret-down{float:right;position:absolute;right:0;&::before{content:'';display:inline-block;margin-left:4px;vertical-align:middle;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #6f7777;}}}}&.", "-grid-cell-wrap{white-space:normal;text-overflow:ellipsis;word-break:break-word;}.", "-grid-header-text-wrap{white-space:normal;overflow:hidden;text-overflow:ellipsis;word-break:break-word;}}.", "-grid-thead{background-color:", ";font-weight:", ";.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;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;z-index:3;}.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;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{font-weight:", ";background-color:", ";color:", ";&.", "-grid-row-odd{background-color:#f9f8fd;}&.", "-grid-row-even{}&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}.", "-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:", ";}}}.ui-rc-toolbar-bottom{border-right:1px solid #e0e0e0;border-left:1px solid #e0e0e0;.be-toolbar-item{.ui-rc-btn{font-size:12px;}.toolbar-dropdown-button{font-size:12px;.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-color:#28c76f;}.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-color:#28c76f;.ui-rc-btn-icon{color:#28c76f;}}}}}.ui-rc-toolbar-bottom_border-bottom{border-bottom:1px solid #e0e0e0;}.ui-rc-toolbar-bottom{position:relative;padding:.15rem 0.5rem;background-color:#ffffff;.toolbar-button{border-radius:3px;}.ui-rc-btn{border-radius:3px;height:28px;&.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-start-start-radius:0;border-end-start-radius:0;}&.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-start-end-radius:0;border-end-end-radius:0;}}}}"], props => props.$prefix, color, fontSize, BgColor, fontFamily, 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.$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.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, fwHeader, 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, fwBody, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, 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/lib/table-component/style.scss

@@ -627,91 +627,6 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
   }
 
 
-
-  // bottom toolbar
-  .ui-rc-toolbar-bottom {
-    // border-bottom: 1px solid #e0e0e0;
-    border-right: 1px solid #e0e0e0;
-    border-left: 1px solid #e0e0e0;
-
-    .be-toolbar-item {
-      .ui-rc-btn {
-        font-size: 12px;
-      }
-
-      .toolbar-dropdown-button {
-        font-size: 12px;
-
-        .ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item {
-          border-color: #28c76f;
-        }
-
-        .ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item {
-          border-color: #28c76f;
-
-          .ui-rc-btn-icon {
-            color: #28c76f;
-          }
-        }
-      }
-
-    }
-  }
-
-  .ui-rc-toolbar-bottom_border-bottom {
-    border-bottom: 1px solid #e0e0e0;
-  }
-
-  .ui-rc-toolbar-bottom {
-    position: relative;
-    padding: .15rem 0.5rem;
-    background-color: #ffffff;
-
-    // &::before {
-    //   content: "";
-    //   position: absolute;
-    //   border-left: 1px solid #e0e0e0;
-    //   height: 100%;
-    //   bottom: 0;
-    //   left: 0;
-    //   //z-index: -1;
-    // }
-
-    // &::after {
-    //   content: "";
-    //   position: absolute;
-    //   border-left: 1px solid #e0e0e0;
-    //   height: 100%;
-    //   bottom: 0;
-    //   visibility: visible;
-    //   right: 0;
-    //   //z-index: -1;
-    // }
-
-    .toolbar-button {
-      border-radius: 3px;
-
-
-
-    }
-
-    .ui-rc-btn {
-      border-radius: 3px;
-      height: 28px;
-
-      &.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item {
-        border-start-start-radius: 0;
-        border-end-start-radius: 0;
-      }
-
-      &.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item {
-        border-start-end-radius: 0;
-        border-end-end-radius: 0;
-      }
-
-    }
-  }
-
   .spinner-loading {
     position: absolute;
     top: 0;
@@ -800,7 +715,7 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
 //   margin: 1rem auto;
 // }
 
-
+// ------------ expand icon -------------------- //
 .ui-rc-table-row-expand {
   color: inherit;
   text-decoration: none;
@@ -887,7 +802,7 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
 .ui-rc-table-row-expand-icon-collapsed::before {
   transform: rotate(-180deg);
 }
-
+// ------------ expand icon end -------------------- //
 
 .#{$prefix}-grid-filter-dropdown {
   box-sizing: border-box;

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

@@ -177,13 +177,15 @@ const TableBodyCell = props => {
   const [isOpenTooltip, setIsOpenTooltip] = _react.default.useState(false);
   const record = cell.row.original;
   const columnMeta = cell.column.columnDef.meta ?? {};
-  const cellStyles = typeof columnMeta.onCellStyles === 'function' ? columnMeta.onCellStyles(cell.getValue(), cell) : columnMeta.onCellStyles;
+  const allRows = table.getRowModel().flatRows;
+  const rowNumber = allRows.findIndex(it => it.id === cell.row.id);
+  const cellStyles1 = typeof columnMeta.onCellStyles === 'function' ? columnMeta.onCellStyles(cell.getValue(), cell) : columnMeta.onCellStyles;
+  const cellStyles2 = typeof columnMeta.getCellProps === 'function' ? columnMeta.getCellProps(cell.getValue(), record, rowNumber).style : undefined;
+  const cellStyles = cellStyles2 ?? cellStyles1;
   const tooltipContent = isOpenTooltip === false ? '' : columnMeta?.tooltipDescription ? typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({
     value: cell.getValue(),
     rowData: record
   }) : columnMeta.tooltipDescription : cell.getValue();
-  const allRows = table.getRowModel().flatRows;
-  const rowNumber = allRows.findIndex(it => it.id === cell.row.id);
   const colIndex = cell.column.getIndex();
   const isPinned = cell.column.getIsPinned();
   const isLastLeftPinnedColumn = isPinned === "left" && cell.column.getIsLastColumn("left");

package/lib/table-virtuoso/header/TableHeadCell.js

@@ -61,7 +61,11 @@ const TableHeadCell = props => {
   _react.default.useEffect(() => {
     setSelectedKeys(filterValue);
   }, []);
+  const cellStyles1 = typeof originalColumn.onCellHeaderStyles === 'function' ? originalColumn.onCellHeaderStyles(header) : originalColumn.onCellHeaderStyles;
+  const cellStyles2 = originalColumn?.headerCellProps?.style ?? undefined;
+  const cellStyles = cellStyles2 ?? cellStyles1;
   const style = {
+    ...cellStyles,
     transition: 'width transform 0.2s ease-in-out',
     whiteSpace: 'nowrap',
     borderTopWidth: rowIndex > 0 ? 0 : undefined

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.9.46",
+  "version": "1.9.48",
   "description": "es-grid-template",
   "keywords": [
     "react",