es-grid-template 1.8.21 → 1.8.23

package/es/table-component/TableContainer.js

@@ -106,7 +106,7 @@ const TableContainer = props => {
     // },
 
     measureElement: typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1 ? element => element?.getBoundingClientRect().height : undefined,
-    overscan: 1 //how many columns to render on each side off screen each way (adjust this for performance)
+    overscan: 3 //how many columns to render on each side off screen each way (adjust this for performance)
   });
   const virtualColumns = columnVirtualizer.getVirtualItems();
   const cacheColumns = columnVirtualizer.measurementsCache;
@@ -148,6 +148,8 @@ const TableContainer = props => {
     // }
 
     if (columnSizingInfo.isResizingColumn === false) {
+      // khi resize end
+
       const aa = updateColumnWidthsRecursive(propsColumns, columnSizing);
       setColumns(aa);
 

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);
@@ -415,41 +414,6 @@ const TableBodyCell = props => {
         });
       }
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames('ui-rc_cell-content', {})
-  }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/React.createElement("div", {
-    className: "ui-rc-table-row-expand-trigger",
-    style: {
-      paddingLeft: `${cell.row.depth * 25}px`
-    }
-  }, /*#__PURE__*/React.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/React.createElement("button", {
-    // onClick: row.getToggleExpandedHandler(),
-    onClick: () => {
-      const keys = Object.keys(expanded);
-      // @ts-ignore
-      const tmp = {
-        ...expanded
-      };
-      if (keys.includes(cell.row.id)) {
-        delete tmp[cell.row.id];
-        setExpanded(tmp);
-      } else {
-        setExpanded(old => ({
-          ...old,
-          [cell.row.id]: true
-        }));
-      }
-    },
-    style: {
-      cursor: "pointer"
-    },
-    className: "ui-rc-table-row-expand"
-  }, cell.row.getIsExpanded() ? /*#__PURE__*/React.createElement("span", {
-    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
-  }) : /*#__PURE__*/React.createElement("span", {
-    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
-  })) : /*#__PURE__*/React.createElement("span", {
-    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
-  }))), flexRender(cell.column.columnDef.cell, cell.getContext())));
+  }, flexRender(cell.column.columnDef.cell, cell.getContext()));
 };
 export default TableBodyCell;

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/hook/useColumns.js

@@ -144,7 +144,7 @@ export function convertToTanStackColumns({
       // enableResizing: true,
       id: field,
       size: width,
-      accessorKey: field ?? '',
+      accessorKey: field,
       sortDescFirst: false,
       minSize: minWidth,
       // maxSize: maxWidth,

package/es/table-component/style.scss

@@ -66,6 +66,7 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
 
       &.#{$prefix}-grid-cell-text-center {
         text-align: center;
+        justify-content: center;
 
       }
 
@@ -268,7 +269,7 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
 
         &:hover {
           .#{$prefix}-grid-cell:not(.editable) {
-            background-color: $rowHoverBg;
+            // background-color: $rowHoverBg;
 
             &.cell-editable, &.#{$prefix}-grid-cell-index, &.#{$prefix}-grid-cell-selection {
               // background-color: transparent;

package/es/table-component/table/Grid.js

@@ -146,7 +146,7 @@ const Grid = props => {
       const abb = table.getVisibleLeafColumns()?.[0];
       if (abb && Object.keys(columnSizingInfo).length === 0) {
         setColumnSizing({
-          "#": abb.getSize()
+          [abb.id]: abb.getSize()
         });
       }
     }

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

@@ -81,7 +81,7 @@ export type ColumnTemplate<RecordType> = {
     field: string;
 };
 export type ColumnTable<RecordType = AnyObject> = {
-    field?: string;
+    field: string;
     width?: number;
     maxWidth?: number;
     minWidth?: number;

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/TableContainer.js

@@ -116,7 +116,7 @@ const TableContainer = props => {
     // },
 
     measureElement: typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1 ? element => element?.getBoundingClientRect().height : undefined,
-    overscan: 1 //how many columns to render on each side off screen each way (adjust this for performance)
+    overscan: 3 //how many columns to render on each side off screen each way (adjust this for performance)
   });
   const virtualColumns = columnVirtualizer.getVirtualItems();
   const cacheColumns = columnVirtualizer.measurementsCache;
@@ -158,6 +158,8 @@ const TableContainer = props => {
     // }
 
     if (columnSizingInfo.isResizingColumn === false) {
+      // khi resize end
+
       const aa = (0, _utils.updateColumnWidthsRecursive)(propsColumns, columnSizing);
       setColumns(aa);
 

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);
@@ -422,41 +421,6 @@ const TableBodyCell = props => {
         });
       }
     }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)('ui-rc_cell-content', {})
-  }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/_react.default.createElement("div", {
-    className: "ui-rc-table-row-expand-trigger",
-    style: {
-      paddingLeft: `${cell.row.depth * 25}px`
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/_react.default.createElement("button", {
-    // onClick: row.getToggleExpandedHandler(),
-    onClick: () => {
-      const keys = Object.keys(expanded);
-      // @ts-ignore
-      const tmp = {
-        ...expanded
-      };
-      if (keys.includes(cell.row.id)) {
-        delete tmp[cell.row.id];
-        setExpanded(tmp);
-      } else {
-        setExpanded(old => ({
-          ...old,
-          [cell.row.id]: true
-        }));
-      }
-    },
-    style: {
-      cursor: "pointer"
-    },
-    className: "ui-rc-table-row-expand"
-  }, cell.row.getIsExpanded() ? /*#__PURE__*/_react.default.createElement("span", {
-    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
-  }) : /*#__PURE__*/_react.default.createElement("span", {
-    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
-  })) : /*#__PURE__*/_react.default.createElement("span", {
-    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
-  }))), (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext())));
+  }, (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext()));
 };
 var _default = exports.default = TableBodyCell;

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/hook/useColumns.js

@@ -155,7 +155,7 @@ function convertToTanStackColumns({
       // enableResizing: true,
       id: field,
       size: width,
-      accessorKey: field ?? '',
+      accessorKey: field,
       sortDescFirst: false,
       minSize: minWidth,
       // maxSize: maxWidth,

package/lib/table-component/style.scss

@@ -66,6 +66,7 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
 
       &.#{$prefix}-grid-cell-text-center {
         text-align: center;
+        justify-content: center;
 
       }
 
@@ -268,7 +269,7 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
 
         &:hover {
           .#{$prefix}-grid-cell:not(.editable) {
-            background-color: $rowHoverBg;
+            // background-color: $rowHoverBg;
 
             &.cell-editable, &.#{$prefix}-grid-cell-index, &.#{$prefix}-grid-cell-selection {
               // background-color: transparent;

package/lib/table-component/table/Grid.js

@@ -148,7 +148,7 @@ const Grid = props => {
       const abb = table.getVisibleLeafColumns()?.[0];
       if (abb && Object.keys(columnSizingInfo).length === 0) {
         setColumnSizing({
-          "#": abb.getSize()
+          [abb.id]: abb.getSize()
         });
       }
     }

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

@@ -81,7 +81,7 @@ export type ColumnTemplate<RecordType> = {
     field: string;
 };
 export type ColumnTable<RecordType = AnyObject> = {
-    field?: string;
+    field: string;
     width?: number;
     maxWidth?: number;
     minWidth?: number;

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.21",
+  "version": "1.8.23",
   "description": "es-grid-template",
   "keywords": [
     "react",