FreeGridv1.15.1한국어

Header height, wrapping and drag to hide

Wrap long header labels and let the header grow to fit them, hide a column by dragging its header up out of the header, and control which columns can be hidden.

Live demoHeaders

Long labels that fit, and drag a header up to hide it.

Code for this demo
import { createGrid, type ColumnDef, type Row } from '@freegridjs/core';
import { makeRows } from '../data';
import { button, separator, text, tr, type DemoContext } from '../ui';

export default function mount(ctx: DemoContext) {
  const h = (en: string, ko: string) => tr(ctx.lang, { en, ko });
  const grid = createGrid(ctx.host, {
    columns: [
      { field: 'id', header: 'ID', type: 'number', width: 70, lockVisible: true },
      { field: 'name', header: h('Customer name as written on the contract', '계약서에 적힌 고객 이름'), width: 140 },
      { field: 'q1', header: h('Revenue in the first quarter (KRW, VAT included)', '1분기 매출(원, 부가세 포함)'), type: 'number', format: '#,##0', width: 120 },
      { field: 'q2', header: h('Revenue in the second quarter (KRW, VAT included)', '2분기 매출(원, 부가세 포함)'), type: 'number', format: '#,##0', width: 120 },
      { field: 'country', header: h('Country', '국가'), width: 120 },
    ],
    data: makeRows(300), locale: ctx.lang, wrapHeaderText: true, autoHeaderHeight: true,
  });
  grid.on('columnVisible', e => ctx.log(`columnVisible: ${e.colId} ${e.visible}`));
  text(ctx, h('The header grows for the long labels; widen a column and it shrinks. Drag a header up out of the header to hide it (ID is locked).',
    '긴 헤더에 맞춰 헤더가 높아지고, 컬럼을 넓히면 줄어듭니다. 헤더를 위로 끌어 헤더 밖으로 빼면 숨겨집니다(ID는 잠김).'));
  separator(ctx);
  button(ctx, h('Reset columns', '컬럼 초기화'), () => grid.resetColumnState());
  return grid;
}

Long labels

wrapHeaderText lets a header label wrap onto more lines (on one column, or wrapHeaderText: true in the grid options for all). Without more, it stops at three lines. autoHeaderHeight: true grows the header to fit the longest label instead, and shrinks it back when columns get wider.

createGrid(el, {
  columns: [
    { field: 'q1', header: 'Revenue in the first quarter (KRW, VAT included)', width: 120 },
    { field: 'q2', header: 'Revenue in the second quarter (KRW, VAT included)', width: 120 },
  ],
  data,
  wrapHeaderText: true,
  autoHeaderHeight: true,
});
  • The header row height is the tallest label plus padding; grouped headers grow per header row.
  • headerHeight is the height it starts from (and never goes below).
  • Resizing a column or changing the font fits the height again.

Drag a header up to hide the column

  1. Press on a header and drag it up, out of the header (about 24 px above it).
  2. The dragged label turns red and is struck through: dropping now hides the column.
  3. Let go. The column is hidden (columnVisible fires). Bring it back from the column chooser, the menu (Reset columns) or setColumnVisible.
  • Dragging sideways still moves the column; over the group panel it still groups.
  • Columns with lockVisible: true, and the last visible column, are never hidden this way.
  • dragToHide: false turns it off.
  • With stateKey, the hidden column stays hidden after a reload — see Keeping the layout.
createGrid(el, {
  columns: [
    { field: 'id', lockVisible: true },   // cannot be hidden (by dragging or the menu)
    { field: 'name' }, { field: 'email' },
  ],
  data,
  // dragToHide: false,
});
grid.on('columnVisible', e => console.log(e.colId, e.visible));

More for headers