Export a React table to Excel

Export a React data grid to Excel

An Export button is easy; a file that says what the screen said is not. This grid writes real .xlsx files where numbers stay numbers and dates stay dates, with the grid’s formats, groups and totals carried over — and CSV that opens correctly in Excel.

CSV export is free in the Community edition. Excel (.xlsx) and PDF export are Enterprise; Excel export uses the optional exceljs package.

Export a million rows and check the file Export and import guide

Values Excel can compute with

Numbers and dates are written as numbers and dates, not as the text on screen, so a sum or a pivot in Excel works on the export. The grid’s number formats travel as Excel formats.

Styled when you want it

With styled: true the header, groups and totals keep their look; customizeCell can colour a negative revenue red or bold a row, and rows above and below the table carry a title, a date or a note.

CSV that opens in Excel — free

CSV follows RFC 4180 and is written with a UTF-8 byte order mark, and its delimiter follows the grid’s locale, because Excel splits a double-clicked CSV on the list separator of the machine’s region.

A styled export with a rule per cell

await controller.exportToExcel({
  styled: true,
  customizeCell: ({ kind, columnId, value }) => {
    if (kind !== 'data' || columnId !== 'revenue') return;
    if (Number(value) < 0) return { fill: 'FFFEE2E2', font: { color: 'FFB91C1C' } };
  },
});

Every option: Export and import guide.

Questions

Can I export to Excel for free?
CSV, which Excel opens, is free. A real .xlsx file with formats and styles is in the Enterprise edition.
How many rows can it export?
An Excel sheet holds 1,048,576 rows; the demo exports a million real invoice lines and shows what arrives.
Does the pivot table export to Excel too?
Yes — the PivotGrid exports to Excel and PDF in its Enterprise edition, keeping its layout.

Related