Displaying Static Text Below the FlexGrid Aggregate Footer in React

Background

Wijmo FlexGrid can display aggregate values in the columnFooters panel by adding a GroupRow. In some cases, you may also need to show static text, notes, or disclaimer content below the aggregate footer row.

This can be done by adding a second row to the columnFooters panel, setting the static text in the first cell of that row, clearing the remaining cells, and using CSS so the text visually spans across the footer area.

Steps to Complete

1. Install and import the required Wijmo React packages.
2. Create the FlexGrid data.
3. Add the aggregate and static footer rows.
4. Render the FlexGrid.
5. Use CSS to display the static text across the footer row.

Getting Started

Install and import the required Wijmo React packages

npm install @mescius/wijmo.react.grid @mescius/wijmo.grid @mescius/wijmo.styles

import React, { useCallback, useMemo } from 'react';
import ReactDOM from 'react-dom/client';
import '@mescius/wijmo.styles/wijmo.css';

import { FlexGrid, FlexGridColumn } from '@mescius/wijmo.react.grid';
import { GroupRow } from '@mescius/wijmo.grid';
import './style.css';

• The wijmo.react.grid package provides the React FlexGrid component, while wijmo.grid provides the GroupRow class used for footer rows.

Create the FlexGrid data

function getData(count) {
  const countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
  const data = [];

  for (let i = 0; i < count; i++) {
    data.push({
      id: i,
      country: countries[i % countries.length],
      date: new Date(2014, i % 12, i % 28),
      amount: Math.random() * 10000,
      active: i % 4 === 0
    });
  }

  return data;
}

• This sample data includes an amount field, which will be used to display a Sum aggregate in the footer.

Add the aggregate and static footer rows

const footerNote =
  'This is static footer text that is not tied to a single column.\nUse this row for notes, disclaimers, or additional instructions.';

function App() {
  const data = useMemo(() => getData(100), []);

  const initializedGrid = useCallback((grid) => {
    grid.columnFooters.rows.push(new GroupRow());
    grid.bottomLeftCells.setCellData(0, 0, 'Σ');

    const noteRow = new GroupRow();
    noteRow.height = 52;

    const noteRowIndex = grid.columnFooters.rows.length;
    grid.columnFooters.rows.push(noteRow);

    grid.formatItem.addHandler((s, e) => {
      if (e.panel !== s.columnFooters) {
        return;
      }

      e.cell.classList.remove(
        'static-footer-note',
        'static-footer-cell',
        'static-footer-cell-no-border'
      );

      if (e.row === noteRowIndex) {
        e.cell.classList.add('static-footer-cell');

        if (e.col === 0) {
          e.cell.textContent = footerNote;
          e.cell.classList.add('static-footer-note');
        } else {
          e.cell.textContent = '';
        }

        if (e.col < s.columns.length - 1) {
          e.cell.classList.add('static-footer-cell-no-border');
        }
      }
    });
  }, []);

• The first GroupRow displays aggregate values. The second GroupRow is used for the static footer text.
• The formatItem event places the static text in the first cell of the second footer row and clears the other cells so aggregate values are not shown in that row.

Render the FlexGrid

  return (
    <FlexGrid
      className="custom-grid"
      autoGenerateColumns={false}
      initialized={initializedGrid}
      itemsSource={data}
    >
      <FlexGridColumn binding="id" header="ID" width={60} isReadOnly={true} />
      <FlexGridColumn binding="country" header="Country" />
      <FlexGridColumn binding="date" header="Date" width={200} format="d" />
      <FlexGridColumn binding="amount" header="Amount" format="c0" aggregate="Sum" />
      <FlexGridColumn binding="active" header="Active" />
    </FlexGrid>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

• The aggregate="Sum" setting on the amount column displays the aggregate value in the first footer row.
• The static note appears below the aggregate footer row.

Use CSS to display the static text across the footer row

body {
  margin: 40px;
}

.custom-grid {
  width: 100%;
  height: 450px;
}

.wj-flexgrid .wj-colfooters .static-footer-note {
  overflow: visible !important;
  z-index: 1 !important;
  white-space: pre;
  line-height: 1.4;
}

.wj-flexgrid .wj-colfooters .static-footer-cell-no-border {
  border-right: none;
}

• The first footer cell is allowed to overflow so the static text can render over the empty cells to its right.
• The right borders are removed from the static footer row cells to make the row appear as one continuous note area.

With this setup, the React FlexGrid displays aggregate values in the first footer row and static text below it in a second footer row.

Happy coding!