es-grid-template 1.7.25 → 1.7.27

package/lib/table-component/InternalTable.js

@@ -20,6 +20,8 @@ var _reactTooltip = require("react-tooltip");
 var _ContextMenu = _interopRequireDefault(require("./ContextMenu"));
 var _utils = require("./hook/utils");
 var _useColumns = require("./hook/useColumns");
+var _convert = require("./hook/convert");
+var _antd = require("antd");
 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 en from "rc-master-ui/es/date-picker/locale/en_US"
@@ -72,6 +74,7 @@ const InternalTable = props => {
     contextMenuHidden,
     contextMenuClick,
     contextMenuOpen,
+    height,
     ...rest
   } = props;
   const id = _react.default.useMemo(() => {
@@ -126,6 +129,7 @@ const InternalTable = props => {
 
   const [filterStates, setFilterState] = _react.default.useState(null);
   const [sorterStates, setSorterStates] = _react.default.useState([]);
+  const [isFullScreen, setIsFullScreen] = _react.default.useState(false);
   const [expanded, setExpanded] = _react.default.useState({});
   const convertData = _react.default.useMemo(() => {
     if (groupAble && groupSetting && groupSetting.client !== false) {
@@ -146,7 +150,6 @@ const InternalTable = props => {
 
     // return convertToTanStackColumns<RecordType>(columns, expanded, setExpanded, expandable)
   }, [t, columns, format, editAble]);
-  console.log('mergedColumns', mergedColumns);
   const columnPinning = _react.default.useMemo(() => {
     return {
       left: (0, _utils.getFixedFields)(columns, 'left'),
@@ -277,7 +280,7 @@ const InternalTable = props => {
     format: format
     // columns={columns111 as any}
     ,
-    columns: mergedColumns,
+    columns: (0, _convert.convertColumns)(mergedColumns),
     propsColumns: columns,
     rowKey: rowKey,
     groupSetting: groupSetting,
@@ -294,8 +297,70 @@ const InternalTable = props => {
     contextMenuItems: contextMenuItems,
     editAble: editAble,
     triggerChangeColumns: triggerChangeColumns,
-    setExpanded: setExpanded
-  })), menuVisible && /*#__PURE__*/_react.default.createElement(_ContextMenu.default, {
+    setExpanded: setExpanded,
+    isFullScreen: isFullScreen,
+    setIsFullScreen: setIsFullScreen
+  })), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
+    open: isFullScreen,
+    footer: null,
+    centered: true,
+    closable: true,
+    width: '100%',
+    style: {
+      maxWidth: '100%',
+      height: '100%'
+    },
+    onClose: () => setIsFullScreen(false),
+    onCancel: () => setIsFullScreen(false)
+
+    // destroyOnClose
+    ,
+    styles: {
+      content: {
+        height: '100vh',
+        borderRadius: 0,
+        padding: '15px 10px'
+      },
+      wrapper: {
+        zIndex: 1050
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      paddingTop: 40
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Grid.default, (0, _extends2.default)({}, rest, {
+    t: t,
+    id: isFullScreen ? _faker.faker.string.alpha(20) : id,
+    prefix: prefix,
+    originData: convertData,
+    dataSource: mergedData,
+    locale: locale,
+    format: format
+    // columns={columns111 as any}
+    ,
+    columns: (0, _convert.convertColumns)(mergedColumns),
+    propsColumns: columns,
+    rowKey: rowKey,
+    groupSetting: groupSetting,
+    groupAble: groupAble,
+    groupColumns: groupColumns,
+    columnPinning: columnPinning,
+    columnHidden: columnsHiddenKeys ? (0, _utils.convertToObj)(columnsHiddenKeys) : columnVisibility,
+    triggerFilter: setFilterState,
+    triggerSorter: setSorterStates,
+    setMergedFilterKeys: setMergedFilterKeys,
+    mergedFilterKeys: mergedFilterKeys,
+    expanded: expanded,
+    onContextMenu: onContextMenu,
+    contextMenuItems: contextMenuItems,
+    editAble: editAble,
+    triggerChangeColumns: triggerChangeColumns,
+    setExpanded: setExpanded,
+    isFullScreen: isFullScreen,
+    setIsFullScreen: setIsFullScreen,
+    height: windowSize.innerHeight - 70
+  })))), menuVisible && /*#__PURE__*/_react.default.createElement(_ContextMenu.default, {
     open: menuVisible,
     pos: position,
     setOpen: setMenuVisible,

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.d.ts

@@ -26,6 +26,8 @@ type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
     columns: ColumnDef<T>[];
     triggerChangeColumns: any;
     columnHidden: any;
+    isFullScreen: boolean;
+    setIsFullScreen: Dispatch<SetStateAction<boolean>>;
 };
 declare const TableContainerEdit: <RecordType extends object>(props: TableContainerProps<RecordType>) => React.JSX.Element;
 export default TableContainerEdit;

package/lib/table-component/TableContainerEdit.js

@@ -108,8 +108,14 @@ const TableContainerEdit = props => {
     columns,
     propsColumns,
     triggerChangeColumns,
-    columnHidden
+    columnHidden,
+    showEmptyText,
+    isFullScreen,
+    setIsFullScreen
   } = props;
+
+  // console.log('setIsFullScreen', setIsFullScreen)
+
   const containerRef = _react.default.useRef(null);
   const bottomToolbarRef = _react.default.useRef(null);
   const topToolbarRef = _react.default.useRef(null);
@@ -214,7 +220,7 @@ const TableContainerEdit = props => {
   const [endPasteCell, setEndPasteCell] = _react.default.useState(undefined);
   const [isSelecting, setIsSelecting] = _react.default.useState(false);
   const [isPasting, setIsPasting] = _react.default.useState(false);
-  const [isFullScreen] = _react.default.useState(false);
+  // const [isFullScreen] = React.useState(false);
   const [tableHeight, settableHeight] = _react.default.useState(0);
   const rowsFocus = _react.default.useMemo(() => {
     return startCell && endCell ? (0, _utils.getRowIdsBetween)(table, startCell.rowId, endCell.rowId) : [];
@@ -1117,7 +1123,7 @@ const TableContainerEdit = props => {
       alignItems: 'center',
       gap: '.75rem'
     }
-  }, toolbarItems && toolbarItems?.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
       flex: 1,
       overflow: 'hidden'
@@ -1125,18 +1131,6 @@ const TableContainerEdit = props => {
   }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
     items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
     mode: 'scroll'
-  })), fullScreen !== false && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
-    fontSize: 16
-    // onClick={() => handleFullScreen?.()}
-    ,
-    "data-tooltip-id": "tooltip-icon",
-    "data-tooltip-content": t ? t('Minimized') : 'Minimized'
-  }) : /*#__PURE__*/_react.default.createElement(_becoxyIcons.Maximize, {
-    fontSize: 16
-    // onClick={() => handleFullScreen?.()}
-    ,
-    "data-tooltip-id": "tooltip-icon",
-    "data-tooltip-content": t ? t('Full screen') : 'Full screen'
   })), /*#__PURE__*/_react.default.createElement("div", {
     style: {
       display: 'flex',
@@ -1152,7 +1146,21 @@ const TableContainerEdit = props => {
     showTotal: (total, range) =>
     // @ts-ignore
     `${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
-  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, showColumnChoose && /*#__PURE__*/_react.default.createElement(_ColumnsChoose.ColumnsChoose, {
+  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, fullScreen !== false && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
+    fontSize: 16,
+    onClick: () => {
+      setIsFullScreen(!isFullScreen);
+    },
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-content": t ? t('Minimized') : 'Minimized'
+  }) : /*#__PURE__*/_react.default.createElement(_becoxyIcons.Maximize, {
+    fontSize: 16,
+    onClick: () => {
+      setIsFullScreen(!isFullScreen);
+    },
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-content": t ? t('Full screen') : 'Full screen'
+  })), showColumnChoose && /*#__PURE__*/_react.default.createElement(_ColumnsChoose.ColumnsChoose, {
     columns: columns,
     originColumns: propsColumns,
     t: t,
@@ -1173,7 +1181,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: {
@@ -1231,7 +1240,8 @@ const TableContainerEdit = props => {
     // className={`${prefix}-grid-container`}
     style: {
       display: 'grid',
-      minWidth: table.getTotalSize()
+      //  minWidth: table.getTotalSize()
+      width: table.getTotalSize()
     }
   }, /*#__PURE__*/_react.default.createElement(_TableHead.default, {
     tableContainerRef: tableContainerRef,
@@ -1252,7 +1262,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

@@ -1,4 +1,4 @@
-import type { Column, Table } from "@tanstack/react-table";
+import { type Column, type Table } from "@tanstack/react-table";
 import type { Virtualizer } from "@tanstack/react-virtual";
 import type { CommandClick } from "../type";
 import React from "react";
@@ -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,13 +51,56 @@ 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 (
+    //   <tr key={row.id}>
+    //     {row.getVisibleCells().map((cell) => (
+    //       <td
+    //         key={cell.id}
+    //         style={{
+    //           padding: '12px',
+    //           whiteSpace: 'nowrap',
+    //           fontSize: '0.875rem',
+    //           color: '#6b7280',
+    //           border: '1px solid #e5e7eb',
+    //           width: cell.column.getSize(),
+    //           maxWidth: cell.column.getSize(),
+    //           overflow: "hidden",
+    //           ...getCommonPinningStyles(cell.column)
+    //         }}>
+
+    //           {cell.column.id}
+
+    //         {/* {flexRender(cell.column.columnDef.cell, cell.getContext())} */}
+
+    //       </td>
+    //     ))}
+    //   </tr>
+    // )
+
     return /*#__PURE__*/_react.default.createElement(_TableBodyRow.default, (0, _extends2.default)({}, rest, {
       table: table,
       tableId: tableId,
@@ -67,6 +115,6 @@ const TableBody = ({
       fixedRightColumns: fixedRightColumns,
       isEditing: isEditing
     }));
-  }));
+  })));
 };
 var _default = exports.default = TableBody;

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

@@ -107,11 +107,12 @@ const TableBodyCell = props => {
     selectionSettings,
     id
   } = (0, _react.useContext)(_useContext.TableContext);
+  const columnMeta = cell.column.columnDef.meta ?? {};
   const parrents = cell.row.getParentRows();
   const isPinned = cell.column.getIsPinned();
   const isLastLeftPinnedColumn = isPinned === "left" && cell.column.getIsLastColumn("left");
   const isFirstRightPinnedColumn = isPinned === "right" && cell.column.getIsFirstColumn("right");
-  const cellContent = (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext());
+  const cellContent = columnMeta.type === 'checkbox' ? '' : (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext());
   const html = _server.default.renderToStaticMarkup( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, cellContent));
   const hasValue = html.trim().length > 0;
   return /*#__PURE__*/_react.default.createElement("td", {
@@ -124,6 +125,7 @@ const TableBodyCell = props => {
     style: {
       display: 'flex',
       width: cell.column.getSize(),
+      // border: '1px solid #e5e7eb',
       ...(0, _utils.getCommonPinningStyles)(cell.column)
     },
     "data-tooltip-id": `${id}-tooltip-content`,

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

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _reactTable = require("@tanstack/react-table");
 var _space = _interopRequireDefault(require("rc-master-ui/es/space"));
 var _Command = _interopRequireDefault(require("../components/command/Command"));
+var _server = _interopRequireDefault(require("react-dom/server"));
 var _utils = require("../hook/utils");
 var _Checkbox = _interopRequireDefault(require("rc-master-ui/lib/checkbox/Checkbox"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -15,8 +16,6 @@ var _react = _interopRequireDefault(require("react"));
 var _useContext = require("../useContext");
 var _EditableCell = _interopRequireDefault(require("./EditableCell"));
 var _constant = require("../hook/constant");
-// import ReactDOMServer from 'react-dom/server'
-
 // import { nonActionColumn } from "../hook/constant";
 
 // import type { Dispatch, SetStateAction } from "react";
@@ -132,14 +131,11 @@ const TableBodyCellEdit = props => {
   const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
   const record = cell.row.original;
   const columnMeta = cell.column.columnDef.meta ?? {};
-
-  // const cellContent = columnMeta.type === 'checkbox' ? '' : flexRender(cell.column.columnDef.cell, cell.getContext());
-  // const html = ReactDOMServer.renderToStaticMarkup(<>{cellContent}</>);
-  // const hasValue = html.trim().length > 0;
-
+  const cellContent = columnMeta.type === 'checkbox' ? '' : (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext());
+  const html = _server.default.renderToStaticMarkup( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, cellContent));
+  const hasValue = html.trim().length > 0;
   const rowError = dataErrors ? dataErrors.find(it => it.id === cell.row.id) : undefined;
-  // const message = rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : undefined
-
+  const message = rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : undefined;
   const canEdit = (0, _utils.isEditable)(cell.column.columnDef.meta, record);
   // const allRows = table.getRowModel().rows;
   const allRows = table.getRowModel().flatRows;
@@ -192,7 +188,9 @@ const TableBodyCellEdit = props => {
       className: (0, _classnames.default)(`${prefix}-grid-cell`, {
         [`${prefix}-grid-cell-ellipsis`]: true,
         [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
-        [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn
+        [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
+        [`${prefix}-grid-cell-text-center`]: columnMeta?.headerTextAlign === 'center',
+        [`${prefix}-grid-cell-text-right`]: columnMeta?.headerTextAlign === 'right'
       }),
       style: {
         display: 'flex',
@@ -244,7 +242,9 @@ const TableBodyCellEdit = props => {
       className: (0, _classnames.default)(`${prefix}-grid-cell`, {
         [`${prefix}-grid-cell-ellipsis`]: true,
         [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
-        [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn
+        [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
+        [`${prefix}-grid-cell-text-center`]: columnMeta?.headerTextAlign === 'center',
+        [`${prefix}-grid-cell-text-right`]: columnMeta?.headerTextAlign === 'right'
       }),
       style: {
         display: 'flex',
@@ -264,7 +264,9 @@ const TableBodyCellEdit = props => {
       className: (0, _classnames.default)(`${prefix}-grid-cell cell-editable111 `, {
         [`${prefix}-grid-cell-ellipsis`]: true,
         [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
-        [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn
+        [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
+        [`${prefix}-grid-cell-text-center`]: columnMeta?.headerTextAlign === 'center',
+        [`${prefix}-grid-cell-text-right`]: columnMeta?.headerTextAlign === 'right'
       }),
       style: {
         display: 'flex',
@@ -746,11 +748,9 @@ const TableBodyCellEdit = props => {
     "data-col-index": colIndex,
     "data-row-index": rowNumber,
     "data-col-key": cell.column.id,
-    "data-row-key": cell.row.id
-    // data-tooltip-id={`${id}-tooltip-content`}
-    // data-tooltip-html={!isEditing && !hasValue && !message ? undefined : ReactDOMServer.renderToStaticMarkup(<>{rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : cellContent}</>)}
-    ,
-
+    "data-row-key": cell.row.id,
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-html": !isEditing && !hasValue && !message ? undefined : _server.default.renderToStaticMarkup( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : cellContent)),
     className: (0, _classnames.default)(`${prefix}-grid-cell cell-editable `, {
       [`${prefix}-grid-cell-ellipsis`]: true,
       'cell-editing': isEditing,
@@ -766,7 +766,9 @@ const TableBodyCellEdit = props => {
       'cell-paste-border-top': isInRangePaste && isTopPaste && (pasteRangeState.endRowIndex ?? 0) < (endRowIndex ?? 0),
       'cell-paste-border-left': isInRangePaste && isLeftPaste,
       [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
-      [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn
+      [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
+      [`${prefix}-grid-cell-text-center`]: columnMeta?.headerTextAlign === 'center',
+      [`${prefix}-grid-cell-text-right`]: columnMeta?.headerTextAlign === 'right' || columnMeta.type === 'number'
     }),
     style: {
       display: 'flex',
@@ -887,7 +889,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 +925,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/footer/TableFooterCell.js

@@ -61,7 +61,8 @@ const TableFooterCell = ({
       //  [`${prefix}-grid-cell-ellipsis`]:!wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header')),
       //  [`${prefix}-grid-cell-wrap`]:  wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header'),
       [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
-      [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn
+      [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
+      [`${prefix}-grid-cell-text-right`]: true
     }),
     key: header.id,
     colSpan: header.colSpan,
@@ -71,6 +72,6 @@ const TableFooterCell = ({
       width: header?.getSize() ?? header.column.getSize(),
       backgroundColor: "#fafafa"
     }
-  }, header.column.id !== "id" && header.column.id !== "selection_column" ? /*#__PURE__*/_react.default.createElement("span", null, col.summaryTemplate ? col.summaryTemplate(numberValue, col.field) : (0, _reactNumericComponent.numericFormatter)(cellValue, numericFormatProps)) : '');
+  }, header.column.id !== "id" && header.column.id !== "selection_column" ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, col.summaryTemplate ? col.summaryTemplate(numberValue, col.field) : (0, _reactNumericComponent.numericFormatter)(cellValue, numericFormatProps)) : '');
 };
 var _default = exports.default = TableFooterCell;

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

@@ -1,4 +1,4 @@
-import type { Column, Table } from '@tanstack/react-table';
+import { type Column, type Table } from '@tanstack/react-table';
 import { type Virtualizer } from '@tanstack/react-virtual';
 import React from 'react';
 interface TableHeadProps<T> {

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

@@ -5,10 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _reactTable = require("@tanstack/react-table");
 var _reactVirtual = require("@tanstack/react-virtual");
 var _react = _interopRequireWildcard(require("react"));
 var _useContext = require("../useContext");
 var _TableHeadRow = _interopRequireDefault(require("./TableHeadRow"));
+var _utils = require("../hook/utils");
 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; }
 const TableHead = ({
@@ -32,7 +34,8 @@ const TableHead = ({
     measureElement: typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1 ? element => element?.getBoundingClientRect().height : undefined,
     overscan: 5
   });
-  const virtualRows = rowVirtualizer.getVirtualItems();
+
+  // const virtualRows = rowVirtualizer.getVirtualItems()
 
   // const columnSizingState = table.getState().columnSizing
 
@@ -45,13 +48,12 @@ const TableHead = ({
   return /*#__PURE__*/_react.default.createElement("thead", {
     className: `${prefix}-grid-thead`,
     style: {
-      display: 'grid',
+      // display: 'grid',
       position: 'sticky',
       top: 0,
       zIndex: 1
     }
-  }, virtualRows.map(virtualRow => {
-    const headerGroup = table.getHeaderGroups()[virtualRow.index];
+  }, table.getHeaderGroups().map(headerGroup => {
     return /*#__PURE__*/_react.default.createElement(_TableHeadRow.default, {
       table: table,
       columnVirtualizer: columnVirtualizer,
@@ -61,9 +63,43 @@ const TableHead = ({
       virtualPaddingLeft: virtualPaddingLeft,
       virtualPaddingRight: virtualPaddingRight,
       fixedLeftColumns: fixedLeftColumns,
-      fixedRightColumns: fixedRightColumns,
-      rowHeaderVirtual: virtualRow
+      fixedRightColumns: fixedRightColumns
+      // rowHeaderVirtual={virtualRow}
     });
+    return /*#__PURE__*/_react.default.createElement("tr", {
+      key: headerGroup.id
+    }, headerGroup.headers.map(header => {
+      const columnRelativeDepth = header.depth - header.column.depth;
+      if (columnRelativeDepth > 1) {
+        return null;
+      }
+      let rowSpan = 1;
+      if (header.isPlaceholder) {
+        const leafs = header.getLeafHeaders();
+        rowSpan = leafs[leafs.length - 1].depth - header.depth;
+      }
+      return /*#__PURE__*/_react.default.createElement("th", {
+        key: header.id,
+        colSpan: header.colSpan,
+        rowSpan: rowSpan,
+        style: {
+          padding: '12px',
+          textAlign: 'left',
+          fontSize: '0.75rem',
+          fontWeight: 'medium',
+          color: '#6b7280',
+          textTransform: 'uppercase',
+          letterSpacing: '0.05em',
+          // backgroundColor: '#f9fafb',
+          // border: '1px solid #e5e7eb',
+          width: header.getSize(),
+          minWidth: header.getSize(),
+          maxWidth: header.getSize(),
+          // overflow: 'hidden',
+          ...(0, _utils.getCommonPinningStyles)(header.column)
+        }
+      }, (0, _reactTable.flexRender)(header.column.columnDef.header, header.getContext()));
+    }));
   }));
 };
 var _default = exports.default = TableHead;

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

@@ -9,6 +9,8 @@ interface TableHeadCellProps<T> {
     getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
     columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
     rowHeaderVirtualizer: Virtualizer<HTMLDivElement, HTMLTableRowElement>;
+    colSpan: any;
+    rowSpan: any;
 }
 declare const TableHeadCell: <RecordType extends object>(props: TableHeadCellProps<RecordType>) => React.JSX.Element;
 export default TableHeadCell;