es-grid-template 1.8.55 → 1.8.56

package/es/table-component/TableContainer.js

@@ -93,6 +93,15 @@ const TableContainer = props => {
       settableHeight(totalHeight - topHeight - bottomHeight);
     }
   }, [id, height, editAble, minHeight]);
+  React.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)) : [];

package/es/table-component/TableContainerEdit.js

@@ -1924,14 +1924,15 @@ const TableContainerEdit = props => {
   }))), /*#__PURE__*/React.createElement("div", {
     ref: bottomToolbarRef
   }, toolbarItemsBottom && toolbarItemsBottom.length > 0 && /*#__PURE__*/React.createElement("div", {
-    className: 'ui-rc-toolbar-bottom'
+    className: classNames('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.createElement(Toolbar, {
     style: {
       width: '100%'
@@ -1941,9 +1942,7 @@ const TableContainerEdit = props => {
     onClick: ({}) => {
       setEditingKey('');
     }
-  })), pagination && !infiniteScroll && /*#__PURE__*/React.createElement(Pagination
-  // style={{padding: '0.75rem 1rem'}}
-  , _extends({}, pagination, {
+  })), pagination && !infiniteScroll && /*#__PURE__*/React.createElement(Pagination, _extends({}, pagination, {
     rootClassName: 'pagination-template',
     showSizeChanger: true,
     responsive: true,

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

@@ -466,24 +466,29 @@ const TableBodyCell = props => {
         //   })
         // }
       }
-    }
+    },
+    onKeyUp: () => {}
 
     // onDoubleClick={() => { }}
     ,
 
     onClick: e => {
-      if (!selectionSettings || selectionSettings.checkboxOnly !== true) {
-        toggleRowSelection({
-          e,
-          cell,
-          setIsSelectionChange,
-          isSelectionChange,
-          selectionSettings
-        });
-        setFocusedCell?.({
-          colId: cell.column.id,
-          rowId: cell.row.id
-        });
+      const selection = window.getSelection();
+      const text = selection ? selection.toString() : "";
+      if (text.length > 0) {} else {
+        if (!selectionSettings || selectionSettings.checkboxOnly !== true) {
+          toggleRowSelection({
+            e,
+            cell,
+            setIsSelectionChange,
+            isSelectionChange,
+            selectionSettings
+          });
+          setFocusedCell?.({
+            colId: cell.column.id,
+            rowId: cell.row.id
+          });
+        }
       }
     }
   }, /*#__PURE__*/React.createElement("div", {

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

@@ -242,12 +242,18 @@ const TableBodyCellEdit = props => {
   const expandIconColumnIndex = expandable?.expandIconColumnIndex;
   const record = cell.row.original;
   const columnMeta = cell.column.columnDef.meta ?? {};
-  const cellContent = columnMeta.type === 'checkbox' ? '' : flexRender(cell.column.columnDef.cell, cell.getContext());
+  const [isOpenTooltip, setIsOpenTooltip] = React.useState(false);
+
+  // const cellContent = columnMeta.type === 'checkbox' ? '' : flexRender(cell.column.columnDef.cell, cell.getContext());
   // const html = ReactDOMServer.renderToStaticMarkup(<>{cellContent}</>);
   // const hasValue = html.trim().length > 0;
 
   const rowError = dataErrors ? dataErrors.find(it => it.id === cell.row.id) : undefined;
   const message = rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : undefined;
+  const tooltipContent = isOpenTooltip === false ? '' : columnMeta?.tooltipDescription ? typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({
+    value: cell.getValue(),
+    record
+  }) : columnMeta.tooltipDescription : columnMeta.template && typeof columnMeta.template !== 'function' ? columnMeta.template : cell.getValue();
   const canEdit = isEditable(cell.column.columnDef.meta, record) && isRowEditable !== false;
 
   // const allRows = table.getRowModel().rows;
@@ -429,7 +435,10 @@ const TableBodyCellEdit = props => {
     const rs = unFlattenData(rsFilterData);
     triggerPaste?.(pastedRows, colPasteds, rs, copyRows);
   };
-  function handleMouseEnter(rowId, colId) {
+  function handleMouseEnter(e, rowId, colId) {
+    if (e.target.firstChild?.clientWidth < e.target.firstChild?.scrollWidth) {
+      setIsOpenTooltip(true);
+    }
     if (isSelecting) {
       setEndCell?.({
         rowId,
@@ -1044,12 +1053,8 @@ const TableBodyCellEdit = props => {
     "data-col-key": cell.column.id,
     "data-row-key": cell.row.id,
     "data-tooltip-id": `${id}-tooltip-content`,
-    "data-tooltip-delay-show": 500
-    // data-tooltip-html={!isEditing && !hasValue && !message ? undefined : ReactDOMServer.renderToStaticMarkup(<>{rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : cellContent}</>)}
-    // data-tooltip-content={!isEditing && !message ? undefined : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : record[columnMeta.field ?? '']}
-    // data-tooltip-content={isEditing && message ? message : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : record[columnMeta.field ?? '']}
-    ,
-    "data-tooltip-html": isEditing && message ? message : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.Fragment, null, cellContent)),
+    "data-tooltip-delay-show": 500,
+    "data-tooltip-html": isEditing && message ? message : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.Fragment, null, tooltipContent)),
     className: classNames(`${prefix}-grid-cell cell-editable editable `, {
       [`${prefix}-grid-cell-ellipsis`]: true,
       'cell-editing': isEditing,
@@ -1099,7 +1104,7 @@ const TableBodyCellEdit = props => {
         }
       }
     },
-    onMouseEnter: () => handleMouseEnter(cell.row.id, cell.column.id),
+    onMouseEnter: e => handleMouseEnter(e, cell.row.id, cell.column.id),
     onMouseUp: e => handleMouseUp(e),
     onKeyDown: e => {
       if (!isEditing) {

package/es/table-component/footer/TableFooterCell.js

@@ -62,8 +62,8 @@ const TableFooterCell = ({
       display: 'flex',
       ...getCommonPinningStyles(column),
       // width: column?.getSize() ?? column.getSize(),
-      minWidth: column?.getSize(),
-      backgroundColor: "#fafafa"
+      minWidth: column?.getSize()
+      // backgroundColor: "#fafafa",
     }
   }, column.id !== "id" && column.id !== "selection_column" ? /*#__PURE__*/React.createElement(React.Fragment, null, col.summaryTemplate ? col.summaryTemplate(numberValue, col.field) : numericFormatter(cellValue, numericFormatProps)) : '');
 };

package/es/table-component/footer/TableFooterRow.js

@@ -29,11 +29,12 @@ const TableFooterRow = ({
     style: {
       display: "grid",
       width: "100%",
-      borderBottom: "1px solid #e0e0e0",
-      borderTop: "1px solid #e0e0e0",
+      // borderBottom: "1px solid #e0e0e0",
+      // borderTop: "1px solid #e0e0e0",
       height: 37,
       gridTemplateColumns: `${table.getVisibleLeafColumns().map(n => `${n.getSize()}fr`).join(" ")}`
-    }
+    },
+    className: "ui-rc-grid-footer-row"
   }, visibleColumns.map(header => {
     return /*#__PURE__*/React.createElement(TableFooterCell, {
       key: header.id

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;
 
@@ -271,7 +287,9 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
           .#{$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;
             }
 
@@ -598,10 +616,26 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
     }
 
     .#{$prefix}-grid-tfoot {
-      background-color: rgb(250, 250, 250);
+      // background-color: rgb(250, 250, 250);
+      // background-color: #fafafa;
+
+      .#{$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;
+
+
+
+      }
 
       .#{$prefix}-grid-cell {
-        background-color: $body-color;
+
+        background-color: #fafafa;
+
         border-inline-end: 1px solid $tableBorderColor;
       }
     }
@@ -796,6 +830,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 +852,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 +1261,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

@@ -188,6 +188,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;

package/lib/table-component/TableContainer.js

@@ -103,6 +103,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)) : [];

package/lib/table-component/TableContainerEdit.js

@@ -1931,14 +1931,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 +1949,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,

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

@@ -473,24 +473,29 @@ const TableBodyCell = props => {
         //   })
         // }
       }
-    }
+    },
+    onKeyUp: () => {}
 
     // onDoubleClick={() => { }}
     ,
 
     onClick: e => {
-      if (!selectionSettings || selectionSettings.checkboxOnly !== true) {
-        (0, _useColumns.toggleRowSelection)({
-          e,
-          cell,
-          setIsSelectionChange,
-          isSelectionChange,
-          selectionSettings
-        });
-        setFocusedCell?.({
-          colId: cell.column.id,
-          rowId: cell.row.id
-        });
+      const selection = window.getSelection();
+      const text = selection ? selection.toString() : "";
+      if (text.length > 0) {} else {
+        if (!selectionSettings || selectionSettings.checkboxOnly !== true) {
+          (0, _useColumns.toggleRowSelection)({
+            e,
+            cell,
+            setIsSelectionChange,
+            isSelectionChange,
+            selectionSettings
+          });
+          setFocusedCell?.({
+            colId: cell.column.id,
+            rowId: cell.row.id
+          });
+        }
       }
     }
   }, /*#__PURE__*/_react.default.createElement("div", {

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

@@ -248,12 +248,18 @@ const TableBodyCellEdit = props => {
   const expandIconColumnIndex = expandable?.expandIconColumnIndex;
   const record = cell.row.original;
   const columnMeta = cell.column.columnDef.meta ?? {};
-  const cellContent = columnMeta.type === 'checkbox' ? '' : (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext());
+  const [isOpenTooltip, setIsOpenTooltip] = _react.default.useState(false);
+
+  // const cellContent = columnMeta.type === 'checkbox' ? '' : flexRender(cell.column.columnDef.cell, cell.getContext());
   // const html = ReactDOMServer.renderToStaticMarkup(<>{cellContent}</>);
   // const hasValue = html.trim().length > 0;
 
   const rowError = dataErrors ? dataErrors.find(it => it.id === cell.row.id) : undefined;
   const message = rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : undefined;
+  const tooltipContent = isOpenTooltip === false ? '' : columnMeta?.tooltipDescription ? typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({
+    value: cell.getValue(),
+    record
+  }) : columnMeta.tooltipDescription : columnMeta.template && typeof columnMeta.template !== 'function' ? columnMeta.template : cell.getValue();
   const canEdit = (0, _utils.isEditable)(cell.column.columnDef.meta, record) && isRowEditable !== false;
 
   // const allRows = table.getRowModel().rows;
@@ -435,7 +441,10 @@ const TableBodyCellEdit = props => {
     const rs = (0, _utils.unFlattenData)(rsFilterData);
     triggerPaste?.(pastedRows, colPasteds, rs, copyRows);
   };
-  function handleMouseEnter(rowId, colId) {
+  function handleMouseEnter(e, rowId, colId) {
+    if (e.target.firstChild?.clientWidth < e.target.firstChild?.scrollWidth) {
+      setIsOpenTooltip(true);
+    }
     if (isSelecting) {
       setEndCell?.({
         rowId,
@@ -1050,12 +1059,8 @@ const TableBodyCellEdit = props => {
     "data-col-key": cell.column.id,
     "data-row-key": cell.row.id,
     "data-tooltip-id": `${id}-tooltip-content`,
-    "data-tooltip-delay-show": 500
-    // data-tooltip-html={!isEditing && !hasValue && !message ? undefined : ReactDOMServer.renderToStaticMarkup(<>{rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : cellContent}</>)}
-    // data-tooltip-content={!isEditing && !message ? undefined : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : record[columnMeta.field ?? '']}
-    // data-tooltip-content={isEditing && message ? message : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : record[columnMeta.field ?? '']}
-    ,
-    "data-tooltip-html": isEditing && message ? message : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : _server.default.renderToStaticMarkup( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, cellContent)),
+    "data-tooltip-delay-show": 500,
+    "data-tooltip-html": isEditing && message ? message : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : _server.default.renderToStaticMarkup( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tooltipContent)),
     className: (0, _classnames.default)(`${prefix}-grid-cell cell-editable editable `, {
       [`${prefix}-grid-cell-ellipsis`]: true,
       'cell-editing': isEditing,
@@ -1105,7 +1110,7 @@ const TableBodyCellEdit = props => {
         }
       }
     },
-    onMouseEnter: () => handleMouseEnter(cell.row.id, cell.column.id),
+    onMouseEnter: e => handleMouseEnter(e, cell.row.id, cell.column.id),
     onMouseUp: e => handleMouseUp(e),
     onKeyDown: e => {
       if (!isEditing) {

package/lib/table-component/footer/TableFooterCell.js

@@ -73,8 +73,8 @@ const TableFooterCell = ({
       display: 'flex',
       ...(0, _utils.getCommonPinningStyles)(column),
       // width: column?.getSize() ?? column.getSize(),
-      minWidth: column?.getSize(),
-      backgroundColor: "#fafafa"
+      minWidth: column?.getSize()
+      // backgroundColor: "#fafafa",
     }
   }, column.id !== "id" && column.id !== "selection_column" ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, col.summaryTemplate ? col.summaryTemplate(numberValue, col.field) : (0, _reactNumericComponent.numericFormatter)(cellValue, numericFormatProps)) : '');
 };

package/lib/table-component/footer/TableFooterRow.js

@@ -37,11 +37,12 @@ const TableFooterRow = ({
     style: {
       display: "grid",
       width: "100%",
-      borderBottom: "1px solid #e0e0e0",
-      borderTop: "1px solid #e0e0e0",
+      // borderBottom: "1px solid #e0e0e0",
+      // borderTop: "1px solid #e0e0e0",
       height: 37,
       gridTemplateColumns: `${table.getVisibleLeafColumns().map(n => `${n.getSize()}fr`).join(" ")}`
-    }
+    },
+    className: "ui-rc-grid-footer-row"
   }, visibleColumns.map(header => {
     return /*#__PURE__*/_react.default.createElement(_TableFooterCell.default, {
       key: header.id

package/lib/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;
 
@@ -271,7 +287,9 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
           .#{$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;
             }
 
@@ -598,10 +616,26 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
     }
 
     .#{$prefix}-grid-tfoot {
-      background-color: rgb(250, 250, 250);
+      // background-color: rgb(250, 250, 250);
+      // background-color: #fafafa;
+
+      .#{$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;
+
+
+
+      }
 
       .#{$prefix}-grid-cell {
-        background-color: $body-color;
+
+        background-color: #fafafa;
+
         border-inline-end: 1px solid $tableBorderColor;
       }
     }
@@ -796,6 +830,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 +852,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 +1261,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/lib/table-component/table/Grid.js

@@ -17,6 +17,7 @@ var _TableContainer = _interopRequireDefault(require("../TableContainer"));
 var _operator = require("../features/operator");
 var _utils = require("../hook/utils");
 var _TableContainerEdit = _interopRequireDefault(require("../TableContainerEdit"));
+var _classnames = _interopRequireDefault(require("classnames"));
 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";
@@ -27,6 +28,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 const Grid = props => {
   const {
+    theme = 'light',
     t,
     id,
     prefix,
@@ -72,7 +74,7 @@ const Grid = props => {
   // const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({})
 
   // const [rowSelection, setRowSelection] = React.useState<RowSelectionState>(convertToObjTrue(selectionSettings?.selectedRowKeys ?? []))
-  const [rowSelection, setRowSelection] = _react.default.useState((0, _utils.convertToObjTrue)(mergedSelectedKeys));
+  const [rowSelection, setRowSelection] = _react.default.useState({});
   // const [rowsSelected, setRowsSelected] = React.useState<RecordType[]>([])
 
   const [grouping, setGrouping] = _react.default.useState([]);
@@ -126,6 +128,9 @@ const Grid = props => {
       }
       return true;
     },
+    initialState: {
+      rowSelection: {}
+    },
     onRowSelectionChange: setRowSelection,
     // RowSelection
 
@@ -173,31 +178,9 @@ const Grid = props => {
       }
     }
   }, [columnHidden, columnSizingInfo]);
-
-  // React.useEffect(() => {
-  //   if (columnSizingInfo.isResizingColumn === false) {
-
-  //     const aa =  updateColumnWidthsRecursive(propsColumns, columnSizing)
-
-  //     setColumns(aa)
-
-  //   }
-
-  // }, [columnSizingInfo])
-
   _react.default.useEffect(() => {
-    // if (Object.keys(rowSelection) !== Object.keys(mergedSelectedKeys) && !isSelectionChange.isChange) {
-    //   setRowSelection(convertToObjTrue(mergedSelectedKeys))
-
-    // }
-
     const isEqual = (0, _utils.isObjEqual)((0, _utils.convertToObjTrue)(mergedSelectedKeys), rowSelection);
     if (!isEqual) {
-      // setIsSelectionChange((prev) => ({
-      //   ...prev,
-      //   isChange: false
-      // }))
-
       setRowSelection((0, _utils.convertToObjTrue)(mergedSelectedKeys));
     }
   }, [mergedSelectedKeys]);
@@ -277,7 +260,10 @@ 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", {
-    className: `${prefix}-grid`,
+    className: (0, _classnames.default)(`${prefix}-grid`, {
+      [`${prefix}-grid-light`]: theme === 'light',
+      [`${prefix}-grid-dark`]: theme === 'dark'
+    }),
     style: {
       minHeight: minHeight ?? undefined,
       maxHeight: height ?? undefined
@@ -350,7 +336,10 @@ const Grid = props => {
       paddingTop: 40
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: `${prefix}-grid`,
+    className: (0, _classnames.default)(`${prefix}-grid`, {
+      [`${prefix}-grid-light`]: theme === 'light',
+      [`${prefix}-grid-dark`]: theme === 'dark'
+    }),
     style: {
       // minHeight: minHeight ?? undefined,
       maxHeight: windowSize.innerHeight - 70

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

@@ -188,6 +188,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;

package/package.json

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