Header Text Wrapping

HeaderWrapPlugin displays long header labels on multiple lines and automatically sizes the header height. It works with column resizing, sorting, filter buttons, grouped headers, and pinned columns.

Enable wrapping

import { HeaderWrapPlugin } from '@revolist/revogrid-pro';
import '@revolist/revogrid-pro/styles.css';

const grid = document.createElement('revo-grid');
grid.plugins = [HeaderWrapPlugin];
grid.wrapHeader = true;
grid.columns = [
  { prop: 'department', name: 'Employee Department Name', size: 100 },
  { prop: 'id', name: 'Employee Identifier', size: 100, wrapHeader: false },
];

Wrapping defaults to false. Set wrapHeader: true on individual columns to wrap only those labels, or set grid.wrapHeader = true and opt out with wrapHeader: false. Direct assignments to grid.wrapHeader are reactive. grid.additionalData = { wrapHeader: true } is also supported.

Column groups

Groups accept the same wrapHeader override. A group override applies to its own label; each child independently inherits the grid default.

grid.columns = [
  {
    name: 'Employee Information and Organizational Details',
    wrapHeader: true,
    children: [
      { prop: 'department', name: 'Department', size: 100 },
      {
        prop: 'manager',
        name: 'Responsible Department Manager',
        size: 100,
        wrapHeader: true,
      },
    ],
  },
];

All header tiers use a shared height at least as large as the theme’s normal header height. This keeps pinned bands aligned. Height grows and shrinks after column resizing and configuration changes. As horizontally virtualized columns appear, their rendered labels are measured; previous measurements are retained so scrolling away from a tall label does not shrink the header.

Sorting and filtering keep their normal configuration. Their header controls reserve space beside the wrapped label. Existing columnProperties and columnTemplate callbacks are preserved. Custom templates should allow natural content height to participate in measurement rather than fixing their own height.

For headers that also span unused group levels, register MultiRowHeaderPlugin and enable grid.multiRowHeader as described in Multi Row Headers.