FreeGridv1.15.1English

헤더 높이·줄바꿈·끌어서 숨기기

긴 헤더를 줄바꿈하고 헤더 높이가 내용에 맞게 늘어나게 하며, 헤더를 위로 끌어 빼면 컬럼을 숨기고, 숨길 수 있는 컬럼을 정합니다.

실행 예제헤더

긴 헤더 맞추기, 헤더를 위로 끌어 숨기기.

이 데모의 코드
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;
}

긴 헤더

wrapHeaderText를 주면 헤더 글자가 여러 줄로 줄바꿈됩니다(컬럼 하나, 또는 그리드 옵션 wrapHeaderText: true로 전체). 그것만으로는 세 줄에서 멈추고, autoHeaderHeight: true를 켜면 가장 긴 헤더에 맞게 헤더가 늘어나며 컬럼이 넓어지면 다시 줄어듭니다.

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,
});
  • 헤더 높이는 가장 긴 헤더에 여백을 더한 값이고, 다단 헤더는 헤더 줄마다 늘어납니다.
  • headerHeight는 시작 높이이자 최소 높이입니다.
  • 컬럼 너비나 글꼴을 바꾸면 높이를 다시 맞춥니다.

헤더를 위로 끌어 컬럼 숨기기

  1. 헤더를 누른 채 위로, 헤더 밖으로(약 24px 위) 끕니다.
  2. 끌고 있는 이름이 빨갛게 바뀌고 줄이 그어지면, 놓을 때 컬럼이 숨겨집니다.
  3. 놓으면 컬럼이 숨겨지고 columnVisible이 발생합니다. 컬럼 선택, 메뉴의 컬럼 초기화, setColumnVisible로 되돌립니다.
  • 옆으로 끌면 여전히 컬럼이 옮겨지고, 그룹 패널 위에서는 여전히 묶입니다.
  • lockVisible: true 컬럼과 마지막 남은 컬럼은 이렇게 숨겨지지 않습니다.
  • dragToHide: false로 끕니다.
  • stateKey를 쓰면 숨긴 컬럼이 새로고침 뒤에도 숨겨져 있습니다 — 레이아웃 유지 참고.
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));

헤더의 다른 기능