es-grid-template 1.7.38 → 1.7.39

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

@@ -3,7 +3,7 @@ import type { CommandClick } from "../type";
 import React from "react";
 interface TableBodyProps<T> {
     table: Table<T>;
-    tableContainerRef: React.RefObject<HTMLDivElement | null>;
+    tableContainerRef: React.RefObject<HTMLDivElement>;
     commandClick?: (args: CommandClick<T>) => void;
     editAble?: boolean;
     tableId: string;

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

@@ -3,9 +3,9 @@ import TableBodyRow from "./TableBodyRow";
 // import type { Virtualizer } from "@tanstack/react-virtual";
 import { useVirtualizer } from "@tanstack/react-virtual";
 // import type { Dispatch, SetStateAction } from "react";
-import { Empty } from "rc-master-ui";
 import React, { Fragment } from "react";
 import { TableContext } from "../useContext";
+import { Empty } from "rc-master-ui";
 const TableBody = ({
   columnVirtualizer,
   table,
@@ -34,18 +34,18 @@ const TableBody = ({
     //estimate row height for accurate scrollbar dragging
     getScrollElement: () => tableContainerRef.current,
     //measure dynamic row height, except in firefox because it measures table border height incorrectly
-    measureElement: typeof window !== "undefined" && navigator.userAgent.indexOf("Firefox") === -1 ? element => element?.getBoundingClientRect().height : undefined,
+    measureElement: typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1 ? element => element?.getBoundingClientRect().height : undefined,
     overscan: 1
   });
   const virtualRows = rowVirtualizer.getVirtualItems();
   return /*#__PURE__*/React.createElement("tbody", {
     className: `${prefix}-grid-tbody`,
     style: {
-      display: "grid",
+      display: 'grid',
       // 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
+      position: 'relative' //needed for absolute positioning of rows
     }
   }, showEmptyText && rows.length === 0 ? /*#__PURE__*/React.createElement("tr", {
     style: {
@@ -57,7 +57,7 @@ const TableBody = ({
       position: "sticky",
       left: 0,
       width: tableContainerRef.current?.clientWidth,
-      overflow: "hidden"
+      overflow: 'hidden'
     }
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Empty, {
     image: Empty.PRESENTED_IMAGE_SIMPLE,

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

@@ -7,7 +7,7 @@ import Checkbox from "rc-master-ui/es/checkbox/Checkbox";
 import React, { useContext } from "react";
 import { TableContext } from "../useContext";
 import classNames from "classnames";
-import ReactDOMServer from "react-dom/server";
+import ReactDOMServer from 'react-dom/server';
 const renderCellIndex = props => {
   const {
     parrents,
@@ -71,7 +71,7 @@ const renderCommand = args => {
   const commands = col.commandItems ? col.commandItems.map(it => {
     return {
       ...it,
-      visible: typeof it.visible === "function" ? it.visible?.(record) : it.visible
+      visible: typeof it.visible === 'function' ? it.visible?.(record) : it.visible
     };
   }) : [];
   return /*#__PURE__*/React.createElement("span", {
@@ -111,6 +111,7 @@ const renderSelection = args => {
   } = args;
   return /*#__PURE__*/React.createElement("div", {
     style: {
+
       // paddingLeft: `${row.depth * 2}rem`,
     }
   }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/React.createElement("div", {
@@ -148,14 +149,14 @@ const renderSelection = args => {
     className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
   }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Checkbox, {
     checked: row.getIsSelected() || row.getIsAllSubRowsSelected(),
-    indeterminate: row.getIsSomeSelected() && selectionSettings && selectionSettings.mode === "checkbox" && selectionSettings.type !== "single"
+    indeterminate: row.getIsSomeSelected() && selectionSettings && selectionSettings.mode === 'checkbox' && selectionSettings.type !== 'single'
     // indeterminate={row.getIsSomeSelected() }
     ,
     onChange: e => {
       row.getToggleSelectedHandler()(e);
       setIsSelectionChange({
         isChange: true,
-        type: "rowSelected",
+        type: 'rowSelected',
         rowData: row.original
       });
       // row.toggleSelected()
@@ -190,53 +191,28 @@ const TableBodyCell = props => {
   const isPinned = cell.column.getIsPinned();
   const isLastLeftPinnedColumn = isPinned === "left" && cell.column.getIsLastColumn("left");
   const isFirstRightPinnedColumn = isPinned === "right" && cell.column.getIsFirstColumn("right");
-  const cellContent = columnMeta.type === "checkbox" ? "" : flexRender(cell.column.columnDef.cell, cell.getContext());
+  const cellContent = columnMeta.type === 'checkbox' ? '' : flexRender(cell.column.columnDef.cell, cell.getContext());
   const html = ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.Fragment, null, cellContent));
   const hasValue = html.trim().length > 0;
-  if (cell.column.id === "command") {
-    return /*#__PURE__*/React.createElement("td", {
-      key: cell.id,
-      className: classNames(`${prefix}-grid-cell ${prefix}-grid-cell-command`, {
-        [`${prefix}-grid-cell-ellipsis`]: true,
-        [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
-        [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
-        [`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === "center",
-        [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === "right"
-      }),
-      style: {
-        display: "flex",
-        height: "36px",
-        width: cell.column.getSize(),
-        minWidth: cell.column.getSize(),
-        maxWidth: cell.column.getSize(),
-        ...getCommonPinningStyles(cell.column)
-      }
-    }, renderCommand({
-      cell,
-      commandClick,
-      id,
-      data: originData
-    }));
-  }
   return /*#__PURE__*/React.createElement("td", {
     key: cell.id,
     className: classNames(`${prefix}-grid-cell`, {
-      [`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === "Both" || wrapSettings.wrapMode === "Content")),
-      [`${prefix}-grid-cell-wrap`]: wrapSettings && (wrapSettings.wrapMode === "Both" || wrapSettings.wrapMode === "Content"),
+      [`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content')),
+      [`${prefix}-grid-cell-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content'),
       [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
       [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
-      [`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === "center",
-      [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === "right" || columnMeta.type === "number"
+      [`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === 'center',
+      [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right' || columnMeta.type === 'number'
     }),
     style: {
-      display: "flex",
+      display: 'flex',
       // flex: 1,
       width: cell.column.getSize(),
       // border: '1px solid #e5e7eb',
       ...getCommonPinningStyles(cell.column)
     },
     "data-tooltip-id": `${id}-tooltip-content`,
-    "data-tooltip-html": !hasValue ? "" : ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.Fragment, null, cellContent)),
+    "data-tooltip-html": !hasValue ? '' : ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.Fragment, null, cellContent)),
     onClick: event => {
       const element = event.target;
       const container = document.querySelector(".ui-rc-table-row-expand");
@@ -245,7 +221,7 @@ const TableBodyCell = props => {
         cell.row.getToggleSelectedHandler()(event);
         setIsSelectionChange({
           isChange: true,
-          type: "rowSelected",
+          type: 'rowSelected',
           rowData: cell.row.original
         });
       }
@@ -257,6 +233,11 @@ const TableBodyCell = props => {
     isDataTree,
     setExpanded,
     expandIconColumnIndex
+  }), cell.column.id === "command" && renderCommand({
+    cell,
+    commandClick,
+    id,
+    data: originData
   }), cell.column.id === "selection_column" && renderSelection({
     cell,
     table,

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

@@ -1,7 +1,7 @@
-import type { Cell, Table } from '@tanstack/react-table';
-import type { CommandClick } from '../type';
-import type { VirtualItem, Virtualizer } from '@tanstack/react-virtual';
-import React from 'react';
+import type { Cell, Table } from "@tanstack/react-table";
+import type { CommandClick } from "../type";
+import React from "react";
+import type { VirtualItem, Virtualizer } from "@tanstack/react-virtual";
 interface TableBodyCellProps<T> {
     table: Table<T>;
     rowVirtualizer: Virtualizer<HTMLDivElement, HTMLTableRowElement>;

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

@@ -1,19 +1,19 @@
-import { flexRender } from '@tanstack/react-table';
-import Space from 'rc-master-ui/es/space';
+import { flexRender } from "@tanstack/react-table";
+import Space from "rc-master-ui/es/space";
 import Command from "../components/command/Command";
 import ReactDOMServer from 'react-dom/server';
-import { addRowsDown, addRowsDownWithCtrl, addRowsUp, addRowsUpWithCtrl, flattenArray, flattenData,
+import { addRowsDown, addRowsDownWithCtrl, addRowsUp, addRowsUpWithCtrl, findFirst, flattenArray, flattenData,
 // getCellsByPosition,
 getColIdsBetween, getCommonPinningStyles, getEditType, getRowIdsBetween, getSelectedCellMatrix, isEditable, isObjEmpty, isObjEqual, newGuid, unFlattenData, updateOrInsert } from "../hook/utils";
 // import { nonActionColumn } from "../hook/constant";
-import classNames from 'classnames';
 import Checkbox from "rc-master-ui/es/checkbox/Checkbox";
+import classNames from "classnames";
 // import type { Dispatch, SetStateAction } from "react";
 
-import React from 'react';
-import { nonActionColumn } from "../hook/constant";
+import React from "react";
 import { TableContext } from "../useContext";
 import EditableCell from "./EditableCell";
+import { nonActionColumn } from "../hook/constant";
 // import { nonActionColumn } from "../hook/constant";
 
 const renderCellIndex = props => {
@@ -83,6 +83,7 @@ const renderSelection = args => {
   } = args;
   return /*#__PURE__*/React.createElement("div", {
     style: {
+
       // paddingLeft: `${row.depth * 2}rem`,
     }
   }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/React.createElement("div", {
@@ -109,15 +110,15 @@ const renderSelection = args => {
       }
     },
     style: {
-      cursor: 'pointer'
+      cursor: "pointer"
     },
     className: "ui-rc-table-row-expand"
   }, cell.row.getIsExpanded() ? /*#__PURE__*/React.createElement("span", {
-    className: 'ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded'
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
   }) : /*#__PURE__*/React.createElement("span", {
-    className: 'ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed'
+    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'
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
   }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Checkbox, {
     checked: row.getIsSelected() || row.getIsAllSubRowsSelected(),
     indeterminate: row.getIsSomeSelected() && selectionSettings && selectionSettings.mode === 'checkbox' && selectionSettings.type !== 'single'
@@ -189,8 +190,6 @@ const TableBodyCellEdit = props => {
     handleCellClick,
     setIsSelectionChange,
     selectionSettings
-
-    // isFullScreen
   } = React.useContext(TableContext);
   const expandIconColumnIndex = expandable?.expandIconColumnIndex;
   const record = cell.row.original;
@@ -209,15 +208,13 @@ const TableBodyCellEdit = props => {
   const rowNumber = allRows.findIndex(it => it.id === cell.row.id);
   const colIndex = cell.column.getIndex();
   const isPinned = cell.column.getIsPinned();
-  const isLastLeftPinnedColumn = isPinned === 'left' && cell.column.getIsLastColumn('left');
-  const isFirstRightPinnedColumn = isPinned === 'right' && cell.column.getIsFirstColumn('right');
+  const isLastLeftPinnedColumn = isPinned === "left" && cell.column.getIsLastColumn("left");
+  const isFirstRightPinnedColumn = isPinned === "right" && cell.column.getIsFirstColumn("right");
   const selectRowIds = React.useMemo(() => {
     return startCell && endCell ? getRowIdsBetween(table, startCell.rowId, endCell.rowId) : [];
   }, [endCell, startCell, table]);
   const isCellSelected = React.useMemo(() => {
-    if (!startCell || !endCell) {
-      return false;
-    }
+    if (!startCell || !endCell) return false;
 
     // const rowIds = getRowIdsBetween(table, startCell.rowId, endCell.rowId);
     const colIds = getColIdsBetween(table, startCell.colId, endCell.colId);
@@ -262,9 +259,7 @@ const TableBodyCellEdit = props => {
     const dataSelected = [];
     rowSelectIds.forEach(rowId => {
       const row = allRows.find(r => r.id === rowId);
-      if (!row) {
-        return;
-      }
+      if (!row) return;
       const rowData = [];
       colSelectIds.forEach(colId => {
         const cellll = row.getVisibleCells().find(c => c.column.id === colId);
@@ -338,9 +333,7 @@ const TableBodyCellEdit = props => {
     const dataSelected = [];
     rowSelectIds.forEach(rowId => {
       const row = allRows.find(r => r.id === rowId);
-      if (!row) {
-        return;
-      }
+      if (!row) return;
       const rowData = [];
       colSelectIds.forEach(colId => {
         const cellll = row.getVisibleCells().find(c => c.column.id === colId);
@@ -499,6 +492,7 @@ const TableBodyCellEdit = props => {
       }
     }
     if (editType === 'select') {
+
       // setSearchValue(e.key)
       // setOpen(true)
     }
@@ -510,11 +504,8 @@ const TableBodyCellEdit = props => {
         // const select = document.querySelector(`div.cell-editing[tabindex="${startSelectedCells.current.col}"] .ant-select-selection-search input`)
 
         if (textarea) {
-          // textarea.focus()
-          // textarea.setSelectionRange(
-          //   textarea.value.length,
-          //   textarea.value.length
-          // )
+          textarea.focus();
+          textarea.setSelectionRange(textarea.value.length, textarea.value.length);
         }
         // if (input) {
         //   input.focus()
@@ -701,6 +692,7 @@ const TableBodyCellEdit = props => {
   }
   const handleMouseDownIndex = rowId => {
     const allColumns = table.getVisibleLeafColumns();
+    const firstCOl = findFirst(allColumns);
     const startCol = allColumns[0].id;
     const endCol = allColumns[allColumns.length - 1].id;
     setStartCell?.({
@@ -711,6 +703,12 @@ const TableBodyCellEdit = props => {
       rowId,
       colId: endCol
     });
+    if (firstCOl) {
+      setFocusedCell?.({
+        rowId: cell.row.id,
+        colId: firstCOl.id
+      });
+    }
     setRangeState?.(getSelectedCellMatrix(table, {
       rowId,
       colId: startCol
@@ -719,7 +717,7 @@ const TableBodyCellEdit = props => {
       colId: endCol
     }));
   };
-  if (cell.column.id === '#') {
+  if (cell.column.id === "#") {
     return /*#__PURE__*/React.createElement("td", {
       key: cell.id,
       className: classNames(`${prefix}-grid-cell ${prefix}-grid-cell-index`, {
@@ -783,21 +781,21 @@ const TableBodyCellEdit = props => {
         }
       },
       style: {
-        cursor: 'pointer'
+        cursor: "pointer"
       },
       className: "ui-rc-table-row-expand"
     }, cell.row.getIsExpanded() ? /*#__PURE__*/React.createElement("span", {
-      className: 'ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded'
+      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
     }) : /*#__PURE__*/React.createElement("span", {
-      className: 'ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed'
+      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'
+      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
     }))), renderCellIndex({
       parrents,
       cell
     }));
   }
-  if (cell.column.id === 'command') {
+  if (cell.column.id === "command") {
     return /*#__PURE__*/React.createElement("td", {
       key: cell.id,
       className: classNames(`${prefix}-grid-cell ${prefix}-grid-cell-command`, {
@@ -822,7 +820,7 @@ const TableBodyCellEdit = props => {
       data: originData
     }));
   }
-  if (cell.column.id === 'selection_column') {
+  if (cell.column.id === "selection_column") {
     return /*#__PURE__*/React.createElement("td", {
       key: cell.id,
       className: classNames(`${prefix}-grid-cell cell-editable111 `, {
@@ -864,16 +862,16 @@ const TableBodyCellEdit = props => {
         }
       },
       style: {
-        cursor: 'pointer'
+        cursor: "pointer"
       },
       className: "ui-rc-table-row-expand"
     }, cell.row.getIsExpanded() ? /*#__PURE__*/React.createElement("span", {
-      className: 'ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded'
+      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
     }) : /*#__PURE__*/React.createElement("span", {
-      className: 'ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed'
+      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'
-    }))), cell.column.id === 'selection_column' && renderSelection({
+      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
+    }))), cell.column.id === "selection_column" && renderSelection({
       cell,
       table,
       selectionSettings,
@@ -949,30 +947,14 @@ const TableBodyCellEdit = props => {
       height: '36px',
       ...getCommonPinningStyles(cell.column),
       cursor: isPasting ? 'crosshair' : undefined
-    }
-    // onClick={() => {
-    //   if (record[rowKey] === editingKey) {
-    //     // setFocusedCell?.({ rowId: cell.row.id, colId: cell.column.id })
-
-    //     if (canEdit) {
-    //       handleCellClick?.(
-    //         rowNumber,
-    //         record,
-    //         columnMeta as any,
-    //         record[rowKey],
-    //         record[columnMeta.field ?? ""]
-    //       )
-    //     }
-    //   }
-    // }}
-    ,
+    },
     onMouseDown: () => {
       if (record[rowKey] === editingKey) {
         setFocusedCell?.({
           rowId: cell.row.id,
           colId: cell.column.id
         });
-        if (canEdit && focusedCell?.colId !== cell.column.id) {
+        if (canEdit) {
           handleCellClick?.(rowNumber, record, columnMeta, record[rowKey], record[columnMeta.field ?? '']);
         }
       } else {
@@ -994,6 +976,15 @@ const TableBodyCellEdit = props => {
 
         // reset?.()
       }
+
+      // if (record[rowKey] !== editingKey) {
+
+      //   setTimeout(() => {
+      //     // setEditingKey?.('')
+      //     reset?.()
+      //   })
+
+      // }
     },
     onMouseEnter: () => handleMouseEnter(cell.row.id, cell.column.id),
     onMouseUp: e => handleMouseUp(e),
@@ -1033,17 +1024,25 @@ const TableBodyCellEdit = props => {
                 align: 'center'
               });
             } else {
+
               // const newRowId = newGuid()
               // handleAddMulti?.({}, 1, newRowId)
+
               // setFocusedCell?.({ rowId: newRowId, colId: cell.column.id });
+
               // setStartCell?.({ rowId: newRowId, colId: cell.column.id });
               // setEndCell?.({ rowId: newRowId, colId: cell.column.id });
+
               // setTimeout(() => {
               //   setRangeState?.(getSelectedCellMatrix(table, { rowId: newRowId, colId: cell.column.id }, { rowId: newRowId, colId: cell.column.id }))
               //   // rowVirtualizer.scrollToIndex(currentRowIndex + 1, { align: 'end', })
+
               // })
+
               // setTimeout(() => {
+
               //   rowVirtualizer.scrollToIndex(currentRowIndex + 1, { align: 'center', })
+
               // }, 100)
             }
             handleChange();
@@ -1099,22 +1098,24 @@ const TableBodyCellEdit = props => {
       }
     },
     style: {
-      cursor: 'pointer'
+      cursor: "pointer"
     },
     className: "ui-rc-table-row-expand"
   }, cell.row.getIsExpanded() ? /*#__PURE__*/React.createElement("span", {
-    className: 'ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded'
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
   }) : /*#__PURE__*/React.createElement("span", {
-    className: 'ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed'
+    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'
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
   }))), 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 && rowNumber === rangeState?.endRowIndex && cell.column.getIndex() === rangeState?.endColIndex && /*#__PURE__*/React.createElement("div", {
+  })), !isSelecting && !isEditing && rowRange &&
+  // rowNumber === rangeState?.endRowIndex &&
+  cell.row.id === rowRange[rowRange?.length - 1] && cell.column.getIndex() === rangeState?.endColIndex && /*#__PURE__*/React.createElement("div", {
     className: 'dragging-point',
     onMouseDown: e => {
       e.preventDefault();

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

@@ -34,6 +34,7 @@ const TableBodyRow = ({
     ref: node => rowVirtualizer.measureElement(node) //measure dynamic row height
     ,
     key: row.id
+
     // className={} ui-rc-table-row-selected
     ,
     className: classNames(`${prefix}-grid-row`, {

package/es/table-component/footer/TableFooterCell.d.ts

@@ -1,7 +1,7 @@
-import type { Column } from '@tanstack/react-table';
-import React from 'react';
+import type { Column } from "@tanstack/react-table";
+import React from "react";
 interface TableFooterCellProps<T> {
     column: Column<T, any>;
 }
-declare const TableFooterCell: <RecordType extends object>({ column, }: TableFooterCellProps<RecordType>) => React.JSX.Element;
+declare const TableFooterCell: <RecordType extends object>({ column }: TableFooterCellProps<RecordType>) => React.JSX.Element;
 export default TableFooterCell;

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

@@ -1,11 +1,11 @@
 // import type { VirtualItem, Virtualizer } from "@tanstack/react-virtual";
-import React, { useContext } from 'react';
+import React, { useContext } from "react";
 // import type { Person } from "../makeData";
-import classNames from 'classnames';
-import { numericFormatter } from 'react-numeric-component';
-import { sumByField } from "../../grid-component/hooks";
 import { checkDecimalSeparator, checkThousandSeparator, getCommonPinningStyles, getFormat, isEmpty } from "../hook/utils";
 import { TableContext } from "../useContext";
+import classNames from "classnames";
+import { sumByField } from "../../grid-component/hooks";
+import { numericFormatter } from "react-numeric-component";
 // import type { Person } from "../../tanstack-table/makeData";
 
 const TableFooterCell = ({
@@ -30,8 +30,6 @@ const TableFooterCell = ({
 
   // const sumValue = col.type === 'number' ? sumDataByField(filterDataByColumns4(dataSource, filterStates) as any[], col?.key as string) : 0
   const sumValue = col.type === 'number' ? sumByField(dataSource, col?.field) : 0;
-  // const sumValue = col.type === "number" ? 0 : 0
-
   const value = !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);
@@ -64,8 +62,8 @@ const TableFooterCell = ({
       display: 'flex',
       ...getCommonPinningStyles(column),
       width: column?.getSize() ?? column.getSize(),
-      backgroundColor: '#fafafa'
+      backgroundColor: "#fafafa"
     }
-  }, column.id !== 'id' && column.id !== 'selection_column' ? /*#__PURE__*/React.createElement(React.Fragment, null, col.summaryTemplate ? col.summaryTemplate(numberValue, col.field) : numericFormatter(cellValue, numericFormatProps)) : '');
+  }, column.id !== "id" && column.id !== "selection_column" ? /*#__PURE__*/React.createElement(React.Fragment, null, col.summaryTemplate ? col.summaryTemplate(numberValue, col.field) : numericFormatter(cellValue, numericFormatProps)) : '');
 };
 export default TableFooterCell;

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

@@ -1,9 +1,9 @@
-import type { Column } from "@tanstack/react-table";
-import { type Table } from "@tanstack/react-table";
-import { type Virtualizer } from "@tanstack/react-virtual";
-import React from "react";
+import type { Column } from '@tanstack/react-table';
+import { type Table } from '@tanstack/react-table';
+import { type Virtualizer } from '@tanstack/react-virtual';
+import React from 'react';
 interface TableHeadProps<T> {
-    tableContainerRef: React.RefObject<HTMLDivElement | null>;
+    tableContainerRef: React.RefObject<HTMLDivElement>;
     table: Table<T>;
     columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
     virtualPaddingLeft: number | undefined;

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

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { useContext } from 'react';
 import { TableContext } from "../useContext";
 import TableHeadRow from "./TableHeadRow";
 // import { getCommonPinningStyles } from '../hook/utils'
@@ -18,7 +18,7 @@ const TableHead = ({
     className: `${prefix}-grid-thead`,
     style: {
       // display: 'grid',
-      position: "sticky",
+      position: 'sticky',
       top: 0,
       zIndex: 1
     }

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

@@ -213,16 +213,16 @@ export const optionFontSize = [{
   label: '48'
 }];
 
-/**
- * Sort order for BaseTable
+/**
+ * Sort order for BaseTable
  */
 const SortOrder = {
-  /**
-   * Sort data in ascending order
+  /**
+   * Sort data in ascending order
    */
   ascend: 'Ascending',
-  /**
-   * Sort data in descending order
+  /**
+   * Sort data in descending order
    */
   descend: 'Descending'
 };

package/es/table-component/hook/useFilterOperator.d.ts

@@ -1,4 +1,4 @@
-import type { Table } from '@tanstack/react-table';
+import { Table } from '@tanstack/react-table';
 import type { FilterOperator } from '../type';
 export declare function useFilterOperator(table: Table<any>): {
     setFilterOperator: (columnId: string, operator: FilterOperator) => void;

package/es/table-component/hook/utils.d.ts

@@ -40,7 +40,7 @@ export declare function groupArrayByColumns(arr: any[], columns: string[] | unde
 export declare const flatColumns2: <RecordType>(columns: ColumnsTable<RecordType>) => ColumnsTable<RecordType>;
 export declare const checkThousandSeparator: (thousandSeparator: string | undefined, decimalSeparator: string | undefined) => string;
 export declare const checkDecimalSeparator: (thousandSeparator: string | undefined, decimalSeparator: string | undefined) => string;
-export declare const getFixedFields: <T>(columns: ColumnsTable<T>, type: "left" | "right") => string[];
+export declare const getFixedFields: <T>(columns: ColumnsTable<T>, type: 'left' | 'right') => string[];
 export declare function areStringArraysEqual(a: string[], b: string[]): boolean;
 export declare const getDefaultOperator: (col: ColumnTable) => FilterOperator;
 export declare function isEqualSet(setA: any, setB: any): boolean;
@@ -79,7 +79,7 @@ export declare const isNullOrUndefined: (d: any) => boolean;
 export declare const isObjEmpty: (obj: any) => boolean;
 export declare const isDisable: <T>(column: ColumnTable<T>, rowData?: any) => boolean;
 export declare const customWeekStartEndFormat: (value: any, weekFormat: string) => string;
-export declare const parseBooleanToValue: (value: boolean, type: "boolean" | "number") => number | boolean;
+export declare const parseBooleanToValue: (value: boolean, type: 'boolean' | 'number') => number | boolean;
 export declare const isNameColor: (strColor: string) => boolean;
 export declare const isColor: (value: string) => boolean;
 export declare const genPresets: (presets?: import("@ant-design/colors").PalettesProps) => import("antd/es/color-picker/interface").PresetsItem[];
@@ -135,3 +135,4 @@ export declare const convertToObjTrue: (arr: any) => {
 };
 export declare const getDiffent2Array: (a: any[], b: any[]) => any[];
 export declare function isTree(arr: any[]): boolean;
+export declare function findFirst(items: Column<any>[]): Column<any, unknown>;