es-grid-template/es/table-virtuoso/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 {
    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("th", {
    className: classNames(`${prefix}-grid-cell`, {
      // [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
      // [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
      // [`${prefix}-grid-cell-text-right`]: true
    })
    // key={column.id}
    ,
    style: {
      // display: 'flex',
      ...getCommonPinningStyles(column),
      minWidth: column?.getSize(),
      height: 40
    }
  }, 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;