Exporting all, shown or selected rows

rows: 'filtered' (default), 'all' or 'selected' and columns: [...] choose what CSV, Excel, JSON, print and PDF exports contain, hidden columns included.

Live demoChoose rows to export

Export the checked rows, the filtered rows or all of them.

Code for this demo

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;
}

Every export — CSV, Excel, JSON, print and PDF — takes the same two choices: which rows and which columns.

rows	Exports
'filtered'	Default. The rows as shown: current filters and sort, inside groups when grouped
'all'	Every row of the data in data order, filters ignored
'selected'	The checked rows (rowSelection), in display order

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));

Choosing columns

Without columns, the shown data columns go out in their current order and pinned sides; the selection and drag columns never do.
With columns, exactly those ids go out, hidden ones included. Ids are the column id, or the field (the path for nested fields).
valueFormatter text is used for text cells; Excel keeps numbers and dates as values.

Excel-only options (totals, groups, protection, pictures) are on Excel and PDF and More in Excel.

Questions about this page

How do I export only the selected rows?

Pass rows: 'selected': grid.exportXlsx('orders.xlsx', { rows: 'selected' }). The same option works for exportCsv, exportJson, print and exportPdf.

How do I include a hidden column in the export?

List the columns: { columns: ['id', 'name', 'internalCode'] }. Hidden columns are allowed there, in the order you give.