복사와 붙여넣기

Ctrl+C로 포커스 셀이나 체크한 행을 엑셀용으로 복사하고, Ctrl+V로 값을 컬럼 타입에 맞게 붙여넣으며, copyable: false로 복사를 막습니다.

실행 예제복사와 붙여넣기

셀이나 체크한 행을 복사하고, 엑셀에서 값을 붙여넣고, 복사되면 안 되는 컬럼을 막습니다.

이 데모의 코드

import { createGrid } 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 grid = createGrid(ctx.host, {
    columns: [
      { field: 'id', header: 'ID', type: 'number', width: 80 },
      { field: 'name', header: h('Name', '이름'), width: 170, editable: true },
      { field: 'q1', header: h('Q1 revenue', '1분기 매출'), type: 'number', format: '#,##0', width: 130, editable: true },
      { field: 'joined', header: h('Joined', '가입일'), type: 'date', width: 130, editable: true },
      // national-id style column: never copied
      { field: 'email', header: h('Email (not copied)', '이메일 (복사 안 됨)'), width: 240, copyable: false, cellClass: 'demo-secret' },
    ],
    data: makeRows(300),
    locale: lang,
    rowSelection: 'multiple',
    rangeSelection: false, // a click focuses one cell
  });
  grid.on('paste', e => ctx.log(`paste → changed ${e.changed}, skipped ${e.skipped}`));
  grid.on('cellValueChanged', e => ctx.log(`cellValueChanged → ${e.colId}: ${String(e.oldValue)} → ${String(e.newValue)}`));

  text(ctx, h('Click a cell and press Ctrl+C, then click a Q1 cell and press Ctrl+V. Text like "1,234" or "(50)" becomes a number.',
    '셀을 클릭하고 Ctrl+C, 1분기 셀을 클릭하고 Ctrl+V를 눌러 보세요. "1,234"나 "(50)" 같은 글자도 숫자로 바뀝니다.'));
  separator(ctx);
  button(ctx, h('Copy the checked rows', '체크한 행 복사'), () => {
    const tsv = grid.copySelection({ rows: true, headers: true });
    ctx.log(h(`copied ${tsv ? tsv.split('\r\n').length : 0} lines`, `${tsv ? tsv.split('\r\n').length : 0}줄 복사됨`));
  });
  // pasteText goes to the focused cell: click a Q1 cell first
  button(ctx, h('Paste "₩12,000" into the focused cell', '포커스 셀에 "₩12,000" 붙여넣기'), () => grid.pasteText('₩12,000'));
  button(ctx, h('Undo', '실행 취소'), () => grid.undo());
  return grid;
}

Ctrl+C(⌘C)는 포커스된 셀을 복사하고, Ctrl+V는 엑셀, 구글 시트, 아무 글에서 복사한 값 하나를 그 셀에 붙여넣습니다. 숫자는 숫자로, 날짜는 YYYY-MM-DD로 복사되므로 스프레드시트에 그대로 들어갑니다. copySelection({ rows: true })는 체크한 행을 한 줄에 한 행씩 엑셀 텍스트로 복사하고, headers: true를 더하면 헤더 줄도 붙입니다.

붙여넣기는 편집 가능한 컬럼만 바꾸므로 ID나 계산 컬럼은 안전하고, 값은 컬럼 타입에 맞게 바뀝니다. 1,234, ₩12,000, (5), 12%는 숫자로, 2026. 3. 5., 2026년 3월 5일은 날짜로 바뀌고, 선택 컬럼은 옵션 중 하나만 받습니다. 바꿀 수 없거나 유효성 규칙에 맞지 않는 값은 건너뛰고 paste 이벤트에 개수를 알려 줍니다. 붙여넣기도 Ctrl+Z로 되돌릴 수 있습니다.

const grid = createGrid(el, {
  columns: [
    { field: 'id', type: 'number' },                    // read-only: pasting does nothing
    { field: 'qty', type: 'number', editable: true },   // "1,234", "₩12,000", "(5)", "12%" become numbers
    { field: 'due', type: 'date', editable: true },     // "2026. 3. 5." and "2026년 3월 5일" become dates
    { field: 'rrn', copyable: false },                  // national ids: copied as empty text
  ],
  data,
  rowSelection: 'multiple',
  rangeSelection: false,   // a click focuses one cell
});

grid.copySelection();                  // the focused cell (Ctrl+C)
grid.copySelection({ rows: true, headers: true });   // the checked rows, with a header line
grid.pasteText('1,234');               // one value into the focused cell (Ctrl+V)
grid.on('paste', e => console.log(e.changed, e.skipped));

주민등록번호처럼 화면 밖으로 나가면 안 되는 컬럼에는 copyable: false를 주세요. 그 셀은 빈 칸으로 복사됩니다. 함수를 주면 셀마다 정할 수 있습니다.

브라우저는 키를 누르거나 클릭한 뒤에만 페이지가 클립보드에 쓰도록 허락합니다. Ctrl+V는 브라우저의 붙여넣기 이벤트를 쓰므로 항상 동작합니다.

드래그로 고른 셀 블록이나 여러 범위를 복사하고 붙여넣는 기능은 셀 범위 선택과 범위 복사에 있습니다.

행보다 많이 붙여넣기

pasteAddsRows를 켜면 아래 남은 행보다 많은 줄을 붙여넣을 때 나머지를 새 행으로 추가합니다. 자세한 내용:

행보다 많이 붙여넣기

메서드, 옵션, 이벤트

이름	타입	설명
`copySelection({ rows?, headers? })`	`string`	포커스 셀을, rows: true면 체크한 행을 엑셀 텍스트(TSV)로 복사하고, 브라우저가 허락하면 클립보드에도 씁니다.
`pasteText(text)`	`{ changed, skipped }`	값 하나를 포커스 셀에 붙여넣습니다.
`copyable`	`boolean \| ({ value, row, column }) => boolean`	컬럼: false면 복사에서 값을 뺍니다. 막힌 셀은 빈 칸으로 복사됩니다.
`paste`	`{ changed, skipped } (event)`	붙여넣기가 끝났습니다. skipped는 변환하지 못한 값의 수입니다.