demo D119
Excel export
A styled .xlsx with frozen panes, written with no dependency
export.excel()
The configuration
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.css">
<script src="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.js"></script>
<div id="grid" style="height: 540px"></div>
<script>
const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
rowKey: 'id',
selection: 'multiple',
// The workbook is written in the browser with no dependency: a zip
// container, the sheet, the shared strings and the styles, assembled by the
// grid. Nothing is uploaded and nothing is fetched.
toolPanel: {
side: 'left',
panels: ['columns', 'filters', 'quick'],
exportName: 'supplier-charges',
actions: [
'undo', 'redo', 'restore', 'maximise', '-',
'excel',
{
// freezePanes writes a real frozen pane into the sheet, so the header
// row stays put when the file is opened. The rail's own Excel button
// takes the defaults; this one names the options.
name: 'excel-named',
title: 'Download .xlsx, named sheet with a frozen header',
icon: 'spreadsheet',
run: ({ grid }) => grid.export.excel({
download: true,
fileName: 'supplier-charges-q3',
sheetName: 'Charges',
freezePanes: true,
variantFills: true,
}),
},
'clipboard',
],
},
columns: [
{ field: 'ref', title: 'Invoice', layout: { pin: 'start', width: 140 } },
{ field: 'supplier', title: 'Supplier', layout: { flex: 1, min: 200 }, filter: { type: 'set' } },
{ field: 'region', title: 'Region', filter: { type: 'set' } },
{ field: 'category', title: 'Category', filter: { type: 'set' } },
{ field: 'quantity', title: 'Qty', type: 'number', layout: { width: 110 } },
{ field: 'amount', title: 'Amount', type: 'number', layout: { width: 150 },
format: { style: 'currency', currency: 'GBP', decimals: 2 }, total: 'sum',
filter: { type: 'number' } },
{ field: 'note', title: 'Note', layout: { width: 280 } },
],
rows, // supplier charge records, one per invoice line
});
// The same writer, called imperatively: a named sheet with a frozen header.
grid.export.excel({
download: true,
fileName: 'supplier-charges-q3',
sheetName: 'Charges',
freezePanes: true,
variantFills: true,
});
</script>Generating a styled .xlsx workbook straight from the grid
Excel export writes the current grid state to a real .xlsx workbook, not a renamed CSV, so column widths, header styling and frozen panes survive the round trip into Excel or Google Sheets. A developer reaches for it wherever a report needs to leave the browser as a file a finance or operations colleague can open, filter and pivot on their own machine, rather than a static screenshot or a print-to-PDF. Calling export.excel() on a Lattice Grid instance builds the workbook from whatever is currently visible: the active column order, current sort, and any grouping, so the file a user downloads matches what they were looking at, not a fixed server-side template. As a JavaScript data grid with no server round trip involved, the export runs entirely client-side with no dependency pulled in to construct the workbook, which keeps the download instant even on a dataset of several thousand rows and avoids sending grid data to a backend purely to format a spreadsheet. Frozen panes are carried across automatically wherever the grid itself has pinned columns or a pinned header row, so the exported sheet keeps row and column headers in view exactly as the on-screen grid does, without a separate freeze-pane step for the developer to configure by hand.
How do I export a data grid to a formatted Excel file?
Call export.excel() on the grid instance. Lattice Grid writes an .xlsx file reflecting the current column order, sort and grouping, with header styling and any pinned rows or columns carried over as frozen panes, so the downloaded workbook opens in Excel already formatted rather than as a plain data dump needing manual cleanup.