Presenting and saved views: JavaScript Data Grid Guide

Developer guide › Presenting and saved views

Presentation mode

Renders the grid for a room: full-screen, application chrome hidden, everything enlarged. The data stays live and queryable throughout, so a question from the audience is answered by filtering in front of them rather than promised as a follow-up.

Full guide: Presentation mode ›

Maximise

A grid usually lives in whatever box the page layout gave it, and that box is usually too small for the job. The left rail's last button fills the browser window with the grid, and clicking it again puts the grid back exactly where it was. Esc also restores.

Full guide: Maximise ›

Time scrubber

Move the grid back through recent data changes: what did this look like a minute ago, before that number moved.

Full guide: Time scrubber ›

Saved views

A view is a named grid state: sort, filters, grouping, column order, widths, visibility. There are two kinds and the picker keeps them apart.

Full guide: Saved views ›

Undo

Undo covers the whole grid, not only edits. Sorts, filters, column moves, grouping, an applied view and a restore all record an entry, and each carries a label written for a button.

Full guide: Undo ›

The left rail

toolPanel: { side: 'left' } docks the panels as an icon rail and turns on the action buttons: undo, redo, export to CSV, export to Excel, copy to the clipboard, print, restore the default view, and maximise. Each is a single click on the thing you came for, and all four export destinations are in the cell context menu as well.

createGrid(el, {
  toolPanel: {
    side: 'left',
    panels: ['columns', 'filters', 'views', 'quick'],
    // Omit `actions` entirely to take all seven, including any added later.
    actions: ['undo', 'redo', 'export', 'excel', 'clipboard', 'print', 'restore', 'maximise'],
    exportName: 'circuits',
  },
});