es-grid-template 1.8.57 → 1.8.59

package/es/grid-component/InternalTable.js

@@ -8,7 +8,10 @@ updateOrInsert } from "./hooks";
 import dayjs from "dayjs";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
-import GridEdit from "./table/GridEdit";
+
+// import GridEdit from "./table/GridEdit"
+// import InfiniteTable from "./table/InfiniteTable";
+
 import Grid from "./table/Grid";
 import en from "rc-master-ui/es/date-picker/locale/en_US";
 import vi from "rc-master-ui/es/date-picker/locale/vi_VN";
@@ -37,7 +40,6 @@ import { arrayMove, horizontalListSortingStrategy, SortableContext, useSortable
 // import {CSS} from "@dnd-kit/utilities";
 import { Resizable } from "react-resizable";
 import { faker } from "@faker-js/faker";
-import InfiniteTable from "./table/InfiniteTable";
 import useMergedState from "rc-util/es/hooks/useMergedState";
 import Modal from 'antd/es/modal/Modal';
 dayjs.extend(customParseFormat);
@@ -186,6 +188,7 @@ const InternalTable = props => {
     onFilter,
     onSorter,
     defaultSorter,
+    toolbarItems,
     ...rest
   } = props;
   const id = React.useMemo(() => {
@@ -293,7 +296,7 @@ const InternalTable = props => {
       const hhh = (totalHeight ?? 0) - (title ? title.offsetHeight : 0) - (header ? header.offsetHeight : 0) - (paginationE ? paginationE.offsetHeight : 0) - (toolbar ? toolbar.offsetHeight : 0) - (summaryE ? summaryE.offsetHeight : 0) - (scrollbar ? scrollbar.offsetHeight : 0);
       setHeight1(hhh > 0 ? hhh : 0);
     }
-  }, [id, isFullScreen, windowSize.innerHeight]);
+  }, [id, isFullScreen, windowSize.innerHeight, toolbarItems]);
   const tableRef = React.useRef(null);
   React.useEffect(() => {
     setColumns(propsColumns);
@@ -442,7 +445,8 @@ const InternalTable = props => {
           wrapSettings: wrapSettings
         })),
         // ellipsis: editAble || column.ellipsis !== false && wrapSettings && wrapSettings.wrapMode !== 'Content' && wrapSettings.wrapMode !== 'Both',
-        ellipsis: column.ellipsis !== false || wrapSettings && wrapSettings.wrapMode !== 'Content' && wrapSettings.wrapMode !== 'Both',
+        ellipsis: column.ellipsis !== false && wrapSettings && wrapSettings.wrapMode !== 'Content' && wrapSettings.wrapMode !== 'Both',
+        // ellipsis: false,
         // ellipsis: column.ellipsis !== false,
 
         align: column.textAlign ?? column.align,
