Worksheet Zoom

This section shows how to enable zoom when initializing a spreadsheet and how to adjust it programmatically after initialization.

What's new with Version 13

onchangezoom: fires after the zoom changes, with the new and the old value

Personal preference: zoom is never persisted, synchronized or recorded in the history. Save it locally through the event when your application needs to restore it

Validation: only positive finite numbers are accepted; anything else resets to 1

Documentation

Methods

The following methods allow you to get or set the worksheet zoom level.

Method	Description
`getZoom`	Get the current zoom value. Default `1` for no zoom applied `getZoom(): number`
`setZoom`	Apply zoom to the worksheet. Only positive finite numbers are accepted; anything else resets to `1`, and setting the current value again is a no-op. `setZoom(value: number): void`

Events

Event	Description
`onchangezoom`	Triggered after the zoom changes. `onchangezoom(worksheet: Object, newValue: number, oldValue: number): void`

Initial Settings

Property	Description
`zoom?: number`	Initial zoom level for the spreadsheet. The default is `1`.

Personal preference

Zoom is a personal view preference. It is never persisted, never synchronized to other connected users and never recorded in the undo history. Use onchangezoom to save it locally, for example in localStorage, when your application needs to restore it.

Examples

Basic Zoom Example

This example shows how to set the initial zoom level on a worksheet and how to change the zoom programmatically.

<html>
<script src="https://jspreadsheet.com/v13/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://jspreadsheet.com/v13/jspreadsheet.css" type="text/css" />

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

<div id="spreadsheet"></div><br><br>

<p><input type="button" value="setZoom(0.8)" id="btn1" />
<input type="button" value="setZoom(1)" id="btn2" /></p>

<script>
// You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox.
// The license is valid for one day, after which the spreadsheet will become read-only.
// For a longer trial period, you can create a free account and generate a demo license with an extended expiration date.
jspreadsheet.setLicense('YjgwZThkOTYwMWU3ZDc1Y2UyNGI2ZWI1NjcyMTY1ZTE3OGQ0NzQ5ZWQ1NzZkNmEzODU2NDIyY2U2NmRkY2NkY2E4OTdjNjNkNTc4ZDlkZTAwZjM4MDdiYmQxZjM3NDM4Mjk3NDdmYTliZGQ0ZTdmMDBhZTIwMGJhYjI0NmExNzksZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnprd01qRXlOams1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');

// Create a new spreadsheet
let spreadsheet = jspreadsheet(document.getElementById('spreadsheet'), {
    tableOverflow: true,
    tableWidth: 600,
    tableHeight: 400,
    worksheets: [{
        minDimensions: [50,20],
        zoom: 0.8,
    }]
});

document.getElementById("btn1").onclick = () => spreadsheet[0].setZoom(0.8)
document.getElementById("btn2").onclick = () => spreadsheet[0].setZoom(1)
</script>
</html>

import React, {useRef} from "react";
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

// You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox.
// The license is valid for one day, after which the spreadsheet will become read-only.
// For a longer trial period, you can create a free account and generate a demo license with an extended expiration date.
jspreadsheet.setLicense('YjgwZThkOTYwMWU3ZDc1Y2UyNGI2ZWI1NjcyMTY1ZTE3OGQ0NzQ5ZWQ1NzZkNmEzODU2NDIyY2U2NmRkY2NkY2E4OTdjNjNkNTc4ZDlkZTAwZjM4MDdiYmQxZjM3NDM4Mjk3NDdmYTliZGQ0ZTdmMDBhZTIwMGJhYjI0NmExNzksZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnprd01qRXlOams1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();

    // Render component
    return (
        <>
            <Spreadsheet ref={spreadsheet} tableOverflow={true} tableWidth={"600"} tableHeight={"400"}>
                <Worksheet minDimensions={[50, 20]} zoom={0.8}/>
            </Spreadsheet>
            <button onClick={() => spreadsheet.current[0].setZoom(0.8)}>setZoom(0.8)</button>
            <button onClick={() => spreadsheet.current[0].setZoom(1)}>setZoom(1)</button>
        </>
    );
}

<template>
    <Spreadsheet ref="spreadsheet" :tableOverflow="true" :tableWidth="600" :tableHeight="400">
        <Worksheet :minDimensions="[50,20]" :zoom="0.8" />
    </Spreadsheet>
    <button @click="setZoomHalf">setZoom(0.8)</button>
    <button @click="setZoomOne">setZoom(1)</button>
</template>

<script>
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

// You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox.
// The license is valid for one day, after which the spreadsheet will become read-only.
// For a longer trial period, you can create a free account and generate a demo license with an extended expiration date.
jspreadsheet.setLicense('YjgwZThkOTYwMWU3ZDc1Y2UyNGI2ZWI1NjcyMTY1ZTE3OGQ0NzQ5ZWQ1NzZkNmEzODU2NDIyY2U2NmRkY2NkY2E4OTdjNjNkNTc4ZDlkZTAwZjM4MDdiYmQxZjM3NDM4Mjk3NDdmYTliZGQ0ZTdmMDBhZTIwMGJhYjI0NmExNzksZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnprd01qRXlOams1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    methods: {
        setZoomHalf: function () {
            this.$refs.spreadsheet.current[0].setZoom(0.8)
        },
        setZoomOne: function () {
            this.$refs.spreadsheet.current[0].setZoom(1)
        }
    },
    data() {
        return {
            // License
            license: license,
        };
    }
}
</script>

import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

// You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox.
// The license is valid for one day, after which the spreadsheet will become read-only.
// For a longer trial period, you can create a free account and generate a demo license with an extended expiration date.
jspreadsheet.setLicense('YjgwZThkOTYwMWU3ZDc1Y2UyNGI2ZWI1NjcyMTY1ZTE3OGQ0NzQ5ZWQ1NzZkNmEzODU2NDIyY2U2NmRkY2NkY2E4OTdjNjNkNTc4ZDlkZTAwZjM4MDdiYmQxZjM3NDM4Mjk3NDdmYTliZGQ0ZTdmMDBhZTIwMGJhYjI0NmExNzksZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnprd01qRXlOams1TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');

@Component({
    standalone: true,
    selector: "app-root",
    template: `<div #spreadsheet></div>
        <button (click)="setZoomHalf()">setZoom(0.8)</button>
        <button (click)="setZoomOne()">setZoom(1)</button>`
})
export class AppComponent {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];
    // Create a new data grid
    ngAfterViewInit() {
        // Create spreadsheet
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            tableOverflow: true,
            tableWidth: 600,
            tableHeight: 400,
            worksheets: [{
                minDimensions: [50,20],
                zoom: 0.8,
            }]
        });
    }

    setZoomHalf() {
        this.worksheets[0].setZoom(0.8)
    }

    setZoomOne() {
        this.worksheets[0].setZoom(1)
    }
}