es-grid-template 1.7.24 → 1.7.26

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

@@ -14,6 +14,7 @@ var _Checkbox = _interopRequireDefault(require("rc-master-ui/lib/checkbox/Checkb
 var _react = _interopRequireWildcard(require("react"));
 var _useContext = require("../useContext");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _server = _interopRequireDefault(require("react-dom/server"));
 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 renderCellIndex = props => {
@@ -28,7 +29,8 @@ const renderCellIndex = props => {
 const renderCommand = args => {
   const {
     cell,
-    commandClick
+    commandClick,
+    id
   } = args;
   const col = cell.column.columnDef.meta ?? {};
   const record = cell.row.original;
@@ -43,6 +45,7 @@ const renderCommand = args => {
   }) : [];
   return /*#__PURE__*/_react.default.createElement(_space.default, null, commands.filter(it => it.visible !== false).map(item => {
     return /*#__PURE__*/_react.default.createElement(_Command.default, {
+      id: id,
       key: item.id,
       item: item,
       record: record,
@@ -101,12 +104,16 @@ const TableBodyCell = props => {
   const {
     prefix,
     setIsSelectionChange,
-    selectionSettings
+    selectionSettings,
+    id
   } = (0, _react.useContext)(_useContext.TableContext);
   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 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", {
     key: cell.id,
     className: (0, _classnames.default)(`${prefix}-grid-cell`, {
@@ -119,6 +126,8 @@ const TableBodyCell = props => {
       width: cell.column.getSize(),
       ...(0, _utils.getCommonPinningStyles)(cell.column)
     },
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-html": !hasValue ? '' : _server.default.renderToStaticMarkup( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, cellContent)),
     onClick: event => {
       const element = event.target;
       const container = document.querySelector(".ui-rc-table-row-expand");
@@ -137,7 +146,8 @@ const TableBodyCell = props => {
     cell
   }), cell.column.id === "command" && renderCommand({
     cell,
-    commandClick
+    commandClick,
+    id
   }), cell.column.id === "selection_column" && renderSelection({
     cell,
     table,

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

@@ -1,7 +1,7 @@
 import type { Cell, Table } from "@tanstack/react-table";
 import type { CommandClick } from "../type";
 import React from "react";
-import type { Virtualizer } from "@tanstack/react-virtual";
+import type { VirtualItem, Virtualizer } from "@tanstack/react-virtual";
 interface TableBodyCellProps<T> {
     table: Table<T>;
     rowVirtualizer: Virtualizer<HTMLDivElement, HTMLTableRowElement>;
@@ -9,6 +9,7 @@ interface TableBodyCellProps<T> {
     tableId: string;
     cell: Cell<T, unknown>;
     commandClick?: (args: CommandClick) => void;
+    virtualRow: VirtualItem;
     [key: string]: any;
 }
 declare const TableBodyCellEdit: <RecordType extends object>(props: TableBodyCellProps<RecordType>) => React.JSX.Element;

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

@@ -15,6 +15,8 @@ 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";
@@ -33,7 +35,8 @@ const renderCellIndex = props => {
 const renderCommand = args => {
   const {
     cell,
-    commandClick
+    commandClick,
+    id
   } = args;
   const col = cell.column.columnDef.meta ?? {};
   const record = cell.row.original;
@@ -48,6 +51,7 @@ const renderCommand = args => {
   }) : [];
   return /*#__PURE__*/_react.default.createElement(_space.default, null, commands.filter(it => it.visible !== false).map(item => {
     return /*#__PURE__*/_react.default.createElement(_Command.default, {
+      id: id,
       key: item.id,
       item: item,
       record: record,
@@ -88,8 +92,10 @@ const TableBodyCellEdit = props => {
     isEditing,
     columnVirtualizer,
     rowVirtualizer
+    // virtualRow
   } = props;
   const {
+    id,
     rowKey,
     editingKey,
     prefix,
@@ -117,18 +123,28 @@ const TableBodyCellEdit = props => {
     handleDeleteContent,
     reset,
     setValue,
-    handleAddMulti
-    // expandable
+    handleAddMulti,
+    dataErrors,
+    expanded,
+    setExpanded,
+    expandable
   } = _react.default.useContext(_useContext.TableContext);
+  const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
+  const record = cell.row.original;
+  const columnMeta = cell.column.columnDef.meta ?? {};
 
-  // const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0
+  // const cellContent = columnMeta.type === 'checkbox' ? '' : flexRender(cell.column.columnDef.cell, cell.getContext());
+  // const html = ReactDOMServer.renderToStaticMarkup(<>{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 record = cell.row.original;
   const canEdit = (0, _utils.isEditable)(cell.column.columnDef.meta, record);
   // const allRows = table.getRowModel().rows;
   const allRows = table.getRowModel().flatRows;
 
-  // const rowNumber = cell.row.index
+  // const rowNumber = virtualRow.index
   const rowNumber = allRows.findIndex(it => it.id === cell.row.id);
   const colIndex = cell.column.getIndex();
   const isPinned = cell.column.getIsPinned();
@@ -140,7 +156,6 @@ const TableBodyCellEdit = props => {
     const colIds = (0, _utils.getColIdsBetween)(table, startCell.colId, endCell.colId);
     return rowIds.includes(cell.row.id) && colIds.includes(cell.column.id);
   }, [cell.column.id, cell.row.id, endCell, startCell, table]);
-  const columnMeta = cell.column.columnDef.meta ?? {};
   const editType = typeof columnMeta.editType === 'function' ? columnMeta.editType(record) : columnMeta.editType;
   const {
     rowRange,
@@ -185,7 +200,40 @@ const TableBodyCellEdit = props => {
         width: cell.column.getSize(),
         ...(0, _utils.getCommonPinningStyles)(cell.column)
       }
-    }, renderCellIndex({
+    }, cell.column.getIndex() === expandIconColumnIndex && /*#__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"
+    }))), renderCellIndex({
       parrents,
       cell
     }));
@@ -206,7 +254,8 @@ const TableBodyCellEdit = props => {
       }
     }, renderCommand({
       cell,
-      commandClick
+      commandClick,
+      id
     }));
   }
   if (cell.column.id === "selection_column") {
@@ -223,7 +272,40 @@ const TableBodyCellEdit = props => {
         width: cell.column.getSize(),
         ...(0, _utils.getCommonPinningStyles)(cell.column)
       }
-    }, renderSelection({
+    }, cell.column.getIndex() === expandIconColumnIndex && /*#__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"
+    }))), renderSelection({
       cell
     }));
   }
@@ -278,10 +360,13 @@ const TableBodyCellEdit = props => {
           return;
         }
         const columnKey = tmpCols[targetCol].id;
-        newData[targetRow] = {
-          ...newData[targetRow],
-          [columnKey]: typeof cellValue === 'string' ? cellValue.trim() : cellValue
-        };
+        const disable = !(0, _utils.isEditable)(tmpCols[targetCol].columnDef.meta, record);
+        if (!disable) {
+          newData[targetRow] = {
+            ...newData[targetRow],
+            [columnKey]: typeof cellValue === 'string' ? cellValue.trim() : cellValue
+          };
+        }
       });
 
       // Lưu dòng được paste
@@ -356,7 +441,8 @@ const TableBodyCellEdit = props => {
     triggerPaste?.(pastedRows, colPasteds, rs, copyRows);
   };
   function handleMouseDown(rowId, colId) {
-    if ((startCell?.rowId !== rowId || startCell?.colId !== colId) && (endCell?.rowId !== rowId || endCell?.colId !== colId)) {
+    setIsSelecting?.(true);
+    if (startCell?.rowId !== rowId || startCell?.colId !== colId || endCell?.rowId !== rowId || endCell?.colId !== colId) {
       setStartCell?.({
         rowId,
         colId
@@ -365,7 +451,6 @@ const TableBodyCellEdit = props => {
         rowId,
         colId
       });
-      setIsSelecting?.(true);
       setRangeState?.((0, _utils.getSelectedCellMatrix)(table, {
         rowId,
         colId
@@ -462,12 +547,10 @@ const TableBodyCellEdit = props => {
       triggerDragPaste(selectPasteState, e.ctrlKey);
     } else {
       // if ( endCell?.rowId !== rowId || endCell?.colId !== colId) {
-      //   console.log('fffffffffffff')
       //   setRangeState?.(selectState)
       // }
 
       if (!(0, _utils.isObjEqual)(rangeState, selectState)) {
-        console.log('dfdfghh');
         setRangeState?.(selectState);
       }
     }
@@ -663,10 +746,16 @@ const TableBodyCellEdit = props => {
     "data-col-index": colIndex,
     "data-row-index": rowNumber,
     "data-col-key": cell.column.id,
-    "data-row-key": cell.row.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}</>)}
+    ,
+
     className: (0, _classnames.default)(`${prefix}-grid-cell cell-editable `, {
       [`${prefix}-grid-cell-ellipsis`]: true,
       'cell-editing': isEditing,
+      disable: !(0, _utils.isEditable)(cell.column.columnDef.meta, record),
+      isValid: !isEditing && rowError && rowError[cell.column.id]?.field === cell.column.id,
       [`${prefix}-grid-cell-selected`]: isCellSelected,
       'cell-border-bottom': !isEditing && isInRange && isBottom,
       'cell-border-right': !isEditing && isInRange && isRight,
@@ -685,23 +774,25 @@ const TableBodyCellEdit = props => {
       height: '36px',
       ...(0, _utils.getCommonPinningStyles)(cell.column),
       cursor: isPasting ? 'crosshair' : undefined
-      // background: isCellSelected ? '#d0e6ff' : undefined,
-
-      // outline: focusedCell?.rowId === cell.row.id && focusedCell?.colId === cell.column.id ? '1px solid blue' : undefined,
     },
     onMouseDown: () => {
-      if (record[rowKey] === editingKey) {} else {
+      if (record[rowKey] === editingKey) {
+        setFocusedCell?.({
+          rowId: cell.row.id,
+          colId: cell.column.id
+        });
+      } else {
         handleMouseDown(cell.row.id, cell.column.id);
       }
       if (record[rowKey] !== editingKey) {
         setTimeout(() => {
           setEditingKey?.('');
+          reset?.();
         });
       }
     },
     onMouseEnter: () => handleMouseEnter(cell.row.id, cell.column.id),
     onMouseUp: e => handleMouseUp(e),
-    onMouseMove: () => {},
     onKeyDown: e => {
       if (!isEditing) {
         handleKeyDown(e, cell.row.id, cell.column.id);
@@ -713,6 +804,7 @@ const TableBodyCellEdit = props => {
             e.preventDefault();
             e.stopPropagation();
             setEditingKey?.('');
+            reset?.();
             const currentRowIndex = allRows.findIndex(r => r.id === cell.row.id);
             const nextRow = allRows[currentRowIndex + 1];
             if (nextRow) {
@@ -781,18 +873,10 @@ const TableBodyCellEdit = props => {
       }
     },
     onDoubleClick: e => {
-      console.log('e', e);
       if (!(record[rowKey] === editingKey && canEdit)) {
         handleEdit(e);
       }
     }
-
-    // onClick={() => {
-    //   // if (focusedCell?.rowId !== cell.row.id && focusedCell?.colId !== cell.column.id) {
-    //   //   setFocusedCell({ rowId: cell.row.id, colId: cell.column.id })
-    //   // }
-
-    // }}
   }, isEditing && canEdit ? /*#__PURE__*/_react.default.createElement(_EditableCell.default, {
     cellEditing: {},
     column: cell.column.columnDef.meta,
@@ -803,8 +887,49 @@ const TableBodyCellEdit = props => {
     record: record
     // rowKey={rowKey}
   }) : /*#__PURE__*/_react.default.createElement("div", {
-    className: "ui-rc_cell-content"
-  }, (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", {
+    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: {
+      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()), (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/body/TableBodyRow.js

@@ -83,6 +83,7 @@ const TableBodyRow = ({
         key: cell.id,
         cell: cell,
         commandClick: commandClick,
+        virtualRow: virtualRow,
         isEditing: isEditing,
         rowVirtualizer: rowVirtualizer,
         columnVirtualizer: columnVirtualizer
@@ -92,7 +93,8 @@ const TableBodyRow = ({
       key: column.id,
       table: table,
       cell: row.getVisibleCells().find(c => c.column.id === column.id),
-      commandClick: commandClick
+      commandClick: commandClick,
+      virtualRow: virtualRow
     });
   }) : null, virtualPaddingLeft ? /*#__PURE__*/_react.default.createElement("td", {
     className: "",
@@ -113,14 +115,16 @@ const TableBodyRow = ({
           commandClick: commandClick,
           isEditing: isEditing,
           rowVirtualizer: rowVirtualizer,
-          columnVirtualizer: columnVirtualizer
+          columnVirtualizer: columnVirtualizer,
+          virtualRow: virtualRow
         }));
       }
       return /*#__PURE__*/_react.default.createElement(_TableBodyCell.default, {
         table: table,
         key: cell.id,
         cell: cell,
-        commandClick: commandClick
+        commandClick: commandClick,
+        virtualRow: virtualRow
       });
     }
   }), fixedRightColumns.length > 0 ? fixedRightColumns.map(column => {
@@ -133,7 +137,8 @@ const TableBodyRow = ({
         commandClick: commandClick,
         isEditing: isEditing,
         rowVirtualizer: rowVirtualizer,
-        columnVirtualizer: columnVirtualizer
+        columnVirtualizer: columnVirtualizer,
+        virtualRow: virtualRow
       }));
     }
     return /*#__PURE__*/_react.default.createElement(_TableBodyCell.default, {

package/lib/table-component/components/ControlCheckbox.js

@@ -24,9 +24,6 @@ const ControlCheckbox = props => {
     handleCellChange,
     rowKey
   } = (0, _react.useContext)(_useContext.TableContext);
-
-  // const isEdit  =  getEditType(column, record)
-
   const isEdit = _react.default.useMemo(() => {
     return (0, _utils.isEditable)(column, record);
   }, [column, record]);

package/lib/table-component/components/async-table-select/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { BaseOptionType, DefaultOptionType } from "rc-select/lib/Select";
-import type { TableSelectProps } from "rc-master-ui/es/table-select";
+import type { TableSelectProps } from "rc-master-ui";
 import type { LoadOptionsArgs } from '../../type';
 export interface DebounceSelectProps<OptionType extends BaseOptionType = DefaultOptionType> extends TableSelectProps {
     loadOptions?: (search: string, callback: (newOptions: OptionType[]) => void, args?: LoadOptionsArgs) => void;

package/lib/table-component/components/async-table-select/index.js

@@ -11,6 +11,8 @@ var _debounce = _interopRequireDefault(require("lodash/debounce"));
 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 {TableSelectProps} from "rc-master-ui/es/table-select"
+
 // import type {LoadOptionsArgs} from "../type";
 
 function AsyncTableSelect({

package/lib/table-component/components/command/Command.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import type { CommandItem } from "../../type";
 type Props<T> = {
+    id: string;
     record: T;
     item: CommandItem;
     onClick: (e: any) => void;

package/lib/table-component/components/command/Command.js

@@ -13,13 +13,18 @@ const Command = props => {
   const {
     item,
     onClick,
-    record
+    record,
+    id
   } = props;
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, item.template ? /*#__PURE__*/_react.default.createElement("div", {
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-content": item.tooltip || item.title,
     id: item.id,
     onClick: onClick
   }, typeof item.template === 'function' ? item.template(record) : item.template) : /*#__PURE__*/_react.default.createElement("div", {
     tabIndex: -1,
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-content": item.tooltip || item.title,
     style: {
       padding: '3px',
       maxWidth: 45,

package/lib/table-component/footer/TableFooterCell.js

@@ -5,8 +5,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _utils = require("../hook/utils");
+var _useContext = require("../useContext");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _hooks = require("../../grid-component/hooks");
+var _reactNumericComponent = require("react-numeric-component");
+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 { Person } from "../makeData";
 
 // import type { Person } from "../../tanstack-table/makeData";
@@ -14,11 +20,49 @@ var _utils = require("../hook/utils");
 const TableFooterCell = ({
   header
 }) => {
+  const isPinned = header.column.getIsPinned();
+  const isLastLeftPinnedColumn = isPinned === 'left' && header.column.getIsLastColumn('left');
+  const isFirstRightPinnedColumn = isPinned === 'right' && header.column.getIsFirstColumn('right');
+  const {
+    prefix,
+    format,
+    dataSource
+  } = (0, _react.useContext)(_useContext.TableContext);
+  const col = header.column.columnDef.meta ?? {};
+  const colFormat = typeof col.format === 'function' ? col.format({}) : col.format;
+  const cellFormat = (0, _utils.getFormat)(colFormat, format);
+  const thousandSeparator = cellFormat?.thousandSeparator;
+  const decimalSeparator = cellFormat?.decimalSeparator;
+
+  // const dec = (col.format?.decimalScale || col.format?.decimalScale === 0) ? col.format?.decimalScale : format?.decimalScale
+  const dec = cellFormat?.decimalScale;
+
+  // const sumValue = col.type === 'number' ? sumDataByField(filterDataByColumns4(dataSource, filterStates) as any[], col?.key as string) : 0
+  const sumValue = col.type === 'number' ? (0, _hooks.sumByField)(dataSource, col?.field) : 0;
+  const value = !(0, _utils.isEmpty)(sumValue) ? dec || dec === 0 ? parseFloat(Number(sumValue).toFixed(dec)).toString() : sumValue.toString() : '0';
+  const cellValue = col.type === 'number' && col.isSummary !== false ? value : '';
+  const numberValue = Number(value);
+  const numericFormatProps = {
+    thousandSeparator: (0, _utils.checkThousandSeparator)(thousandSeparator, decimalSeparator),
+    decimalSeparator: (0, _utils.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
+    allowNegative: cellFormat?.allowNegative ?? false,
+    prefix: cellFormat?.prefix,
+    suffix: cellFormat?.suffix,
+    decimalScale: dec,
+    fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
+  };
   return /*#__PURE__*/_react.default.createElement("td", {
     // ref={el => {
     //   if (el) columnVirtualizer.measureElement(el)
     // }}
     // data-index={header.id}
+
+    className: (0, _classnames.default)(`${prefix}-grid-cell`, {
+      //  [`${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
+    }),
     key: header.id,
     colSpan: header.colSpan,
     style: {
@@ -27,6 +71,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, "aaa") : '');
+  }, 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)) : '');
 };
 var _default = exports.default = TableFooterCell;

package/lib/table-component/footer/TableFooterRow.js

@@ -30,7 +30,9 @@ const TableFooterRow = ({
     style: {
       display: "flex",
       width: "100%",
-      borderTop: "1px solid #e0e0e0"
+      borderBottom: "1px solid #e0e0e0",
+      borderTop: "1px solid #e0e0e0",
+      height: 37
     }
   }, fixedLeftColumns.length > 0 ? fixedLeftColumns.map(column => {
     return /*#__PURE__*/_react.default.createElement(_TableFooterCell.default, {