Zoom
Zoom a sheet from 10% to 400% with setZoom(), a zoom box, or Ctrl/Cmd + wheel and trackpad pinch around the pointer. Only the view scales — column widths, printing and exports stay at 100% — and each sheet keeps its own zoom.
How it works
v1.7.0 adds Excel's zoom — 10% to 400%, per sheet, in both editions. Only the view scales: row heights, column widths and fonts stay in 100% sheet px, so nothing that is measured, printed or exported changes, and grid lines keep their 1px weight at every zoom.
- Ctrl/Cmd + wheel over the grid — or a trackpad pinch — zooms around the pointer, so the cell under it stays put. One mouse notch is about 15%, and a pinch is smooth because the zoom is not rounded to whole percent
- The − / + buttons step through Excel-like presets; the select and the slider call
ws.setZoom()directly. Without an anchor the top-left cell stays put, as with Excel's zoom box - The toolbar follows every change through
grid.onZoomChange— including the wheel and the pinch, which the toolbar itself never sees - The status line reads
getColumnWidth(1): column B stays 64px in the sheet at every zoom, and only its size on screen changes - Zoom is per sheet, like Excel's
sheetView@zoomScale: the Daily Orders tab was set to 75% withsetZoom(0.75). Switching sheets is not a change, so the demo re-readsgetZoom()onworkbook.onActiveSheetChange - xlsx keeps the zoom — a workbook saved at 85% opens at 85% — while printing, PDF and HTML output are unaffected by it
- Overlaying your own elements with
getCellRect()? Those rectangles stay in 100% sheet px, so multiply bygetZoom().createReogrid({ wheelZoom: false })hands Ctrl/Cmd + wheel back to the browser's page zoom
Key APIs used
ws.setZoom(1.25) Scale the view, clamped to 10%–400%. An optional anchor (canvas CSS px) keeps that point of the sheet still
ws.getZoom() The sheet's zoom, 1 = 100% — re-read it after a sheet switch
grid.onZoomChange(fn) Fires on every real change of the active sheet's zoom: Ctrl/Cmd + wheel, pinch, setZoom() or an xlsx load
grid.workbook.onActiveSheetChange(fn) A sheet switch is not a zoom change — re-read getZoom() here to keep a zoom box in sync
ws.getColumnWidth(c) Stays in 100% sheet px at every zoom; multiply by getZoom() for screen px
createReogrid({ wheelZoom: false }) Leave Ctrl/Cmd + wheel to the browser's page zoom; setZoom() keeps working
Source Code
Related Documentation
Related Demos
Cell Types Dashboard
Progress bars, star ratings, sparkline charts, checkboxes, and hyperlinks — all rendered inside spreadsheet cells.
Data Filter & Sort
Click column header dropdowns to filter and sort rows. Switch between 300, 1K, and 10K rows to test performance.
Cell Styles
Font styles, colors, backgrounds, text alignment, and border options — a showcase of the Cell Style API.