es-grid-template 1.8.57 → 1.8.58

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.d.ts

@@ -15,5 +15,7 @@ interface UseColumnsConfig<RecordType> {
     rowKey?: any;
     onMouseHover?: any;
 }
-declare const useColumns: <RecordType extends AnyObject = AnyObject>(config: UseColumnsConfig<RecordType>) => readonly [any];
+declare const useColumns: <RecordType extends AnyObject = AnyObject>(config: UseColumnsConfig<RecordType>) => readonly [
+    any
+];
 export default useColumns;

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/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/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,

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

@@ -154,6 +154,7 @@ export type ColumnTable<RecordType = AnyObject> = {
     headerTextWrap?: boolean;
     ellipsis?: boolean;
     allowResizing?: 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'>);
@@ -191,7 +192,11 @@ export type Locale = TableLocale & {
 };
 export type ColumnsTable<RecordType = AnyObject> = ColumnTable<RecordType>[];
 export type TableProps<RecordType = AnyObject> = {
-    theme?: 'dark' | 'light';
+    theme?: {
+        theme?: 'dark' | 'light';
+        backgroundColor?: string;
+        color?: string;
+    };
     title?: ReactNode | ((data: RecordType) => ReactNode);
     editAble?: boolean;
     infiniteScroll?: boolean;

package/lib/grid-component/InternalTable.js

@@ -13,7 +13,6 @@ var _hooks = require("./hooks");
 var _dayjs = _interopRequireDefault(require("dayjs"));
 require("dayjs/locale/es");
 require("dayjs/locale/vi");
-var _GridEdit = _interopRequireDefault(require("./table/GridEdit"));
 var _Grid = _interopRequireDefault(require("./table/Grid"));
 var _en_US = _interopRequireDefault(require("rc-master-ui/es/date-picker/locale/en_US"));
 var _vi_VN = _interopRequireDefault(require("rc-master-ui/es/date-picker/locale/vi_VN"));
@@ -36,11 +35,13 @@ var _core = require("@dnd-kit/core");
 var _sortable = require("@dnd-kit/sortable");
 var _reactResizable = require("react-resizable");
 var _faker = require("@faker-js/faker");
-var _InfiniteTable = _interopRequireDefault(require("./table/InfiniteTable"));
 var _useMergedState = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
 var _Modal = _interopRequireDefault(require("antd/es/modal/Modal"));
 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 GridEdit from "./table/GridEdit"
+// import InfiniteTable from "./table/InfiniteTable";
+
 // import useColumns from "./hooks/useColumns";
 
 // import 'rc-master-ui/es/date-range-picker/styles/index.less'
@@ -194,6 +195,7 @@ const InternalTable = props => {
     onFilter,
     onSorter,
     defaultSorter,
+    toolbarItems,
     ...rest
   } = props;
   const id = _react.default.useMemo(() => {
@@ -301,7 +303,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.default.useRef(null);
   _react.default.useEffect(() => {
     setColumns(propsColumns);
@@ -450,7 +452,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,
@@ -918,7 +921,9 @@ const InternalTable = props => {
   const handleFullScreen = () => {
     setIsFullScreen(!isFullScreen);
   };
-  const TableComponent = infiniteScroll ? _InfiniteTable.default : groupAble ? _Group.default : editAble ? _GridEdit.default : _Grid.default;
+
+  // const TableComponent = infiniteScroll ? InfiniteTable : (groupAble ? Group : editAble ? GridEdit : Grid)
+  const TableComponent = groupAble ? _Group.default : _Grid.default;
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, true && /*#__PURE__*/_react.default.createElement(_core.DndContext, {
     sensors: sensors,
     modifiers: [_modifiers.restrictToHorizontalAxis],
@@ -1077,6 +1082,7 @@ const InternalTable = props => {
     commandClick: triggerCommandClick,
     summary: summary,
     pagination: pagination,
+    toolbarItems: toolbarItems,
     scroll: scrollHeight1 - (summary ? 1 : 1) < 0 ? {
       y: 500
     } : {

package/lib/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/lib/grid-component/hooks/useColumns.js

@@ -91,7 +91,8 @@ const useColumns = config => {
       const type = (0, _utils.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') ? _constant.booleanOperator : !type || type === 'Text' ? _constant.stringOperator : _constant.numberOperator;
+      // const operatorOptions = type === ('Checkbox' || 'Dropdown' || 'DropTree' || 'CheckboxDropdown') ? booleanOperator : (!type || type === 'Text' ? stringOperator : numberOperator)
+      const operatorOptions = ['Checkbox', 'Dropdown', 'DropTree', 'CheckboxDropdown'].includes(type) ? _constant.booleanOperator : !type || type === 'Text' ? _constant.stringOperator : _constant.numberOperator;
       return /*#__PURE__*/React.createElement("div", {
         style: {
           padding: 8,

package/lib/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/lib/grid-component/hooks/utils.js

@@ -2473,13 +2473,13 @@ const isSelectedCell = (selectedCells, rowIndex, colIndex) => {
   return selectedCells.has(key);
 };
 exports.isSelectedCell = isSelectedCell;
-function groupArrayByColumns(arr, columns) {
+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];
@@ -2487,15 +2487,12 @@ 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);
@@ -2506,13 +2503,11 @@ 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;
   }
 }
 const isFormattedNumber = str => {

package/lib/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/lib/table-component/InternalTable.js

@@ -42,12 +42,6 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 // import { Tooltip } from 'react-tooltip'
 // import ContextMenu from './ContextMenu'
 
-// import GridEdit from './table/GridEdit'
-
-// import { Modal } from 'antd'
-// import { findAllChildrenKeys2 } from '../grid-component/hooks'
-// import { columns111 } from '../test-2/columns'
-
 _dayjs.default.extend(_customParseFormat.default);
 
 // const MySwal = withReactContent(Swal)

package/lib/table-component/TableContainer.js

@@ -17,20 +17,6 @@ var _reactNumericComponent = require("react-numeric-component");
 var _TableWrapper = _interopRequireDefault(require("./table/TableWrapper"));
 var _utils = require("./hook/utils");
 var _reactVirtual = require("@tanstack/react-virtual");
-// import type { Dispatch, SetStateAction } from "react";
-
-// import TableHead from './header/TableHead'
-// import { sumSize } from './hook/utils'
-
-// import { useVirtualizer } from '@tanstack/react-virtual'
-
-// import TableBody from './body/TableBody'
-
-// import TableFooter from './footer/TableFooter'
-// import TableBody from './body/TableBody'
-
-// import ComponentSpinner from '../grid-component/LoadingSpinner'
-
 const TableContainer = props => {
   const {
     t,
@@ -109,6 +95,10 @@ const TableContainer = props => {
   _react.default.useEffect(() => {
     const handleClickOutside = () => {
       setFocusedCell(undefined);
+      setIsSelectionChange(prev => ({
+        ...prev,
+        isChange: false
+      }));
     };
     document.addEventListener('mousedown', handleClickOutside);
     return () => {

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

@@ -188,6 +188,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(() => {
 
@@ -430,16 +431,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) {
           (0, _useColumns.toggleRowSelection)({
             e,

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

@@ -13,12 +13,6 @@ var _hooks = require("../../grid-component/hooks");
 var _reactNumericComponent = require("react-numeric-component");
 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 type { VirtualItem, Virtualizer } from "@tanstack/react-virtual";
-
-// import type { Person } from "../makeData";
-
-// import type { Person } from "../../tanstack-table/makeData";
-
 const TableFooterCell = ({
   column
 }) => {

package/lib/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/lib/table-component/style.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridStyle = void 0;
+var _styledComponents = _interopRequireDefault(require("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)}; */
+
+const GridStyle = exports.GridStyle = _styledComponents.default.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/lib/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/lib/table-component/table/Grid.js

@@ -18,6 +18,7 @@ var _operator = require("../features/operator");
 var _utils = require("../hook/utils");
 var _TableContainerEdit = _interopRequireDefault(require("../TableContainerEdit"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _style = require("../style");
 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";
@@ -28,7 +29,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 const Grid = props => {
   const {
-    theme = 'light',
+    theme,
     t,
     id,
     prefix,
@@ -259,14 +260,20 @@ 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", {
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_style.GridStyle, {
+    $prefix: prefix,
+    $theme: {
+      theme: theme?.theme,
+      ...theme
+    },
     className: (0, _classnames.default)(`${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.default.createElement(_core.DndContext, {
     collisionDetection: _core.closestCenter,
@@ -337,8 +344,8 @@ const Grid = props => {
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(`${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,

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

@@ -154,6 +154,7 @@ export type ColumnTable<RecordType = AnyObject> = {
     headerTextWrap?: boolean;
     ellipsis?: boolean;
     allowResizing?: 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'>);
@@ -191,7 +192,11 @@ export type Locale = TableLocale & {
 };
 export type ColumnsTable<RecordType = AnyObject> = ColumnTable<RecordType>[];
 export type TableProps<RecordType = AnyObject> = {
-    theme?: 'dark' | 'light';
+    theme?: {
+        theme?: 'dark' | 'light';
+        backgroundColor?: string;
+        color?: string;
+    };
     title?: ReactNode | ((data: RecordType) => ReactNode);
     editAble?: boolean;
     infiniteScroll?: boolean;

package/package.json

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