@@ -910,7 +914,9 @@ const InternalTable = props => {
   const handleFullScreen = () => {
     setIsFullScreen(!isFullScreen);
   };
-  const TableComponent = infiniteScroll ? InfiniteTable : groupAble ? Group : editAble ? GridEdit : Grid;
+
+  // const TableComponent = infiniteScroll ? InfiniteTable : (groupAble ? Group : editAble ? GridEdit : Grid)
+  const TableComponent = groupAble ? Group : Grid;
   return /*#__PURE__*/React.createElement(Fragment, null, true && /*#__PURE__*/React.createElement(DndContext, {
     sensors: sensors,
     modifiers: [restrictToHorizontalAxis],
@@ -1069,6 +1075,7 @@ const InternalTable = props => {
     commandClick: triggerCommandClick,
     summary: summary,
     pagination: pagination,
+    toolbarItems: toolbarItems,
     scroll: scrollHeight1 - (summary ? 1 : 1) < 0 ? {
       y: 500
     } : {

package/es/grid-component/TableGrid.js

@@ -62,7 +62,7 @@ const TableGrid = props => {
     rowHoverable,
     title,
     format,
-    virtual = true,
+    // virtual = true,
     t,
     lang,
     contextMenuOpen,
@@ -322,7 +322,7 @@ const TableGrid = props => {
       'table-none-column-select': selectionSettings?.mode === undefined && selectionSettings?.type !== 'multiple'
     }, styles.customTable),
     bordered: true,
-    virtual: virtual,
+    virtual: true,
     columns: columns,
     rowKey: rowKey,
     rowHoverable: rowHoverable,

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

@@ -80,7 +80,8 @@ const useColumns = config => {
       const type = getTypeFilter(column);
       // const operatorOptions  = !type || type === 'Text' ? stringOperator : numberOperator
       // const operatorOptions  = type === 'Checkbox' || type === 'Dropdown' || type === 'DropTree' || ty
-      const operatorOptions = type === ('Checkbox' || 'Dropdown' || 'DropTree' || 'CheckboxDropdown') ? booleanOperator : !type || type === 'Text' ? stringOperator : numberOperator;
+      // const operatorOptions = type === ('Checkbox' || 'Dropdown' || 'DropTree' || 'CheckboxDropdown') ? booleanOperator : (!type || type === 'Text' ? stringOperator : numberOperator)
+      const operatorOptions = ['Checkbox', 'Dropdown', 'DropTree', 'CheckboxDropdown'].includes(type) ? booleanOperator : !type || type === 'Text' ? stringOperator : numberOperator;
       return /*#__PURE__*/React.createElement("div", {
         style: {
           padding: 8,

package/es/grid-component/hooks/utils.d.ts

@@ -160,7 +160,7 @@ export declare const showDraggingPoint: (selectedCells: any, id?: any) => void;
 export declare const hideDraggingPoint: (selectedCells: any, id?: any) => void;
 export declare const isRangeCell: (selectedCells: any, type: string, rowIndex: number, colIndex: number) => boolean;
 export declare const isSelectedCell: (selectedCells: any, rowIndex: number, colIndex: number) => any;
-export declare function groupArrayByColumns(arr: any[], columns: string[] | undefined): any;
+export declare function groupArrayByColumns(data: any[], columns: string[] | undefined): any;
 export declare const isFormattedNumber: (str: string) => boolean;
 export declare const detectSeparators: (str: string) => {
     thousandSeparator: string;

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

@@ -2341,13 +2341,13 @@ export const isSelectedCell = (selectedCells, rowIndex, colIndex) => {
   const key = `${rowIndex}-${colIndex}`;
   return selectedCells.has(key);
 };
-export function groupArrayByColumns(arr, columns) {
+export function groupArrayByColumns(data, columns) {
   const result = [];
   const checkEmpty = d => {
     return d === null || d === undefined || d === '';
   };
   if (columns) {
-    arr.forEach(item => {
+    data.forEach(item => {
       let currentLevel = result;
       columns.forEach((column, index) => {
         const value = item[column];
@@ -2355,15 +2355,12 @@ export function groupArrayByColumns(arr, columns) {
         if (existingItem) {
           currentLevel = existingItem.children;
         } else {
-          // const newItem = {[column]: value, field: column, rowId: !isEmpty(value) ? (value) : newGuid(), parentId: !isEmpty(item[columns[index - 1]]) ? (item[columns[index - 1]]) : null, indent: index, children: [] }
           const newItem = {
             [column]: value,
             field: column,
             rowId: newGuid(),
-            // rowId: item[column],
             parentId: !isEmpty(item[columns[index - 1]]) ? item[columns[index - 1]] : null,
-            // parentId: item.rowId[index - 1],
-            // indent: index,
+            // tự tính tổng rồi điền thuộc tính vào
             children: []
           };
           currentLevel.push(newItem);
@@ -2374,13 +2371,11 @@ export function groupArrayByColumns(arr, columns) {
         ...item,
         rowId: item.id ?? item.rowId,
         parentId: !checkEmpty(columns[columns.length - 1]) ? item[columns[columns.length - 1]] : null
-        // parentId: item.rowId[columns.length - 1],
-        // indent: columns.length
       });
     });
     return result;
   } else {
-    return arr;
+    return data;
   }
 }
 export const isFormattedNumber = str => {

package/es/grid-component/type.d.ts

@@ -136,6 +136,7 @@ export type ColumnTable<RecordType = AnyObject> = Omit<RcColumnType<RecordType>,
     editFromSettings?: IEditFromSettings;
     fixedType?: FixedType;
     headerTextWrap?: boolean;
+    allowSelection?: boolean | ((rowData: RecordType) => boolean);
     onCellStyles?: Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'> | ((cellValue: any, cell: Cell<RecordType, unknown>) => Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'>);
     onCellHeaderStyles?: Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'> | ((cell: Header<RecordType, unknown>) => Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'>);
     onCellFooterStyles?: Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'> | ((cellValue: any, cell: Header<RecordType, unknown>) => Omit<React.CSSProperties, 'display' | 'width' | 'minWidth' | 'left' | 'right' | 'position'>);
@@ -197,7 +198,11 @@ 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';
+    theme?: {
+        theme?: 'dark' | 'light';
+        backgroundColor?: string;
+        color?: string;
+    };
     next?: () => void;
     locale?: Locale;
     groupAble?: boolean;

package/es/table-component/InternalTable.js

@@ -34,14 +34,9 @@ import { addRowIdArray, convertFlatColumn1, convertToObj, convertToObjTrue,
 filterDataByColumns, findAllChildrenKeys2, flatColumns2,
 // filterDataByColumns,
 getAllRowKey, getDiffent2Array, getFixedFields, getInvisibleColumns, groupArrayByColumns, isTreeArray, updateWidthsByOther } from "./hook/utils";
-// import GridEdit from './table/GridEdit'
 import { convertToTanStackColumns } from "./hook/useColumns";
 import { convertColumns } from "./hook/convert";
 import { removeInvisibleColumns } from "../grid-component/hooks";
-// import { Modal } from 'antd'
-// import { findAllChildrenKeys2 } from '../grid-component/hooks'
-// import { columns111 } from '../test-2/columns'
-
 dayjs.extend(customParseFormat);
 
 // const MySwal = withReactContent(Swal)

package/es/table-component/TableContainer.js

@@ -1,23 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-// import type { Dispatch, SetStateAction } from "react";
-
 import React from 'react';
-// import TableHead from './header/TableHead'
-// import { sumSize } from './hook/utils'
-
-// import { useVirtualizer } from '@tanstack/react-virtual'
-
 import classNames from 'classnames';
-// import TableBody from './body/TableBody'
 import { TableContext } from "./useContext";
 import Pagination from 'rc-master-ui/es/pagination';
 import { Toolbar } from 'rc-master-ui';
 import { Maximize, Minimize } from 'becoxy-icons';
 import { ColumnsChoose } from "./ColumnsChoose";
-// import TableFooter from './footer/TableFooter'
-// import TableBody from './body/TableBody'
 import { numericFormatter } from 'react-numeric-component';
-// import ComponentSpinner from '../grid-component/LoadingSpinner'
 import TableWrapper from "./table/TableWrapper";
 import { getTableHeight, sumSize, updateColumnWidthsRecursive } from "./hook/utils";
 import { useVirtualizer } from '@tanstack/react-virtual';
@@ -99,6 +88,10 @@ const TableContainer = props => {
   React.useEffect(() => {
     const handleClickOutside = () => {
       setFocusedCell(undefined);
+      setIsSelectionChange(prev => ({
+        ...prev,
+        isChange: false
+      }));
     };
     document.addEventListener('mousedown', handleClickOutside);
     return () => {

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

@@ -65,33 +65,6 @@ const TableBody = ({
   })))) : /*#__PURE__*/React.createElement(Fragment, null, virtualRows.map(virtualRow => {
     const row = rows[virtualRow.index];
     const isEditing = row.id === editingKey;
-
-    // return (
-    //   <tr key={row.id}>
-    //     {row.getVisibleCells().map((cell) => (
-    //       <td
-    //         key={cell.id}
-    //         style={{
-    //           padding: '12px',
-    //           whiteSpace: 'nowrap',
-    //           fontSize: '0.875rem',
-    //           color: '#6b7280',
-    //           border: '1px solid #e5e7eb',
-    //           width: cell.column.getSize(),
-    //           maxWidth: cell.column.getSize(),
-    //           overflow: "hidden",
-    //           ...getCommonPinningStyles(cell.column)
-    //         }}>
-
-    //           {cell.column.id}
-
-    //         {/* {flexRender(cell.column.columnDef.cell, cell.getContext())} */}
-
-    //       </td>
-    //     ))}
-    //   </tr>
-    // )
-
     return /*#__PURE__*/React.createElement(TableBodyRow, _extends({}, rest, {
       table: table,
       tableId: tableId,

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

@@ -181,6 +181,7 @@ const TableBodyCell = props => {
   const isPinned = cell.column.getIsPinned();
   const isLastLeftPinnedColumn = isPinned === "left" && cell.column.getIsLastColumn("left");
   const isFirstRightPinnedColumn = isPinned === "right" && cell.column.getIsFirstColumn("right");
+  const enableClick = typeof columnMeta.allowSelection === 'function' ? columnMeta.allowSelection(record) : columnMeta.allowSelection;
 
   // const selectRowIds = React.useMemo(() => {
 
@@ -423,16 +424,17 @@ const TableBodyCell = props => {
         //   })
         // }
       }
-    },
-    onKeyUp: () => {}
+    }
+
+    // onKeyUp={() => {
 
-    // onDoubleClick={() => { }}
+    // }}
     ,
 
     onClick: e => {
       const selection = window.getSelection();
       const text = selection ? selection.toString() : "";
-      if (text.length > 0) {} else {
+      if (text.length > 0 || enableClick === false) {} else {
         if (!selectionSettings || selectionSettings.checkboxOnly !== true) {
           toggleRowSelection({
             e,

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

@@ -1,13 +1,9 @@
-// import type { VirtualItem, Virtualizer } from "@tanstack/react-virtual";
 import React, { useContext } from "react";
-// import type { Person } from "../makeData";
 import { checkDecimalSeparator, checkThousandSeparator, getCommonPinningStyles, getFormat, isEmpty } from "../hook/utils";
 import { TableContext } from "../useContext";
 import classNames from "classnames";
 import { sumByField } from "../../grid-component/hooks";
 import { numericFormatter } from "react-numeric-component";
-// import type { Person } from "../../tanstack-table/makeData";
-
 const TableFooterCell = ({
   column
 }) => {

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

@@ -208,7 +208,7 @@ export const toggleRowSelection = props => {
         isChange: true,
         type: 'rowSelected',
         rowData: row.original,
-        rowsData: checkedRows
+        rowsData: selectionSettings?.type === 'single' ? [row] : checkedRows
       });
     }
     return;
@@ -284,8 +284,11 @@ export const toggleRowSelection = props => {
       } else {
         // chỉ thêm vào row hiện tại
 
-        const isInclude = prevSelected.find(it => it.id === cell.row.id);
-        if (isInclude) {
+        const isInclude = prevSelected.findIndex(it => it.id === cell.row.id);
+        if (isInclude > -1) {
+          // cập nhật data row hiện tại
+
+          prevSelected[isInclude] = row;
           checkedRows = [...prevSelected];
         } else {
           checkedRows = [...prevSelected, row];

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

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

package/es/table-component/style.js

@@ -0,0 +1,48 @@
+import styled from "styled-components";
+// const prefix = "ui-rc";
+// const antdPrefix = "ant";
+// const fontFamily = "Montserrat, Helvetica, Arial, serif ";
+// const borderRadius = "6px";
+
+// const boxShadowColor = "rgba(220, 0, 0, 0.09)";
+const color = "#000000de";
+const BgColor = "#ffffff ";
+
+// const primary = "#eb4619";
+
+// const rowHoverBg = "#FBDED6";
+// const rowSelectedBg = "#FEF2EF";
+
+const tableBorderColor = "#e0e0e0";
+
+// const borderSelectedColor = "#0550C5";
+// const cellSelectedBg = "#F3F8FF";
+// const cellIndexSelectedBg = "#1869E6";
+// const cellIndexFocusBg = "#E6EFFD";
+
+// 404071
+
+// dark
+const tableBorderColorDark = "#44485E";
+
+// const rowHoverBgDark = "#404071 ";
+
+// const rowSelectedBgDark = "#25293C";
+
+// const borderSelectedColorDark = "#538ff1 ";
+// const cellIndexSelectedBgDark = "#1869E6 ";
+
+// const bodyColorDark = "#343e59";
+
+const BgColorDark = "#343e59 ";
+const colorDark = "#e6e4f3e6 ";
+
+// const cellSelectedBgDark = " #F3F8FF ";
+// const cellIndexFocusBgDark = "#E6EFFD ";
+
+/* height: const {props => (props.const heightTable ? `const {props.const heightTable}px` : undefined)}; */
+
+export const GridStyle = styled.div.withConfig({
+  displayName: "GridStyle",
+  componentId: "es-grid-template__sc-hdqm5k-0"
+})(["&.", "-grid{color:", ";font-size:13px;background-color:", ";table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:\"\";pointer-events:none;}.", "-grid-tbody{.", "-grid-row{}}}&.", "-grid-light{.", "-grid-container{.", "-grid-thead{background-color:", ";font-weight:500;.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;z-index:3;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}}"], props => props.$prefix, color, BgColor, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);

package/es/table-component/style.scss

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

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

@@ -22,9 +22,10 @@ import { OperatorFeature } from "../features/operator";
 import { convertFilters, convertToObjTrue, filterByIds, filterDataByColumns, getAllRowKey, isObjEqual } from "../hook/utils";
 import TableContainerEdit from "../TableContainerEdit";
 import classNames from 'classnames';
+import { GridStyle } from "../style";
 const Grid = props => {
   const {
-    theme = 'light',
+    theme,
     t,
     id,
     prefix,
@@ -255,14 +256,20 @@ 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", {
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
+    $prefix: prefix,
+    $theme: {
+      theme: theme?.theme,
+      ...theme
+    },
     className: classNames(`${prefix}-grid`, {
-      [`${prefix}-grid-light`]: theme === 'light',
-      [`${prefix}-grid-dark`]: theme === 'dark'
+      [`${prefix}-grid-light`]: !theme || theme.theme === 'light',
+      [`${prefix}-grid-dark`]: theme?.theme === 'dark'
     }),
     style: {
       minHeight: minHeight ?? undefined,
-      maxHeight: height ?? undefined
+      maxHeight: height ?? undefined,
+      backgroundColor: theme?.backgroundColor ?? undefined
     }
   }, /*#__PURE__*/React.createElement(DndContext, {
     collisionDetection: closestCenter,
@@ -333,8 +340,8 @@ const Grid = props => {
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames(`${prefix}-grid`, {
-      [`${prefix}-grid-light`]: theme === 'light',
-      [`${prefix}-grid-dark`]: theme === 'dark'
+      [`${prefix}-grid-light`]: !theme || theme.theme === 'light',
+      [`${prefix}-grid-dark`]: theme?.theme === 'dark'
     }),
     style: {
       // minHeight: minHeight ?? undefined,