Inserting a Row Above the FlexSheet Header in Angular

Background

A bound Wijmo FlexSheet displays the data source’s column names in the first sheet row. To show a report date above those names, wait for FlexSheet to create the bound header, then insert a styled row at the top of the sheet.

Steps to Complete

1. Install the required packages.
2. Load the Wijmo stylesheet.
3. Import the Angular and Wijmo dependencies.
4. Create a row with header styling.
5. Insert the row above the bound header.
6. Write the label and date into the new row.
7. Bind the data and insert the row after loading.

Getting Started

Install required packages

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

• mescius/wijmo.grid provides the Row class, mescius/wijmo.grid.sheet provides the core FlexSheet APIs and HeaderRow, mescius/wijmo.angular2.grid.sheet provides the Angular module and <wj-flex-sheet> component, and mescius/wijmo.styles supplies the stylesheet for the header styling.

Load the Wijmo stylesheet

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

• Add this import to your global src/styles.css so the wj-header class applies the Wijmo theme’s header styling.

Import the Angular and Wijmo dependencies

import { Component, OnDestroy } from '@angular/core';
import { Row } from '@mescius/wijmo.grid';
import { FlexSheet, HeaderRow } from '@mescius/wijmo.grid.sheet';
import { WjGridSheetModule } from '@mescius/wijmo.angular2.grid.sheet';

• WjGridSheetModule makes <wj-flex-sheet> available in the Angular template, while Row, FlexSheet, and HeaderRow support the row insertion logic.

Create a row with header styling

function createDateRow(): Row {
  const row = new Row();
  row.cssClass = 'wj-header';
  row.align = 'left';
  return row;
}

• Add this helper below the imports. It creates a row, applies the Wijmo theme’s wj-header class, and aligns its contents to the left.

Insert the row above the bound header

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

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

• Check that the first row is a HeaderRow before inserting the date row. This confirms the bound header is in place and prevents duplicate date rows if the handler runs again.
• Inserting at index 0 moves the bound header to the second row, then writeDate populates the new first row.

Write the label and date into the new row

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

• setCellData writes Date: to A1 and the current date to B1. Passing false as the fourth argument tells FlexSheet to keep the supplied values without converting them to the bound columns’ data types.

Bind the data and insert the row after loading

@Component({
  selector: 'app-report-sheet',
  standalone: true,
  imports: [WjGridSheetModule],
  template: `
    <wj-flex-sheet
      #sheet
      style="height: 320px"
      (initialized)="initializeSheet(sheet)"
      (loadedRows)="handleLoadedRows(sheet)">
    </wj-flex-sheet>
  `,
})
export class ReportSheetComponent implements OnDestroy {
  private timer?: ReturnType<typeof setTimeout>;

  initializeSheet(sheet: FlexSheet): void {
    sheet.addBoundSheet('Country', [
      { country: 'US', product: 'Widget', amount: 125 },
      { country: 'Germany', product: 'Gadget', amount: 240 },
    ]);
  }

  handleLoadedRows(sheet: FlexSheet): void {
    clearTimeout(this.timer);
    this.timer = setTimeout(() => insertDateRow(sheet), 10);
  }

  ngOnDestroy(): void {
    clearTimeout(this.timer);
  }
}

• Add this component below the helpers. The initialized handler binds the sample data. When loadedRows fires, setTimeout defers the insertion so FlexSheet can finish placing the bound header. ngOnDestroy cancels any pending insertion when Angular removes the component.

With this setup, Angular 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!