es-grid-template 1.3.6 → 1.3.8

package/es/grid-component/hooks/utils.js

@@ -171,24 +171,24 @@ export const updateColumnsByGroup = (columns, columnsGroup) => {
     return newColumn;
   });
 };
-export const getDatepickerFormat = (type, col) => {
+export const getDatepickerFormat = (type, format) => {
   const typeFormat = type ? type.toLowerCase() : '';
   switch (typeFormat) {
     case "date":
     case "daterange":
-      return col.format?.dateFormat ? col.format?.dateFormat : 'DD/MM/YYYY';
+      return format?.dateFormat ?? 'DD/MM/YYYY';
     case "datetime":
-      return col.format?.datetimeFormat ? col.format?.datetimeFormat : 'DD/MM/YYYY HH:mm';
+      return format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm';
     case "week":
-      return col.format?.weekFormat ? col.format?.weekFormat : 'DD/MM';
+      return format?.weekFormat ?? 'DD/MM';
     case "month":
-      return col.format?.monthFormat ? col.format?.monthFormat : 'MM/YYYY';
+      return format?.monthFormat ?? 'MM/YYYY';
     case "quarter":
-      return col.format?.dateFormat ? col.format?.dateFormat : 'DD/MM/YYYY';
+      return format?.dateFormat ?? 'DD/MM/YYYY';
     case "year":
-      return col.format?.yearFormat ? col.format?.yearFormat : 'YYYY';
+      return format?.yearFormat ?? 'YYYY';
     case "time":
-      return col.format?.timeFormat ? col.format?.timeFormat : 'HH:mm';
+      return format?.timeFormat ?? 'HH:mm';
     default:
       return 'DD/MM/YYYY';
   }
@@ -317,7 +317,7 @@ export const totalFixedWidth = (columns, type, selectionSettings) => {
     const width = typeof column.width === 'number' ? column.width : parseInt(column.width, 10) || 0; // Chuyển từ chuỗi sang số, nếu không hợp lệ thì lấy 0
     return sum + width;
   }, 0);
-  const selectColumnWidth = !selectionSettings?.mode ? 0.0000001 : typeof selectionSettings?.columnWidth === 'number' ? selectionSettings?.columnWidth : parseInt(selectionSettings?.columnWidth, 10) || 50;
+  const selectColumnWidth = !selectionSettings?.mode ? 0 : typeof selectionSettings?.columnWidth === 'number' ? selectionSettings?.columnWidth : parseInt(selectionSettings?.columnWidth, 10) || 50;
   return totalFixedLeftWidth + selectColumnWidth;
 };
 export const isObjEmpty = obj => {
@@ -741,8 +741,8 @@ export function addRowsUp(array, n) {
           {
             // Lấy giá trị cuối, chuyển về date, cộng thêm (i+1)*step, chuyển lại về định dạng ISO
 
-            const lastDate = new Date(array[m - 1][j]);
-            const newTime = lastDate.getTime() - (i + 1) * steps[j] * -1;
+            const lastDate = new Date(arr[m - 1][j]);
+            const newTime = m === 1 ? lastDate.getTime() - (i + 1) * steps[j] : lastDate.getTime() - (i + 1) * steps[j] * -1;
             newValue = moment(new Date(newTime)).format();
           }
           break;
@@ -794,7 +794,7 @@ export const transformColumns1 = (cols, sortMultiple) => {
     if (!column?.field && !column?.key) {
       return Table.SELECTION_COLUMN;
     }
-    if (column.dataIndex === 'index' || column.field === 'index' || column.dataIndex === '#' || column.dataIndex === '#') {
+    if (column.dataIndex === '#' || column.dataIndex === '#') {
       return {
         ...column
       };
@@ -1165,6 +1165,91 @@ export const filterDataByColumns3 = (data, queries) => {
     return result;
   });
 };
+export const shouldInclude = (item, queries) => {
+  if (item.isFilterState === true) {
+    return true;
+  }
+  let result = null;
+  for (const query of queries) {
+    const {
+      field,
+      value,
+      operator,
+      predicate
+    } = query;
+    const itemValue = item[field];
+    let condition = false;
+    const isDateComparison = isDate(itemValue) || isDateString(value);
+    const itemDate = isDateComparison ? new Date(itemValue) : null;
+    const queryDate = isDateComparison ? parseToDate(value) : null;
+    const itemStr = itemValue?.toString().toLowerCase?.();
+    const queryStr = value?.toString().toLowerCase?.();
+    switch (operator.toLowerCase()) {
+      case "equal":
+        condition = isDateComparison ? compareDates(itemDate, queryDate) : itemValue === value;
+        break;
+      case "notequal":
+        condition = isDateComparison ? !compareDates(itemDate, queryDate) : itemValue !== value;
+        break;
+      case "greaterthan":
+        // @ts-ignore
+        condition = isDateComparison ? itemDate > queryDate : itemValue > value;
+
+        // condition = isDateComparison ? invalidDate(itemDate) && invalidDate(queryDate) && itemDate > queryDate : itemValue > value;
+        break;
+      case "greaterthanorequal":
+        // @ts-ignore
+        condition = isDateComparison ? itemDate >= queryDate : itemValue >= value;
+        break;
+      case "lessthan":
+        // @ts-ignore
+        condition = isDateComparison ? itemDate < queryDate : itemValue < value;
+        break;
+      case "lessthanorequal":
+        // @ts-ignore
+        condition = isDateComparison ? itemDate <= queryDate : itemValue <= value;
+        break;
+      case "contains":
+        condition = itemStr?.includes(queryStr);
+        break;
+      case "startswith":
+        condition = itemStr?.startsWith(queryStr);
+        break;
+      case "endswith":
+        condition = itemStr?.endsWith(queryStr);
+        break;
+      default:
+        console.warn(`Unknown operator: ${operator}`);
+        break;
+    }
+    if (predicate === "and") {
+      result = result === null ? condition : result && condition;
+    } else if (predicate === "or") {
+      result = result === null ? condition : result || condition;
+    }
+  }
+  return result;
+};
+export function filterDataByColumns4(data, queries) {
+  if (!queries || queries.length === 0) {
+    return data;
+  }
+  return data.map(item => {
+    const newItem = {
+      ...item
+    };
+    if (Array.isArray(item.children)) {
+      newItem.children = filterDataByColumns4(item.children, queries);
+    }
+    const isSelfMatched = shouldInclude(item, queries);
+
+    // Nếu chính item thỏa hoặc có con thỏa → giữ lại
+    if (isSelfMatched || newItem.children && newItem.children.length > 0) {
+      return newItem;
+    }
+    return null; // loại bỏ node không phù hợp
+  }).filter(Boolean); // xóa các null
+}
 
 // ======= Helper functions ========
 
@@ -1353,37 +1438,303 @@ export const sortedSetDSC = setValue => {
   });
   return new Set(sorted);
 };
-export const onAddClassSelectedCell = (selectedCells, id) => {
+export function getBottomRowCells(cellSet) {
+  const cells = Array.from(cellSet).map(key => {
+    const [row, col] = key.split('-').map(Number);
+    return {
+      row,
+      col,
+      key
+    };
+  });
+  const maxRow = Math.max(...cells.map(c => c.row));
+  return cells.filter(c => c.row === maxRow).map(c => c.key);
+}
+export function getCellsByPosition(cellSet, position = "bottom") {
+  const cells = Array.from(cellSet).map(key => {
+    const [row, col] = key.split("-").map(Number);
+    return {
+      row,
+      col,
+      key
+    };
+  });
+  switch (position) {
+    case "top":
+      {
+        // const minRow = Math.min(...cells.map(c => c.row));
+        // return cells.filter(c => c.row === minRow).map(c => c.key);
+
+        // const rows = cells.map(c => c.row).filter(r => r > 0);
+        // if (rows.length === 0) return [];
+        // const minRow = Math.min(...rows);
+        // return cells.filter(c => c.row === minRow).map(c => c.key);
+
+        const minRow = Math.min(...cells.map(c => c.row));
+        if (minRow === 0) return []; // Bỏ qua nếu rowIndex = 0
+
+        return cells.filter(c => c.row === minRow).map(c => `${c.row - 1}-${c.col}`);
+      }
+    case "bottom":
+      {
+        const maxRow = Math.max(...cells.map(c => c.row));
+        return cells.filter(c => c.row === maxRow).map(c => c.key);
+      }
+    case "left":
+      {
+        // const minCol = Math.min(...cells.map(c => c.col));
+        // return cells.filter(c => c.col === minCol).map(c => c.key);
+
+        // const cols = cells.map(c => c.col).filter(c => c > 0);
+        // if (cols.length === 0) return [];
+        // const minCol = Math.min(...cols);
+        // return cells.filter(c => c.col === minCol).map(c => c.key);
+
+        const minCol = Math.min(...cells.map(c => c.col));
+        if (minCol === 0) return []; // Bỏ qua nếu colIndex = 0
+
+        // Trả về các ô cùng row, nhưng ở cột bên trái
+        return cells.filter(c => c.col === minCol).map(c => `${c.row}-${c.col - 1}`);
+      }
+    case "right":
+      {
+        const maxCol = Math.max(...cells.map(c => c.col));
+        return cells.filter(c => c.col === maxCol).map(c => c.key);
+      }
+    default:
+      return [];
+  }
+}
+export const addBorderClass = (selectedCells, type, className, id) => {
+  const table = document.querySelector(`#${id}`);
+  const typeCells = getCellsByPosition(selectedCells, type);
+  const selectorsCells = typeCells.map(pos => {
+    const [row, col] = pos.split('-');
+    return `[data-row-index="${row}"][data-col-index="${col}"]`;
+  });
+  const cellsFilter = typeCells.length > 0 ? table?.querySelectorAll(selectorsCells.join(',')) : null;
+  if (cellsFilter && cellsFilter.length > 0) {
+    cellsFilter.forEach(cell => {
+      cell.classList.add(className);
+    });
+  }
+};
+export const removeBorderClass = (selectedCells, type, className, id) => {
+  const table = document.querySelector(`#${id}`);
+  const typeCells = getCellsByPosition(selectedCells, type);
+  const selectorsCells = typeCells.map(pos => {
+    const [row, col] = pos.split('-');
+    return `[data-row-index="${row}"][data-col-index="${col}"]`;
+  });
+  const cellsFilter = typeCells.length > 0 ? table?.querySelectorAll(selectorsCells.join(',')) : null;
+  if (cellsFilter && cellsFilter.length > 0) {
+    cellsFilter.forEach(cell => {
+      cell.classList.remove(className);
+    });
+  }
+};
+export const removeBorderClass2 = (className, id) => {
+  const table = document.querySelector(`#${id}`);
+  const cellsFilter = table ? table?.querySelectorAll(`.ui-rc-table-cell.${className}`) : null;
+  if (cellsFilter && cellsFilter.length > 0) {
+    cellsFilter.forEach(cell => {
+      cell.classList.remove(className);
+    });
+  }
+};
+export const onAddBgSelectedCell = (selectedCells, id) => {
   const selectors = Array.from(selectedCells).map(pos => {
     const [row1, col1] = pos.split('-');
     return `[data-row-index="${row1}"][data-col-index="${col1}"]`;
   });
-
-  // const cells = document.querySelectorAll(selectors.join(','));
-
   const table = document.querySelector(`#${id}`);
-  console.log('table', table);
-  const cells = table?.querySelectorAll(selectors.join(','));
+  const cells = table && selectors.length > 0 ? table?.querySelectorAll(selectors.join(',')) : null;
   if (cells) {
     cells.forEach(cell => {
       cell.classList.add('selected');
     });
   }
+  const rowsArray = [...new Set([...selectedCells].map(item => item.split("-")[0]))];
+  const rowsSelectors = rowsArray.map(r => `.rc-ui-cell-index[data-row-index="${r}"]`).join(", ");
+  const cellsIndex = table && rowsSelectors.length > 0 ? table?.querySelectorAll(rowsSelectors) : null;
+  if (cellsIndex) {
+    cellsIndex.forEach(cell => {
+      cell.classList.add('focus');
+    });
+  }
+
+  // // tăng z-index để hiển thị round point paste
+  // const row  = getLastSelectCell(selectedCells).row
+  // const col  = getLastSelectCell(selectedCells).col
+  // const cell: any = table?.querySelector(`.ui-rc-table-cell[data-row-index="${row}"][data-col-index="${col}"]`)
+  //
+  // if (cell) {
+  //   cell.style.zIndex = 1
+  // }
+  //
+  // if (cell && cell.classList.contains('ui-rc-table-cell-fix-left')) {
+  //   cell.style.zIndex = 3;
+  // }
+
+  //  thêm class border selected
+
+  // addBorderClass(selectedCells, 'bottom', 'cell-border-bottom', id)
+  // addBorderClass(selectedCells, 'right', 'cell-border-right', id)
+  // addBorderClass(selectedCells, 'top', 'cell-border-top', id)
+  // addBorderClass(selectedCells, 'left', 'cell-border-left', id)
 };
-export const onRemoveClassSelectedCell = (selectedCells, id) => {
-  const selectors = Array.from(selectedCells).map(pos => {
-    const [row, col] = pos.split('-');
-    return `[data-row-index="${row}"][data-col-index="${col}"]`;
-  });
+export const onAddBorderSelectedCell = (selectedCells, id) => {
   const table = document.querySelector(`#${id}`);
-  const cells = table?.querySelectorAll(selectors.join(','));
-  // const cells = table?.querySelectorAll(selectors.join(','))
 
-  // const cells = table?.querySelectorAll('.ui-rc-table-cell.selected');
+  // tăng z-index để hiển thị round point paste
+  const row = getLastSelectCell(selectedCells).row;
+  const col = getLastSelectCell(selectedCells).col;
+  const cell = table?.querySelector(`.ui-rc-table-cell[data-row-index="${row}"][data-col-index="${col}"]`);
+  if (cell) {
+    cell.style.zIndex = 1;
+  }
+  if (cell && cell.classList.contains('ui-rc-table-cell-fix-left')) {
+    cell.style.zIndex = 3;
+  }
 
+  //  thêm class border selected
+
+  addBorderClass(selectedCells, 'bottom', 'cell-border-bottom', id);
+  addBorderClass(selectedCells, 'right', 'cell-border-right', id);
+  addBorderClass(selectedCells, 'top', 'cell-border-top', id);
+  addBorderClass(selectedCells, 'left', 'cell-border-left', id);
+};
+export const onRemoveBgSelectedCell = (selectedCells, id, rowsSelected) => {
+  const table = document.querySelector(`#${id}`);
+  const cells = table ? table?.querySelectorAll('.ui-rc-table-cell.selected') : null;
   if (cells) {
     cells.forEach(cell => {
       cell.classList.remove('selected');
     });
   }
+  const cellsIndex = table ? table?.querySelectorAll('.ui-rc-table-cell.focus') : null;
+  if (cellsIndex) {
+    cellsIndex.forEach(cell => {
+      cell.classList.remove('focus');
+    });
+  }
+
+  // xóa class selected ô STT
+
+  if (rowsSelected && rowsSelected.size > 0) {
+    const rowsSelectedArray = [...new Set([...rowsSelected].map(item => item.split("-")[0]))];
+    const rowsSelectedSelectors = rowsSelectedArray.map(r => `.rc-ui-cell-index[data-row-index="${r}"]`).join(", ");
+    const cellsSelectedIndex = table && rowsSelectedSelectors.length > 0 ? table?.querySelectorAll(rowsSelectedSelectors) : null;
+    if (cellsSelectedIndex) {
+      cellsSelectedIndex.forEach(cell => {
+        cell.classList.remove('selected');
+      });
+    }
+  }
+};
+export const onRemoveBorderSelectedCell = (selectedCells, id) => {
+  const table = document.querySelector(`#${id}`);
+
+  // xóa z-index về mặc định
+
+  const row = getLastSelectCell(selectedCells).row;
+  const col = getLastSelectCell(selectedCells).col;
+
+  // const cell: any = table?.querySelector(`.ui-rc-table-cell[data-row-index="${row}"][data-col-index="${col}"]`)
+  const cell = table?.querySelector(`.ui-rc-table-cell[data-row-index="${row}"][data-col-index="${col}"]`);
+  if (cell) {
+    cell.style.zIndex = 0;
+  }
+  if (cell && cell.classList.contains('ui-rc-table-cell-fix-left')) {
+    cell.style.zIndex = 2;
+  }
+
+  //  remove class border
+
+  removeBorderClass2('cell-border-bottom', id);
+  removeBorderClass2('cell-border-top', id);
+  removeBorderClass2('cell-border-right', id);
+  removeBorderClass2('cell-border-left', id);
+
+  // removeBorderClass(selectedCells, 'right', 'cell-border-right', id)
+  // removeBorderClass(selectedCells, 'top', 'cell-border-top', id)
+  // removeBorderClass(selectedCells, 'left', 'cell-border-left', id)
+};
+export const addClassBorderPasteCell = (pasteCells, type, id) => {
+  //  thêm class border
+
+  addBorderClass(pasteCells, 'right', 'cell-paste-border-right', id);
+  addBorderClass(pasteCells, 'left', 'cell-paste-border-left', id);
+  if (type === 'up') {
+    addBorderClass(pasteCells, 'top', 'cell-paste-border-top', id);
+  }
+  if (type === 'down') {
+    addBorderClass(pasteCells, 'bottom', 'cell-paste-border-bottom', id);
+  }
+};
+export const removeClassBorderPasteCell = (pasteCells, type, id) => {
+  //  remove class border
+
+  removeBorderClass(pasteCells, 'bottom', 'cell-paste-border-bottom', id);
+  removeBorderClass(pasteCells, 'right', 'cell-paste-border-right', id);
+  removeBorderClass(pasteCells, 'top', 'cell-paste-border-top', id);
+  removeBorderClass(pasteCells, 'left', 'cell-paste-border-left', id);
+};
+export const addClassCellIndexSelected = (rowsSelected, id) => {
+  // thêm class selected vào ô STT
+  const table = document.querySelector(`#${id}`);
+  if (rowsSelected && rowsSelected.size > 0) {
+    const rowsSelectedArray = [...new Set([...rowsSelected].map(item => item.split("-")[0]))];
+    const rowsSelectedSelectors = rowsSelectedArray.map(r => `.rc-ui-cell-index[data-row-index="${r}"]`).join(", ");
+    const cellsSelectedIndex = table && rowsSelectedSelectors.length > 0 ? table?.querySelectorAll(rowsSelectedSelectors) : null;
+    if (cellsSelectedIndex) {
+      cellsSelectedIndex.forEach(cell => {
+        cell.classList.add('selected');
+      });
+    }
+  }
+};
+export const removeClassCellIndexSelected = (rowsSelected, id) => {
+  // thêm class selected vào ô STT
+  const table = document.querySelector(`#${id}`);
+  if (rowsSelected && rowsSelected.size > 0) {
+    const rowsSelectedArray = [...new Set([...rowsSelected].map(item => item.split("-")[0]))];
+    const rowsSelectedSelectors = rowsSelectedArray.map(r => `.rc-ui-cell-index[data-row-index="${r}"]`).join(", ");
+    const cellsSelectedIndex = table && rowsSelectedSelectors.length > 0 ? table?.querySelectorAll(rowsSelectedSelectors) : null;
+    if (cellsSelectedIndex) {
+      cellsSelectedIndex.forEach(cell => {
+        cell.classList.remove('selected');
+      });
+    }
+  }
+};
+export const showDraggingPoint = (selectedCells, id) => {
+  const row = getLastSelectCell(selectedCells).row;
+  const col = getLastSelectCell(selectedCells).col;
+  const table = document.querySelector(`#${id}`);
+  const cell = table?.querySelector(`.ui-rc-table-cell[data-row-index="${row}"][data-col-index="${col}"]`);
+  const point = cell?.querySelector('.dragging-point');
+  if (point) {
+    point.classList.add('show');
+    point.classList.remove('hidden');
+  }
+};
+export const hideDraggingPoint = (selectedCells, id) => {
+  const table = document.querySelector(`#${id}`);
+
+  // const point = table?.querySelector('.dragging-point.show')
+  // const points = document.querySelectorAll('.dragging-point.show')
+  const points = table?.querySelectorAll('.dragging-point.show');
+
+  // if (point) {
+  //   point.classList.add('hidden')
+  //   point.classList.remove('show')
+  // }
+
+  if (points && points.length > 0) {
+    points.forEach(cell => {
+      cell.classList.add('hidden');
+      cell.classList.remove('show');
+    });
+  }
 };

package/es/grid-component/styles.scss

@@ -5,13 +5,17 @@ $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-index-selected-bg: #0550C5 !default;
-$cell-index-focus-bg: #CEDBEF !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;
@@ -144,6 +148,19 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
 
     .#{$prefix}-table-cell {
       line-height: 22px;
+      &:focus-visible {
+        outline: none;
+      }
+
+
+      &.disable {
+        background-color: #f0f0f0;
+      }
+
+      &.selected {
+        //background: red;
+        background-color: $cell-selected-bg !important;
+      }
 
       .ui-rc-table-cell-content {
         line-height: 22px;
@@ -406,7 +423,20 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
         left: 8px;
       }
 
+      &.rc-ui-cell-index {
+        &.focus {
+          background-color: $cell-index-focus-bg;
+          font-weight: 500;
+        }
+        &.selected {
+          background-color: $cell-index-selected-bg !important;
+          color: #fff;
+          //font-weight: 500;
+        }
+      }
+
       &.cell-editable {
+
         &.cell-border-top {
           border-bottom: 1px solid $border-selected-color;
         }
@@ -415,29 +445,31 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
           border-bottom: 1px solid $border-selected-color;
         }
 
-        &.cell-paste-border-bottom {
-          border-bottom: 1px dashed #949494;
-        }
-
         &.cell-border-left {
           border-inline-end: 1px solid $border-selected-color;
         }
 
-        &.cell-paste-border-left {
-          border-inline-end: 1px dashed #949494;
+        &.cell-border-right {
+          border-inline-end: 1px solid $border-selected-color;
         }
+
         &.cell-paste-border-top {
-          border-bottom: 1px dashed #949494 !important;
+          border-bottom: 1px dashed #949494;
         }
 
-        &.cell-border-right {
-          border-inline-end: 1px solid $border-selected-color;
+        &.cell-paste-border-bottom {
+          border-bottom: 1px dashed #949494;
+        }
+
+        &.cell-paste-border-left {
+          border-inline-end: 1px dashed #949494;
         }
 
         &.cell-paste-border-right {
           border-inline-end: 1px dashed #949494;
         }
 
+
         &.#{$prefix}-table-cell-fix-left {
           &:has(.ui-rc_cell-content.selected) {
           }
@@ -620,18 +652,22 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
         height: 10px;
         position: absolute;
         cursor: crosshair;
-        right: 0;
-        bottom: 0;
+        right: -1px;
+        bottom: -1px;
         //background: red;
 
+        &.hidden {
+          display: none;
+        }
+
         .dot-point {
           position: absolute;
           width: 8px;
           height: 8px;
           border-radius: 6px;
           background-color: $border-selected-color;
-          bottom: -4px;
-          right: -4px;
+          bottom: -3px;
+          right: -3px;
         }
 
       }
@@ -641,9 +677,9 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
       background-color: $cell-selected-bg;
     }
 
-    .ui-rc_cell-content.disable {
-      background-color: #f0f0f0;
-    }
+    //.ui-rc_cell-content.disable {
+    //  background-color: #f0f0f0;
+    //}
 
     .ui-rc_cell-content--index {
       &.focus {
@@ -663,12 +699,12 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
       .#{$prefix}-table-row {
         &.#{$prefix}-table-row-selected {
           >.#{$prefix}-table-cell {
-            background: #FEF2EF;
+            //background: #FEF2EF;
           }
         }
         >.#{$prefix}-table-cell {
           &.#{$prefix}-table-cell-row-hover {
-            background: #FBDED6;
+            //background: #FBDED6;
           }
         }
 

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

@@ -14,7 +14,7 @@ const Grid = props => {
     ...rest
   } = props;
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
-    heightTable: height,
+    $heightTable: height,
     style: {
       position: 'relative'
     }