es-grid-template 1.8.56 → 1.8.58

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

@@ -9,40 +9,29 @@ var _sortable = require("@dnd-kit/sortable");
 var _react = _interopRequireDefault(require("react"));
 var _useContext = require("../useContext");
 var _TableHeadCell = _interopRequireDefault(require("./TableHeadCell"));
-// import type { Virtualizer } from '@tanstack/react-virtual'
-// import type { Person } from "../../tanstack-table/makeData"
-
-// import { getCommonPinningStyles } from '../hook/utils'
-
 const TableHeadRow = ({
   table,
   headerGroup,
   columnVirtualizer
-  // virtualPaddingLeft,
-  // virtualPaddingRight,
-  // fixedLeftColumns,
-  // fixedRightColumns
 }) => {
   const {
-    prefix
+    prefix,
+    onRowHeaderStyles
   } = _react.default.useContext(_useContext.TableContext);
-
-  // const virtualColumns = columnVirtualizer.getVirtualItems()
-
   const columnOrder = table.getState().columnOrder;
+  const rowStyles = typeof onRowHeaderStyles === 'function' ? onRowHeaderStyles() : onRowHeaderStyles;
   return /*#__PURE__*/_react.default.createElement("div", {
     key: headerGroup.id
     // ref={el => {
     //   if (el) rowHeaderVirtualizer.measureElement(el)
     // }}
-    // data-index={rowHeaderVirtual?.index}
     ,
+
     "data-index": headerGroup.id,
-    className: `${prefix}-grid-row`,
+    className: `${prefix}-grid-row ${prefix}-grid-header`,
     style: {
-      // display: 'flex',
+      ...rowStyles,
       width: '100%'
-      // minHeight: rowHeaderVirtual?.size
     }
   }, /*#__PURE__*/_react.default.createElement(_sortable.SortableContext, {
     items: columnOrder,
@@ -61,9 +50,7 @@ const TableHeadRow = ({
       key: header.id,
       header: header,
       table: table,
-      columnVirtualizer: columnVirtualizer
-      // rowHeaderVirtualizer={rowHeaderVirtualizer}
-      ,
+      columnVirtualizer: columnVirtualizer,
       colSpan: header.colSpan,
       rowSpan: rowSpan
     });

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

@@ -225,6 +225,8 @@ const toggleRowSelection = props => {
     return;
   }
   if (row.subRows && row.subRows.length > 0) {
+    // click vào row cha
+
     const allChild = (0, _utils.getAllChildren)(row);
     (0, _utils.toggleRowAndChildren)(row, !row.getIsSelected());
     if (row.getIsSelected()) {
@@ -256,17 +258,29 @@ const toggleRowSelection = props => {
       });
     }
   } else {
+    // click vào row không có cha
+
     row.getToggleSelectedHandler()(e);
     if (row.getIsSelected()) {
       // đã chọn
 
-      // xóa row ra list selected 
-      const newRowsSelected = prevSelected.filter(it => it.id !== row.id);
+      const rowParent = row.getParentRow();
+      // const rowParent1 = row.getParentRows()
+
+      let newCheckedRows = [];
+      if (rowParent) {}
+      if (rowParent && (0, _utils.countUnselectedChildren)(row) === 1) {
+        newCheckedRows = prevSelected.filter(it => it.id !== row.id && it.id !== rowParent.id);
+      } else {
+        // xóa row ra list selected 
+        // const newRowsSelected = prevSelected.filter((it) => it.id !== row.id)
+        newCheckedRows = prevSelected.filter(it => it.id !== row.id);
+      }
       setIsSelectionChange({
         isChange: true,
         type: 'rowSelected',
         rowData: row.original,
-        rowsData: newRowsSelected ?? []
+        rowsData: newCheckedRows ?? []
       });
     } else {
       // chưa selected

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

@@ -94,25 +94,13 @@ const convertDateToDayjs = (date, format) => {
 exports.convertDateToDayjs = convertDateToDayjs;
 const getCommonPinningStyles = column => {
   const isPinned = column.getIsPinned();
-  // const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
-  // const isFirstRightPinnedColumn =isPinned === "right" && column.getIsFirstColumn("right");
-
   return {
-    // boxShadow: isFirstRightPinnedColumn
-    //     ? "#e0e0e0 2px 0px 1px -1px inset"
-    //     : undefined,
-
     left: isPinned === "left" ? `${column.getStart("left")}px` : undefined,
     right: isPinned === "right" ? `${column.getAfter("right")}px` : undefined,
-    // opacity: isPinned ? 0.5 : 1,
     opacity: 1,
     position: isPinned ? "sticky" : "relative",
-    // width: column.getSize(),
     width: 'auto',
     zIndex: isPinned ? 2 : 0
-    // border: '1px solid #e5e7eb',
-    // borderTop: 0,
-    // borderBottom: 0
   };
 };
 exports.getCommonPinningStyles = getCommonPinningStyles;
@@ -128,15 +116,10 @@ const getCommonPinningStyles2 = header => {
 
     left: isPinned === "left" ? `${header.getStart("left")}px` : undefined,
     right: isPinned === "right" ? `${header.getAfter("right")}px` : undefined,
-    // opacity: isPinned ? 0.5 : 1,
     opacity: 1,
     position: isPinned ? "sticky" : "relative",
-    // width: column.getSize(),
     width: 'auto',
     zIndex: isPinned ? 2 : 0
-    // border: '1px solid #e5e7eb',
-    // borderTop: 0,
-    // borderBottom: 0
   };
 };
 exports.getCommonPinningStyles2 = getCommonPinningStyles2;

package/lib/table-component/style.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+type GridProps = {
+    $theme: {
+        theme?: 'light' | 'dark';
+        backgroundColor?: string;
+        color?: string;
+    };
+    $prefix: string;
+    $borderColor?: string;
+    $cellFontSize?: number;
+    $cellPaddingInline?: number;
+    $cellPaddingBlock?: number;
+    $headerBg?: string;
+    $headerColor?: string;
+    $footerBg?: string;
+    $footerColor?: string;
+    $rowHoverBg?: string;
+    $rowSelectedBg?: string;
+    $rowSelectedHoverBg?: string;
+};
+export declare const GridStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, GridProps>> & string;
+export {};

package/lib/table-component/style.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridStyle = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+// const prefix = "ui-rc";
+// const antdPrefix = "ant";
+// const fontFamily = "Montserrat, Helvetica, Arial, serif ";
+// const borderRadius = "6px";
+
+// const boxShadowColor = "rgba(220, 0, 0, 0.09)";
+const color = "#000000de";
+const BgColor = "#ffffff ";
+
+// const primary = "#eb4619";
+
+// const rowHoverBg = "#FBDED6";
+// const rowSelectedBg = "#FEF2EF";
+
+const tableBorderColor = "#e0e0e0";
+
+// const borderSelectedColor = "#0550C5";
+// const cellSelectedBg = "#F3F8FF";
+// const cellIndexSelectedBg = "#1869E6";
+// const cellIndexFocusBg = "#E6EFFD";
+
+// 404071
+
+// dark
+const tableBorderColorDark = "#44485E";
+
+// const rowHoverBgDark = "#404071 ";
+
+// const rowSelectedBgDark = "#25293C";
+
+// const borderSelectedColorDark = "#538ff1 ";
+// const cellIndexSelectedBgDark = "#1869E6 ";
+
+// const bodyColorDark = "#343e59";
+
+const BgColorDark = "#343e59 ";
+const colorDark = "#e6e4f3e6 ";
+
+// const cellSelectedBgDark = " #F3F8FF ";
+// const cellIndexFocusBgDark = "#E6EFFD ";
+
+/* height: const {props => (props.const heightTable ? `const {props.const heightTable}px` : undefined)}; */
+
+const GridStyle = exports.GridStyle = _styledComponents.default.div.withConfig({
+  displayName: "GridStyle",
+  componentId: "es-grid-template__sc-hdqm5k-0"
+})(["&.", "-grid{color:", ";font-size:13px;background-color:", ";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-tbody{.", "-grid-row{}}}&.", "-grid-light{.", "-grid-container{.", "-grid-thead{background-color:", ";font-weight:500;.", "-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{background-color:", ";color:", ";}}.", "-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, 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.$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.$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

@@ -27,7 +27,7 @@ $rowSelectedBg-Dark: #25293C !default;
 $border-selected-color-Dark: #538ff1 !default;
 $cell-index-selected-bg-Dark: #1869E6 !default;
 
-$body-color-Dark: #2F3349 !default;
+$body-color-Dark: #343e59 !default;
 
 $cell-selected-bg-Dark: #F3F8FF !default;
 $cell-index-focus-bg-Dark: #E6EFFD !default;
@@ -46,6 +46,7 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
   // border: 1px solid $tableBorderColor;
 
   color: #000000de;
+  background-color: #ffffff;
 
   font-size: 14px;
 
@@ -59,22 +60,20 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
 
   .#{$prefix}-grid-container {
 
-    border: 1px solid $tableBorderColor;
-    // border-bottom: 0;
-    border-right: 0;
-    font-size: 13px;
-
-    &::after {
-      content: "";
-      position: absolute;
-      top: 0px;
-      right: 0;
-      height: 100%;
-      // width: 100%;
-      border-right: 1px solid $tableBorderColor;
-      pointer-events: none;
-      z-index: 1;
-    }
+    // border: 1px solid $tableBorderColor;
+    // border-right: 0;
+    // font-size: 13px;
+
+    // &::after {
+    //   content: "";
+    //   position: absolute;
+    //   top: 0px;
+    //   right: 0;
+    //   height: 100%;
+    //   border-right: 1px solid $tableBorderColor;
+    //   pointer-events: none;
+    //   z-index: 1;
+    // }
 
     .#{$prefix}-grid-cell {
 
@@ -92,8 +91,6 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
 
       }
 
-
-
       &.#{$prefix}-grid-cell-ellipsis {
 
 
@@ -132,8 +129,6 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
 
       }
 
-
-
       &.#{$prefix}-grid-cell-wrap {
         white-space: normal;
         // overflow: hidden;
@@ -141,7 +136,6 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
         word-break: break-word;
       }
 
-
       .#{$prefix}-grid-header-text-wrap {
         white-space: normal;
         overflow: hidden;
@@ -151,29 +145,19 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
 
     }
 
-
-
-
     .#{$prefix}-grid-thead {
-      background-color: #ffffff;
+      // background-color: #ffffff;
+      background-color: inherit;
+       font-weight: 500;
 
       .#{$prefix}-grid-cell {
-        font-weight: 500;
+        font-weight: inherit;
         color: #000000E0;
 
-        background-color: $body-color;
+        background-color: inherit;
         border-inline-end: 1px solid $tableBorderColor;
         border-bottom: 1px solid $tableBorderColor;
 
-        // &::before {
-        //   content: "";
-        //   position: absolute;
-        //   inset-block: 0;
-        //   right: 0;
-        //   inset-inline-start: 0px;
-        //   border-inline-end: 1px solid #e0e0e0;
-        // }
-
         &.ui-rc-grid-cell-ellipsis {
 
           .ui-rc-table-column-title,
@@ -192,7 +176,6 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
           .ui-rc-table-column-title,
           .#{$prefix}-grid-cell-text-wrap {
             white-space: normal;
-            // text-overflow: ellipsis;
             word-break: break-word;
             overflow: hidden;
           }
@@ -282,6 +265,8 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
         display: flex;
         position: absolute;
         width: 100%;
+        // background-color: #ffffff;
+        background-color: inherit;
 
         &:hover {
           .#{$prefix}-grid-cell:not(.editable) {
@@ -321,7 +306,8 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
         outline: none;
         border-inline-end: 1px solid $tableBorderColor;
 
-        background-color: $body-color;
+        // background-color: $body-color;
+        background-color: inherit;
 
         &.#{$prefix}-grid-cell-ellipsis:not(:has(>.ui-rc_cell-content)) {
           overflow: hidden;
@@ -617,7 +603,6 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
 
     .#{$prefix}-grid-tfoot {
       // background-color: rgb(250, 250, 250);
-      // background-color: #fafafa;
 
       .#{$prefix}-grid-footer-row {
         border-bottom-width: 1px;
@@ -628,13 +613,13 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
         border-top-color: $tableBorderColor;
         border-top-style: solid;
 
-
+        background-color: #fafafa;
 
       }
 
       .#{$prefix}-grid-cell {
 
-        background-color: #fafafa;
+        background-color: inherit;
 
         border-inline-end: 1px solid $tableBorderColor;
       }
@@ -656,39 +641,15 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
 
 
           &.cell-border-top {
-
-            //border-bottom: 1px solid $border-selected-color;
-            // &::after {
-            //   content: "";
-            //   position: absolute;
-            //   top: 0px;
-            //   left: 0;
-            //   //right: 0;
-            //   //bottom: 0;
-            //   height: 1px;
-            //   width: 100%;
-            //   border-top: 1px solid $border-selected-color;
-            //   /* line đè lên border gốc */
-            //   pointer-events: none;
-            //   /* không ảnh hưởng đến tương tác */
-            //   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-top {
 
 
@@ -705,7 +666,6 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
             }
           }
 
-
         }
 
 
