es-grid-template 1.8.0 → 1.8.1

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

@@ -267,6 +267,7 @@ const TableBodyCell = props => {
       style: {
         display: 'flex',
         // height: '36px',
+        minHeight: 36,
         width: cell.column.getSize(),
         minWidth: cell.column.getSize(),
         // flex: 1,
@@ -351,6 +352,7 @@ const TableBodyCell = props => {
       display: 'flex',
       width: cell.column.getSize(),
       minWidth: cell.column.getSize(),
+      minHeight: 36,
       // flex: 1,
       // maxWidth: cell.column.getSize(),
       // height: '36px',

package/es/table-component/header/TableHead.js

@@ -28,7 +28,7 @@ const TableHead = ({
       zIndex: 1,
       // gridTemplateRows: `repeat(${table.getHeaderGroups().length}, auto)`,
       // gridTemplateColumns: `repeat(${table.getVisibleLeafColumns().length}, 1fr)`,
-      gridTemplateColumns: `${table.getVisibleLeafColumns().map(n => `${n.getSize()}fr`).join(" ")}`
+      gridTemplateColumns: `${table.getVisibleLeafColumns().map(n => `${n.getSize()}px`).join(" ")}`
     }
   }, leafColumns.map(column => {
     const depth = column.depth ?? 0;

package/es/table-component/header/TableHeadCell2.js

@@ -226,17 +226,17 @@ const TableHeadCell2 = props => {
     // rowSpan={rowSpan}
     ,
 
-    key: column.id,
+    key: header.id,
     style: {
       // display: 'flex',
       // width: column.getSize(),
-      minWidth: column.getSize(),
+      minWidth: header.getSize(),
       // flex: 1,
-      flexGrow: column.getSize(),
+      flexGrow: header.getSize(),
       gridRow: `${depth + 1} / span ${rowSpan}`,
       gridColumn: `span ${colSpan}`,
       // maxWidth: header.getSize(),
-      ...getCommonPinningStyles(column),
+      ...getCommonPinningStyles(header.column),
       width: 'auto',
       ...style
     },

package/es/table-component/header/TableHeadGroupCell.js

@@ -9,7 +9,7 @@ import { ArrowDown, ArrowUp, FilterFill, SortCancel } from 'becoxy-icons';
 import classNames from 'classnames';
 import { Checkbox, Dropdown, Select } from 'rc-master-ui';
 import { booleanOperator, nonActionColumn, numberOperator, stringOperator, translateOption } from "../hook/constant";
-import { extendsObject, getCommonPinningStyles, getDefaultOperator, getTypeFilter } from "../hook/utils";
+import { extendsObject, getCommonPinningStyles2, getDefaultOperator, getTypeFilter } from "../hook/utils";
 import { TableContext } from "../useContext";
 import { renderFilter } from "./renderFilter";
 import ReactDOMServer from 'react-dom/server';
@@ -224,7 +224,8 @@ const TableHeadGroupCell = props => {
     // rowSpan={rowSpan}
     ,
 
-    key: column.id,
+    "data-col-span": colSpan,
+    key: header.id,
     style: {
       // display: 'flex',
       // width: column.getSize(),
@@ -233,7 +234,7 @@ const TableHeadGroupCell = props => {
       gridRow: `${depth + 1} / span ${rowSpan}`,
       gridColumn: `span ${colSpan}`,
       // maxWidth: header.getSize(),
-      ...getCommonPinningStyles(column),
+      ...getCommonPinningStyles2(header),
       width: 'auto',
       ...style
     },

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

@@ -11,6 +11,7 @@ export declare const newGuid: () => any;
 export declare const convertDayjsToDate: (dateString: string, format?: string) => Date;
 export declare const convertDateToDayjs: (date: Date | undefined, format?: string) => dayjs.Dayjs;
 export declare const getCommonPinningStyles: (column: Column<any>) => CSSProperties;
+export declare const getCommonPinningStyles2: (header: any) => CSSProperties;
 export declare const sumSize: (items: any) => number;
 export declare const appendIfNotExists: (a: VirtualItem[], b: VirtualItem[]) => VirtualItem[];
 export declare const getNewItemsOnly: (a: VirtualItem[], b: VirtualItem[]) => VirtualItem[];

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

@@ -50,6 +50,29 @@ export const getCommonPinningStyles = column => {
     // borderBottom: 0
   };
 };
+export const getCommonPinningStyles2 = header => {
+  const isPinned = header.column.getIsPinned();
+  // const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
+  // const isFirstRightPinnedColumn =isPinned === "right" && column.getIsFirstColumn("right");
+
+  return {
+    // boxShadow: isFirstRightPinnedColumn
+    //     ? "#e0e0e0 2px 0px 1px -1px inset"
+    //     : undefined,
+
+    left: isPinned === "left" ? `${header.getStart("left")}px` : undefined,
+    right: isPinned === "right" ? `${header.getAfter("right")}px` : undefined,
+    // opacity: isPinned ? 0.5 : 1,
+    opacity: 1,
+    position: isPinned ? "sticky" : "relative",
+    // width: column.getSize(),
+    width: 'auto',
+    zIndex: isPinned ? 2 : 0
+    // border: '1px solid #e5e7eb',
+    // borderTop: 0,
+    // borderBottom: 0
+  };
+};
 export const sumSize = items => {
   return items.reduce((total, item) => total + item.size, 0);
 };

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

@@ -274,6 +274,7 @@ const TableBodyCell = props => {
       style: {
         display: 'flex',
         // height: '36px',
+        minHeight: 36,
         width: cell.column.getSize(),
         minWidth: cell.column.getSize(),
         // flex: 1,
@@ -358,6 +359,7 @@ const TableBodyCell = props => {
       display: 'flex',
       width: cell.column.getSize(),
       minWidth: cell.column.getSize(),
+      minHeight: 36,
       // flex: 1,
       // maxWidth: cell.column.getSize(),
       // height: '36px',

package/lib/table-component/header/TableHead.js

@@ -38,7 +38,7 @@ const TableHead = ({
       zIndex: 1,
       // gridTemplateRows: `repeat(${table.getHeaderGroups().length}, auto)`,
       // gridTemplateColumns: `repeat(${table.getVisibleLeafColumns().length}, 1fr)`,
-      gridTemplateColumns: `${table.getVisibleLeafColumns().map(n => `${n.getSize()}fr`).join(" ")}`
+      gridTemplateColumns: `${table.getVisibleLeafColumns().map(n => `${n.getSize()}px`).join(" ")}`
     }
   }, leafColumns.map(column => {
     const depth = column.depth ?? 0;

package/lib/table-component/header/TableHeadCell2.js

@@ -235,17 +235,17 @@ const TableHeadCell2 = props => {
     // rowSpan={rowSpan}
     ,
 
-    key: column.id,
+    key: header.id,
     style: {
       // display: 'flex',
       // width: column.getSize(),
-      minWidth: column.getSize(),
+      minWidth: header.getSize(),
       // flex: 1,
-      flexGrow: column.getSize(),
+      flexGrow: header.getSize(),
       gridRow: `${depth + 1} / span ${rowSpan}`,
       gridColumn: `span ${colSpan}`,
       // maxWidth: header.getSize(),
-      ...(0, _utils.getCommonPinningStyles)(column),
+      ...(0, _utils.getCommonPinningStyles)(header.column),
       width: 'auto',
       ...style
     },

package/lib/table-component/header/TableHeadGroupCell.js

@@ -233,7 +233,8 @@ const TableHeadGroupCell = props => {
     // rowSpan={rowSpan}
     ,
 
-    key: column.id,
+    "data-col-span": colSpan,
+    key: header.id,
     style: {
       // display: 'flex',
       // width: column.getSize(),
@@ -242,7 +243,7 @@ const TableHeadGroupCell = props => {
       gridRow: `${depth + 1} / span ${rowSpan}`,
       gridColumn: `span ${colSpan}`,
       // maxWidth: header.getSize(),
-      ...(0, _utils.getCommonPinningStyles)(column),
+      ...(0, _utils.getCommonPinningStyles2)(header),
       width: 'auto',
       ...style
     },

package/lib/table-component/hook/utils.d.ts

@@ -11,6 +11,7 @@ export declare const newGuid: () => any;
 export declare const convertDayjsToDate: (dateString: string, format?: string) => Date;
 export declare const convertDateToDayjs: (date: Date | undefined, format?: string) => dayjs.Dayjs;
 export declare const getCommonPinningStyles: (column: Column<any>) => CSSProperties;
+export declare const getCommonPinningStyles2: (header: any) => CSSProperties;
 export declare const sumSize: (items: any) => number;
 export declare const appendIfNotExists: (a: VirtualItem[], b: VirtualItem[]) => VirtualItem[];
 export declare const getNewItemsOnly: (a: VirtualItem[], b: VirtualItem[]) => VirtualItem[];

package/lib/table-component/hook/utils.js

@@ -25,7 +25,7 @@ exports.findFirst = findFirst;
 exports.getAllVisibleKeys1 = exports.getAllVisibleKeys = exports.getAllRowKey = exports.genPresets = exports.flattenData = exports.flattenArray = exports.flatColumns2 = exports.findItemByKey = void 0;
 exports.getCellsByPosition = getCellsByPosition;
 exports.getColIdsBetween = getColIdsBetween;
-exports.getFormat = exports.getFixedFields = exports.getEditType = exports.getDiffent2Array = exports.getDefaultValue = exports.getDefaultOperator = exports.getDatepickerFormat = exports.getDateRangeFormat = exports.getCommonPinningStyles = void 0;
+exports.getFormat = exports.getFixedFields = exports.getEditType = exports.getDiffent2Array = exports.getDefaultValue = exports.getDefaultOperator = exports.getDatepickerFormat = exports.getDateRangeFormat = exports.getCommonPinningStyles2 = exports.getCommonPinningStyles = void 0;
 exports.getHiddenParentKeys = getHiddenParentKeys;
 exports.getHiddenParentKeys1 = getHiddenParentKeys1;
 exports.getInvisibleColumns = getInvisibleColumns;
@@ -103,6 +103,30 @@ const getCommonPinningStyles = column => {
   };
 };
 exports.getCommonPinningStyles = getCommonPinningStyles;
+const getCommonPinningStyles2 = header => {
+  const isPinned = header.column.getIsPinned();
+  // const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
+  // const isFirstRightPinnedColumn =isPinned === "right" && column.getIsFirstColumn("right");
+
+  return {
+    // boxShadow: isFirstRightPinnedColumn
+    //     ? "#e0e0e0 2px 0px 1px -1px inset"
+    //     : undefined,
+
+    left: isPinned === "left" ? `${header.getStart("left")}px` : undefined,
+    right: isPinned === "right" ? `${header.getAfter("right")}px` : undefined,
+    // opacity: isPinned ? 0.5 : 1,
+    opacity: 1,
+    position: isPinned ? "sticky" : "relative",
+    // width: column.getSize(),
+    width: 'auto',
+    zIndex: isPinned ? 2 : 0
+    // border: '1px solid #e5e7eb',
+    // borderTop: 0,
+    // borderBottom: 0
+  };
+};
+exports.getCommonPinningStyles2 = getCommonPinningStyles2;
 const sumSize = items => {
   return items.reduce((total, item) => total + item.size, 0);
 };

package/package.json

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