es-grid-template 1.7.36 → 1.7.38

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>;
+    tableContainerRef: React.RefObject<HTMLDivElement | null>;
     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,7 +111,6 @@ const renderSelection = args => {
   } = args;
   return /*#__PURE__*/React.createElement("div", {
     style: {
-
       // paddingLeft: `${row.depth * 2}rem`,
     }
   }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/React.createElement("div", {
@@ -149,14 +148,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()
@@ -191,28 +190,53 @@ 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");
@@ -221,7 +245,7 @@ const TableBodyCell = props => {
         cell.row.getToggleSelectedHandler()(event);
         setIsSelectionChange({
           isChange: true,
-          type: 'rowSelected',
+          type: "rowSelected",
           rowData: cell.row.original
         });
       }
@@ -233,11 +257,6 @@ 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 React from "react";
-import type { VirtualItem, Virtualizer } from "@tanstack/react-virtual";
+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';
 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,
 // 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 React from 'react';
+import { nonActionColumn } from "../hook/constant";
 import { TableContext } from "../useContext";
 import EditableCell from "./EditableCell";
-import { nonActionColumn } from "../hook/constant";
 // import { nonActionColumn } from "../hook/constant";
 
 const renderCellIndex = props => {
@@ -83,7 +83,6 @@ const renderSelection = args => {
   } = args;
   return /*#__PURE__*/React.createElement("div", {
     style: {
-
       // paddingLeft: `${row.depth * 2}rem`,
     }
   }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/React.createElement("div", {
@@ -110,15 +109,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'
@@ -190,6 +189,8 @@ const TableBodyCellEdit = props => {
     handleCellClick,
     setIsSelectionChange,
     selectionSettings
+
+    // isFullScreen
   } = React.useContext(TableContext);
   const expandIconColumnIndex = expandable?.expandIconColumnIndex;
   const record = cell.row.original;
@@ -208,13 +209,15 @@ 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);
@@ -259,7 +262,9 @@ 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);
@@ -333,7 +338,9 @@ 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);
@@ -492,7 +499,6 @@ const TableBodyCellEdit = props => {
       }
     }
     if (editType === 'select') {
-
       // setSearchValue(e.key)
       // setOpen(true)
     }
@@ -504,8 +510,11 @@ 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()
@@ -710,7 +719,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`, {
@@ -774,21 +783,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`, {
@@ -813,7 +822,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 `, {
@@ -855,16 +864,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,
@@ -940,14 +949,30 @@ 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) {
+        if (canEdit && focusedCell?.colId !== cell.column.id) {
           handleCellClick?.(rowNumber, record, columnMeta, record[rowKey], record[columnMeta.field ?? '']);
         }
       } else {
@@ -969,15 +994,6 @@ const TableBodyCellEdit = props => {
 
         // reset?.()
       }
-
-      // if (record[rowKey] !== editingKey) {
-
-      //   setTimeout(() => {
-      //     // setEditingKey?.('')
-      //     reset?.()
-      //   })
-
-      // }
     },
     onMouseEnter: () => handleMouseEnter(cell.row.id, cell.column.id),
     onMouseUp: e => handleMouseUp(e),
@@ -1017,25 +1033,17 @@ 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();
@@ -1091,15 +1099,15 @@ 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 => {

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

@@ -34,7 +34,6 @@ 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,6 +30,8 @@ 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);
@@ -62,8 +64,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>;
+    tableContainerRef: React.RefObject<HTMLDivElement | null>;
     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 { Table } from '@tanstack/react-table';
+import type { 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[];