es-grid-template 1.7.25 → 1.7.26

package/es/table-component/TableContainer.js

@@ -52,7 +52,8 @@ const TableContainer = props => {
     triggerChangeColumns,
     columnHidden,
     expanded,
-    setExpanded
+    setExpanded,
+    showEmptyText
   } = props;
   const tableContainerRef = React.useRef(null);
   const containerRef = React.useRef(null);
@@ -159,7 +160,8 @@ const TableContainer = props => {
       //our scrollable table container
       position: 'relative',
       //needed for sticky header
-      height: tableHeight ?? '500px' //should be a fixed height
+      // height: tableHeight ?? '500px' //should be a fixed height
+      maxHeight: tableHeight //should be a fixed height
       // minWidth: table.getTotalSize()
     }
   }, /*#__PURE__*/React.createElement(TableContext.Provider, {
@@ -207,10 +209,9 @@ const TableContainer = props => {
     fixedRightColumns: fixedRightColumns,
     commandClick: commandClick,
     editAble: editAble,
-    contextMenuItems: contextMenuItems
-  }), summary && /*#__PURE__*/React.createElement(TableFooter
-  // tableContainerRef={tableContainerRef}
-  , {
+    contextMenuItems: contextMenuItems,
+    showEmptyText: showEmptyText
+  }), summary && /*#__PURE__*/React.createElement(TableFooter, {
     columnVirtualizer: columnVirtualizer,
     table: table,
     virtualPaddingLeft: virtualPaddingLeft,

package/es/table-component/TableContainerEdit.js

@@ -99,7 +99,8 @@ const TableContainerEdit = props => {
     columns,
     propsColumns,
     triggerChangeColumns,
-    columnHidden
+    columnHidden,
+    showEmptyText
   } = props;
   const containerRef = React.useRef(null);
   const bottomToolbarRef = React.useRef(null);
@@ -1164,7 +1165,8 @@ const TableContainerEdit = props => {
       //our scrollable table container
       position: 'relative',
       //needed for sticky header
-      height: tableHeight //should be a fixed height
+      // height: tableHeight, //should be a fixed height
+      maxHeight: tableHeight //should be a fixed height
     }
   }, /*#__PURE__*/React.createElement(TableContext.Provider, {
     value: {
@@ -1221,8 +1223,8 @@ const TableContainerEdit = props => {
   }, /*#__PURE__*/React.createElement("table", {
     // className={`${prefix}-grid-container`}
     style: {
-      display: 'grid',
-      minWidth: table.getTotalSize()
+      display: 'grid'
+      //  minWidth: table.getTotalSize()
     }
   }, /*#__PURE__*/React.createElement(TableHead, {
     tableContainerRef: tableContainerRef,
@@ -1243,7 +1245,8 @@ const TableContainerEdit = props => {
     fixedRightColumns: fixedRightColumns,
     commandClick: commandClick,
     editAble: editAble,
-    contextMenuItems: contextMenuItems
+    contextMenuItems: contextMenuItems,
+    showEmptyText: showEmptyText
   }), summary && /*#__PURE__*/React.createElement(TableFooter, {
     columnVirtualizer: columnVirtualizer,
     table: table,

package/es/table-component/body/TableBody.d.ts

@@ -13,7 +13,8 @@ interface TableBodyProps<T> {
     commandClick?: (args: CommandClick) => void;
     editAble?: boolean;
     tableId: string;
+    showEmptyText?: boolean;
     [key: string]: any;
 }
-declare const TableBody: <RecordType extends object>({ columnVirtualizer, table, tableContainerRef, virtualPaddingLeft, virtualPaddingRight, fixedLeftColumns, fixedRightColumns, tableId, ...rest }: TableBodyProps<RecordType>) => React.JSX.Element;
+declare const TableBody: <RecordType extends object>({ columnVirtualizer, table, tableContainerRef, virtualPaddingLeft, virtualPaddingRight, fixedLeftColumns, fixedRightColumns, tableId, showEmptyText, ...rest }: TableBodyProps<RecordType>) => React.JSX.Element;
 export default TableBody;

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

@@ -2,8 +2,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import TableBodyRow from "./TableBodyRow";
 import { useVirtualizer } from "@tanstack/react-virtual";
 // import type { Dispatch, SetStateAction } from "react";
-import React from "react";
+import React, { Fragment } from "react";
 import { TableContext } from "../useContext";
+import { Empty } from "rc-master-ui";
 const TableBody = ({
   columnVirtualizer,
   table,
@@ -13,6 +14,7 @@ const TableBody = ({
   fixedLeftColumns,
   fixedRightColumns,
   tableId,
+  showEmptyText,
   ...rest
 }) => {
   const {
@@ -20,7 +22,8 @@ const TableBody = ({
   } = table.getRowModel();
   const {
     editingKey,
-    prefix
+    prefix,
+    locale
   } = React.useContext(TableContext);
 
   //dynamic row height virtualization - alternatively you could use a simpler fixed row height strategy without the need for `measureElement`
@@ -38,11 +41,27 @@ const TableBody = ({
     className: `${prefix}-grid-tbody`,
     style: {
       display: 'grid',
-      height: `${rowVirtualizer.getTotalSize()}px`,
+      // height: `${rowVirtualizer.getTotalSize()}px`, //tells scrollbar how big the table is
+      height: showEmptyText && rows.length === 0 ? `140px` : `${rowVirtualizer.getTotalSize()}px`,
       //tells scrollbar how big the table is
       position: 'relative' //needed for absolute positioning of rows
     }
-  }, virtualRows.map(virtualRow => {
+  }, showEmptyText && rows.length === 0 ? /*#__PURE__*/React.createElement("tr", {
+    style: {
+      // transform: `translateY(${virtualRow.start}px)`, //this should always be a `style` as it changes on scroll
+    }
+  }, /*#__PURE__*/React.createElement("td", {
+    // colSpan={30}
+    style: {
+      position: "sticky",
+      left: 0,
+      width: tableContainerRef.current?.clientWidth,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Empty, {
+    image: Empty.PRESENTED_IMAGE_SIMPLE,
+    description: locale?.emptyText
+  })))) : /*#__PURE__*/React.createElement(Fragment, null, virtualRows.map(virtualRow => {
     const row = rows[virtualRow.index];
     const isEditing = row.id === editingKey;
     return /*#__PURE__*/React.createElement(TableBodyRow, _extends({}, rest, {
@@ -59,6 +78,6 @@ const TableBody = ({
       fixedRightColumns: fixedRightColumns,
       isEditing: isEditing
     }));
-  }));
+  })));
 };
 export default TableBody;

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

@@ -880,7 +880,9 @@ const TableBodyCellEdit = props => {
     record: record
     // rowKey={rowKey}
   }) : /*#__PURE__*/React.createElement("div", {
-    className: "ui-rc_cell-content"
+    className: classNames('ui-rc_cell-content', {
+      'select-cell': ['select', 'selectTable', 'asyncSelect'].includes(getEditType(columnMeta, record))
+    })
   }, cell.column.getIndex() === expandIconColumnIndex && /*#__PURE__*/React.createElement("div", {
     className: "ui-rc-table-row-expand-trigger",
     style: {
@@ -914,7 +916,13 @@ const TableBodyCellEdit = props => {
     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())), !isSelecting && !isEditing && cell.row.id === endCell?.rowId && cell.column.getIndex() === rangeState?.endColIndex && /*#__PURE__*/React.createElement("div", {
+  }))), flexRender(cell.column.columnDef.cell, cell.getContext()), (editType === 'select' || editType === 'selectTable' || editType === 'asyncSelect' || editType === 'treeSelect') && canEdit && /*#__PURE__*/React.createElement("span", {
+    className: 'caret-down',
+    onClick: e => {
+      handleEdit(e);
+      // setEditingKey?.(cell.row.id)
+    }
+  })), !isSelecting && !isEditing && cell.row.id === endCell?.rowId && cell.column.getIndex() === rangeState?.endColIndex && /*#__PURE__*/React.createElement("div", {
     className: 'dragging-point',
     onMouseDown: e => {
       e.preventDefault();

package/es/table-component/header/TableHeadRow.d.ts

@@ -12,5 +12,5 @@ interface TableHeadRowProps<T> {
     fixedRightColumns: Column<T, unknown>[];
     rowHeaderVirtual: VirtualItem;
 }
-declare const TableHeadRow: ({ table, columnVirtualizer, rowHeaderVirtualizer, headerGroup, fixedLeftColumns, fixedRightColumns, rowHeaderVirtual }: TableHeadRowProps<any>) => React.JSX.Element;
+declare const TableHeadRow: ({ table, columnVirtualizer, rowHeaderVirtualizer, headerGroup, virtualPaddingLeft, virtualPaddingRight, fixedLeftColumns, fixedRightColumns, rowHeaderVirtual }: TableHeadRowProps<any>) => React.JSX.Element;
 export default TableHeadRow;

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

@@ -8,8 +8,8 @@ const TableHeadRow = ({
   columnVirtualizer,
   rowHeaderVirtualizer,
   headerGroup,
-  // virtualPaddingLeft,
-  // virtualPaddingRight,
+  virtualPaddingLeft,
+  virtualPaddingRight,
   fixedLeftColumns,
   fixedRightColumns,
   rowHeaderVirtual
@@ -17,9 +17,8 @@ const TableHeadRow = ({
   const {
     prefix
   } = React.useContext(TableContext);
-
-  // const virtualColumns = columnVirtualizer.getVirtualItems()
-  const virtualColumns = columnVirtualizer.measurementsCache;
+  const virtualColumns = columnVirtualizer.getVirtualItems();
+  // const virtualColumns = columnVirtualizer.measurementsCache
 
   // console.log('virtualColumns', virtualColumns)
 
@@ -50,6 +49,12 @@ const TableHeadRow = ({
       header: headerGroup.headers.find(h => h.column.id === column.id)
       // column={column as any}
     });
+  }) : null, virtualPaddingLeft ? /*#__PURE__*/React.createElement("th", {
+    className: "",
+    style: {
+      display: 'flex',
+      width: virtualPaddingLeft
+    }
   }) : null, virtualColumns.map(virtualColumn => {
     const header = headerGroup.headers[virtualColumn.index];
     const isFixed = table.getState().columnPinning.left?.includes(header?.column?.id) || table.getState().columnPinning.right?.includes(header?.column?.id);
@@ -71,6 +76,15 @@ const TableHeadRow = ({
     key: column.id,
     header: headerGroup.headers.find(h => h.column.id === column.id)
     // column={column as any}
-  })) : null));
+  })) : null, virtualPaddingRight ?
+  /*#__PURE__*/
+  //fake empty column to the right for virtualization scroll padding
+  React.createElement("th", {
+    className: "nnnnnnnnnnnn",
+    style: {
+      display: 'flex',
+      width: virtualPaddingRight
+    }
+  }) : null));
 };
 export default TableHeadRow;

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

@@ -306,7 +306,7 @@ export function getFixedFields(columns, type) {
   const result = [];
   function traverse(cols) {
     for (const col of cols) {
-      if (col.fixed === type && col.field) {
+      if ((col.fixed ?? col.fixedType) === type && col.field) {
         result.push(col.field);
       }
       if (col.children && col.children.length > 0) {
@@ -1769,13 +1769,13 @@ export function isObjEqual(obj1, obj2) {
 export const sortByType = arr => {
   if (arr) {
     return arr.sort((a, b) => {
-      if (a.fixed === 'left' && b.fixed !== 'left') {
+      if ((a.fixed ?? a.fixedType) === 'left' && (b.fixed ?? b.fixedType) !== 'left') {
         return -1;
-      } else if (a.fixed !== 'left' && b.fixed === 'left') {
+      } else if ((a.fixed ?? a.fixedType) !== 'left' && (b.fixed ?? b.fixedType) === 'left') {
         return 1;
-      } else if (a.fixed === 'right' && b.fixed !== 'right') {
+      } else if ((a.fixed ?? a.fixedType) === 'right' && (b.fixed ?? b.fixedType) !== 'right') {
         return 1;
-      } else if (a.fixed !== 'right' && b.fixed === 'right') {
+      } else if ((a.fixed ?? a.fixedType) !== 'right' && (b.fixed ?? b.fixedType) === 'right') {
         return -1;
       }
       return 0;
@@ -1843,14 +1843,9 @@ export const updateColumns1 = (columns, includes) => {
       newColumn.children = updateColumns1(newColumn.children, includes);
       hasVisibleChild = newColumn.children.some(child => !child.hidden);
     }
-
-    // newColumn.hidden = newColumn.key && !includes.includes(newColumn.key)
     newColumn.visible = !!(newColumn.field && includes.includes(newColumn.field));
-    // newColumn.fixed = newColumn.field && !includes.includes(newColumn.field) ? undefined : newColumn.fixed
-
     if (newColumn.children && newColumn.children.length > 0) {
       newColumn.visible = !hasVisibleChild;
-      // newColumn.fixed = !hasVisibleChild ? undefined : newColumn.fixed
     }
     return newColumn;
   });

package/es/table-component/style.scss

@@ -49,9 +49,7 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
       padding: 7px 8px;
       border-inline-end: 1px solid $tableBorderColor;
       // border-bottom: 1px solid $tableBorderColor;
-
       // &.#{$prefix}-grid-cell-fix-left-last {
-
       //   &::after {
       //     position: absolute;
       //     top: 0;
@@ -64,10 +62,7 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
       //     pointer-events: none;
       //     box-shadow: inset 10px 0 8px -8px rgba(5, 5, 5, 0.09);
       //   }
-
-
       // }
-
       // &.#{$prefix}-grid-cell-fix-right-first {
       //   &::after {
       //     position: absolute;
@@ -81,7 +76,6 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
       //     pointer-events: none;
       //     box-shadow: inset -10px 0 8px -8px rgba(5, 5, 5, 0.09);
       //   }
-
       //   &::before {
       //     content: "";
       //     position: absolute;
@@ -101,6 +95,31 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
           white-space: nowrap;
           text-overflow: ellipsis;
           word-break: keep-all;
+
+          &.select-cell {
+            padding-right: 18px;
+            position: relative;
+
+          }
+
+          .caret-down {
+            float: right;
+            position: absolute;
+            right: 0;
+
+            &::before {
+              content: '';
+              display: inline-block;
+              margin-left: 4px;
+              vertical-align: middle;
+              width: 0;
+              height: 0;
+              border-left: 5px solid transparent;
+              border-right: 5px solid transparent;
+              border-top: 5px solid #6f7777;
+            }
+          }
+
         }
 
       }

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

@@ -42,7 +42,7 @@ const Grid = props => {
     onSorter,
     onFilter,
     groupColumns,
-    height,
+    height = 700,
     editAble,
     triggerChangeColumns,
     ...rest
@@ -203,7 +203,8 @@ const Grid = props => {
   return /*#__PURE__*/React.createElement("div", {
     className: `${prefix}-grid`,
     style: {
-      height: height ?? undefined
+      // height: height ?? undefined
+      maxHeight: height ?? undefined
     }
   }, /*#__PURE__*/React.createElement(DndContext, {
     collisionDetection: closestCenter,

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

@@ -89,7 +89,7 @@ export type ColumnTable<RecordType = AnyObject> = {
     allowFiltering?: boolean;
     /**
       * @deprecated Please use `allowSorter` instead.
-      * @since 1.0.0
+      * @since  1.7.25
       */
     sorter?: boolean;
     allowSorter?: boolean;
@@ -126,7 +126,7 @@ export type ColumnTable<RecordType = AnyObject> = {
     editFromSettings?: IEditFromSettings;
     /**
      * @deprecated Please use `fixed` instead.
-     * @since 1.6.5
+     * @since 1.7.25
      */
     fixedType?: FixedType;
     fixed?: FixedType;

package/lib/table-component/TableContainer.js

@@ -60,7 +60,8 @@ const TableContainer = props => {
     triggerChangeColumns,
     columnHidden,
     expanded,
-    setExpanded
+    setExpanded,
+    showEmptyText
   } = props;
   const tableContainerRef = _react.default.useRef(null);
   const containerRef = _react.default.useRef(null);
@@ -167,7 +168,8 @@ const TableContainer = props => {
       //our scrollable table container
       position: 'relative',
       //needed for sticky header
-      height: tableHeight ?? '500px' //should be a fixed height
+      // height: tableHeight ?? '500px' //should be a fixed height
+      maxHeight: tableHeight //should be a fixed height
       // minWidth: table.getTotalSize()
     }
   }, /*#__PURE__*/_react.default.createElement(_useContext.TableContext.Provider, {
@@ -215,10 +217,9 @@ const TableContainer = props => {
     fixedRightColumns: fixedRightColumns,
     commandClick: commandClick,
     editAble: editAble,
-    contextMenuItems: contextMenuItems
-  }), summary && /*#__PURE__*/_react.default.createElement(_TableFooter.default
-  // tableContainerRef={tableContainerRef}
-  , {
+    contextMenuItems: contextMenuItems,
+    showEmptyText: showEmptyText
+  }), summary && /*#__PURE__*/_react.default.createElement(_TableFooter.default, {
     columnVirtualizer: columnVirtualizer,
     table: table,
     virtualPaddingLeft: virtualPaddingLeft,

package/lib/table-component/TableContainerEdit.js

@@ -108,7 +108,8 @@ const TableContainerEdit = props => {
     columns,
     propsColumns,
     triggerChangeColumns,
-    columnHidden
+    columnHidden,
+    showEmptyText
   } = props;
   const containerRef = _react.default.useRef(null);
   const bottomToolbarRef = _react.default.useRef(null);
@@ -1173,7 +1174,8 @@ const TableContainerEdit = props => {
       //our scrollable table container
       position: 'relative',
       //needed for sticky header
-      height: tableHeight //should be a fixed height
+      // height: tableHeight, //should be a fixed height
+      maxHeight: tableHeight //should be a fixed height
     }
   }, /*#__PURE__*/_react.default.createElement(_useContext.TableContext.Provider, {
     value: {
@@ -1230,8 +1232,8 @@ const TableContainerEdit = props => {
   }, /*#__PURE__*/_react.default.createElement("table", {
     // className={`${prefix}-grid-container`}
     style: {
-      display: 'grid',
-      minWidth: table.getTotalSize()
+      display: 'grid'
+      //  minWidth: table.getTotalSize()
     }
   }, /*#__PURE__*/_react.default.createElement(_TableHead.default, {
     tableContainerRef: tableContainerRef,
@@ -1252,7 +1254,8 @@ const TableContainerEdit = props => {
     fixedRightColumns: fixedRightColumns,
     commandClick: commandClick,
     editAble: editAble,
-    contextMenuItems: contextMenuItems
+    contextMenuItems: contextMenuItems,
+    showEmptyText: showEmptyText
   }), summary && /*#__PURE__*/_react.default.createElement(_TableFooter.default, {
     columnVirtualizer: columnVirtualizer,
     table: table,

package/lib/table-component/body/TableBody.d.ts

@@ -13,7 +13,8 @@ interface TableBodyProps<T> {
     commandClick?: (args: CommandClick) => void;
     editAble?: boolean;
     tableId: string;
+    showEmptyText?: boolean;
     [key: string]: any;
 }
-declare const TableBody: <RecordType extends object>({ columnVirtualizer, table, tableContainerRef, virtualPaddingLeft, virtualPaddingRight, fixedLeftColumns, fixedRightColumns, tableId, ...rest }: TableBodyProps<RecordType>) => React.JSX.Element;
+declare const TableBody: <RecordType extends object>({ columnVirtualizer, table, tableContainerRef, virtualPaddingLeft, virtualPaddingRight, fixedLeftColumns, fixedRightColumns, tableId, showEmptyText, ...rest }: TableBodyProps<RecordType>) => React.JSX.Element;
 export default TableBody;

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

@@ -8,8 +8,11 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _TableBodyRow = _interopRequireDefault(require("./TableBodyRow"));
 var _reactVirtual = require("@tanstack/react-virtual");
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _useContext = require("../useContext");
+var _rcMasterUi = require("rc-master-ui");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // import type { Dispatch, SetStateAction } from "react";
 
 const TableBody = ({
@@ -21,6 +24,7 @@ const TableBody = ({
   fixedLeftColumns,
   fixedRightColumns,
   tableId,
+  showEmptyText,
   ...rest
 }) => {
   const {
@@ -28,7 +32,8 @@ const TableBody = ({
   } = table.getRowModel();
   const {
     editingKey,
-    prefix
+    prefix,
+    locale
   } = _react.default.useContext(_useContext.TableContext);
 
   //dynamic row height virtualization - alternatively you could use a simpler fixed row height strategy without the need for `measureElement`
@@ -46,11 +51,27 @@ const TableBody = ({
     className: `${prefix}-grid-tbody`,
     style: {
       display: 'grid',
-      height: `${rowVirtualizer.getTotalSize()}px`,
+      // height: `${rowVirtualizer.getTotalSize()}px`, //tells scrollbar how big the table is
+      height: showEmptyText && rows.length === 0 ? `140px` : `${rowVirtualizer.getTotalSize()}px`,
       //tells scrollbar how big the table is
       position: 'relative' //needed for absolute positioning of rows
     }
-  }, virtualRows.map(virtualRow => {
+  }, showEmptyText && rows.length === 0 ? /*#__PURE__*/_react.default.createElement("tr", {
+    style: {
+      // transform: `translateY(${virtualRow.start}px)`, //this should always be a `style` as it changes on scroll
+    }
+  }, /*#__PURE__*/_react.default.createElement("td", {
+    // colSpan={30}
+    style: {
+      position: "sticky",
+      left: 0,
+      width: tableContainerRef.current?.clientWidth,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Empty, {
+    image: _rcMasterUi.Empty.PRESENTED_IMAGE_SIMPLE,
+    description: locale?.emptyText
+  })))) : /*#__PURE__*/_react.default.createElement(_react.Fragment, null, virtualRows.map(virtualRow => {
     const row = rows[virtualRow.index];
     const isEditing = row.id === editingKey;
     return /*#__PURE__*/_react.default.createElement(_TableBodyRow.default, (0, _extends2.default)({}, rest, {
@@ -67,6 +88,6 @@ const TableBody = ({
       fixedRightColumns: fixedRightColumns,
       isEditing: isEditing
     }));
-  }));
+  })));
 };
 var _default = exports.default = TableBody;

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

@@ -887,7 +887,9 @@ const TableBodyCellEdit = props => {
     record: record
     // rowKey={rowKey}
   }) : /*#__PURE__*/_react.default.createElement("div", {
-    className: "ui-rc_cell-content"
+    className: (0, _classnames.default)('ui-rc_cell-content', {
+      'select-cell': ['select', 'selectTable', 'asyncSelect'].includes((0, _utils.getEditType)(columnMeta, record))
+    })
   }, cell.column.getIndex() === expandIconColumnIndex && /*#__PURE__*/_react.default.createElement("div", {
     className: "ui-rc-table-row-expand-trigger",
     style: {
@@ -921,7 +923,13 @@ const TableBodyCellEdit = props => {
     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())), !isSelecting && !isEditing && cell.row.id === endCell?.rowId && cell.column.getIndex() === rangeState?.endColIndex && /*#__PURE__*/_react.default.createElement("div", {
+  }))), (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext()), (editType === 'select' || editType === 'selectTable' || editType === 'asyncSelect' || editType === 'treeSelect') && canEdit && /*#__PURE__*/_react.default.createElement("span", {
+    className: 'caret-down',
+    onClick: e => {
+      handleEdit(e);
+      // setEditingKey?.(cell.row.id)
+    }
+  })), !isSelecting && !isEditing && cell.row.id === endCell?.rowId && cell.column.getIndex() === rangeState?.endColIndex && /*#__PURE__*/_react.default.createElement("div", {
     className: 'dragging-point',
     onMouseDown: e => {
       e.preventDefault();

package/lib/table-component/header/TableHeadRow.d.ts

@@ -12,5 +12,5 @@ interface TableHeadRowProps<T> {
     fixedRightColumns: Column<T, unknown>[];
     rowHeaderVirtual: VirtualItem;
 }
-declare const TableHeadRow: ({ table, columnVirtualizer, rowHeaderVirtualizer, headerGroup, fixedLeftColumns, fixedRightColumns, rowHeaderVirtual }: TableHeadRowProps<any>) => React.JSX.Element;
+declare const TableHeadRow: ({ table, columnVirtualizer, rowHeaderVirtualizer, headerGroup, virtualPaddingLeft, virtualPaddingRight, fixedLeftColumns, fixedRightColumns, rowHeaderVirtual }: TableHeadRowProps<any>) => React.JSX.Element;
 export default TableHeadRow;

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

@@ -16,8 +16,8 @@ const TableHeadRow = ({
   columnVirtualizer,
   rowHeaderVirtualizer,
   headerGroup,
-  // virtualPaddingLeft,
-  // virtualPaddingRight,
+  virtualPaddingLeft,
+  virtualPaddingRight,
   fixedLeftColumns,
   fixedRightColumns,
   rowHeaderVirtual
@@ -25,9 +25,8 @@ const TableHeadRow = ({
   const {
     prefix
   } = _react.default.useContext(_useContext.TableContext);
-
-  // const virtualColumns = columnVirtualizer.getVirtualItems()
-  const virtualColumns = columnVirtualizer.measurementsCache;
+  const virtualColumns = columnVirtualizer.getVirtualItems();
+  // const virtualColumns = columnVirtualizer.measurementsCache
 
   // console.log('virtualColumns', virtualColumns)
 
@@ -58,6 +57,12 @@ const TableHeadRow = ({
       header: headerGroup.headers.find(h => h.column.id === column.id)
       // column={column as any}
     });
+  }) : null, virtualPaddingLeft ? /*#__PURE__*/_react.default.createElement("th", {
+    className: "",
+    style: {
+      display: 'flex',
+      width: virtualPaddingLeft
+    }
   }) : null, virtualColumns.map(virtualColumn => {
     const header = headerGroup.headers[virtualColumn.index];
     const isFixed = table.getState().columnPinning.left?.includes(header?.column?.id) || table.getState().columnPinning.right?.includes(header?.column?.id);
@@ -79,6 +84,15 @@ const TableHeadRow = ({
     key: column.id,
     header: headerGroup.headers.find(h => h.column.id === column.id)
     // column={column as any}
-  })) : null));
+  })) : null, virtualPaddingRight ?
+  /*#__PURE__*/
+  //fake empty column to the right for virtualization scroll padding
+  _react.default.createElement("th", {
+    className: "nnnnnnnnnnnn",
+    style: {
+      display: 'flex',
+      width: virtualPaddingRight
+    }
+  }) : null));
 };
 var _default = exports.default = TableHeadRow;

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

@@ -367,7 +367,7 @@ function getFixedFields(columns, type) {
   const result = [];
   function traverse(cols) {
     for (const col of cols) {
-      if (col.fixed === type && col.field) {
+      if ((col.fixed ?? col.fixedType) === type && col.field) {
         result.push(col.field);
       }
       if (col.children && col.children.length > 0) {
@@ -1864,13 +1864,13 @@ function isObjEqual(obj1, obj2) {
 const sortByType = arr => {
   if (arr) {
     return arr.sort((a, b) => {
-      if (a.fixed === 'left' && b.fixed !== 'left') {
+      if ((a.fixed ?? a.fixedType) === 'left' && (b.fixed ?? b.fixedType) !== 'left') {
         return -1;
-      } else if (a.fixed !== 'left' && b.fixed === 'left') {
+      } else if ((a.fixed ?? a.fixedType) !== 'left' && (b.fixed ?? b.fixedType) === 'left') {
         return 1;
-      } else if (a.fixed === 'right' && b.fixed !== 'right') {
+      } else if ((a.fixed ?? a.fixedType) === 'right' && (b.fixed ?? b.fixedType) !== 'right') {
         return 1;
-      } else if (a.fixed !== 'right' && b.fixed === 'right') {
+      } else if ((a.fixed ?? a.fixedType) !== 'right' && (b.fixed ?? b.fixedType) === 'right') {
         return -1;
       }
       return 0;
@@ -1939,14 +1939,9 @@ const updateColumns1 = (columns, includes) => {
       newColumn.children = updateColumns1(newColumn.children, includes);
       hasVisibleChild = newColumn.children.some(child => !child.hidden);
     }
-
-    // newColumn.hidden = newColumn.key && !includes.includes(newColumn.key)
     newColumn.visible = !!(newColumn.field && includes.includes(newColumn.field));
-    // newColumn.fixed = newColumn.field && !includes.includes(newColumn.field) ? undefined : newColumn.fixed
-
     if (newColumn.children && newColumn.children.length > 0) {
       newColumn.visible = !hasVisibleChild;
-      // newColumn.fixed = !hasVisibleChild ? undefined : newColumn.fixed
     }
     return newColumn;
   });

package/lib/table-component/style.scss

@@ -49,9 +49,7 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
       padding: 7px 8px;
       border-inline-end: 1px solid $tableBorderColor;
       // border-bottom: 1px solid $tableBorderColor;
-
       // &.#{$prefix}-grid-cell-fix-left-last {
-
       //   &::after {
       //     position: absolute;
       //     top: 0;
@@ -64,10 +62,7 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
       //     pointer-events: none;
       //     box-shadow: inset 10px 0 8px -8px rgba(5, 5, 5, 0.09);
       //   }
-
-
       // }
-
       // &.#{$prefix}-grid-cell-fix-right-first {
       //   &::after {
       //     position: absolute;
@@ -81,7 +76,6 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
       //     pointer-events: none;
       //     box-shadow: inset -10px 0 8px -8px rgba(5, 5, 5, 0.09);
       //   }
-
       //   &::before {
       //     content: "";
       //     position: absolute;
@@ -101,6 +95,31 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
           white-space: nowrap;
           text-overflow: ellipsis;
           word-break: keep-all;
+
+          &.select-cell {
+            padding-right: 18px;
+            position: relative;
+
+          }
+
+          .caret-down {
+            float: right;
+            position: absolute;
+            right: 0;
+
+            &::before {
+              content: '';
+              display: inline-block;
+              margin-left: 4px;
+              vertical-align: middle;
+              width: 0;
+              height: 0;
+              border-left: 5px solid transparent;
+              border-right: 5px solid transparent;
+              border-top: 5px solid #6f7777;
+            }
+          }
+
         }
 
       }

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

@@ -44,7 +44,7 @@ const Grid = props => {
     onSorter,
     onFilter,
     groupColumns,
-    height,
+    height = 700,
     editAble,
     triggerChangeColumns,
     ...rest
@@ -205,7 +205,8 @@ const Grid = props => {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: `${prefix}-grid`,
     style: {
-      height: height ?? undefined
+      // height: height ?? undefined
+      maxHeight: height ?? undefined
     }
   }, /*#__PURE__*/_react.default.createElement(_core.DndContext, {
     collisionDetection: _core.closestCenter,

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

@@ -89,7 +89,7 @@ export type ColumnTable<RecordType = AnyObject> = {
     allowFiltering?: boolean;
     /**
       * @deprecated Please use `allowSorter` instead.
-      * @since 1.0.0
+      * @since  1.7.25
       */
     sorter?: boolean;
     allowSorter?: boolean;
@@ -126,7 +126,7 @@ export type ColumnTable<RecordType = AnyObject> = {
     editFromSettings?: IEditFromSettings;
     /**
      * @deprecated Please use `fixed` instead.
-     * @since 1.6.5
+     * @since 1.7.25
      */
     fixedType?: FixedType;
     fixed?: FixedType;

package/package.json

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