FreeGridv1.15.1English

채우기 핸들

선택 영역 모서리를 끌어 편집 가능한 셀을 채웁니다. 숫자와 날짜는 간격을 이어 가고 번호 붙은 글자는 숫자가 늘어나며, 한 번에 실행 취소됩니다.

실행 예제채우기 핸들

선택 영역 모서리를 끌어 숫자·날짜·번호 붙은 글자를 이어서 채웁니다.

이 데모의 코드
import { createGrid, type ColumnDef } from '@freegridjs/core';
import { makeRows } from '../data';
import { button, separator, text, tr, type DemoContext } from '../ui';

export default function mount(ctx: DemoContext) {
  const { lang } = ctx;
  const h = (en: string, ko: string) => tr(lang, { en, ko });
  const money = { type: 'number', format: '#,##0', width: 110, editable: true } as const;
  const columns: ColumnDef[] = [
    { field: 'name', header: h('Name', '이름'), width: 160, editable: true },
    { field: 'q1', header: h('Q1 revenue', '1분기 매출'), ...money },
    { field: 'q2', header: h('Q2 revenue', '2분기 매출'), ...money },
    { field: 'q3', header: h('Q3 revenue', '3분기 매출'), ...money },
    { field: 'q4', header: h('Q4 revenue', '4분기 매출'), ...money },
    { field: 'joined', header: h('Joined', '가입일'), type: 'date', width: 120, editable: true },
    { field: 'country', header: h('Country (read-only)', '국가 (읽기 전용)'), width: 150 },
  ];
  const grid = createGrid(ctx.host, {
    columns,
    data: makeRows(400),
    locale: lang,
    theme: 'excel',
    fillHandle: true, // drag the square at the corner of the selection
  });
  grid.on('cellValueChanged', e => ctx.log(`cellValueChanged → ${e.colId}: ${String(e.oldValue)} → ${String(e.newValue)}`));

  text(ctx, h('Select one or two cells and pull the small square at the corner down or across. Read-only cells are left alone.',
    '셀 한두 개를 고른 뒤 모서리의 작은 사각형을 아래나 옆으로 끌어 보세요. 읽기 전용 셀은 그대로 둡니다.'));
  separator(ctx);
  button(ctx, h('Fill Q1 of the first 10 rows with 1,000, 2,000 …', '첫 10행 1분기를 1,000, 2,000 …으로 채우기'), () => {
    grid.setRange({ start: { rowIndex: 0, colId: 'q1' }, end: { rowIndex: 0, colId: 'q1' } });
    grid.pasteText('1000\n2000');
    grid.setRange({ start: { rowIndex: 0, colId: 'q1' }, end: { rowIndex: 1, colId: 'q1' } });
    grid.fillRange({ start: { rowIndex: 0, colId: 'q1' }, end: { rowIndex: 9, colId: 'q1' } });
  });
  button(ctx, h('Undo', '실행 취소'), () => grid.undo());
  return grid;
}

셀을 하나 이상 고르면 선택 영역 모서리에 작은 사각형이 나타납니다. 이것을 아래, 위, 옆으로 끌면 지나간 셀이 스프레드시트처럼 채워집니다. 숫자와 날짜는 간격을 이어 가고(1, 2 → 3, 4, 5, 1월 1일, 1월 8일 → 1월 15일), 숫자로 끝나는 글자는 숫자가 하나씩 늘어나며("항목 7" → "항목 8"), 나머지는 반복됩니다. 편집 가능한 셀만 바뀌고 ID나 계산 컬럼은 그대로 둡니다.

채우기는 한 번에 실행 취소되고, 편집과 똑같이 셀마다 cellValueChanged가 오므로 변경 내역과 저장 로직에도 반영됩니다. 유효성 규칙에 맞지 않는 값은 건너뜁니다. 코드에서는 fillRange()로 같은 일을 하고, fillHandle: false로 사각형을 숨깁니다.

createGrid(el, {
  columns: [
    { field: 'month', editable: true },                  // "Jan", "Feb" → copies; "item 7" → "item 8"
    { field: 'q1', type: 'number', editable: true },     // 1, 2 → 3, 4, 5 …
    { field: 'due', type: 'date', editable: true },      // dates keep their step
  ],
  data,
  fillHandle: true,   // default; false hides the square at the corner of the selection
});

// the same from code: from the selected cells into a larger range (one undo step)
grid.setRange({ start: { rowIndex: 0, colId: 'q1' }, end: { rowIndex: 1, colId: 'q1' } });
grid.fillRange({ start: { rowIndex: 0, colId: 'q1' }, end: { rowIndex: 9, colId: 'q1' } });

채우기 핸들은 셀 범위 선택 위에서 동작합니다.

옵션과 메서드

이름타입설명
fillHandleboolean선택 영역 모서리의 작은 사각형(기본 true).
fillRange(target)void선택한 셀(없으면 포커스 셀)에서 그 셀을 포함하는 target 범위로 채웁니다. 한 번에 실행 취소됩니다.