es-grid-template/es/table-component/footer/TableFooterCell.js

es-grid-template

import React, { useContext } from "react";
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";
const TableFooterCell = ({
  column
}) => {
  const isPinned = column.getIsPinned();
  const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
  const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');
  const {
    prefix,
    format,
    dataSource
  } = useContext(TableContext);
  const col = column.columnDef.meta ?? {};
  const colFormat = typeof col.format === 'function' ? col.format({}) : col.format;
  const cellFormat = 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' ? sumByField(dataSource, col?.field) : 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);
  const numericFormatProps = {
    thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
    decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
    allowNegative: cellFormat?.allowNegative ?? false,
    prefix: cellFormat?.prefix,
    suffix: cellFormat?.suffix,
    decimalScale: dec,
    fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
  };
  return /*#__PURE__*/React.createElement("div", {
    // ref={el => {
    //   if (el) columnVirtualizer.measureElement(el)
    // }}
    // data-index={header.id}

    className: classNames(`${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,
      [`${prefix}-grid-cell-text-right`]: true
    }),
    key: column.id
    // colSpan={header.colSpan}
    ,
    style: {
      display: 'flex',
      ...getCommonPinningStyles(column),
      // width: column?.getSize() ?? column.getSize(),
      minWidth: column?.getSize()
      // 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)) : '');
};
export default TableFooterCell;