es-grid-template 1.8.55 → 1.8.57

package/es/table-component/style.scss

@@ -1,24 +1,39 @@
 $prefix: 'ui-rc' !default;
 $antdPrefix: 'ant' !default;
+$boxShadowColor: rgba(5, 5, 5, 0.09) !default;
+$fontFamily: "Montserrat", Helvetica, Arial, serif !default;
+$border-radius: 6px !default;
+
 $primary: #eb4619 !default;
+
 $rowHoverBg: #FBDED6 !default;
 $rowSelectedBg: #FEF2EF !default;
-//$tableBorderColor: red !default;
 $tableBorderColor: #e0e0e0 !default;
-//$tableBorderColor: #C4C4C4 !default;
-//$tableBorderColor: #f0f0f0 !default;
-$border-radius: 6px !default;
 $border-selected-color: #0550C5 !default;
 $body-color: #ffffff !default;
-//$cell-selected-bg: #E6EFFD !default;
 $cell-selected-bg: #F3F8FF !default;
-//$cell-index-selected-bg: #0550C5 !default;
 $cell-index-selected-bg: #1869E6 !default;
-//$cell-index-focus-bg: #CEDBEF !default;
 $cell-index-focus-bg: #E6EFFD !default;
-// $rowSelectedHoverBg: 'ui-rc' !default;
-$boxShadowColor: rgba(5, 5, 5, 0.09) !default;
-$fontFamily: "Montserrat", Helvetica, Arial, serif !default;
+
+// 404071
+
+// dark
+$tableBorderColorDark: #44485E !default;
+
+$rowHoverBg-Dark: #404071 !default;
+
+$rowSelectedBg-Dark: #25293C !default;
+
+$border-selected-color-Dark: #538ff1 !default;
+$cell-index-selected-bg-Dark: #1869E6 !default;
+
+$body-color-Dark: #2F3349 !default;
+
+$cell-selected-bg-Dark: #F3F8FF !default;
+$cell-index-focus-bg-Dark: #E6EFFD !default;
+
+
+
 
 
 * {
@@ -45,6 +60,7 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
   .#{$prefix}-grid-container {
 
     border: 1px solid $tableBorderColor;
+    // border-bottom: 0;
     border-right: 0;
     font-size: 13px;
 
@@ -145,7 +161,7 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
         font-weight: 500;
         color: #000000E0;
 
-        background-color: $body-color;
+        background-color: inherit;
         border-inline-end: 1px solid $tableBorderColor;
         border-bottom: 1px solid $tableBorderColor;
 
@@ -266,12 +282,15 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
         display: flex;
         position: absolute;
         width: 100%;
+        background-color: #ffffff;
 
         &:hover {
           .#{$prefix}-grid-cell:not(.editable) {
             // background-color: $rowHoverBg;
 
-            &.cell-editable, &.#{$prefix}-grid-cell-index, &.#{$prefix}-grid-cell-selection {
+            &.cell-editable,
+            &.#{$prefix}-grid-cell-index,
+            &.#{$prefix}-grid-cell-selection {
               // background-color: transparent;
             }
 
@@ -303,7 +322,8 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !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;
@@ -598,10 +618,25 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
     }
 
     .#{$prefix}-grid-tfoot {
-      background-color: rgb(250, 250, 250);
+      // background-color: rgb(250, 250, 250);
+
+      .#{$prefix}-grid-footer-row {
+        border-bottom-width: 1px;
+        border-bottom-color: $tableBorderColor;
+        border-bottom-style: solid;
+
+        border-top-width: 1px;
+        border-top-color: $tableBorderColor;
+        border-top-style: solid;
+
+        background-color: #fafafa;
+
+      }
 
       .#{$prefix}-grid-cell {
-        background-color: $body-color;
+
+        background-color: inherit;
+
         border-inline-end: 1px solid $tableBorderColor;
       }
     }
