Auto Resize FlexGrid Header Rows After Column Resizing in React

Background

In React, you can make a Wijmo FlexGrid header row grow after a column is resized by applying text wrapping to the column header cells and then calling autoSizeRow(0, true) when the grid loads and when a column resize finishes.

Steps to Complete

1. Import the React FlexGrid components.
2. Add wrapping to the column header cells.
3. Resize the header row after rendering and column resizing.

Getting Started

Import the React FlexGrid components

import '@mescius/wijmo.styles/wijmo.css';
import { FlexGrid, FlexGridColumn } from '@mescius/wijmo.react.grid';
import { toggleClass } from '@mescius/wijmo';
import { CellType } from '@mescius/wijmo.grid';

• This imports the Wijmo styles, React grid components, and helper APIs used to identify and format the column header cells.

Add wrapping to the column header cells

function formatHeaderCell(grid, e) {
  toggleClass(e.cell, 'wj-wrap', e.panel.cellType === CellType.ColumnHeader);
}

• The formatItem event runs when FlexGrid creates cells. This code adds the wj-wrap class only to column header cells so long header text can wrap.

Resize the header row after rendering and column resizing

function autoSizeHeaderRow(grid) {
  grid.autoSizeRow(0, true);
}

• This resizes row 0 in the column header panel. The second argument, true, tells FlexGrid that the row index refers to the header area.

Combined code

import React from 'react';
import '@mescius/wijmo.styles/wijmo.css';
import { FlexGrid, FlexGridColumn } from '@mescius/wijmo.react.grid';
import { toggleClass } from '@mescius/wijmo';
import { CellType } from '@mescius/wijmo.grid';

const data = [
  {
    id: 1,
    customerName: 'Contoso Retail',
    orderDescription: 'Replacement scanners for checkout lanes',
    orderDate: '2026-09-18'
  },
  {
    id: 2,
    customerName: 'Northwind Traders',
    orderDescription: 'Display panels for service counters',
    orderDate: '2026-09-19'
  }
];

export default function App() {
  function formatHeaderCell(grid, e) {
    toggleClass(e.cell, 'wj-wrap', e.panel.cellType === CellType.ColumnHeader);
  }

  function autoSizeHeaderRow(grid) {
    grid.autoSizeRow(0, true);
  }

  return (
    <FlexGrid
      itemsSource={data}
      autoGenerateColumns={false}
      formatItem={formatHeaderCell}
      initialized={autoSizeHeaderRow}
      loadedRows={autoSizeHeaderRow}
      resizedColumn={autoSizeHeaderRow}
    >
      <FlexGridColumn binding="id" header="ID" width={60} />
      <FlexGridColumn binding="customerName" header="Customer Name" width={140} />
      <FlexGridColumn
        binding="orderDescription"
        header="Detailed Order Description"
        width={160}
      />
      <FlexGridColumn binding="orderDate" header="Order Date" width={120} />
    </FlexGrid>
  );
}

With this setup, long column headers wrap when the column becomes narrow, and the header row automatically resizes to fit the wrapped text.

Happy coding!