FreeGridv1.15.1English

메뉴로 만드는 계산 컬럼

사용자가 직접 수식 컬럼을 추가: 필드를 눌러 넣고 미리보기와 오류를 보며 만들고, 메뉴에서 편집·삭제하며, stateKey로 유지하거나 코드로 추가합니다.

실행 예제계산 컬럼

컬럼 메뉴에서 금액 = qty * price 추가.

이 데모의 코드
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 data = makeRows(300).map((r, i) => ({ ...r, qty: 1 + (i % 9), price: 1000 + (i * 137) % 9000, cost: 600 + (i * 71) % 5000 }));
  const grid = createGrid(ctx.host, {
    columns: [
      { field: 'name', header: h('Name', '이름'), width: 150 },
      { field: 'qty', header: h('Qty', '수량'), type: 'number', width: 90, editable: true },
      { field: 'price', header: h('Price', '단가'), type: 'number', format: '#,##0', width: 110, editable: true },
      { field: 'cost', header: h('Cost', '원가'), type: 'number', format: '#,##0', width: 110, editable: true },
    ],
    data, locale: ctx.lang, headerContextMenu: true,
  });
  grid.on('calculatedColumnsChange', e => ctx.log(JSON.stringify(e.columns)));
  button(ctx, h('Add calculated column…', '계산 컬럼 추가…'), () => grid.openCalculatedColumnDialog());
  button(ctx, h('Add Amount = qty * price', '금액 = qty * price 추가'), () => grid.addCalculatedColumn({ id: 'amount', header: h('Amount', '금액'), formula: '=qty*price', format: '#,##0' }));
  button(ctx, h('Add Margin %', '마진율 추가'), () => grid.addCalculatedColumn({ id: 'margin', header: h('Margin', '마진율'), formula: '=(price-cost)/price', format: '0.0%' }));
  text(ctx, h('Or use the column menu (⋮) → Add calculated column…; a calculated column\'s own menu edits or removes it.',
    '컬럼 메뉴(⋮) → 계산 컬럼 추가…도 됩니다. 계산 컬럼 자신의 메뉴에서 편집·삭제합니다.'));
  return grid;
}

계산 컬럼은 그리드가 실행되는 동안 사용자가 컬럼 메뉴에서, 또는 코드로 만드는 수식 컬럼입니다. 다른 컬럼처럼 정렬·필터·묶기·집계·내보내기가 되고, 읽는 필드를 고치면 값이 따라 바뀝니다.

추가 창

  1. 아무 컬럼의 컬럼 메뉴(⋮)에서 계산 컬럼 추가…를 고릅니다. headerContextMenu를 켜면 헤더 우클릭 메뉴에도 있습니다.
  2. 이름을 씁니다(헤더가 됩니다).
  3. =로 시작하는 수식을 씁니다. 필드 칩을 누르면 커서 자리에 이름이 들어갑니다.
  4. 미리보기가 입력하는 대로 앞 다섯 행의 결과를 보여 줍니다. 없는 필드나 문법 오류는 안내가 나오고 저장되지 않습니다.
  5. 저장(또는 Ctrl+Enter)하면 맨 끝에 컬럼이 추가됩니다.

계산 컬럼 자신의 메뉴에는 계산 컬럼 편집…(같은 창, 삭제 버튼 포함)과 계산 컬럼 삭제가 있습니다.

코드로

const id = grid.addCalculatedColumn({ header: 'Amount', formula: '=qty * price' });         // 'calc1'
grid.addCalculatedColumn({ id: 'margin', header: 'Margin', formula: '=(price - cost) / price', format: '0.0%' });
grid.addCalculatedColumn({ id: 'label', header: 'Label', formula: '=name & " (" & city & ")"', type: 'text' });

grid.getCalculatedColumns();          // [{ id, header, formula, type?, format? }]
grid.addCalculatedColumn({ id: 'margin', header: 'Margin %', formula: '=(price - cost) / price * 100' });  // same id: replaced
grid.removeCalculatedColumn('label');
grid.openCalculatedColumnDialog();    // from your own button; openCalculatedColumnDialog('margin') edits one
grid.on('calculatedColumnsChange', e => save(e.columns));
이름타입설명
addCalculatedColumn({ id?, header, formula, type?, format? })string | null컬럼 추가(같은 id면 교체). id를 돌려주고, 수식 오류나 없는 필드가 있으면 null. type은 'number'(기본) 또는 'text'.
removeCalculatedColumn(id)void삭제.
getCalculatedColumns()CalculatedColumn[]저장할 계산 컬럼 목록.
openCalculatedColumnDialog(id?)void추가 창, 또는 한 컬럼의 편집 창.
calculatedColumns (option)booleanfalse면 메뉴 항목을 숨깁니다(API는 동작).
calculatedColumnsChange (event){ columns }추가·교체·삭제 뒤 발생.

유지하기

  • stateKey는 기본으로 계산 컬럼을 너비·위치와 함께 저장해 새로고침 뒤에 돌아옵니다.
  • getState()의 calculatedColumns에 들어 있고, setState()가 되돌립니다(컬럼 순서보다 먼저 적용되어 순서가 맞음).
  • 수식 페이지의 모든 함수(ROUND, IF, SUM, PREV …)를 쓸 수 있습니다.

이 페이지에 대한 질문

최종 사용자가 직접 계산 컬럼을 추가할 수 있나요?

네. 컬럼 메뉴의 계산 컬럼 추가…를 누르면 이름, =qty*price 같은 수식(필드를 눌러 넣기), 앞 행 미리보기가 있는 창이 열립니다. 만든 컬럼은 다른 컬럼처럼 정렬·필터·내보내기가 됩니다.