es-grid-template 1.7.29 → 1.7.31

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

@@ -129,7 +129,9 @@ const TableBodyCellEdit = props => {
     handleDeleteContent,
     reset,
     setValue,
-    handleAddMulti,
+    getValues,
+    handleCellChange,
+    // handleAddMulti,
     dataErrors,
     expanded,
     setExpanded,
@@ -155,12 +157,16 @@ const TableBodyCellEdit = props => {
   const isPinned = cell.column.getIsPinned();
   const isLastLeftPinnedColumn = isPinned === "left" && cell.column.getIsLastColumn("left");
   const isFirstRightPinnedColumn = isPinned === "right" && cell.column.getIsFirstColumn("right");
+  const selectRowIds = _react.default.useMemo(() => {
+    return startCell && endCell ? (0, _utils.getRowIdsBetween)(table, startCell.rowId, endCell.rowId) : [];
+  }, [endCell, startCell, table]);
   const isCellSelected = _react.default.useMemo(() => {
     if (!startCell || !endCell) return false;
-    const rowIds = (0, _utils.getRowIdsBetween)(table, startCell.rowId, endCell.rowId);
+
+    // const rowIds = getRowIdsBetween(table, startCell.rowId, endCell.rowId);
     const colIds = (0, _utils.getColIdsBetween)(table, startCell.colId, endCell.colId);
-    return rowIds.includes(cell.row.id) && colIds.includes(cell.column.id);
-  }, [cell.column.id, cell.row.id, endCell, startCell, table]);
+    return selectRowIds.includes(cell.row.id) && colIds.includes(cell.column.id);
+  }, [cell.column.id, cell.row.id, endCell, selectRowIds, startCell, table]);
   const editType = typeof columnMeta.editType === 'function' ? columnMeta.editType(record) : columnMeta.editType;
   const {
     rowRange,
@@ -191,136 +197,6 @@ const TableBodyCellEdit = props => {
   const isLeftPaste = colIdxPaste === pasteRangeState.startColIndex;
   const isRightPaste = colIdxPaste === pasteRangeState.endColIndex;
   const parrents = cell.row.getParentRows();
-  if (cell.column.id === "#") {
-    return /*#__PURE__*/_react.default.createElement("td", {
-      key: cell.id,
-      className: (0, _classnames.default)(`${prefix}-grid-cell`, {
-        [`${prefix}-grid-cell-ellipsis`]: true,
-        [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
-        [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
-        [`${prefix}-grid-cell-text-center`]: columnMeta?.headerTextAlign === 'center',
-        [`${prefix}-grid-cell-text-right`]: columnMeta?.headerTextAlign === 'right'
-      }),
-      style: {
-        display: 'flex',
-        height: '36px',
-        width: cell.column.getSize(),
-        ...(0, _utils.getCommonPinningStyles)(cell.column)
-      }
-    }, cell.column.getIndex() === expandIconColumnIndex && /*#__PURE__*/_react.default.createElement("div", {
-      className: "ui-rc-table-row-expand-trigger",
-      style: {
-        paddingLeft: `${cell.row.depth * 25}px`
-      }
-    }, /*#__PURE__*/_react.default.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/_react.default.createElement("button", {
-      // onClick: row.getToggleExpandedHandler(),
-      onClick: () => {
-        const keys = Object.keys(expanded);
-        // @ts-ignore
-        const tmp = {
-          ...expanded
-        };
-        if (keys.includes(cell.row.id)) {
-          delete tmp[cell.row.id];
-          setExpanded(tmp);
-        } else {
-          setExpanded(old => ({
-            ...old,
-            [cell.row.id]: true
-          }));
-        }
-      },
-      style: {
-        cursor: "pointer"
-      },
-      className: "ui-rc-table-row-expand"
-    }, cell.row.getIsExpanded() ? /*#__PURE__*/_react.default.createElement("span", {
-      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
-    }) : /*#__PURE__*/_react.default.createElement("span", {
-      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
-    })) : /*#__PURE__*/_react.default.createElement("span", {
-      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
-    }))), renderCellIndex({
-      parrents,
-      cell
-    }));
-  }
-  if (cell.column.id === "command") {
-    return /*#__PURE__*/_react.default.createElement("td", {
-      key: cell.id,
-      className: (0, _classnames.default)(`${prefix}-grid-cell`, {
-        [`${prefix}-grid-cell-ellipsis`]: true,
-        [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
-        [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
-        [`${prefix}-grid-cell-text-center`]: columnMeta?.headerTextAlign === 'center',
-        [`${prefix}-grid-cell-text-right`]: columnMeta?.headerTextAlign === 'right'
-      }),
-      style: {
-        display: 'flex',
-        height: '36px',
-        width: cell.column.getSize(),
-        ...(0, _utils.getCommonPinningStyles)(cell.column)
-      }
-    }, renderCommand({
-      cell,
-      commandClick,
-      id,
-      data: originData
-    }));
-  }
-  if (cell.column.id === "selection_column") {
-    return /*#__PURE__*/_react.default.createElement("td", {
-      key: cell.id,
-      className: (0, _classnames.default)(`${prefix}-grid-cell cell-editable111 `, {
-        [`${prefix}-grid-cell-ellipsis`]: true,
-        [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
-        [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
-        [`${prefix}-grid-cell-text-center`]: columnMeta?.headerTextAlign === 'center',
-        [`${prefix}-grid-cell-text-right`]: columnMeta?.headerTextAlign === 'right'
-      }),
-      style: {
-        display: 'flex',
-        height: '36px',
-        width: cell.column.getSize(),
-        ...(0, _utils.getCommonPinningStyles)(cell.column)
-      }
-    }, cell.column.getIndex() === expandIconColumnIndex && /*#__PURE__*/_react.default.createElement("div", {
-      className: "ui-rc-table-row-expand-trigger",
-      style: {
-        paddingLeft: `${cell.row.depth * 25}px`
-      }
-    }, /*#__PURE__*/_react.default.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/_react.default.createElement("button", {
-      // onClick: row.getToggleExpandedHandler(),
-      onClick: () => {
-        const keys = Object.keys(expanded);
-        // @ts-ignore
-        const tmp = {
-          ...expanded
-        };
-        if (keys.includes(cell.row.id)) {
-          delete tmp[cell.row.id];
-          setExpanded(tmp);
-        } else {
-          setExpanded(old => ({
-            ...old,
-            [cell.row.id]: true
-          }));
-        }
-      },
-      style: {
-        cursor: "pointer"
-      },
-      className: "ui-rc-table-row-expand"
-    }, cell.row.getIsExpanded() ? /*#__PURE__*/_react.default.createElement("span", {
-      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
-    }) : /*#__PURE__*/_react.default.createElement("span", {
-      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
-    })) : /*#__PURE__*/_react.default.createElement("span", {
-      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
-    }))), renderSelection({
-      cell
-    }));
-  }
   const triggerDragPaste = (pasteState, ctrlKey) => {
     const tmpCols = table.getVisibleLeafColumns();
     const rowPasteIds = (0, _utils.getRowIdsBetween)(table, startPasteCell?.rowId ?? '', endPasteCell?.rowId ?? '');
@@ -452,32 +328,6 @@ const TableBodyCellEdit = props => {
     const rs = (0, _utils.unFlattenData)(rsFilterData);
     triggerPaste?.(pastedRows, colPasteds, rs, copyRows);
   };
-  function handleMouseDown(rowId, colId) {
-    setIsSelecting?.(true);
-    if (startCell?.rowId !== rowId || startCell?.colId !== colId || endCell?.rowId !== rowId || endCell?.colId !== colId) {
-      setStartCell?.({
-        rowId,
-        colId
-      });
-      setEndCell?.({
-        rowId,
-        colId
-      });
-      setRangeState?.((0, _utils.getSelectedCellMatrix)(table, {
-        rowId,
-        colId
-      }, {
-        rowId,
-        colId
-      }));
-    }
-    if (focusedCell?.rowId !== cell.row.id || focusedCell?.colId !== cell.column.id) {
-      setFocusedCell?.({
-        rowId: cell.row.id,
-        colId: cell.column.id
-      });
-    }
-  }
   function handleMouseEnter(rowId, colId) {
     if (isSelecting) {
       setEndCell?.({
@@ -676,6 +526,7 @@ const TableBodyCellEdit = props => {
           });
         }
       }
+      return;
     }
     if (e.key === 'ArrowRight') {
       e.preventDefault();
@@ -707,6 +558,7 @@ const TableBodyCellEdit = props => {
           align: 'center'
         });
       }
+      return;
     }
     if (e.key === 'ArrowLeft') {
       e.preventDefault();
@@ -739,14 +591,246 @@ const TableBodyCellEdit = props => {
           align: 'center'
         });
       }
+      return;
     }
     if (e.key === 'Delete') {
       handleDeleteContent?.();
+      return;
     }
     if (e.key === 'Enter') {
       handleEdit(e);
+      return;
+    }
+    if (e.key.length === 1) {
+      e.preventDefault();
+      e.stopPropagation();
+      handleEdit(e);
+      // setValue(cell.column.id, editType === 'numeric' ? (!isNaN(Number(e.key)) ? Number(e.key) : '') : e.key)
     }
   }
+  function handleMouseDown(rowId, colId) {
+    setIsSelecting?.(true);
+    if (startCell?.rowId !== rowId || startCell?.colId !== colId || endCell?.rowId !== rowId || endCell?.colId !== colId) {
+      setStartCell?.({
+        rowId,
+        colId
+      });
+      setEndCell?.({
+        rowId,
+        colId
+      });
+      setRangeState?.((0, _utils.getSelectedCellMatrix)(table, {
+        rowId,
+        colId
+      }, {
+        rowId,
+        colId
+      }));
+    }
+    if (focusedCell?.rowId !== cell.row.id || focusedCell?.colId !== cell.column.id) {
+      setFocusedCell?.({
+        rowId: cell.row.id,
+        colId: cell.column.id
+      });
+    }
+  }
+  const handleMouseDownIndex = rowId => {
+    const allColumns = table.getVisibleLeafColumns();
+    const startCol = allColumns[0].id;
+    const endCol = allColumns[allColumns.length - 1].id;
+    setStartCell?.({
+      rowId,
+      colId: startCol
+    });
+    setEndCell?.({
+      rowId,
+      colId: endCol
+    });
+    setRangeState?.((0, _utils.getSelectedCellMatrix)(table, {
+      rowId,
+      colId: startCol
+    }, {
+      rowId,
+      colId: endCol
+    }));
+  };
+  if (cell.column.id === "#") {
+    return /*#__PURE__*/_react.default.createElement("td", {
+      key: cell.id,
+      className: (0, _classnames.default)(`${prefix}-grid-cell ${prefix}-grid-cell-index`, {
+        [`${prefix}-grid-cell-ellipsis`]: true,
+        [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
+        [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
+        [`${prefix}-grid-cell-text-center`]: columnMeta?.headerTextAlign === 'center',
+        [`${prefix}-grid-cell-text-right`]: columnMeta?.headerTextAlign === 'right',
+        // [`${prefix}-grid-cell-index-selected`]: rowRange?.includes(cell.row.id),
+        [`${prefix}-grid-cell-index-selected`]: selectRowIds?.includes(cell.row.id)
+      }),
+      style: {
+        display: 'flex',
+        height: '36px',
+        userSelect: 'none',
+        width: cell.column.getSize(),
+        // minWidth: cell.column.getSize(),
+        // maxWidth: cell.column.getSize(),
+        ...(0, _utils.getCommonPinningStyles)(cell.column)
+      },
+      onMouseDown: () => {
+        if (record[rowKey] === editingKey) {
+          setFocusedCell?.({
+            rowId: cell.row.id,
+            colId: cell.column.id
+          });
+        } else {
+          handleMouseDownIndex(cell.row.id);
+          if (editingKey) {
+            setTimeout(() => {
+              setEditingKey?.('');
+              reset?.();
+            });
+          }
+
+          // reset?.()
+        }
+      }
+    }, cell.column.getIndex() === expandIconColumnIndex && /*#__PURE__*/_react.default.createElement("div", {
+      className: "ui-rc-table-row-expand-trigger",
+      style: {
+        paddingLeft: `${cell.row.depth * 25}px`
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/_react.default.createElement("button", {
+      // onClick: row.getToggleExpandedHandler(),
+      onClick: () => {
+        const keys = Object.keys(expanded);
+        // @ts-ignore
+        const tmp = {
+          ...expanded
+        };
+        if (keys.includes(cell.row.id)) {
+          delete tmp[cell.row.id];
+          setExpanded(tmp);
+        } else {
+          setExpanded(old => ({
+            ...old,
+            [cell.row.id]: true
+          }));
+        }
+      },
+      style: {
+        cursor: "pointer"
+      },
+      className: "ui-rc-table-row-expand"
+    }, cell.row.getIsExpanded() ? /*#__PURE__*/_react.default.createElement("span", {
+      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
+    }) : /*#__PURE__*/_react.default.createElement("span", {
+      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
+    })) : /*#__PURE__*/_react.default.createElement("span", {
+      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
+    }))), renderCellIndex({
+      parrents,
+      cell
+    }));
+  }
+  if (cell.column.id === "command") {
+    return /*#__PURE__*/_react.default.createElement("td", {
+      key: cell.id,
+      className: (0, _classnames.default)(`${prefix}-grid-cell`, {
+        [`${prefix}-grid-cell-ellipsis`]: true,
+        [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
+        [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
+        [`${prefix}-grid-cell-text-center`]: columnMeta?.headerTextAlign === 'center',
+        [`${prefix}-grid-cell-text-right`]: columnMeta?.headerTextAlign === 'right'
+      }),
+      style: {
+        display: 'flex',
+        height: '36px',
+        width: cell.column.getSize(),
+        // minWidth: cell.column.getSize(),
+        // maxWidth: cell.column.getSize(),
+        ...(0, _utils.getCommonPinningStyles)(cell.column)
+      }
+    }, renderCommand({
+      cell,
+      commandClick,
+      id,
+      data: originData
+    }));
+  }
+  if (cell.column.id === "selection_column") {
+    return /*#__PURE__*/_react.default.createElement("td", {
+      key: cell.id,
+      className: (0, _classnames.default)(`${prefix}-grid-cell cell-editable111 `, {
+        [`${prefix}-grid-cell-ellipsis`]: true,
+        [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
+        [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
+        [`${prefix}-grid-cell-text-center`]: columnMeta?.headerTextAlign === 'center',
+        [`${prefix}-grid-cell-text-right`]: columnMeta?.headerTextAlign === 'right'
+      }),
+      style: {
+        display: 'flex',
+        height: '36px',
+        width: cell.column.getSize(),
+        // minWidth: cell.column.getSize(),
+        // maxWidth: cell.column.getSize(),
+        ...(0, _utils.getCommonPinningStyles)(cell.column)
+      }
+    }, cell.column.getIndex() === expandIconColumnIndex && /*#__PURE__*/_react.default.createElement("div", {
+      className: "ui-rc-table-row-expand-trigger",
+      style: {
+        paddingLeft: `${cell.row.depth * 25}px`
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/_react.default.createElement("button", {
+      // onClick: row.getToggleExpandedHandler(),
+      onClick: () => {
+        const keys = Object.keys(expanded);
+        // @ts-ignore
+        const tmp = {
+          ...expanded
+        };
+        if (keys.includes(cell.row.id)) {
+          delete tmp[cell.row.id];
+          setExpanded(tmp);
+        } else {
+          setExpanded(old => ({
+            ...old,
+            [cell.row.id]: true
+          }));
+        }
+      },
+      style: {
+        cursor: "pointer"
+      },
+      className: "ui-rc-table-row-expand"
+    }, cell.row.getIsExpanded() ? /*#__PURE__*/_react.default.createElement("span", {
+      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
+    }) : /*#__PURE__*/_react.default.createElement("span", {
+      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
+    })) : /*#__PURE__*/_react.default.createElement("span", {
+      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
+    }))), renderSelection({
+      cell
+    }));
+  }
+  const handleChange = () => {
+    const currentRowIndex = allRows.findIndex(r => r.id === editingKey);
+    const formState = getValues();
+    const itemState = getValues(cell.column.id);
+    const prevState = record[cell.column.id];
+    const newState = itemState;
+    if (newState !== prevState) {
+      handleCellChange?.({
+        key: cell.row.id,
+        field: cell.column.id,
+        record: formState,
+        prevState,
+        newState,
+        option: newState,
+        indexCol: cell.column.getIndex(),
+        indexRow: currentRowIndex,
+        type: 'blur'
+      });
+    }
+  };
   return /*#__PURE__*/_react.default.createElement("td", {
     key: cell.id,
     ref: el => {
@@ -786,6 +870,8 @@ const TableBodyCellEdit = props => {
     style: {
       display: 'flex',
       width: cell.column.getSize(),
+      // minWidth: cell.column.getSize(),
+      // maxWidth: cell.column.getSize(),
       height: '36px',
       ...(0, _utils.getCommonPinningStyles)(cell.column),
       cursor: isPasting ? 'crosshair' : undefined
@@ -803,6 +889,14 @@ const TableBodyCellEdit = props => {
             setEditingKey?.('');
             reset?.();
           });
+
+          // const currentEditColumn  =  table.getVisibleFlatColumns().find((it) => it.id === focusedCell?.colId)
+
+          // if ()
+
+          // handleChange()
+          // setEditingKey?.('')
+          // reset?.()
         }
 
         // reset?.()
@@ -829,8 +923,6 @@ const TableBodyCellEdit = props => {
           if (e.key === 'Enter') {
             e.preventDefault();
             e.stopPropagation();
-            setEditingKey?.('');
-            reset?.();
             const currentRowIndex = allRows.findIndex(r => r.id === cell.row.id);
             const nextRow = allRows[currentRowIndex + 1];
             if (nextRow) {
@@ -853,47 +945,38 @@ const TableBodyCellEdit = props => {
                 rowId: nextRow.id,
                 colId: cell.column.id
               }));
-
-              // columnVirtualizer.scrollToIndex(nextCol.getIndex(), { align: 'center' })
-            } else {
-              const newRowId = (0, _utils.newGuid)();
-              handleAddMulti?.({}, 1, newRowId);
-              setFocusedCell?.({
-                rowId: newRowId,
-                colId: cell.column.id
-              });
-              setStartCell?.({
-                rowId: newRowId,
-                colId: cell.column.id
+              rowVirtualizer.scrollToIndex(nextRow.index, {
+                align: 'center'
               });
-              setEndCell?.({
-                rowId: newRowId,
-                colId: cell.column.id
-              });
-              setTimeout(() => {
-                setRangeState?.((0, _utils.getSelectedCellMatrix)(table, {
-                  rowId: newRowId,
-                  colId: cell.column.id
-                }, {
-                  rowId: newRowId,
-                  colId: cell.column.id
-                }));
-                // rowVirtualizer.scrollToIndex(101)
-              }, 0);
-            }
-            if (editingKey && editingKey !== '' && (rowNumber ?? 0) + 1 < (0, _utils.flattenArray)(dataSource).length) {
-
-              // handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event)
             } else {
-              // // focus cell hiện tại và tắt edit
-              // handleFocusCell((rowNumber ?? 0), colIndex, column, 'vertical', event)
-              // setEditingKey('')
 
-              // thêm dòng mới
+              // const newRowId = newGuid()
+              // handleAddMulti?.({}, 1, newRowId)
 
-              // handleAddSingle()
-              // handleFocusCell((rowNumber ?? 0) + 1, colIndex, column, 'vertical', event, true)
+              // setFocusedCell?.({ rowId: newRowId, colId: cell.column.id });
+
+              // setStartCell?.({ rowId: newRowId, colId: cell.column.id });
+              // setEndCell?.({ rowId: newRowId, colId: cell.column.id });
+
+              // setTimeout(() => {
+              //   setRangeState?.(getSelectedCellMatrix(table, { rowId: newRowId, colId: cell.column.id }, { rowId: newRowId, colId: cell.column.id }))
+              //   // rowVirtualizer.scrollToIndex(currentRowIndex + 1, { align: 'end', })
+
+              // })
+
+              // setTimeout(() => {
+
+              //   rowVirtualizer.scrollToIndex(currentRowIndex + 1, { align: 'center', })
+
+              // }, 100)
             }
+            handleChange();
+            setEditingKey?.('');
+            reset?.();
+
+            // setTimeout(() => {
+
+            // })
           }
         }
       }
@@ -967,6 +1050,8 @@ const TableBodyCellEdit = props => {
     onDoubleClick: handlePointDoubleClick
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: 'dot-point'
-  })));
+  })), !isEditing && rowError && rowError[cell.column.id]?.field === cell.column.id && /*#__PURE__*/_react.default.createElement("span", {
+    className: "isValid"
+  }));
 };
 var _default = exports.default = TableBodyCellEdit;

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

@@ -29,8 +29,6 @@ const TableFooterRow = ({
   // const a  =  table.getVisibleFlatColumns()
   const visibleColumns = table.getVisibleLeafColumns();
 
-  // console.log('a', a)
-
   // const 
 
   return /*#__PURE__*/_react.default.createElement("tr", {

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

@@ -370,7 +370,7 @@ function getFixedFields(columns, type) {
   const result = [];
   function traverse(cols) {
     for (const col of cols) {
-      if ((col.fixed ?? col.fixedType) === type && col.field) {
+      if ((col.fixed ?? col.fixedType) === type && col.field && col.visible !== false) {
         result.push(col.field);
       }
       if (col.children && col.children.length > 0) {

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

@@ -1,5 +1,4 @@
 import InternalTable from './InternalTable';
-import type { ColumnsTable, TableProps, ColumnTable, CommandItem, ContextMenuItem } from './type';
-import type { ToolbarItem } from "rc-master-ui/es/toolbar";
-export type { ColumnsTable, TableProps, ColumnTable, ToolbarItem, CommandItem, ContextMenuItem };
+import type { ColumnsTable, TableProps, ColumnTable, ContextMenuItem } from './type';
+export type { ColumnsTable, TableProps, ColumnTable, ContextMenuItem };
 export default InternalTable;

package/lib/table-component/index.js

@@ -6,4 +6,5 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _InternalTable = _interopRequireDefault(require("./InternalTable"));
+// import type {ToolbarItem} from "rc-master-ui/es/toolbar"
 var _default = exports.default = _InternalTable.default;

package/lib/table-component/style.scss

@@ -99,7 +99,7 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
 
       }
 
-    
+
 
       &.#{$prefix}-grid-cell-wrap {
         white-space: normal;
@@ -127,6 +127,7 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
       background-color: #ffffff;
 
       .#{$prefix}-grid-cell {
+        font-weight: 500;
 
         background-color: $body-color;
         // border-inline-end: 1px solid #e0e0e0;
@@ -261,13 +262,20 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
 
         background-color: $body-color;
 
-          &.#{$prefix}-grid-cell-ellipsis:not(:has(>.ui-rc_cell-content)) {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        word-break: keep-all;
+        &.#{$prefix}-grid-cell-ellipsis:not(:has(>.ui-rc_cell-content)) {
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          word-break: keep-all;
 
-      }
+
+
+        }
+
+        &.#{$prefix}-grid-cell-index-selected {
+          background-color: $cell-index-selected-bg;
+          color: #ffffff;
+        }
 
 
 
@@ -520,25 +528,26 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
         }
 
 
-        // &.isValid {
-        //   &::after {
-        //     content: "";
-        //     position: absolute;
-        //     top: 0;
-        //     right: 0;
-        //     width: 0;
-        //     height: 0;
-        //     border-top: 0 solid transparent;
-        //     border-right: 8px solid red;
-        //     border-bottom: 8px solid transparent;
-        //   }
-        // }
+        .isValid {
+          &::after {
+            content: "";
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 0;
+            height: 0;
+            border-top: 0 solid transparent;
+            border-right: 8px solid red;
+            border-bottom: 8px solid transparent;
+          }
+        }
       }
 
     }
 
     .#{$prefix}-grid-tfoot {
       background-color: rgb(250, 250, 250);
+
       .#{$prefix}-grid-cell {
         background-color: $body-color;
         border-inline-end: 1px solid $tableBorderColor;