@@ -738,8 +698,6 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
 
       .#{$prefix}-grid-cell {
 
-
-
         &.#{$prefix}-grid-cell-fix-right-first {
           &::after {
             position: absolute;
@@ -1379,9 +1337,13 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
     }
   }
 
+  &.ui-rc-grid .ui-rc-grid-container::after {
+    border-right-color: $tableBorderColorDark;
+  }
+
   &.ui-rc-grid {
     .ui-rc-grid-container {
-      border-bottom: 0;
+      // border-bottom: 0;
       border-color: $tableBorderColorDark;
 
       .ui-rc-grid-tbody {

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

@@ -18,6 +18,7 @@ var _operator = require("../features/operator");
 var _utils = require("../hook/utils");
 var _TableContainerEdit = _interopRequireDefault(require("../TableContainerEdit"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _style = require("../style");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // import { makeData } from "../default/makeData";
@@ -28,7 +29,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 const Grid = props => {
   const {
-    theme = 'light',
+    theme,
     t,
     id,
     prefix,
@@ -259,14 +260,20 @@ const Grid = props => {
   }
   const sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.MouseSensor, {}), (0, _core.useSensor)(_core.TouchSensor, {}), (0, _core.useSensor)(_core.KeyboardSensor, {}));
   const ContainerComponent = editAble ? _TableContainerEdit.default : _TableContainer.default;
-  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_style.GridStyle, {
+    $prefix: prefix,
+    $theme: {
+      theme: theme?.theme,
+      ...theme
+    },
     className: (0, _classnames.default)(`${prefix}-grid`, {
-      [`${prefix}-grid-light`]: theme === 'light',
-      [`${prefix}-grid-dark`]: theme === 'dark'
+      [`${prefix}-grid-light`]: !theme || theme.theme === 'light',
+      [`${prefix}-grid-dark`]: theme?.theme === 'dark'
     }),
     style: {
       minHeight: minHeight ?? undefined,
-      maxHeight: height ?? undefined
+      maxHeight: height ?? undefined,
+      backgroundColor: theme?.backgroundColor ?? undefined
     }
   }, /*#__PURE__*/_react.default.createElement(_core.DndContext, {
     collisionDetection: _core.closestCenter,
@@ -337,8 +344,8 @@ const Grid = props => {
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(`${prefix}-grid`, {
-      [`${prefix}-grid-light`]: theme === 'light',
-      [`${prefix}-grid-dark`]: theme === 'dark'
+      [`${prefix}-grid-light`]: !theme || theme.theme === 'light',
+      [`${prefix}-grid-dark`]: theme?.theme === 'dark'
     }),
     style: {
       // minHeight: minHeight ?? undefined,

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

@@ -1,6 +1,6 @@
 import type { CheckboxProps, TablePaginationConfig } from 'rc-master-ui';
 import type { ItemType } from 'rc-master-ui/es/menu/interface';
-import type { OnChangeFn } from '@tanstack/react-table';
+import type { Cell, Header, OnChangeFn, Row } from '@tanstack/react-table';
 import type { ReactElement, ReactNode } from 'react';
 import type { IOperator } from './hook/constant';
 import type { ColorPickerProps } from 'antd';
@@ -154,6 +154,10 @@ export type ColumnTable<RecordType = AnyObject> = {
     headerTextWrap?: boolean;
     ellipsis?: boolean;
     allowResizing?: boolean;
+    allowSelection?: boolean | ((rowData: RecordType) => boolean);
+    onCellStyles?: Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'> | ((cellValue: any, cell: Cell<RecordType, unknown>) => Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'>);
+    onCellHeaderStyles?: Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'> | ((cell: Header<RecordType, unknown>) => Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'>);
+    onCellFooterStyles?: Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'> | ((cellValue: any, cell: Header<RecordType, unknown>) => Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'>);
 };
 export type Locale = TableLocale & {
     ok_btn?: string;
@@ -188,7 +192,11 @@ export type Locale = TableLocale & {
 };
 export type ColumnsTable<RecordType = AnyObject> = ColumnTable<RecordType>[];
 export type TableProps<RecordType = AnyObject> = {
-    theme?: 'dark' | 'light';
+    theme?: {
+        theme?: 'dark' | 'light';
+        backgroundColor?: string;
+        color?: string;
+    };
     title?: ReactNode | ((data: RecordType) => ReactNode);
     editAble?: boolean;
     infiniteScroll?: boolean;
@@ -261,6 +269,9 @@ export type TableProps<RecordType = AnyObject> = {
     commandClick?: (args: CommandClick<RecordType>) => void;
     expandable?: ExpandableConfig<RecordType>;
     fullScreen?: boolean;
+    onRowStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | ((data: RecordType, row: Row<RecordType>) => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
+    onRowHeaderStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | (() => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
+    onRowFooterStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | (() => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
 };
 export type ExpandableConfig<RecordType> = {
     expandedRowKeys?: readonly Key[];

package/lib/table-component/useContext.d.ts

@@ -1,7 +1,7 @@
 import type { Dispatch, SetStateAction } from 'react';
 import type { ColumnTable, ExpandableConfig, IFormat, IWrapSettings, Locale, PaginationConfig, RangeState, RecordDoubleClickEventArgs, RowClassName, SelectionSettings } from "./type";
 import type { SubmitHandler } from "react-hook-form";
-import type { ExpandedState, Table } from '@tanstack/react-table';
+import type { ExpandedState, Row, Table } from '@tanstack/react-table';
 export type IPositionCell = {
     rowId: string;
     colId: string;
@@ -78,6 +78,9 @@ export interface IContext<T> {
     rowClassName?: string | RowClassName<T>;
     table?: Table<T>;
     rowEditable?: (rowData: T) => boolean;
+    onRowStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | ((data: T, row: Row<T>) => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
+    onRowHeaderStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | (() => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
+    onRowFooterStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | (() => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
 }
 export declare const TableContext: import("react").Context<IContext<any>>;
 export type ContextCellChange = {

package/package.json

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