es-grid-template 1.9.17 → 1.9.19

package/es/ali-table/Grid.js

@@ -35,6 +35,7 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
     locale,
     fullScreen,
     actionTemplate,
+    bottom,
     theme,
     height,
     minHeight,
@@ -152,6 +153,9 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
       ...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,
@@ -172,13 +176,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: {
@@ -289,7 +293,7 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
     },
     theme: theme,
     footerDataSource: footerDataSource
-  })), pagination && !infiniteScroll && /*#__PURE__*/React.createElement(Pagination, _extends({
+  })), bottom, pagination && !infiniteScroll && /*#__PURE__*/React.createElement(Pagination, _extends({
     pageSizeOptions: pageSizeOptions,
     rootClassName: 'pagination-template',
     showSizeChanger: true,

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

@@ -49,7 +49,7 @@ const outerBorderStyleMixin = css(["border-top:var(--cell-border-horizontal);bor
 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-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;&.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);
+})(["--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 = {
 

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

@@ -17,3 +17,37 @@ $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.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) {
@@ -85,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) {

package/es/ali-table/utils/selected.js

@@ -402,6 +402,7 @@ export function isRowChecked(key, selectedKeys, treeIndex, checkedStrategy, isDi
   // =========================
   if (checkedStrategy === 'parent') {
     // node disable => chỉ true nếu explicit chọn
+    // console.log('isDisabled', isDisabled)
     if (isDisabled) {
       const abc = selectedKeys.has(key);
       return abc;

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

@@ -4,7 +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';
+import type { BaseTableCSSVariables } from '../ali-table/base-table/styles';
 declare module "@tanstack/table-core" {
     interface ColumnMeta<any, any> extends ColumnTable {
         rowSpan?: number;
@@ -315,6 +315,7 @@ export type TableProps<RecordType = AnyObject> = {
     }) => void;
     expandable?: ExpandableConfig<RecordType>;
     actionTemplate?: ReactNode | ReactElement | (() => ReactNode | ReactElement);
+    bottom?: ReactNode;
     rowClassName?: string | RowClassName<RecordType>;
     onRowStyles?: CSSProperties | ((data: RecordType) => CSSProperties);
     onRowHeaderStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | (() => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);

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" | "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">);
+    onCellStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
+    onCellHeaderStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
+    onCellFooterStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
     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

@@ -45,6 +45,7 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     locale,
     fullScreen,
     actionTemplate,
+    bottom,
     theme,
     height,
     minHeight,
@@ -162,6 +163,9 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       ...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,
@@ -182,13 +186,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: {
@@ -299,7 +303,7 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     },
     theme: theme,
     footerDataSource: footerDataSource
-  })), pagination && !infiniteScroll && /*#__PURE__*/_react.default.createElement(_pagination.default, (0, _extends2.default)({
+  })), bottom, pagination && !infiniteScroll && /*#__PURE__*/_react.default.createElement(_pagination.default, (0, _extends2.default)({
     pageSizeOptions: _hooks.pageSizeOptions,
     rootClassName: 'pagination-template',
     showSizeChanger: true,

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

@@ -57,7 +57,7 @@ const outerBorderStyleMixin = (0, _styledComponents.css)(["border-top:var(--cell
 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-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;&.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);
+})(["--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 = {
 

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

@@ -17,3 +17,37 @@ $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.js

@@ -94,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) {

package/lib/ali-table/utils/selected.js

@@ -433,6 +433,7 @@ function isRowChecked(key, selectedKeys, treeIndex, checkedStrategy, isDisabledF
   // =========================
   if (checkedStrategy === 'parent') {
     // node disable => chỉ true nếu explicit chọn
+    // console.log('isDisabled', isDisabled)
     if (isDisabled) {
       const abc = selectedKeys.has(key);
       return abc;

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

@@ -4,7 +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';
+import type { BaseTableCSSVariables } from '../ali-table/base-table/styles';
 declare module "@tanstack/table-core" {
     interface ColumnMeta<any, any> extends ColumnTable {
         rowSpan?: number;
@@ -315,6 +315,7 @@ export type TableProps<RecordType = AnyObject> = {
     }) => void;
     expandable?: ExpandableConfig<RecordType>;
     actionTemplate?: ReactNode | ReactElement | (() => ReactNode | ReactElement);
+    bottom?: ReactNode;
     rowClassName?: string | RowClassName<RecordType>;
     onRowStyles?: CSSProperties | ((data: RecordType) => CSSProperties);
     onRowHeaderStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | (() => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.9.17",
+  "version": "1.9.19",
   "description": "es-grid-template",
   "keywords": [
     "react",
@@ -66,7 +66,7 @@
     "rc-checkbox": "^3.5.0",
     "rc-dropdown": "^4.2.1",
     "rc-field-form": "^2.6.0",
-    "rc-master-ui": "1.1.58",
+    "rc-master-ui": "1.1.59",
     "rc-select": "^14.16.3",
     "rc-tooltip": "^6.3.0",
     "rc-tree": "^5.10.1",