@@ -796,6 +831,10 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !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 {
       .toolbar-dropdown-button {
         .ant-btn.ant-btn-default.ant-btn-variant-outlined.ant-btn-compact-item.ant-btn-compact-first-item {
@@ -814,6 +853,10 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
     }
   }
 
+  .ui-rc-toolbar-bottom_border-bottom {
+    border-bottom: 1px solid #e0e0e0;
+  }
+
   .ui-rc-toolbar-bottom {
     position: relative;
     padding: .25rem 1rem;
@@ -1219,4 +1262,216 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
 
 
 
+}
+
+
+// #region theme
+// theme
+
+//  ------------light-----------
+
+.#{$prefix}-grid-light {
+  background-color: #ffffff;
+
+  &.ui-rc-grid .ui-rc-grid-container .ui-rc-grid-thead .ui-rc-grid-cell {}
+}
+
+
+// rgb(225 222 245 / 0.12 
+
+.#{$prefix}-grid-dark {
+  background-color: $body-color-Dark;
+  color: #ffffff;
+
+  &.ui-rc-grid .ui-rc-grid-container .ui-rc-grid-thead .ui-rc-grid-cell {
+    background-color: $body-color-Dark;
+    color: #E1DEF5E6;
+  }
+
+  &.ui-rc-grid .ui-rc-grid-container .ui-rc-grid-tbody .ui-rc-grid-cell {
+    // background-color: $body-color-Dark;
+    // color: #E1DEF5E6;
+  }
+
+  &.ui-rc-grid .ui-rc-grid-container .ui-rc-grid-tfoot .ui-rc-grid-cell {
+    background-color: #25293C;
+    color: #E1DEF5E6;
+  }
+
+  &.ui-rc-grid {
+    .ui-rc-toolbar-bottom {
+      background-color: $body-color-Dark;
+      color: #E1DEF5E6;
+      border-color: $tableBorderColorDark;
+    }
+  }
+
+  &.ui-rc-grid .ui-rc-grid-container.ui-rc-table-ping-right .ui-rc-grid-cell.ui-rc-grid-cell-fix-right-first::before {
+    border-inline-start-color: $tableBorderColorDark;
+  }
+
+  &.ui-rc-grid .ui-rc-grid-container .ui-rc-grid-tbody .ui-rc-grid-cell.cell-editable {
+
+
+    &.cell-border-right {
+      border-right-color: $border-selected-color-Dark;
+    }
+
+    &.cell-border-bottom {
+      border-bottom-color: $border-selected-color-Dark;
+    }
+
+    &.cell-border-left::before {
+      border-color: $border-selected-color-Dark;
+    }
+
+    &.cell-border-top::after {
+      border-color: $border-selected-color-Dark;
+    }
+  }
+
+  .ui-rc-pagination {
+    background-color: $body-color-Dark;
+    color: #E1DEF5E6;
+
+    border-bottom: 1px solid $tableBorderColorDark;
+    border-top: 1px solid $tableBorderColorDark;
+    border-inline-color: $tableBorderColorDark;
+
+    .ui-rc-pagination-prev {
+      .anticon.anticon-left {
+        color: #ffffff;
+      }
+    }
+
+    .ui-rc-pagination-disabled {
+      .anticon.anticon-left {
+        color: #7d7a7a;
+      }
+    }
+
+    .ui-rc-pagination-next {
+      .anticon.anticon-right {
+        color: #ffffff;
+      }
+
+      &.ui-rc-pagination-disabled {
+        .anticon.anticon-right {
+          color: #7d7a7a;
+        }
+      }
+
+    }
+  }
+
+  .ui-rc-toolbar {
+    .ui-rc-toolbar-selection-item {
+      background-color: #25293C;
+      color: #E1DEF5E6;
+    }
+
+  }
+
+  &.ui-rc-grid {
+    .ui-rc-grid-top-toolbar {
+      border-top-color: $tableBorderColorDark;
+      border-inline-color: $tableBorderColorDark;
+
+    }
+  }
+
+  &.ui-rc-grid {
+    .ui-rc-grid-container {
+      border-bottom: 0;
+      border-color: $tableBorderColorDark;
+
+      .ui-rc-grid-tbody {
+        .ui-rc-grid-row {
+          border-bottom-color: $tableBorderColorDark;
+
+
+        }
+
+        .ui-rc-grid-cell {
+          border-inline-end-color: $tableBorderColorDark;
+          background-color: $body-color-Dark;
+          color: #E1DEF5E6;
+
+          &.ui-rc-grid-cell-selected {
+
+            background-color: #33335d !important;
+
+          }
+
+          &.disable {
+            background-color: #272A2F;
+          }
+
+          // input
+          // .ui-rc-table-select-selector,
+          // .ui-rc-select-selector, 
+          // .ant-input-outlined,
+          // .ant-picker-outlined {
+          //   background-color: #272933;
+          //   color: #ffffff;
+
+          //   .ui-rc-table-select-selection-placeholder,
+          //   .ui-rc-select-selection-placeholder {
+          //     color: #797171;
+          //   }
+          // }
+          // .ant-picker-input {
+
+          //   input {
+          //     &::placeholder {
+          //       color: #797171;
+          //     }
+          //   }
+          // }
+          // .ant-input-outlined::placeholder {
+          //   color: #797171;
+          // }
+
+
+        }
+
+        .ui-rc-grid-row-selected {
+          .ui-rc-grid-cell {
+            background-color: $rowSelectedBg-Dark;
+
+            // &.disable {
+            //   background-color: #272A2F;
+            // }
+          }
+        }
+
+      }
+
+      .ui-rc-grid-thead {
+        .ui-rc-grid-cell {
+          border-inline-end-color: $tableBorderColorDark;
+          border-bottom-color: $tableBorderColorDark;
+        }
+      }
+
+      .ui-rc-grid-tfoot {
+        .#{$prefix}-grid-footer-row {
+          border-bottom-color: $tableBorderColorDark;
+
+          border-top-color: $tableBorderColorDark;
+
+
+
+        }
+
+        .ui-rc-grid-cell {
+          border-inline-end-color: $tableBorderColorDark;
+        }
+      }
+    }
+  }
+
+  .ui-rc-toolbar-bottom_border-bottom {
+    border-bottom-color: $tableBorderColorDark;
+  }
 }

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

