es-grid-template 1.8.2 → 1.8.22

package/es/table-component/TableContainerEdit.js

@@ -1819,7 +1819,8 @@ const TableContainerEdit = props => {
       handleAddMulti,
       dataErrors,
       windowSize,
-      handleCellClick
+      handleCellClick,
+      pagination
     }
   }, /*#__PURE__*/React.createElement(TableWrapper, {
     contextMenuItems: contextMenuItems,

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

@@ -358,7 +358,6 @@ const TableBodyCell = props => {
       // height: '36px',
       ...getCommonPinningStyles(cell.column)
     },
-    onMouseDown: () => {},
     onMouseEnter: e => {
       if (e.target.firstChild?.clientWidth < e.target.firstChild?.scrollWidth) {
         setIsOpenTooltip(true);

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

@@ -19,13 +19,19 @@ import { nonActionColumn } from "../hook/constant";
 const renderCellIndex = props => {
   const {
     parrents,
-    cell
+    cell,
+    pagination
   } = props;
+  if (parrents && parrents.length > 0) {
+    return /*#__PURE__*/React.createElement("span", {
+      className: "ui-rc_cell-content"
+    }, parrents.map(pr => {
+      return `${pr.index + 1}.`;
+    }), cell.row.index + 1);
+  }
   return /*#__PURE__*/React.createElement("span", {
     className: "ui-rc_cell-content"
-  }, parrents.map(pr => {
-    return `${pr.index + 1}.`;
-  }), cell.row.index + 1);
+  }, cell.row.index + (pagination ? (pagination.currentPage ?? 1 - 1) * (pagination?.pageSize ?? 0) : 0) + 1);
 };
 const renderCommand = args => {
   const {
@@ -189,7 +195,8 @@ const TableBodyCellEdit = props => {
     isDataTree,
     handleCellClick,
     setIsSelectionChange,
-    selectionSettings
+    selectionSettings,
+    pagination
   } = React.useContext(TableContext);
   const expandIconColumnIndex = expandable?.expandIconColumnIndex;
   const record = cell.row.original;
@@ -828,7 +835,8 @@ const TableBodyCellEdit = props => {
       className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
     }))), renderCellIndex({
       parrents,
-      cell
+      cell,
+      pagination
     }));
   }
   if (cell.column.id === "command") {

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()}px`).join(" ")}`
+      gridTemplateColumns: `${table.getVisibleLeafColumns().map(n => `${n.getSize()}fr`).join(" ")}`
     }
   }, leafColumns.map(column => {
     const depth = column.depth ?? 0;

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

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

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

@@ -1,5 +1,5 @@
 import type { Dispatch, SetStateAction } from 'react';
-import type { ColumnTable, ExpandableConfig, IFormat, IWrapSettings, Locale, RangeState, RecordDoubleClickEventArgs, SelectionSettings } from "./type";
+import type { ColumnTable, ExpandableConfig, IFormat, IWrapSettings, Locale, PaginationConfig, RangeState, RecordDoubleClickEventArgs, SelectionSettings } from "./type";
 import type { SubmitHandler } from "react-hook-form";
 import type { ExpandedState } from '@tanstack/react-table';
 export type IPositionCell = {
@@ -67,6 +67,7 @@ export interface IContext<T> {
     dataErrors?: any[];
     isDataTree: boolean;
     handleCellClick?: (rowNumber: number, record: T, column: ColumnTable, rowId: string, cellValue: any) => void;
+    pagination?: false | PaginationConfig;
 }
 export declare const TableContext: import("react").Context<IContext<any>>;
 export type ContextCellChange = {

package/lib/table-component/TableContainerEdit.js

@@ -1826,7 +1826,8 @@ const TableContainerEdit = props => {
       handleAddMulti,
       dataErrors,
       windowSize,
-      handleCellClick
+      handleCellClick,
+      pagination
     }
   }, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, {
     contextMenuItems: contextMenuItems,

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

@@ -365,7 +365,6 @@ const TableBodyCell = props => {
       // height: '36px',
       ...(0, _utils.getCommonPinningStyles)(cell.column)
     },
-    onMouseDown: () => {},
     onMouseEnter: e => {
       if (e.target.firstChild?.clientWidth < e.target.firstChild?.scrollWidth) {
         setIsOpenTooltip(true);

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

@@ -25,13 +25,19 @@ var _constant = require("../hook/constant");
 const renderCellIndex = props => {
   const {
     parrents,
-    cell
+    cell,
+    pagination
   } = props;
+  if (parrents && parrents.length > 0) {
+    return /*#__PURE__*/_react.default.createElement("span", {
+      className: "ui-rc_cell-content"
+    }, parrents.map(pr => {
+      return `${pr.index + 1}.`;
+    }), cell.row.index + 1);
+  }
   return /*#__PURE__*/_react.default.createElement("span", {
     className: "ui-rc_cell-content"
-  }, parrents.map(pr => {
-    return `${pr.index + 1}.`;
-  }), cell.row.index + 1);
+  }, cell.row.index + (pagination ? (pagination.currentPage ?? 1 - 1) * (pagination?.pageSize ?? 0) : 0) + 1);
 };
 const renderCommand = args => {
   const {
@@ -195,7 +201,8 @@ const TableBodyCellEdit = props => {
     isDataTree,
     handleCellClick,
     setIsSelectionChange,
-    selectionSettings
+    selectionSettings,
+    pagination
   } = _react.default.useContext(_useContext.TableContext);
   const expandIconColumnIndex = expandable?.expandIconColumnIndex;
   const record = cell.row.original;
@@ -834,7 +841,8 @@ const TableBodyCellEdit = props => {
       className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
     }))), renderCellIndex({
       parrents,
-      cell
+      cell,
+      pagination
     }));
   }
   if (cell.column.id === "command") {

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()}px`).join(" ")}`
+      gridTemplateColumns: `${table.getVisibleLeafColumns().map(n => `${n.getSize()}fr`).join(" ")}`
     }
   }, leafColumns.map(column => {
     const depth = column.depth ?? 0;

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

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

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

@@ -1,5 +1,5 @@
 import type { Dispatch, SetStateAction } from 'react';
-import type { ColumnTable, ExpandableConfig, IFormat, IWrapSettings, Locale, RangeState, RecordDoubleClickEventArgs, SelectionSettings } from "./type";
+import type { ColumnTable, ExpandableConfig, IFormat, IWrapSettings, Locale, PaginationConfig, RangeState, RecordDoubleClickEventArgs, SelectionSettings } from "./type";
 import type { SubmitHandler } from "react-hook-form";
 import type { ExpandedState } from '@tanstack/react-table';
 export type IPositionCell = {
@@ -67,6 +67,7 @@ export interface IContext<T> {
     dataErrors?: any[];
     isDataTree: boolean;
     handleCellClick?: (rowNumber: number, record: T, column: ColumnTable, rowId: string, cellValue: any) => void;
+    pagination?: false | PaginationConfig;
 }
 export declare const TableContext: import("react").Context<IContext<any>>;
 export type ContextCellChange = {

package/package.json

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