Displaying Static Text Below the FlexGrid Aggregate Footer in Vue

Background

Wijmo FlexGrid can display aggregate values in the columnFooters panel by adding a GroupRow. You can also add another footer row below the aggregate row to display static text, notes, or disclaimer content.

To show the text across all columns, place the text in the first cell of the extra footer row, clear the remaining cells, and use CSS so the text visually spans the footer area.

Steps to Complete

1. Install and import the required Wijmo Vue packages.
2. Import the Wijmo stylesheet.
3. Create the FlexGrid data.
4. Create the Vue FlexGrid markup.
5. Add the aggregate footer row.
6. Add a second footer row for static text.
7. Use CSS to display the static text across the footer row.

Getting Started

Install and import the required Wijmo Vue packages

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

• wijmo.vue2.grid provides the Vue FlexGrid wrapper.
• wijmo.grid provides core grid classes such as GroupRow.
• @mescius/wijmo provides shared Wijmo APIs, including the Aggregate enum.

Import the Wijmo stylesheet

import { createApp } from 'vue';
import App from './App.vue';

import '@mescius/wijmo.styles/wijmo.css';
import './style.css';

createApp(App).mount('#app');

• The Wijmo stylesheet is required for the FlexGrid layout, borders, headers, and footer panels to display correctly.

Create the FlexGrid data

<script setup>
import { ref } from 'vue';
import { Aggregate } from '@mescius/wijmo';
import { GroupRow } from '@mescius/wijmo.grid';
import { WjFlexGrid, WjFlexGridColumn } from '@mescius/wijmo.vue2.grid';

const data = ref(getData(100));

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;
}
</script>

• This creates sample data for the grid. The amount field will be used to show a sum in the aggregate footer row.

Create the Vue FlexGrid markup

<template>
  <wj-flex-grid
    class="custom-grid"
    :items-source="data"
    :auto-generate-columns="false"
    :initialized="initGrid"
  >
    <wj-flex-grid-column header="ID" binding="id" :width="70" />
    <wj-flex-grid-column header="Country" binding="country" />
    <wj-flex-grid-column header="Date" binding="date" :width="200" format="d" />
    <wj-flex-grid-column
      header="Amount"
      binding="amount"
      format="c0"
      :aggregate="Aggregate.Sum"
    />
    <wj-flex-grid-column header="Active" binding="active" />
  </wj-flex-grid>
</template>

• The grid binds to the data array.
• The amount column uses Aggregate.Sum, which allows FlexGrid to display the total in the footer.
• The initialized event calls initGrid after the grid is created.

Add the aggregate footer row

function initGrid(grid) {
  grid.columnFooters.rows.push(new GroupRow());
  grid.bottomLeftCells.setCellData(0, 0, 'Σ');
}

• grid.columnFooters.rows.push(new GroupRow()) adds an aggregate footer row.
• Since the amount column has Aggregate.Sum, its total appears in this footer row.
• bottomLeftCells.setCellData(0, 0, 'Σ') displays the sigma symbol in the footer row header area.

Add a second footer row for static text

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 initGrid(grid) {
  grid.columnFooters.rows.push(new GroupRow());
  grid.bottomLeftCells.setCellData(0, 0, 'Σ');

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

  const staticTextRowIndex = grid.columnFooters.rows.length;
  grid.columnFooters.rows.push(staticTextRow);

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

    if (e.row === staticTextRowIndex) {
      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 = '';
      }
    }
  });
}

• The first footer row displays aggregate values.
• The second footer row is used only for the static note.
• The formatItem event places the note in the first cell of the second footer row and clears the remaining cells.

Use CSS to display the static text across the footer row

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

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

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

• overflow: visible allows the note in the first footer cell to display over the empty cells to the right.
• z-index: 1 ensures the note appears above adjacent empty footer cells.
• white-space: pre-line preserves the line break in the static note.
• Removing the right borders makes the row appear as one continuous footer note.

With this setup, the Vue FlexGrid displays an aggregate footer row first, followed by a static text footer row that appears across all columns.

Happy coding!