@@ -21,8 +21,10 @@ import TableContainer from "../TableContainer";
 import { OperatorFeature } from "../features/operator";
 import { convertFilters, convertToObjTrue, filterByIds, filterDataByColumns, getAllRowKey, isObjEqual } from "../hook/utils";
 import TableContainerEdit from "../TableContainerEdit";
+import classNames from 'classnames';
 const Grid = props => {
   const {
+    theme = 'light',
     t,
     id,
     prefix,
@@ -68,7 +70,7 @@ const Grid = props => {
   // const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({})
 
   // const [rowSelection, setRowSelection] = React.useState<RowSelectionState>(convertToObjTrue(selectionSettings?.selectedRowKeys ?? []))
-  const [rowSelection, setRowSelection] = React.useState(convertToObjTrue(mergedSelectedKeys));
+  const [rowSelection, setRowSelection] = React.useState({});
   // const [rowsSelected, setRowsSelected] = React.useState<RecordType[]>([])
 
   const [grouping, setGrouping] = React.useState([]);
@@ -122,6 +124,9 @@ const Grid = props => {
       }
       return true;
     },
+    initialState: {
+      rowSelection: {}
+    },
     onRowSelectionChange: setRowSelection,
     // RowSelection
 
@@ -169,31 +174,9 @@ const Grid = props => {
       }
     }
   }, [columnHidden, columnSizingInfo]);
