es-grid-template 1.9.25 → 1.9.26

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

@@ -322,6 +322,10 @@ export type TableProps<RecordType = AnyObject> = {
     showHeader?: boolean;
     /** CSS class cho container table */
     className?: string;
+    /** striped class odd/even row table
+     * mặc định : true
+     */
+    striped?: boolean;
     /** Tiêu đề table */
     title?: ReactNode | ((data: RecordType) => ReactNode);
     /** Tiêu đề khi table ở chế độ fullscreen */
@@ -388,11 +392,6 @@ export type TableProps<RecordType = AnyObject> = {
     fullScreen?: boolean;
     /** Cấu hình phân trang, false để tắt */
     pagination?: false | PaginationConfig;
-    /**
-       * @deprecated
-       * @since  1.9.25
-       */
-    showCustomTooltip?: boolean;
     /** Context Menu */
     /** Danh sách menu chuột phải */
     contextMenuItems?: ContextMenuItem[];

package/es/table-component/TableContainer.js

@@ -77,6 +77,7 @@ const TableContainer = props => {
     onExpandClick,
     setIsExpandClick,
     recordClick,
+    striped = true,
     ...rest
   } = props;
   const [paginationLocal] = useLocale('Pagination');
@@ -278,6 +279,7 @@ const TableContainer = props => {
     value: {
       t,
       locale,
+      striped,
       lang,
       prefix,
       id,

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

@@ -399,13 +399,12 @@ const TableBodyCell = props => {
       if (e.target.firstChild?.clientWidth < e.target.firstChild?.scrollWidth) {
         setIsOpenTooltip(true);
       }
-    }
-
-    // onMouseLeave={() => {
-    //   setIsOpenTooltip(false)
-    // }}
-    ,
-
+    },
+    onMouseLeave: () => {
+      if (isOpenTooltip) {
+        setIsOpenTooltip(false);
+      }
+    },
     onKeyDown: e => {
       const flatRows = table.getRowModel().flatRows;
       if (e.key === 'ArrowDown' && rowNumber < flatRows.length - 1) {

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

@@ -28,7 +28,8 @@ const TableBodyRow = ({
     focusedCell,
     rowClassName,
     rowEditable,
-    onRowStyles
+    onRowStyles,
+    striped
   } = React.useContext(TableContext);
   const visibleCells = row.getVisibleCells();
   const virtualColumns = columnVirtualizer.getVirtualItems();
@@ -53,7 +54,9 @@ const TableBodyRow = ({
       [`${prefix}-grid-row-selected`]: row.getIsSelected(),
       [`${prefix}-grid-row-focus`]: row.id === focusedCell?.rowId && !editAble,
       // [`${prefix}-grid-row-parent`]: row.subRows && row.subRows.length > 0 || (Array.isArray(row.originalSubRows) &&  row.originalSubRows.length > 0),
-      [`${prefix}-grid-row-parent`]: row.getCanExpand()
+      [`${prefix}-grid-row-parent`]: row.getCanExpand(),
+      [`${prefix}-grid-row-odd`]: striped && virtualRow.index % 2 === 1,
+      [`${prefix}-grid-row-even`]: striped && virtualRow.index % 2 === 0
     }),
     style: {
       // display: 'flex',

package/es/table-component/style.js

@@ -45,4 +45,4 @@ const colorDark = "#e6e4f3e6 ";
 export const GridStyle = styled.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-hdqm5k-0"
-})(["&.", "-grid{color:", ";font-size:13px;background-color:", ";&.", "-grid-editable{.", "-grid-container{.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#ffffff;font-weight:500;}}}}}table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:\"\";pointer-events:none;}.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}}&.", "-grid-light{.", "-grid-container{.", "-grid-thead{background-color:", ";font-weight:500;.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;z-index:3;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}}"], props => props.$prefix, color, BgColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);
+})(["&.", "-grid{color:", ";font-size:13px;background-color:", ";&.", "-grid-editable{.", "-grid-container{.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#ffffff;font-weight:500;}}}}}table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:\"\";pointer-events:none;}.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-odd{background-color:#F9F8FD;}&.", "-grid-row-even{}&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}}&.", "-grid-light{.", "-grid-container{.", "-grid-thead{background-color:", ";font-weight:500;.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;z-index:3;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}}"], props => props.$prefix, color, BgColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);

package/es/table-component/style.scss

@@ -272,7 +272,7 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
         position: absolute;
         width: 100%;
         // background-color: #ffffff;
-        background-color: inherit;
+        // background-color: inherit;
 
         &:hover {
           .#{$prefix}-grid-cell:not(.editable) {

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

@@ -13,6 +13,7 @@ export interface IContext<T> {
     rowKey: string;
     originData: any[];
     dataSource: any[];
+    striped?: boolean;
     format?: IFormat;
     expandable?: ExpandableConfig<T>;
     wrapSettings?: IWrapSettings;

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

@@ -322,6 +322,10 @@ export type TableProps<RecordType = AnyObject> = {
     showHeader?: boolean;
     /** CSS class cho container table */
     className?: string;
+    /** striped class odd/even row table
+     * mặc định : true
+     */
+    striped?: boolean;
     /** Tiêu đề table */
     title?: ReactNode | ((data: RecordType) => ReactNode);
     /** Tiêu đề khi table ở chế độ fullscreen */
@@ -388,11 +392,6 @@ export type TableProps<RecordType = AnyObject> = {
     fullScreen?: boolean;
     /** Cấu hình phân trang, false để tắt */
     pagination?: false | PaginationConfig;
-    /**
-       * @deprecated
-       * @since  1.9.25
-       */
-    showCustomTooltip?: boolean;
     /** Context Menu */
     /** Danh sách menu chuột phải */
     contextMenuItems?: ContextMenuItem[];

package/lib/table-component/TableContainer.js

@@ -84,6 +84,7 @@ const TableContainer = props => {
     onExpandClick,
     setIsExpandClick,
     recordClick,
+    striped = true,
     ...rest
   } = props;
   const [paginationLocal] = (0, _locale.useLocale)('Pagination');
@@ -285,6 +286,7 @@ const TableContainer = props => {
     value: {
       t,
       locale,
+      striped,
       lang,
       prefix,
       id,

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

@@ -406,13 +406,12 @@ const TableBodyCell = props => {
       if (e.target.firstChild?.clientWidth < e.target.firstChild?.scrollWidth) {
         setIsOpenTooltip(true);
       }
-    }
-
-    // onMouseLeave={() => {
-    //   setIsOpenTooltip(false)
-    // }}
-    ,
-
+    },
+    onMouseLeave: () => {
+      if (isOpenTooltip) {
+        setIsOpenTooltip(false);
+      }
+    },
     onKeyDown: e => {
       const flatRows = table.getRowModel().flatRows;
       if (e.key === 'ArrowDown' && rowNumber < flatRows.length - 1) {

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

@@ -35,7 +35,8 @@ const TableBodyRow = ({
     focusedCell,
     rowClassName,
     rowEditable,
-    onRowStyles
+    onRowStyles,
+    striped
   } = _react.default.useContext(_useContext.TableContext);
   const visibleCells = row.getVisibleCells();
   const virtualColumns = columnVirtualizer.getVirtualItems();
@@ -60,7 +61,9 @@ const TableBodyRow = ({
       [`${prefix}-grid-row-selected`]: row.getIsSelected(),
       [`${prefix}-grid-row-focus`]: row.id === focusedCell?.rowId && !editAble,
       // [`${prefix}-grid-row-parent`]: row.subRows && row.subRows.length > 0 || (Array.isArray(row.originalSubRows) &&  row.originalSubRows.length > 0),
-      [`${prefix}-grid-row-parent`]: row.getCanExpand()
+      [`${prefix}-grid-row-parent`]: row.getCanExpand(),
+      [`${prefix}-grid-row-odd`]: striped && virtualRow.index % 2 === 1,
+      [`${prefix}-grid-row-even`]: striped && virtualRow.index % 2 === 0
     }),
     style: {
       // display: 'flex',

package/lib/table-component/style.js

@@ -52,4 +52,4 @@ const colorDark = "#e6e4f3e6 ";
 const GridStyle = exports.GridStyle = _styledComponents.default.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-hdqm5k-0"
-})(["&.", "-grid{color:", ";font-size:13px;background-color:", ";&.", "-grid-editable{.", "-grid-container{.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#ffffff;font-weight:500;}}}}}table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:\"\";pointer-events:none;}.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}}&.", "-grid-light{.", "-grid-container{.", "-grid-thead{background-color:", ";font-weight:500;.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;z-index:3;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}}"], props => props.$prefix, color, BgColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);
+})(["&.", "-grid{color:", ";font-size:13px;background-color:", ";&.", "-grid-editable{.", "-grid-container{.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#ffffff;font-weight:500;}}}}}table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:\"\";pointer-events:none;}.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-odd{background-color:#F9F8FD;}&.", "-grid-row-even{}&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}}&.", "-grid-light{.", "-grid-container{.", "-grid-thead{background-color:", ";font-weight:500;.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;z-index:3;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:#fafafa;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}}"], props => props.$prefix, color, BgColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : BgColor}`, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);

package/lib/table-component/style.scss

@@ -272,7 +272,7 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
         position: absolute;
         width: 100%;
         // background-color: #ffffff;
-        background-color: inherit;
+        // background-color: inherit;
 
         &:hover {
           .#{$prefix}-grid-cell:not(.editable) {

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

@@ -13,6 +13,7 @@ export interface IContext<T> {
     rowKey: string;
     originData: any[];
     dataSource: any[];
+    striped?: boolean;
     format?: IFormat;
     expandable?: ExpandableConfig<T>;
     wrapSettings?: IWrapSettings;

package/package.json

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