es-grid-template 1.9.16 → 1.9.18

package/es/ali-table/Grid.js

@@ -14,6 +14,7 @@ import { pageSizeOptions } from "../grid-component/hooks";
 import ContextMenu from "../table-component/ContextMenu";
 import { TableContext } from "./useContext";
 import { ColumnsChoose } from "./pipeline/features/ColumnsChoose";
+import { StyleTableContainer } from "./base-table/styles";
 // const Grid = (props: GridProps) => {
 const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
@@ -55,10 +56,10 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
     useVirtual,
     useOuterBorder = true,
     showHeader = true
-
-    // onRowFooterStyles,
-    // onRowHeaderStyles
   } = props;
+  const {
+    cssVariables
+  } = theme ?? {};
   const prefix = 'ui-rc';
   const stateKeyPager = 'pagination';
   const [tableLocal] = useLocale('Table');
@@ -146,17 +147,25 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
   const triggerChangeColumns = (nextColumn, _, nextVisibleKeys) => {
     setVisibleKeys(nextVisibleKeys);
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  const artTableWrapperProps = {
+    style: {
+      ...cssVariables
+    }
+  };
+  const topToolbaritems = React.useMemo(() => {
+    return (toolbarItems ?? []).filter(it => it.position !== 'Bottom');
+  }, [toolbarItems]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyleTableContainer, {
     className: classNames(`${prefix}-grid`, {
       [tableClassNames]: !!tableClassNames,
-      [`${prefix}-grid-light`]: !theme || theme.theme === 'light',
-      [`${prefix}-grid-dark`]: theme?.theme === 'dark'
+      [`${prefix}-grid-theme-dark`]: theme?.theme === 'dark'
     }),
     style: {
       maxHeight: height ?? 700,
       minHeight,
       display: 'flex',
-      flexDirection: 'column'
+      flexDirection: 'column',
+      ...artTableWrapperProps.style
     }
   }, (showToolbar !== false || fullScreen !== false || title) && /*#__PURE__*/React.createElement("div", {
     className: classNames(`${prefix}-grid-top-toolbar`, {})
@@ -166,13 +175,13 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
       justifyContent: 'space-between',
       alignItems: 'center'
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, topToolbaritems.length > 0 && /*#__PURE__*/React.createElement("div", {
     style: {
       flex: 1,
       overflow: 'hidden'
     }
   }, /*#__PURE__*/React.createElement(Toolbar, {
-    items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
+    items: topToolbaritems,
     mode: toolbarMode
   })), /*#__PURE__*/React.createElement("div", {
     style: {
@@ -239,9 +248,11 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
     ,
     style: minHeight ? {
       flex: 1,
-      overflow: 'auto'
+      overflow: 'auto',
+      ...cssVariables
     } : {
-      overflow: 'auto'
+      overflow: 'auto',
+      ...cssVariables
     }
 
     // columnResizeMode={'onChange'}
@@ -279,6 +290,7 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
         }
       };
     },
+    theme: theme,
     footerDataSource: footerDataSource
   })), pagination && !infiniteScroll && /*#__PURE__*/React.createElement(Pagination, _extends({
     pageSizeOptions: pageSizeOptions,

package/es/ali-table/InternalTable.js

@@ -14,8 +14,6 @@ import { getLocale, getLocales } from "../locale/useLocale";
 import { TableContext } from "./useContext";
 import Grid from "./Grid";
 import { getParentKeysLarge, getRowsByKeysKeepTreeOrder } from "./utils/selected";
-// import { getInvisibleColumns } from "../group-component/hook/utils"
-
 const InternalTable = props => {
   const {
     t,

package/es/ali-table/assets/WebsiteBaseTable.js

@@ -6,11 +6,12 @@ import { BaseTable } from "../base-table/table";
 const DarkSupportBaseTable = styled(BaseTable).withConfig({
   displayName: "DarkSupportBaseTable",
   componentId: "es-grid-template__sc-4ltmbz-0"
-})(["", ";&.dark{--bgcolor:#333;--header-bgcolor:#45494f;--hover-bgcolor:#46484a;--header-hover-bgcolor:#606164;--highlight-bgcolor:#191a1b;--header-highlight-bgcolor:#191a1b;--color:#dadde1;--header-color:#dadde1;--lock-shadow:rgb(37 37 37 / 0.5) 0 0 6px 2px;--border-color:#3c4045;}"], props => props.css);
+})(["", ";&.dark{--bgcolor:#343e59;--footer-bgcolor:#2e3342;--header-bgcolor:#343e59;--hover-bgcolor:#232b43;--header-hover-bgcolor:#606164;--highlight-bgcolor:#eff2f5;--header-highlight-bgcolor:#191a1b;--color:#dadde1;--header-color:#dadde1;--lock-shadow:rgb(37 37 37 / 0.5) 0 0 6px 2px;--border-color:#5d5f61;}"], props => props.css);
 export const WebsiteBaseTable = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const isDarkTheme = false;
+  const isDarkTheme = props.theme?.theme === 'dark';
   return /*#__PURE__*/React.createElement(DarkSupportBaseTable, _extends({
     ref: ref,
+    theme: props.theme,
     className: cx({
       dark: isDarkTheme
     }, props.className)

package/es/ali-table/base-table/styles.d.ts

@@ -3,6 +3,7 @@ export declare const LOCK_SHADOW_PADDING = 20;
 export declare const Classes: {
     /** Outer wrapper div for BaseTable component */
     readonly artTableWrapper: "ui-rc-grid-table-wrapper";
+    readonly tableThemeDark: "ui-rc-grid-theme-dark";
     readonly artTable: "ui-rc-grid-table";
     readonly tableHeader: "ui-rc-grid-table-header";
     readonly tableBody: "ui-rc-grid-table-body";
@@ -36,22 +37,28 @@ export declare const Classes: {
     readonly filterDropdown: "ui-rc-grid-filter-dropdown";
 };
 export type BaseTableCSSVariables = Partial<{
-    /** Table row height; note this is a CSS variable and cannot use numeric shorthand */
+    /** Table row height */
     '--row-height': string;
     /** Table font color */
     '--color': string;
+    /** Table hover font color */
+    '--hover-color': string;
     /** Table background color */
     '--bgcolor': string;
     /** Background color on hover */
     '--hover-bgcolor': string;
     /** Background color when a cell is highlighted */
     '--highlight-bgcolor': string;
-    /** Header row height; note this is a CSS variable and cannot use numeric shorthand */
+    /** Header row height */
     '--header-row-height': string;
     /** Header font color */
     '--header-color': string;
     /** Header background color */
     '--header-bgcolor': string;
+    /** Footer background color */
+    '--footer-bgcolor': string;
+    /** Footer color */
+    '--footer-color': string;
     /** Header hover background color */
     '--header-hover-bgcolor': string;
     /** Header cell highlight background color */
@@ -62,21 +69,22 @@ export type BaseTableCSSVariables = Partial<{
     '--font-size': string;
     /** Line height for table text */
     '--line-height': string;
-    /** Lock column shadow, default rgba(152,152,152,0.5) 0 0 6px 2px */
+    /** Lock column shadow */
     '--lock-shadow': string;
     /** Cell border color */
     '--border-color': string;
-    /** Cell border, default 1px solid var(--border-color) */
+    /** Cell border */
     '--cell-border': string;
-    /** Cell horizontal border, default var(--cell-border) */
+    /** Cell horizontal border */
     '--cell-border-horizontal': string;
-    /** Cell vertical border, default var(--cell-border) */
+    /** Cell vertical border */
     '--cell-border-vertical': string;
-    /** Header cell border, default 1px solid var(--border-color) */
+    /** Header cell border */
     '--header-cell-border': string;
-    /** Header cell horizontal border, default var(--header-cell-border) */
+    /** Header cell horizontal border */
     '--header-cell-border-horizontal': string;
-    /** Header cell vertical border, default var(--header-cell-border) */
+    /** Header cell vertical border */
     '--header-cell-border-vertical': string;
 }>;
 export declare const StyledArtTableWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyleTableContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/es/ali-table/base-table/styles.js

@@ -4,6 +4,7 @@ const prefix = 'ui-rc-grid-';
 export const Classes = {
   /** Outer wrapper div for BaseTable component */
   artTableWrapper: `${prefix}table-wrapper`,
+  tableThemeDark: `${prefix}theme-dark`,
   artTable: `${prefix}table`,
   tableHeader: `${prefix}table-header`,
   tableBody: `${prefix}table-body`,
@@ -44,8 +45,17 @@ const Z = {
   scrollItem: 30,
   loadingIndicator: 40
 };
-const outerBorderStyleMixin = css(["border-top:var(--cell-border-horizontal);border-right:var(--cell-border-vertical);border-bottom:var(--cell-border-horizontal);border-left:var(--cell-border-vertical);td.first,th.first{border-left:none;}td.last,th.last{border-right:none;}thead tr.first th,tbody tr.first td{border-top:none;}&.has-footer tfoot tr.last td{}&.has-footer tbody tr.last td{&.lock-left,&.lock-right{border-bottom-width:0;border-top-width:0;box-shadow:0 -1px 0 0 var(--border-color),0 0px 0 0 var(--border-color),-1px 0 0 0 var(--border-color);}}&.has-footer tfoot tr td{background-color:var(--footer-bgColor);&.", "{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}&.", "{width:100%;white-space:normal;word-break:break-word;}&.", "{text-align:center;}&.", "{text-align:right;}}&:not(.has-footer) tbody tr.last td{border-bottom:none;}"], Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight);
+const outerBorderStyleMixin = css(["border-top:var(--cell-border-horizontal);border-right:var(--cell-border-vertical);border-bottom:var(--cell-border-horizontal);border-left:var(--cell-border-vertical);td.first,th.first{border-left:none;}td.last,th.last{border-right:none;}thead tr.first th,tbody tr.first td{border-top:none;}&.has-footer tfoot tr.last td{}&.has-footer tbody tr.last td{&.lock-left,&.lock-right{border-bottom-width:0;border-top-width:0;box-shadow:0 -1px 0 0 var(--border-color),0 0px 0 0 var(--border-color),-1px 0 0 0 var(--border-color);}}&.has-footer tfoot tr td{&.", "{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}&.", "{width:100%;white-space:normal;word-break:break-word;}&.", "{text-align:center;}&.", "{text-align:right;}}&:not(.has-footer) tbody tr.last td{border-bottom:none;}"], Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight);
 export const StyledArtTableWrapper = styled.div.withConfig({
   displayName: "StyledArtTableWrapper",
   componentId: "es-grid-template__sc-ipj1ht-0"
-})(["--row-height:38px;--color:#333;--bgcolor:white;--hover-bgcolor:var(--hover-color,#f5f5f5);--highlight-bgcolor:#eee;--header-row-height:36px;--header-color:#000000de;--header-bgcolor:#ffffff;--header-hover-bgcolor:#ddd;--header-highlight-bgcolor:#e4e8ed;--cell-padding:7px 8px;--font-size:13px;--line-height:1.28571;--lock-shadow:rgba(152,152,152,0.5) 0 0 6px 2px;--border-color:#dfe3e8;--cell-border:1px solid var(--border-color);--cell-border-horizontal:var(--cell-border);--cell-border-vertical:var(--cell-border);--header-cell-border:1px solid var(--border-color);--header-cell-border-horizontal:var(--header-cell-border);--header-cell-border-vertical:var(--header-cell-border);--footer-bgColor:#fafafa;box-sizing:border-box;*{box-sizing:border-box;}cursor:default;color:var(--color);font-size:var(--font-size);line-height:var(--line-height);position:relative;overflow-anchor:none;&.use-outer-border{", ";}.no-scrollbar{scrollbar-width:none;::-webkit-scrollbar{display:none;}}.", "{overflow-x:auto;overflow-y:hidden;background:var(--header-bgcolor);.ui-rc-table-column-title{flex:1;min-width:0;text-align:start;}.", "{font-weight:500;.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}.", "{width:100%;white-space:normal;word-break:break-word;}.", "{text-align:center;}.", "{text-align:right;}}}.", "{.", "{&.", "{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;.expansion-cell{.expansion-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}}&.", "{width:100%;white-space:normal;word-break:break-word;}&.", "{text-align:center;}&.", "{text-align:right;}}}.", ",.", "{overflow-x:auto;overflow-y:hidden;background:var(--bgcolor);}&.sticky-header .", "{position:sticky;top:0;z-index:", ";}&.sticky-footer .", "{position:sticky;bottom:0;z-index:", ";}.", "{tr{td{&.lock-left,&.lock-right{border-bottom-width:0;box-shadow:0 -1px 0 0 var(--border-color),0 1px 0 0 var(--border-color),-1px 0 0 0 var(--border-color);}}}}table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;display:table;margin:0;padding:0;}tr:not(.no-hover):hover > td{background:var(--hover-bgcolor);}tr:not(.no-highlight).highlight > td{background:var(--highlight-bgcolor);}th{font-weight:normal;text-align:left;padding:var(--cell-padding);height:var(--header-row-height);color:var(--header-color);background:var(--header-bgcolor);border:none;border-right:var(--header-cell-border-vertical);border-bottom:var(--header-cell-border-horizontal);}tr.first th{border-top:var(--header-cell-border-horizontal);}th.first{border-left:var(--header-cell-border-vertical);}td{padding:var(--cell-padding);background:var(--bgcolor);height:var(--row-height);border:none;border-right:var(--cell-border-vertical);border-bottom:var(--cell-border-horizontal);}td.first{border-left:var(--cell-border-vertical);}tr.first td{border-top:var(--cell-border-horizontal);}&.has-header tbody tr.first td{border-top:none;}&.has-footer tbody tr.last td{border-bottom:none;}.lock-left,.lock-right{z-index:", ";}.resize-handle{width:6px;height:100%;position:absolute;top:0;right:0;cursor:col-resize;background-color:transparent;border-right:2px solid transparent}.", "{position:absolute;top:0;bottom:0;z-index:", ";pointer-events:none;overflow:hidden;.", "{height:100%;}.", "{margin-right:", "px;box-shadow:none;&.show-shadow{box-shadow:var(--lock-shadow);border-right:var(--cell-border-vertical);}}.", "{margin-left:", "px;box-shadow:none;&.show-shadow{box-shadow:var(--lock-shadow);border-left:var(--cell-border-vertical);}}}.", "{pointer-events:none;color:#99a3b3;font-size:12px;text-align:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);.empty-image{width:50px;height:50px;}.empty-tips{margin-top:16px;line-height:1.5;}}.", "{overflow:auto;position:sticky;bottom:0;z-index:", ";margin-top:-17px;}.ui-rc-grid-loading-wrapper{}.ui-rc-grid-table{}.art-loading-content-wrapper{}.", "{height:1px;visibility:hidden;}.", "{position:relative;.", "{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;}.", "{position:sticky;z-index:", ";transform:translateY(-50%);}}"], outerBorderStyleMixin, Classes.tableHeader, Classes.tableHeaderCell, Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight, Classes.tableBody, Classes.tableCell, Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight, Classes.tableBody, Classes.tableFooter, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.tableBody, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator);
+})(["--row-height:38px;--color:#333;--bgcolor:white;--hover-bgcolor:var(--hover-bgcolor,#f5f5f5);--hover-color:var(--hover-color,#333);--highlight-bgcolor:#eee;--header-row-height:36px;--header-color:#000000de;--header-bgcolor:#ffffff;--header-hover-bgcolor:#ddd;--header-highlight-bgcolor:#e4e8ed;--cell-padding:7px 8px;--font-size:13px;--line-height:1.28571;--lock-shadow:rgba(152,152,152,0.5) 0 0 6px 2px;--border-color:#dfe3e8;--cell-border:1px solid var(--border-color);--cell-border-horizontal:var(--cell-border);--cell-border-vertical:var(--cell-border);--header-cell-border:1px solid var(--border-color);--header-cell-border-horizontal:var(--header-cell-border);--header-cell-border-vertical:var(--header-cell-border);--footer-bgColor:#fafafa;box-sizing:border-box;*{box-sizing:border-box;}cursor:default;color:var(--color);font-size:var(--font-size);line-height:var(--line-height);position:relative;overflow-anchor:none;&::-webkit-scrollbar{width:8px;height:8px;}&::-webkit-scrollbar-track{background:var(--bgcolor);}&::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.4);border-radius:8px;}&::-webkit-scrollbar-thumb:hover{background:#555;}&.dark{&::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.3);}&::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.5);}}&.use-outer-border{", ";}.no-scrollbar{scrollbar-width:none;::-webkit-scrollbar{display:none;}}.", "{overflow-x:auto;overflow-y:hidden;background:var(--header-bgcolor);.ui-rc-table-column-title{flex:1;min-width:0;text-align:start;}.", "{font-weight:500;.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}.", "{width:100%;white-space:normal;word-break:break-word;}.", "{text-align:center;}.", "{text-align:right;}}}.", "{.", "{&.", "{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;.expansion-cell{.expansion-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}}&.", "{width:100%;white-space:normal;word-break:break-word;}&.", "{text-align:center;}&.", "{text-align:right;}}.", "{background:var(--footer-bgcolor);}}.", ",.", "{overflow-x:auto;overflow-y:hidden;}&.sticky-header .", "{position:sticky;top:0;z-index:", ";}&.sticky-footer .", "{position:sticky;bottom:0;z-index:", ";}.", "{tr{td{&.lock-left,&.lock-right{border-bottom-width:0;box-shadow:0 -1px 0 0 var(--border-color),0 0px 0 0 var(--border-color),-1px 0 0 0 var(--border-color);}}}}table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;display:table;margin:0;padding:0;}tr:not(.no-hover):hover > td{background:var(--hover-bgcolor);color:var(--hover-color);}tr:not(.no-highlight).highlight > td{}th{font-weight:normal;text-align:left;padding:var(--cell-padding);height:var(--header-row-height);color:var(--header-color);background:var(--header-bgcolor);border:none;border-right:var(--header-cell-border-vertical);border-bottom:var(--header-cell-border-horizontal);}tr.first th{border-top:var(--header-cell-border-horizontal);}th.first{border-left:var(--header-cell-border-vertical);}td{padding:var(--cell-padding);background:var(--bgcolor);height:var(--row-height);border:none;border-right:var(--cell-border-vertical);border-bottom:var(--cell-border-horizontal);}td.first{border-left:var(--cell-border-vertical);}tr.first td{border-top:var(--cell-border-horizontal);}&.has-header tbody tr.first td{border-top:none;}&.has-footer tbody tr.last td{border-bottom:none;}&.has-footer tfoot tr > td{background:var(--footer-bgcolor);color:var(--footer-color);}&.has-footer tfoot tr:not(.no-hover):hover > td{background:var(--footer-bgcolor);}.lock-left,.lock-right{z-index:", ";}.resize-handle{width:6px;height:100%;position:absolute;top:0;right:0;cursor:col-resize;background-color:transparent;border-right:2px solid transparent;}.", "{position:absolute;top:0;bottom:0;z-index:", ";pointer-events:none;overflow:hidden;.", "{height:100%;}.", "{margin-right:", "px;box-shadow:none;&.show-shadow{box-shadow:var(--lock-shadow);border-right:var(--cell-border-vertical);}}.", "{margin-left:", "px;box-shadow:none;&.show-shadow{box-shadow:var(--lock-shadow);border-left:var(--cell-border-vertical);}}}.", "{pointer-events:none;color:#99a3b3;font-size:12px;text-align:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);.empty-image{width:50px;height:50px;}.empty-tips{margin-top:16px;line-height:1.5;}}.", "{overflow:auto;position:sticky;bottom:0;z-index:", ";margin-top:-17px;}.ui-rc-grid-loading-wrapper{}.ui-rc-grid-table{}.art-loading-content-wrapper{}.", "{height:1px;visibility:hidden;}.", "{position:relative;.", "{position:absolute;inset:0;pointer-events:none;}.", "{position:sticky;z-index:", ";transform:translateY(-50%);}}"], outerBorderStyleMixin, Classes.tableHeader, Classes.tableHeaderCell, Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight, Classes.tableBody, Classes.tableCell, Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.tableBody, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator);
+
+// type StyleTableContainerProps = {
+
+// }
+
+export const StyleTableContainer = styled.div.withConfig({
+  displayName: "StyleTableContainer",
+  componentId: "es-grid-template__sc-ipj1ht-1"
+})(["--color:#333;--bgcolor:white;--header-bgcolor:#ffffff;--header-hover-bgcolor:#ddd;--header-highlight-bgcolor:#e4e8ed;--cell-padding:7px 8px;--font-size:13px;--line-height:1.28571;--border-color:#dfe3e8;--cell-border:1px solid var(--border-color);--cell-border-horizontal:var(--cell-border);--cell-border-vertical:var(--cell-border);--header-cell-border:1px solid var(--border-color);--header-cell-border-horizontal:var(--header-cell-border);--header-cell-border-vertical:var(--header-cell-border);--footer-bgcolor:#fafafa;&.", "{--bgcolor:#343e59;--footer-bgcolor:#2e3342;--header-bgcolor:#343e59;--hover-bgcolor:#232b43;--header-hover-bgcolor:#606164;--highlight-bgcolor:#eff2f5;--header-highlight-bgcolor:#191a1b;--color:#dadde1;--header-color:#dadde1;--lock-shadow:rgb(37 37 37 / 0.5) 0 0 6px 2px;--border-color:#4f5266;background-color:var(--bgcolor);}&.ui-rc-grid .ui-rc-pagination{background-color:var(--bgcolor);color:var(--color);padding:10px;border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);border-inline:1px solid var(--border-color);background-color:var(--bgcolor);.ui-rc-pagination-prev{.anticon.anticon-left{color:var(--color);}}.ui-rc-pagination-disabled{.anticon.anticon-left{color:#7d7a7a;}}.ui-rc-pagination-next{.anticon.anticon-right{color:var(--color);}&.ui-rc-pagination-disabled{.anticon.anticon-right{color:#7d7a7a;}}}}&.", "{&.ui-rc-grid{.ui-rc-toolbar-bottom{background-color:var(--footer-bgcolor);color:#ffffff;}}.ui-rc-grid-top-toolbar{border-color:var(--border-color);color:#ffffff;}.ui-rc-toolbar{.ui-rc-toolbar-selection-item{background-color:var(--footer-bgcolor);color:#ffffff;}}}"], Classes.tableThemeDark, Classes.tableThemeDark);

package/es/ali-table/base-table/styles.scss

@@ -17,3 +17,41 @@ $prefix: 'ui-rc' !default;
   box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
   overflow: hidden;
 }
+
+.ui-rc-grid-horizontal-scroll-container {
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+
+  }
+  &::-webkit-scrollbar-track {
+    background: var(--bgcolor);
+
+  }
+
+    &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.4);
+    border-radius: 8px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: #555;
+  }
+  
+}
+.ui-rc-grid-table-wrapper.dark {
+
+  .ui-rc-grid-horizontal-scroll-container {
+
+
+      &::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.3);
+  }
+   &::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+  }
+
+ 
+
+}

package/es/ali-table/base-table/table.d.ts

@@ -6,7 +6,7 @@ import { TableDOMHelper } from './helpers/TableDOMUtils';
 import type { ResolvedUseVirtual, VerticalRenderRange, VirtualEnum } from './interfaces';
 import type { LoadingContentWrapperProps } from './loading';
 import type { BaseTableCSSVariables } from './styles';
-import type { CommandClick, ExpandedRowRender, IFormat, RenderExpandIcon, RowClassName } from '../../grid-component/type';
+import type { CommandClick, ExpandedRowRender, IFormat, IFTheme, RenderExpandIcon, RowClassName } from '../../grid-component/type';
 export type PrimaryKey = string | ((row: any) => string);
 export type ColumnResizeMode = 'onChange' | 'onEnd';
 export type ExpandableConfig<RecordType> = {
@@ -61,6 +61,7 @@ export type BaseTableProps = {
     style?: CSSProperties & BaseTableCSSVariables;
     /** Whether the table has a header */
     showHeader?: boolean;
+    theme?: IFTheme;
     /** Whether table has a horizontal sticky scrollbar */
     hasStickyScroll?: boolean;
     /** Height of the sticky horizontal scrollbar */

package/es/ali-table/base-table/table.js

@@ -11,7 +11,9 @@ import { TableDOMHelper } from "./helpers/TableDOMUtils";
 import { HtmlTable } from "./html-table";
 import Loading from "./loading";
 import { Classes, LOCK_SHADOW_PADDING, StyledArtTableWrapper } from "./styles";
-import { getScrollbarSize, OVERSCAN_SIZE, shallowEqual, STYLED_REF_PROP, sum, syncScrollLeft, throttledWindowResize$ } from "./utils";
+import {
+// getScrollbarSize, // scroll mặc định thì bật lên
+OVERSCAN_SIZE, shallowEqual, STYLED_REF_PROP, sum, syncScrollLeft, throttledWindowResize$ } from "./utils";
 let emptyContentDeprecatedWarned = false;
 function warnEmptyContentIsDeprecated() {
   if (!emptyContentDeprecatedWarned) {
@@ -22,6 +24,7 @@ function warnEmptyContentIsDeprecated() {
 export class BaseTable extends React.Component {
   static defaultProps = {
     showHeader: true,
+    // theme: undefined,
     isStickyHeader: true,
     stickyTop: 0,
     footerDataSource: [],
@@ -84,7 +87,11 @@ export class BaseTable extends React.Component {
     const innerTableWidth = tableBodyHtmlTable.offsetWidth;
     const artTableWidth = artTable.offsetWidth;
     const stickyScrollHeightProp = this.props.stickyScrollHeight;
-    const stickyScrollHeight = stickyScrollHeightProp === 'auto' ? getScrollbarSize().height : stickyScrollHeightProp;
+
+    // scroll mặc định thì bật lên
+    // const stickyScrollHeight = stickyScrollHeightProp === 'auto' ? getScrollbarSize().height : stickyScrollHeightProp
+    const stickyScrollHeight = stickyScrollHeightProp === 'auto' ? 8 : stickyScrollHeightProp; // height customscrll bar = 8
+
     stickyScroll.style.marginTop = `-${(stickyScrollHeight ?? 0) + 1}px`;
     if (artTableWidth >= innerTableWidth) {
       if (this.state.hasScroll) {
@@ -335,8 +342,8 @@ export class BaseTable extends React.Component {
       className,
       style,
       showHeader,
+      theme,
       useOuterBorder,
-      // isStickyHead,
       isStickyHeader,
       isStickyFooter,
       isLoading,
@@ -348,6 +355,7 @@ export class BaseTable extends React.Component {
       empty: dataSource.length === 0,
       lock: info.hasLockColumn,
       'has-header': showHeader,
+      'theme-dark': theme?.theme === 'dark',
       'sticky-header': isStickyHeader,
       'has-footer': footerDataSource && footerDataSource.length > 0,
       'sticky-footer': isStickyFooter

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

@@ -4,6 +4,7 @@ import type { Cell, Header, OnChangeFn } from '@tanstack/react-table';
 import type { CSSProperties, ReactElement, ReactNode } from 'react';
 import type { TableLocale } from "rc-master-ui/lib/table/interface";
 import type { PaginationLocale } from 'rc-master-ui/lib/pagination/Pagination';
+import { BaseTableCSSVariables } from '../ali-table/base-table/styles';
 declare module "@tanstack/table-core" {
     interface ColumnMeta<any, any> extends ColumnTable {
         rowSpan?: number;
@@ -225,13 +226,14 @@ export type ColumnTable<RecordType = AnyObject> = {
     getSpanRect?: (value: any, row: any, rowIndex: number) => SpanRect;
 };
 export type ColumnsTable<RecordType = AnyObject> = ColumnTable<RecordType>[];
+export type IFTheme = {
+    theme?: 'dark' | 'light';
+    backgroundColor?: string;
+    cssVariables?: BaseTableCSSVariables;
+};
 export type TableProps<RecordType = AnyObject> = {
     id?: string;
-    theme?: {
-        theme?: 'dark' | 'light';
-        backgroundColor?: string;
-        color?: string;
-    };
+    theme?: IFTheme;
     useOuterBorder?: boolean;
     showHeader?: boolean;
     className?: string;

package/es/group-component/hook/utils.d.ts

@@ -208,9 +208,9 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
     ellipsis?: boolean;
     allowResizing?: boolean;
     allowSelection?: boolean | ((rowData: RecordType) => boolean);
-    onCellStyles?: Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position">);
-    onCellHeaderStyles?: Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position">);
-    onCellFooterStyles?: Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position">);
+    onCellStyles?: Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width">);
+    onCellHeaderStyles?: Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width">);
+    onCellFooterStyles?: Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width">);
     sumGroup?: boolean;
     getValue?: (row: any, rowIndex: number) => any;
     getCellProps?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").CellProps;

package/lib/ali-table/Grid.js

@@ -20,6 +20,7 @@ var _hooks = require("../grid-component/hooks");
 var _ContextMenu = _interopRequireDefault(require("../table-component/ContextMenu"));
 var _useContext = require("./useContext");
 var _ColumnsChoose = require("./pipeline/features/ColumnsChoose");
+var _styles2 = require("./base-table/styles");
 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 { TableProps } from "../table-component"
@@ -65,10 +66,10 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     useVirtual,
     useOuterBorder = true,
     showHeader = true
-
-    // onRowFooterStyles,
-    // onRowHeaderStyles
   } = props;
+  const {
+    cssVariables
+  } = theme ?? {};
   const prefix = 'ui-rc';
   const stateKeyPager = 'pagination';
   const [tableLocal] = (0, _locale.useLocale)('Table');
@@ -156,17 +157,25 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const triggerChangeColumns = (nextColumn, _, nextVisibleKeys) => {
     setVisibleKeys(nextVisibleKeys);
   };
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+  const artTableWrapperProps = {
+    style: {
+      ...cssVariables
+    }
+  };
+  const topToolbaritems = _react.default.useMemo(() => {
+    return (toolbarItems ?? []).filter(it => it.position !== 'Bottom');
+  }, [toolbarItems]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles2.StyleTableContainer, {
     className: (0, _classnames.default)(`${prefix}-grid`, {
       [tableClassNames]: !!tableClassNames,
-      [`${prefix}-grid-light`]: !theme || theme.theme === 'light',
-      [`${prefix}-grid-dark`]: theme?.theme === 'dark'
+      [`${prefix}-grid-theme-dark`]: theme?.theme === 'dark'
     }),
     style: {
       maxHeight: height ?? 700,
       minHeight,
       display: 'flex',
-      flexDirection: 'column'
+      flexDirection: 'column',
+      ...artTableWrapperProps.style
     }
   }, (showToolbar !== false || fullScreen !== false || title) && /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(`${prefix}-grid-top-toolbar`, {})
@@ -176,13 +185,13 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       justifyContent: 'space-between',
       alignItems: 'center'
     }
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, topToolbaritems.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
     style: {
       flex: 1,
       overflow: 'hidden'
     }
   }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
-    items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
+    items: topToolbaritems,
     mode: toolbarMode
   })), /*#__PURE__*/_react.default.createElement("div", {
     style: {
@@ -249,9 +258,11 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     ,
     style: minHeight ? {
       flex: 1,
-      overflow: 'auto'
+      overflow: 'auto',
+      ...cssVariables
     } : {
-      overflow: 'auto'
+      overflow: 'auto',
+      ...cssVariables
     }
 
     // columnResizeMode={'onChange'}
@@ -289,6 +300,7 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
         }
       };
     },
+    theme: theme,
     footerDataSource: footerDataSource
   })), pagination && !infiniteScroll && /*#__PURE__*/_react.default.createElement(_pagination.default, (0, _extends2.default)({
     pageSizeOptions: _hooks.pageSizeOptions,

package/lib/ali-table/InternalTable.js

@@ -21,8 +21,6 @@ var _Grid = _interopRequireDefault(require("./Grid"));
 var _selected = require("./utils/selected");
 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 { getInvisibleColumns } from "../group-component/hook/utils"
-
 const InternalTable = props => {
   const {
     t,

package/lib/ali-table/assets/WebsiteBaseTable.js

@@ -13,11 +13,12 @@ var _table = require("../base-table/table");
 const DarkSupportBaseTable = (0, _styledComponents.default)(_table.BaseTable).withConfig({
   displayName: "DarkSupportBaseTable",
   componentId: "es-grid-template__sc-4ltmbz-0"
-})(["", ";&.dark{--bgcolor:#333;--header-bgcolor:#45494f;--hover-bgcolor:#46484a;--header-hover-bgcolor:#606164;--highlight-bgcolor:#191a1b;--header-highlight-bgcolor:#191a1b;--color:#dadde1;--header-color:#dadde1;--lock-shadow:rgb(37 37 37 / 0.5) 0 0 6px 2px;--border-color:#3c4045;}"], props => props.css);
+})(["", ";&.dark{--bgcolor:#343e59;--footer-bgcolor:#2e3342;--header-bgcolor:#343e59;--hover-bgcolor:#232b43;--header-hover-bgcolor:#606164;--highlight-bgcolor:#eff2f5;--header-highlight-bgcolor:#191a1b;--color:#dadde1;--header-color:#dadde1;--lock-shadow:rgb(37 37 37 / 0.5) 0 0 6px 2px;--border-color:#5d5f61;}"], props => props.css);
 const WebsiteBaseTable = exports.WebsiteBaseTable = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
-  const isDarkTheme = false;
+  const isDarkTheme = props.theme?.theme === 'dark';
   return /*#__PURE__*/_react.default.createElement(DarkSupportBaseTable, (0, _extends2.default)({
     ref: ref,
+    theme: props.theme,
     className: (0, _classnames.default)({
       dark: isDarkTheme
     }, props.className)

package/lib/ali-table/base-table/styles.d.ts

@@ -3,6 +3,7 @@ export declare const LOCK_SHADOW_PADDING = 20;
 export declare const Classes: {
     /** Outer wrapper div for BaseTable component */
     readonly artTableWrapper: "ui-rc-grid-table-wrapper";
+    readonly tableThemeDark: "ui-rc-grid-theme-dark";
     readonly artTable: "ui-rc-grid-table";
     readonly tableHeader: "ui-rc-grid-table-header";
     readonly tableBody: "ui-rc-grid-table-body";
@@ -36,22 +37,28 @@ export declare const Classes: {
     readonly filterDropdown: "ui-rc-grid-filter-dropdown";
 };
 export type BaseTableCSSVariables = Partial<{
-    /** Table row height; note this is a CSS variable and cannot use numeric shorthand */
+    /** Table row height */
     '--row-height': string;
     /** Table font color */
     '--color': string;
+    /** Table hover font color */
+    '--hover-color': string;
     /** Table background color */
     '--bgcolor': string;
     /** Background color on hover */
     '--hover-bgcolor': string;
     /** Background color when a cell is highlighted */
     '--highlight-bgcolor': string;
-    /** Header row height; note this is a CSS variable and cannot use numeric shorthand */
+    /** Header row height */
     '--header-row-height': string;
     /** Header font color */
     '--header-color': string;
     /** Header background color */
     '--header-bgcolor': string;
+    /** Footer background color */
+    '--footer-bgcolor': string;
+    /** Footer color */
+    '--footer-color': string;
     /** Header hover background color */
     '--header-hover-bgcolor': string;
     /** Header cell highlight background color */
@@ -62,21 +69,22 @@ export type BaseTableCSSVariables = Partial<{
     '--font-size': string;
     /** Line height for table text */
     '--line-height': string;
-    /** Lock column shadow, default rgba(152,152,152,0.5) 0 0 6px 2px */
+    /** Lock column shadow */
     '--lock-shadow': string;
     /** Cell border color */
     '--border-color': string;
-    /** Cell border, default 1px solid var(--border-color) */
+    /** Cell border */
     '--cell-border': string;
-    /** Cell horizontal border, default var(--cell-border) */
+    /** Cell horizontal border */
     '--cell-border-horizontal': string;
-    /** Cell vertical border, default var(--cell-border) */
+    /** Cell vertical border */
     '--cell-border-vertical': string;
-    /** Header cell border, default 1px solid var(--border-color) */
+    /** Header cell border */
     '--header-cell-border': string;
-    /** Header cell horizontal border, default var(--header-cell-border) */
+    /** Header cell horizontal border */
     '--header-cell-border-horizontal': string;
-    /** Header cell vertical border, default var(--header-cell-border) */
+    /** Header cell vertical border */
     '--header-cell-border-vertical': string;
 }>;
 export declare const StyledArtTableWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyleTableContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/lib/ali-table/base-table/styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledArtTableWrapper = exports.LOCK_SHADOW_PADDING = exports.Classes = void 0;
+exports.StyledArtTableWrapper = exports.StyleTableContainer = exports.LOCK_SHADOW_PADDING = exports.Classes = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 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; }
@@ -12,6 +12,7 @@ const prefix = 'ui-rc-grid-';
 const Classes = exports.Classes = {
   /** Outer wrapper div for BaseTable component */
   artTableWrapper: `${prefix}table-wrapper`,
+  tableThemeDark: `${prefix}theme-dark`,
   artTable: `${prefix}table`,
   tableHeader: `${prefix}table-header`,
   tableBody: `${prefix}table-body`,
@@ -52,8 +53,17 @@ const Z = {
   scrollItem: 30,
   loadingIndicator: 40
 };
-const outerBorderStyleMixin = (0, _styledComponents.css)(["border-top:var(--cell-border-horizontal);border-right:var(--cell-border-vertical);border-bottom:var(--cell-border-horizontal);border-left:var(--cell-border-vertical);td.first,th.first{border-left:none;}td.last,th.last{border-right:none;}thead tr.first th,tbody tr.first td{border-top:none;}&.has-footer tfoot tr.last td{}&.has-footer tbody tr.last td{&.lock-left,&.lock-right{border-bottom-width:0;border-top-width:0;box-shadow:0 -1px 0 0 var(--border-color),0 0px 0 0 var(--border-color),-1px 0 0 0 var(--border-color);}}&.has-footer tfoot tr td{background-color:var(--footer-bgColor);&.", "{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}&.", "{width:100%;white-space:normal;word-break:break-word;}&.", "{text-align:center;}&.", "{text-align:right;}}&:not(.has-footer) tbody tr.last td{border-bottom:none;}"], Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight);
+const outerBorderStyleMixin = (0, _styledComponents.css)(["border-top:var(--cell-border-horizontal);border-right:var(--cell-border-vertical);border-bottom:var(--cell-border-horizontal);border-left:var(--cell-border-vertical);td.first,th.first{border-left:none;}td.last,th.last{border-right:none;}thead tr.first th,tbody tr.first td{border-top:none;}&.has-footer tfoot tr.last td{}&.has-footer tbody tr.last td{&.lock-left,&.lock-right{border-bottom-width:0;border-top-width:0;box-shadow:0 -1px 0 0 var(--border-color),0 0px 0 0 var(--border-color),-1px 0 0 0 var(--border-color);}}&.has-footer tfoot tr td{&.", "{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}&.", "{width:100%;white-space:normal;word-break:break-word;}&.", "{text-align:center;}&.", "{text-align:right;}}&:not(.has-footer) tbody tr.last td{border-bottom:none;}"], Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight);
 const StyledArtTableWrapper = exports.StyledArtTableWrapper = _styledComponents.default.div.withConfig({
   displayName: "StyledArtTableWrapper",
   componentId: "es-grid-template__sc-ipj1ht-0"
-})(["--row-height:38px;--color:#333;--bgcolor:white;--hover-bgcolor:var(--hover-color,#f5f5f5);--highlight-bgcolor:#eee;--header-row-height:36px;--header-color:#000000de;--header-bgcolor:#ffffff;--header-hover-bgcolor:#ddd;--header-highlight-bgcolor:#e4e8ed;--cell-padding:7px 8px;--font-size:13px;--line-height:1.28571;--lock-shadow:rgba(152,152,152,0.5) 0 0 6px 2px;--border-color:#dfe3e8;--cell-border:1px solid var(--border-color);--cell-border-horizontal:var(--cell-border);--cell-border-vertical:var(--cell-border);--header-cell-border:1px solid var(--border-color);--header-cell-border-horizontal:var(--header-cell-border);--header-cell-border-vertical:var(--header-cell-border);--footer-bgColor:#fafafa;box-sizing:border-box;*{box-sizing:border-box;}cursor:default;color:var(--color);font-size:var(--font-size);line-height:var(--line-height);position:relative;overflow-anchor:none;&.use-outer-border{", ";}.no-scrollbar{scrollbar-width:none;::-webkit-scrollbar{display:none;}}.", "{overflow-x:auto;overflow-y:hidden;background:var(--header-bgcolor);.ui-rc-table-column-title{flex:1;min-width:0;text-align:start;}.", "{font-weight:500;.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}.", "{width:100%;white-space:normal;word-break:break-word;}.", "{text-align:center;}.", "{text-align:right;}}}.", "{.", "{&.", "{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;.expansion-cell{.expansion-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}}&.", "{width:100%;white-space:normal;word-break:break-word;}&.", "{text-align:center;}&.", "{text-align:right;}}}.", ",.", "{overflow-x:auto;overflow-y:hidden;background:var(--bgcolor);}&.sticky-header .", "{position:sticky;top:0;z-index:", ";}&.sticky-footer .", "{position:sticky;bottom:0;z-index:", ";}.", "{tr{td{&.lock-left,&.lock-right{border-bottom-width:0;box-shadow:0 -1px 0 0 var(--border-color),0 1px 0 0 var(--border-color),-1px 0 0 0 var(--border-color);}}}}table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;display:table;margin:0;padding:0;}tr:not(.no-hover):hover > td{background:var(--hover-bgcolor);}tr:not(.no-highlight).highlight > td{background:var(--highlight-bgcolor);}th{font-weight:normal;text-align:left;padding:var(--cell-padding);height:var(--header-row-height);color:var(--header-color);background:var(--header-bgcolor);border:none;border-right:var(--header-cell-border-vertical);border-bottom:var(--header-cell-border-horizontal);}tr.first th{border-top:var(--header-cell-border-horizontal);}th.first{border-left:var(--header-cell-border-vertical);}td{padding:var(--cell-padding);background:var(--bgcolor);height:var(--row-height);border:none;border-right:var(--cell-border-vertical);border-bottom:var(--cell-border-horizontal);}td.first{border-left:var(--cell-border-vertical);}tr.first td{border-top:var(--cell-border-horizontal);}&.has-header tbody tr.first td{border-top:none;}&.has-footer tbody tr.last td{border-bottom:none;}.lock-left,.lock-right{z-index:", ";}.resize-handle{width:6px;height:100%;position:absolute;top:0;right:0;cursor:col-resize;background-color:transparent;border-right:2px solid transparent}.", "{position:absolute;top:0;bottom:0;z-index:", ";pointer-events:none;overflow:hidden;.", "{height:100%;}.", "{margin-right:", "px;box-shadow:none;&.show-shadow{box-shadow:var(--lock-shadow);border-right:var(--cell-border-vertical);}}.", "{margin-left:", "px;box-shadow:none;&.show-shadow{box-shadow:var(--lock-shadow);border-left:var(--cell-border-vertical);}}}.", "{pointer-events:none;color:#99a3b3;font-size:12px;text-align:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);.empty-image{width:50px;height:50px;}.empty-tips{margin-top:16px;line-height:1.5;}}.", "{overflow:auto;position:sticky;bottom:0;z-index:", ";margin-top:-17px;}.ui-rc-grid-loading-wrapper{}.ui-rc-grid-table{}.art-loading-content-wrapper{}.", "{height:1px;visibility:hidden;}.", "{position:relative;.", "{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;}.", "{position:sticky;z-index:", ";transform:translateY(-50%);}}"], outerBorderStyleMixin, Classes.tableHeader, Classes.tableHeaderCell, Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight, Classes.tableBody, Classes.tableCell, Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight, Classes.tableBody, Classes.tableFooter, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.tableBody, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator);
+})(["--row-height:38px;--color:#333;--bgcolor:white;--hover-bgcolor:var(--hover-bgcolor,#f5f5f5);--hover-color:var(--hover-color,#333);--highlight-bgcolor:#eee;--header-row-height:36px;--header-color:#000000de;--header-bgcolor:#ffffff;--header-hover-bgcolor:#ddd;--header-highlight-bgcolor:#e4e8ed;--cell-padding:7px 8px;--font-size:13px;--line-height:1.28571;--lock-shadow:rgba(152,152,152,0.5) 0 0 6px 2px;--border-color:#dfe3e8;--cell-border:1px solid var(--border-color);--cell-border-horizontal:var(--cell-border);--cell-border-vertical:var(--cell-border);--header-cell-border:1px solid var(--border-color);--header-cell-border-horizontal:var(--header-cell-border);--header-cell-border-vertical:var(--header-cell-border);--footer-bgColor:#fafafa;box-sizing:border-box;*{box-sizing:border-box;}cursor:default;color:var(--color);font-size:var(--font-size);line-height:var(--line-height);position:relative;overflow-anchor:none;&::-webkit-scrollbar{width:8px;height:8px;}&::-webkit-scrollbar-track{background:var(--bgcolor);}&::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.4);border-radius:8px;}&::-webkit-scrollbar-thumb:hover{background:#555;}&.dark{&::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.3);}&::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.5);}}&.use-outer-border{", ";}.no-scrollbar{scrollbar-width:none;::-webkit-scrollbar{display:none;}}.", "{overflow-x:auto;overflow-y:hidden;background:var(--header-bgcolor);.ui-rc-table-column-title{flex:1;min-width:0;text-align:start;}.", "{font-weight:500;.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}.", "{width:100%;white-space:normal;word-break:break-word;}.", "{text-align:center;}.", "{text-align:right;}}}.", "{.", "{&.", "{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;.expansion-cell{.expansion-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}}&.", "{width:100%;white-space:normal;word-break:break-word;}&.", "{text-align:center;}&.", "{text-align:right;}}.", "{background:var(--footer-bgcolor);}}.", ",.", "{overflow-x:auto;overflow-y:hidden;}&.sticky-header .", "{position:sticky;top:0;z-index:", ";}&.sticky-footer .", "{position:sticky;bottom:0;z-index:", ";}.", "{tr{td{&.lock-left,&.lock-right{border-bottom-width:0;box-shadow:0 -1px 0 0 var(--border-color),0 0px 0 0 var(--border-color),-1px 0 0 0 var(--border-color);}}}}table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;display:table;margin:0;padding:0;}tr:not(.no-hover):hover > td{background:var(--hover-bgcolor);color:var(--hover-color);}tr:not(.no-highlight).highlight > td{}th{font-weight:normal;text-align:left;padding:var(--cell-padding);height:var(--header-row-height);color:var(--header-color);background:var(--header-bgcolor);border:none;border-right:var(--header-cell-border-vertical);border-bottom:var(--header-cell-border-horizontal);}tr.first th{border-top:var(--header-cell-border-horizontal);}th.first{border-left:var(--header-cell-border-vertical);}td{padding:var(--cell-padding);background:var(--bgcolor);height:var(--row-height);border:none;border-right:var(--cell-border-vertical);border-bottom:var(--cell-border-horizontal);}td.first{border-left:var(--cell-border-vertical);}tr.first td{border-top:var(--cell-border-horizontal);}&.has-header tbody tr.first td{border-top:none;}&.has-footer tbody tr.last td{border-bottom:none;}&.has-footer tfoot tr > td{background:var(--footer-bgcolor);color:var(--footer-color);}&.has-footer tfoot tr:not(.no-hover):hover > td{background:var(--footer-bgcolor);}.lock-left,.lock-right{z-index:", ";}.resize-handle{width:6px;height:100%;position:absolute;top:0;right:0;cursor:col-resize;background-color:transparent;border-right:2px solid transparent;}.", "{position:absolute;top:0;bottom:0;z-index:", ";pointer-events:none;overflow:hidden;.", "{height:100%;}.", "{margin-right:", "px;box-shadow:none;&.show-shadow{box-shadow:var(--lock-shadow);border-right:var(--cell-border-vertical);}}.", "{margin-left:", "px;box-shadow:none;&.show-shadow{box-shadow:var(--lock-shadow);border-left:var(--cell-border-vertical);}}}.", "{pointer-events:none;color:#99a3b3;font-size:12px;text-align:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);.empty-image{width:50px;height:50px;}.empty-tips{margin-top:16px;line-height:1.5;}}.", "{overflow:auto;position:sticky;bottom:0;z-index:", ";margin-top:-17px;}.ui-rc-grid-loading-wrapper{}.ui-rc-grid-table{}.art-loading-content-wrapper{}.", "{height:1px;visibility:hidden;}.", "{position:relative;.", "{position:absolute;inset:0;pointer-events:none;}.", "{position:sticky;z-index:", ";transform:translateY(-50%);}}"], outerBorderStyleMixin, Classes.tableHeader, Classes.tableHeaderCell, Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight, Classes.tableBody, Classes.tableCell, Classes.cellEllipsis, Classes.cellWrap, Classes.cellTextCenter, Classes.cellTextRight, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.tableBody, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator);
+
+// type StyleTableContainerProps = {
+
+// }
+
+const StyleTableContainer = exports.StyleTableContainer = _styledComponents.default.div.withConfig({
+  displayName: "StyleTableContainer",
+  componentId: "es-grid-template__sc-ipj1ht-1"
+})(["--color:#333;--bgcolor:white;--header-bgcolor:#ffffff;--header-hover-bgcolor:#ddd;--header-highlight-bgcolor:#e4e8ed;--cell-padding:7px 8px;--font-size:13px;--line-height:1.28571;--border-color:#dfe3e8;--cell-border:1px solid var(--border-color);--cell-border-horizontal:var(--cell-border);--cell-border-vertical:var(--cell-border);--header-cell-border:1px solid var(--border-color);--header-cell-border-horizontal:var(--header-cell-border);--header-cell-border-vertical:var(--header-cell-border);--footer-bgcolor:#fafafa;&.", "{--bgcolor:#343e59;--footer-bgcolor:#2e3342;--header-bgcolor:#343e59;--hover-bgcolor:#232b43;--header-hover-bgcolor:#606164;--highlight-bgcolor:#eff2f5;--header-highlight-bgcolor:#191a1b;--color:#dadde1;--header-color:#dadde1;--lock-shadow:rgb(37 37 37 / 0.5) 0 0 6px 2px;--border-color:#4f5266;background-color:var(--bgcolor);}&.ui-rc-grid .ui-rc-pagination{background-color:var(--bgcolor);color:var(--color);padding:10px;border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);border-inline:1px solid var(--border-color);background-color:var(--bgcolor);.ui-rc-pagination-prev{.anticon.anticon-left{color:var(--color);}}.ui-rc-pagination-disabled{.anticon.anticon-left{color:#7d7a7a;}}.ui-rc-pagination-next{.anticon.anticon-right{color:var(--color);}&.ui-rc-pagination-disabled{.anticon.anticon-right{color:#7d7a7a;}}}}&.", "{&.ui-rc-grid{.ui-rc-toolbar-bottom{background-color:var(--footer-bgcolor);color:#ffffff;}}.ui-rc-grid-top-toolbar{border-color:var(--border-color);color:#ffffff;}.ui-rc-toolbar{.ui-rc-toolbar-selection-item{background-color:var(--footer-bgcolor);color:#ffffff;}}}"], Classes.tableThemeDark, Classes.tableThemeDark);

package/lib/ali-table/base-table/styles.scss

@@ -17,3 +17,41 @@ $prefix: 'ui-rc' !default;
   box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
   overflow: hidden;
 }
+
+.ui-rc-grid-horizontal-scroll-container {
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+
+  }
+  &::-webkit-scrollbar-track {
+    background: var(--bgcolor);
+
+  }
+
+    &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.4);
+    border-radius: 8px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: #555;
+  }
+  
+}
+.ui-rc-grid-table-wrapper.dark {
+
+  .ui-rc-grid-horizontal-scroll-container {
+
+
+      &::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.3);
+  }
+   &::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+  }
+
+ 
+
+}

package/lib/ali-table/base-table/table.d.ts

@@ -6,7 +6,7 @@ import { TableDOMHelper } from './helpers/TableDOMUtils';
 import type { ResolvedUseVirtual, VerticalRenderRange, VirtualEnum } from './interfaces';
 import type { LoadingContentWrapperProps } from './loading';
 import type { BaseTableCSSVariables } from './styles';
-import type { CommandClick, ExpandedRowRender, IFormat, RenderExpandIcon, RowClassName } from '../../grid-component/type';
+import type { CommandClick, ExpandedRowRender, IFormat, IFTheme, RenderExpandIcon, RowClassName } from '../../grid-component/type';
 export type PrimaryKey = string | ((row: any) => string);
 export type ColumnResizeMode = 'onChange' | 'onEnd';
 export type ExpandableConfig<RecordType> = {
@@ -61,6 +61,7 @@ export type BaseTableProps = {
     style?: CSSProperties & BaseTableCSSVariables;
     /** Whether the table has a header */
     showHeader?: boolean;
+    theme?: IFTheme;
     /** Whether table has a horizontal sticky scrollbar */
     hasStickyScroll?: boolean;
     /** Height of the sticky horizontal scrollbar */

package/lib/ali-table/base-table/table.js

@@ -31,6 +31,7 @@ function warnEmptyContentIsDeprecated() {
 class BaseTable extends _react.default.Component {
   static defaultProps = {
     showHeader: true,
+    // theme: undefined,
     isStickyHeader: true,
     stickyTop: 0,
     footerDataSource: [],
@@ -93,7 +94,11 @@ class BaseTable extends _react.default.Component {
     const innerTableWidth = tableBodyHtmlTable.offsetWidth;
     const artTableWidth = artTable.offsetWidth;
     const stickyScrollHeightProp = this.props.stickyScrollHeight;
-    const stickyScrollHeight = stickyScrollHeightProp === 'auto' ? (0, _utils.getScrollbarSize)().height : stickyScrollHeightProp;
+
+    // scroll mặc định thì bật lên
+    // const stickyScrollHeight = stickyScrollHeightProp === 'auto' ? getScrollbarSize().height : stickyScrollHeightProp
+    const stickyScrollHeight = stickyScrollHeightProp === 'auto' ? 8 : stickyScrollHeightProp; // height customscrll bar = 8
+
     stickyScroll.style.marginTop = `-${(stickyScrollHeight ?? 0) + 1}px`;
     if (artTableWidth >= innerTableWidth) {
       if (this.state.hasScroll) {
@@ -344,8 +349,8 @@ class BaseTable extends _react.default.Component {
       className,
       style,
       showHeader,
+      theme,
       useOuterBorder,
-      // isStickyHead,
       isStickyHeader,
       isStickyFooter,
       isLoading,
@@ -357,6 +362,7 @@ class BaseTable extends _react.default.Component {
       empty: dataSource.length === 0,
       lock: info.hasLockColumn,
       'has-header': showHeader,
+      'theme-dark': theme?.theme === 'dark',
       'sticky-header': isStickyHeader,
       'has-footer': footerDataSource && footerDataSource.length > 0,
       'sticky-footer': isStickyFooter

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

@@ -4,6 +4,7 @@ import type { Cell, Header, OnChangeFn } from '@tanstack/react-table';
 import type { CSSProperties, ReactElement, ReactNode } from 'react';
 import type { TableLocale } from "rc-master-ui/lib/table/interface";
 import type { PaginationLocale } from 'rc-master-ui/lib/pagination/Pagination';
+import { BaseTableCSSVariables } from '../ali-table/base-table/styles';
 declare module "@tanstack/table-core" {
     interface ColumnMeta<any, any> extends ColumnTable {
         rowSpan?: number;
@@ -225,13 +226,14 @@ export type ColumnTable<RecordType = AnyObject> = {
     getSpanRect?: (value: any, row: any, rowIndex: number) => SpanRect;
 };
 export type ColumnsTable<RecordType = AnyObject> = ColumnTable<RecordType>[];
+export type IFTheme = {
+    theme?: 'dark' | 'light';
+    backgroundColor?: string;
+    cssVariables?: BaseTableCSSVariables;
+};
 export type TableProps<RecordType = AnyObject> = {
     id?: string;
-    theme?: {
-        theme?: 'dark' | 'light';
-        backgroundColor?: string;
-        color?: string;
-    };
+    theme?: IFTheme;
     useOuterBorder?: boolean;
     showHeader?: boolean;
     className?: string;

package/package.json

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