-
-  // React.useEffect(() => {
-  //   if (columnSizingInfo.isResizingColumn === false) {
-
-  //     const aa =  updateColumnWidthsRecursive(propsColumns, columnSizing)
-
-  //     setColumns(aa)
-
-  //   }
-
-  // }, [columnSizingInfo])
-
   React.useEffect(() => {
-    // if (Object.keys(rowSelection) !== Object.keys(mergedSelectedKeys) && !isSelectionChange.isChange) {
-    //   setRowSelection(convertToObjTrue(mergedSelectedKeys))
-
-    // }
-
     const isEqual = isObjEqual(convertToObjTrue(mergedSelectedKeys), rowSelection);
     if (!isEqual) {
-      // setIsSelectionChange((prev) => ({
-      //   ...prev,
-      //   isChange: false
-      // }))
-
       setRowSelection(convertToObjTrue(mergedSelectedKeys));
     }
   }, [mergedSelectedKeys]);
@@ -273,7 +256,10 @@ const Grid = props => {
   const sensors = useSensors(useSensor(MouseSensor, {}), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}));
   const ContainerComponent = editAble ? TableContainerEdit : TableContainer;
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}-grid`,
+    className: classNames(`${prefix}-grid`, {
+      [`${prefix}-grid-light`]: theme === 'light',
+      [`${prefix}-grid-dark`]: theme === 'dark'
+    }),
     style: {
       minHeight: minHeight ?? undefined,
       maxHeight: height ?? undefined
@@ -346,7 +332,10 @@ const Grid = props => {
       paddingTop: 40
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}-grid`,
+    className: classNames(`${prefix}-grid`, {
+      [`${prefix}-grid-light`]: theme === 'light',
+      [`${prefix}-grid-dark`]: theme === 'dark'
+    }),
     style: {
       // minHeight: minHeight ?? undefined,
       maxHeight: windowSize.innerHeight - 70

package/es/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,9 @@ export type ColumnTable<RecordType = AnyObject> = {
     headerTextWrap?: boolean;
     ellipsis?: boolean;
     allowResizing?: 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,6 +191,7 @@ export type Locale = TableLocale & {
 };
 export type ColumnsTable<RecordType = AnyObject> = ColumnTable<RecordType>[];
 export type TableProps<RecordType = AnyObject> = {
+    theme?: 'dark' | 'light';
     title?: ReactNode | ((data: RecordType) => ReactNode);
     editAble?: boolean;
     infiniteScroll?: boolean;
@@ -260,6 +264,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/es/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/lib/grid-component/type.d.ts

@@ -9,6 +9,7 @@ import type { FieldNames, FilterFunc } from "rc-select/es/Select";
 import type { ColorPickerProps } from "antd";
 import type { FixedType } from "rc-base-table/lib/interface";
 import type { TableLocale } from "rc-master-ui/lib/table/interface";
+import type { Cell, Header, Row } from '@tanstack/react-table';
 export type IColumnType = "number" | "time" | "date" | "week" | "month" | "file" | "quarter" | "year" | "datetime" | "string" | "boolean" | "checkbox" | "color" | null | undefined;
 export type AnyObject = Record<PropertyKey, any>;
 export type SelectMode = 'checkbox' | 'radio' | undefined;
@@ -135,6 +136,9 @@ export type ColumnTable<RecordType = AnyObject> = Omit<RcColumnType<RecordType>,
     editFromSettings?: IEditFromSettings;
     fixedType?: FixedType;
     headerTextWrap?: 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 IFormOpen = {
     value?: any;
@@ -193,6 +197,7 @@ export type Sort = {
 export interface TableProps<RecordType = AnyObject> extends Omit<RcTableProps<RecordType>, 'columns' | 'rowSelection' | 'loading' | 'dataSource' | 'summary' | 'pagination' | 'locale'> {
     editAble?: boolean;
     infiniteScroll?: boolean;
+    theme?: 'dark' | 'light';
     next?: () => void;
     locale?: Locale;
     groupAble?: boolean;
@@ -266,6 +271,9 @@ export interface TableProps<RecordType = AnyObject> extends Omit<RcTableProps<Re
     wrapSettings?: IWrapSettings;
     actionTemplate?: ReactNode | ReactElement | (() => ReactNode | ReactElement);
     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 PaginationConfig = TablePaginationConfig & {
     currentPage?: number;

package/lib/table-component/TableContainer.js

@@ -86,6 +86,9 @@ const TableContainer = props => {
     columnSizing,
     columnSizingInfo,
     rowClassName,
+    onRowStyles,
+    onRowFooterStyles,
+    onRowHeaderStyles,
     title
   } = props;
   const tableContainerRef = _react.default.useRef(null);
@@ -103,6 +106,15 @@ const TableContainer = props => {
       settableHeight(totalHeight - topHeight - bottomHeight);
     }
   }, [id, height, editAble, minHeight]);
+  _react.default.useEffect(() => {
+    const handleClickOutside = () => {
+      setFocusedCell(undefined);
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
   const visibleColumns = table.getVisibleLeafColumns();
   const fixedLeftColumns = table.getState().columnPinning.left ? visibleColumns.filter(vc => table.getState().columnPinning.left?.includes(vc.id)) : [];
   const fixedRightColumns = table.getState().columnPinning.right ? visibleColumns.filter(vc => table.getState().columnPinning.right?.includes(vc.id)) : [];
@@ -271,6 +283,9 @@ const TableContainer = props => {
       focusedCell,
       setFocusedCell,
       rowClassName,
+      onRowStyles,
+      onRowFooterStyles,
+      onRowHeaderStyles,
       table,
       pagination
     }

package/lib/table-component/TableContainerEdit.js

@@ -132,7 +132,8 @@ const TableContainerEdit = props => {
     setColumns,
     columnSizing,
     columnSizingInfo,
-    rowClassName
+    rowClassName,
+    onRowStyles
   } = props;
   const containerRef = _react.default.useRef(null);
   const bottomToolbarRef = _react.default.useRef(null);
@@ -1902,7 +1903,8 @@ const TableContainerEdit = props => {
       handleCellClick,
       pagination,
       rowClassName,
-      rowEditable
+      rowEditable,
+      onRowStyles
     }
   }, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, {
     contextMenuItems: contextMenuItems,
@@ -1931,14 +1933,15 @@ const TableContainerEdit = props => {
   }))), /*#__PURE__*/_react.default.createElement("div", {
     ref: bottomToolbarRef
   }, toolbarItemsBottom && toolbarItemsBottom.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
-    className: 'ui-rc-toolbar-bottom'
+    className: (0, _classnames.default)('ui-rc-toolbar-bottom', {
+      'ui-rc-toolbar-bottom_border-bottom': !pagination || infiniteScroll
+    })
     // style={{ border: '0 1px 1px 1px solid #e0e0e0' }}
-    ,
-    style: {
-      borderBottom: '1px solid #e0e0e0',
-      borderRight: '1px solid #e0e0e0',
-      borderLeft: '1px solid #e0e0e0'
-    }
+    // style={{
+    //   borderBottom: '1px solid #e0e0e0',
+    //   borderRight: '1px solid #e0e0e0',
+    //   borderLeft: '1px solid #e0e0e0'
+    // }}
   }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
     style: {
       width: '100%'
@@ -1948,9 +1951,7 @@ const TableContainerEdit = props => {
     onClick: ({}) => {
       setEditingKey('');
     }
-  })), pagination && !infiniteScroll && /*#__PURE__*/_react.default.createElement(_pagination.default
-  // style={{padding: '0.75rem 1rem'}}
-  , (0, _extends2.default)({}, pagination, {
+  })), pagination && !infiniteScroll && /*#__PURE__*/_react.default.createElement(_pagination.default, (0, _extends2.default)({}, pagination, {
     rootClassName: 'pagination-template',
     showSizeChanger: true,
     responsive: true,