전체·보이는·선택한 행 내보내기

rows: 'filtered'(기본), 'all', 'selected'와 columns: [...]로 CSV·엑셀·JSON·인쇄·PDF에 담을 행과 컬럼(숨긴 컬럼 포함)을 고릅니다.

실행 예제내보낼 행 고르기

체크한 행, 거른 행, 전체 행 내보내기.

이 데모의 코드

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 h = (en: string, ko: string) => tr(ctx.lang, { en, ko });
  const grid = createGrid(ctx.host, {
    columns: [
      { field: 'id', header: 'ID', type: 'number', width: 70 },
      { field: 'name', header: h('Name', '이름'), width: 170 },
      { field: 'country', header: h('Country', '국가'), width: 130 },
      { field: 'q1', header: h('Q1', '1분기'), type: 'number', format: '#,##0', width: 110 },
      { field: 'email', header: h('Email (hidden)', '이메일(숨김)'), hide: true },
    ],
    data: makeRows(500), locale: ctx.lang, rowSelection: 'multiple', filterRow: true, getRowId: r => String(r.id),
  });
  const pick = button(ctx, h('Excel: selected rows', '엑셀: 선택한 행'), () => grid.exportXlsx('selected.xlsx', { rows: 'selected' }));
  pick.disabled = true;
  grid.on('selectionChange', e => { pick.disabled = e.selected.length === 0; ctx.log(`${e.selected.length} selected`); });
  button(ctx, h('CSV: filtered rows', 'CSV: 거른 행'), () => grid.exportCsv('filtered.csv'));
  button(ctx, h('CSV: all rows', 'CSV: 전체 행'), () => grid.exportCsv('all.csv', { rows: 'all' }));
  separator(ctx);
  button(ctx, h('Excel: selected + hidden email', '엑셀: 선택 + 숨긴 이메일'), () => grid.exportXlsx('with-email.xlsx', { rows: 'selected', columns: ['id', 'name', 'email'] }));
  text(ctx, h('Tick some rows (the selection button is greyed out until then), or filter a column, then export.',
    '행을 몇 개 체크하거나(그 전에는 선택 버튼이 흐림) 컬럼을 걸러 낸 뒤 내보내 보세요.'));
  return grid;
}

CSV, 엑셀, JSON, 인쇄, PDF 모든 내보내기는 같은 두 가지를 고릅니다. 어떤 행과 어떤 컬럼.

rows	내보내는 행
'filtered'	기본. 보이는 대로: 현재 필터와 정렬, 그룹이면 그룹 안에서
'all'	필터를 무시한 데이터의 모든 행(데이터 순서)
'selected'	체크한 행(rowSelection), 보이는 순서

grid.exportXlsx('selected.xlsx', { rows: 'selected' });
grid.exportCsv('all.csv', { rows: 'all' });

// hidden columns too, in this order, with the selected rows
grid.exportXlsx('for-accounting.xlsx', {
  rows: 'selected',
  columns: ['id', 'customer.name', 'total', 'internalCode'],
});

// the button is only useful with a selection
grid.on('selectionChange', e => (exportButton.disabled = e.selected.length === 0));

컬럼 고르기

columns가 없으면 보이는 데이터 컬럼이 현재 순서와 고정 위치대로 나가고, 선택·드래그 컬럼은 나가지 않습니다.
columns를 주면 그 id만 정확히 나가며 숨긴 컬럼도 됩니다. id는 컬럼의 id 또는 field(중첩 필드는 경로)입니다.
valueFormatter 글자는 텍스트 셀에 쓰이고, 엑셀은 숫자·날짜를 값으로 둡니다.

엑셀 전용 옵션(합계, 그룹, 보호, 그림)은 엑셀·PDF와 엑셀 추가 기능에 있습니다.

이 페이지에 대한 질문

선택한 행만 내보내려면?

rows: 'selected'를 주세요: grid.exportXlsx('orders.xlsx', { rows: 'selected' }). exportCsv, exportJson, print, exportPdf에도 같은 옵션이 있습니다.

숨긴 컬럼도 내보내려면?

컬럼을 적으세요: { columns: ['id', 'name', 'internalCode'] }. 숨긴 컬럼도 되고, 적은 순서대로 나갑니다.