Inserting a Row Above the FlexSheet Header in React

Background

In a bound Wijmo FlexSheet, the first sheet row displays the data source’s column names. To display a report date above those names, wait until FlexSheet has created the bound header, then insert a styled row at the top of the sheet.

Steps to Complete

1. Install the Wijmo packages.
2. Insert a row above the bound header.
3. Populate the new row.
4. Render FlexSheet and handle loadedRows.

Getting Started

Install the Wijmo packages

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

• mescius/wijmo.grid provides the Row class used to create the new date row.
• mescius/wijmo.grid.sheet provides the APIs for binding data and writing cell values, plus the HeaderRow class used to identify the bound data header.
• mescius/wijmo.react.grid.sheet provides the <FlexSheet> component that renders the spreadsheet in React.
• mescius/wijmo.styles provides the stylesheet that gives the inserted row its header styling through the wj-header class.

Insert a row above the bound header

import { useEffect, useRef } from "react";
import { Row } from "@mescius/wijmo.grid";
import { HeaderRow } from "@mescius/wijmo.grid.sheet";
import { FlexSheet } from "@mescius/wijmo.react.grid.sheet";
import "@mescius/wijmo.styles/wijmo.css";

function insertDateRow(sheet) {
  if (!(sheet.rows[0] instanceof HeaderRow)) {
    return;
  }

  const row = new Row();
  row.cssClass = "wj-header";
  row.align = "left";

  sheet.rows.splice(0, 0, row);
  writeDate(sheet);
}

• Add the Wijmo imports and helper.
• The helper checks that the first row is the bound HeaderRow before inserting a new row at index 0. That check also prevents duplicate date rows if loadedRows fires again while the date row is already present. The wj-header class applies the Wijmo theme’s header styling.

Populate the new row

function writeDate(sheet) {
  sheet.setCellData(0, 0, "Date:", false);
  sheet.setCellData(0, 1, new Date(), false);
}

• The two setCellData calls store Date: in A1 and the current date in B1. Passing false as the fourth argument preserves the supplied values without converting them to the bound columns’ data types.

Render FlexSheet and handle loadedRows

const reportData = [
  { country: "US", product: "Widget", amount: 125 },
  { country: "Germany", product: "Gadget", amount: 240 },
];

function initializeSheet(sheet) {
  sheet.addBoundSheet("Country", reportData);
}

export default function ReportSheet() {
  const timer = useRef(null);

  useEffect(() => {
    return () => clearTimeout(timer.current);
  }, []);

  function handleLoadedRows(sheet) {
    clearTimeout(timer.current);
    timer.current = setTimeout(() => insertDateRow(sheet), 10);
  }

  return (
    <FlexSheet
      initialized={initializeSheet}
      loadedRows={handleLoadedRows}
      style={{ height: 320 }}
    />
  );
}

• The loadedRows prop connects the React component to Wijmo’s row-loading event. The handler defers insertion so FlexSheet can finish placing the bound header. The initialized callback binds the sample data, and the effect clears any pending timer when the component unmounts.

With this setup, the React FlexSheet waits for the bound rows to load, inserts a styled row above the data header, and writes the current date into that row.

Happy coding!