demo D129
Export the Data Grid as a PNG Image in Angular
Export the grid, or a range, as an image
grid.capture()
This grid exports itself, or a selected range, as a PNG image ready to download or paste into a document. It gets a grid into a report or a message without a screenshot tool or a spreadsheet, capturing exactly what is on screen.
This is the Angular version. A standalone component takes the whole configuration through one config input, surfaces grid events as outputs, and exposes the live grid on a getter for anything the inputs do not cover.
The configuration
import { Component, ViewChild } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { createGrid } from '@toclocoinc/lattice-grid';
import '@toclocoinc/lattice-grid/css';
import { LatticeGridComponent, provideLattice } from '@toclocoinc/lattice-grid/angular';
const columns = [
{ field: 'service', title: 'Service', layout: { pin: 'start', width: 150 } },
{ field: 'team', title: 'Team', filter: { type: 'set' } },
{ field: 'owner', title: 'Owner', filter: { type: 'set' } },
{ field: 'tier', title: 'Tier', cell: { decoration: 'pill', variant: { map: { gold: 'warning', silver: 'neutral', bronze: 'info' } } } },
{ field: 'state', title: 'State', cell: { decoration: 'dot', variant: { map: { healthy: 'success', degraded: 'warning', failing: 'danger', unknown: 'neutral' } } } },
{ field: 'region', title: 'Region', filter: { type: 'set' } },
{ field: 'monthlyCost', title: 'Monthly cost', type: 'number',
format: { style: 'currency', currency: 'USD', decimals: 0 }, total: 'sum', layout: { width: 160 } },
];
@Component({
selector: 'app-root',
standalone: true,
imports: [LatticeGridComponent],
template: '<lattice-grid [config]="grid" (grid-ready)="onGridReady()" style="display:block;height:540px"></lattice-grid>',
})
export class AppComponent {
@ViewChild(LatticeGridComponent) gridRef!: LatticeGridComponent;
grid = {
rowKey: 'id',
selection: 'multiple',
toolPanel: { side: 'left', panels: ['columns', 'filters'], exportName: 'lattice-demo', actions: ['restore', 'maximise'] },
columns,
rows: [/* wide service rows */],
};
// The grid is created once the view has rendered, so the live instance
// arrives on grid-ready rather than in ngAfterViewInit.
async onGridReady() {
const grid = this.gridRef.grid;
// capture() photographs the browser's own rendering and returns a Blob. It
// needs no full screen, so call it whenever you like.
const blob = await grid.capture({ scale: 2 });
const bitmap = await createImageBitmap(blob);
console.log(blob.type, bitmap.width + ' x ' + bitmap.height, blob.size + ' bytes');
// A file name is what triggers the save. download: true alone does not: the
// capture returns the blob and writes nothing without one.
await grid.capture({ scale: 3, fileName: 'lattice-grid.png' });
// The image is made in your browser and never uploaded.
}
}
bootstrapApplication(AppComponent, {
providers: [provideLattice({ createGrid })],
});Exporting a grid or a cell range as a PNG image
PNG capture renders the current grid, or a selected range, to a bitmap image that can be downloaded, pasted into a document, or attached to a message without opening a spreadsheet. Reach for this in any JavaScript data grid embedded in a workflow tool, dashboard or report builder, where a user wants to hand off a snapshot of what they are looking at: a support agent capturing a range to illustrate a discrepancy, or a manager pulling a picture of this week’s figures for a summary email. Lattice Grid exposes the feature through grid.capture(), which draws the visible viewport, or a supplied cell range, to canvas and returns image data, so a host application controls what happens to the file afterwards, whether that is a browser download, a clipboard write or an upload.
Capture reads from the same cell layer the grid already renders, including colour scales, conditional formatting and frozen columns, so the image matches what the user sees on screen rather than a plain re-export of raw values. Because a data grid can hold far more rows than fit in the viewport, capture is scoped to what is currently rendered or to an explicit range, so producing an image never means rasterising an entire virtualised dataset that was never fully in the DOM.
How do you export a grid to an image in JavaScript?
Call grid.capture() to render the visible grid, or a specified cell range, to a PNG. Lattice Grid draws from the live cell layer, so formatting such as colour scales and frozen columns is preserved in the output, and the result can be downloaded, copied or attached without exporting the underlying data as a spreadsheet file.