Worksheet Zoom

In our latest version, we bring a new feature. The zoom compatibility. In this section you will learn how to initiate the spreadsheets with this feature on, or how to setup zoom after the sprdadsheet initialization.

Documentation

Methods

Programmatic methods to interact with the worksheet zoom state.

Method	Description
setZoom(number)	Apply zoom to the worksheet. Value from 0.1 to 1
getZoom()	Get the current zoom value. Default 1 for no zoom applied

Initial Settings

The following property is available through the initialization of the online spreadsheet.

Property	Description
zoom: number	Define the zoom state

Examples

Basic Freeze Columns Example.

How to define a start zoom state on the worksheet and change the zoom programatically.

<html>
<script src="https://jspreadsheet.com/v11/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://jspreadsheet.com/v11/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>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('Zjk4MGFiNTJmMzRkNGQzODU0ODY3NjBlYzQxNGNjYzBiMDRjYmYwMDk4M2Q4ZGU0YWM1NTY2ZTRjM2FiODFiMGVlOGJhOTA2NzE1MGRmNDM1YjU5ZjcwN2ZmMjgwYmJmMGU0MDk3NzgyNWNjMTJiNTc3YThmMjkxNzcyYmU0NWIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFME5UWTBOakl4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

// Create a new spreadsheet
let spreadsheet = jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        minDimensions: [50,20],
        tableOverflow: true,
        tableWidth: 600,
        tableHeight: 400,
        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 } from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

const license = 'Zjk4MGFiNTJmMzRkNGQzODU0ODY3NjBlYzQxNGNjYzBiMDRjYmYwMDk4M2Q4ZGU0YWM1NTY2ZTRjM2FiODFiMGVlOGJhOTA2NzE1MGRmNDM1YjU5ZjcwN2ZmMjgwYmJmMGU0MDk3NzgyNWNjMTJiNTc3YThmMjkxNzcyYmU0NWIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFME5UWTBOakl4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

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

    // Render component
    return (
        <>
            <Spreadsheet ref={spreadsheet} license={license}>
                <Worksheet minDimensions={[50,20]} tableOverflow={true} tableWidth={"600"} tableHeight={"400"} 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" :license="license">
        <Worksheet :minDimensions="[50,20]" :tableOverflow="true" :tableWidth="600" :tableHeight="400" :zoom="0.8" />
    </Spreadsheet>
    <button @click="handleSetFreeze">setZoom(0.8)</button>
    <button @click="handleReset">setZoom(1)</button>
</template>

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

const license = 'Zjk4MGFiNTJmMzRkNGQzODU0ODY3NjBlYzQxNGNjYzBiMDRjYmYwMDk4M2Q4ZGU0YWM1NTY2ZTRjM2FiODFiMGVlOGJhOTA2NzE1MGRmNDM1YjU5ZjcwN2ZmMjgwYmJmMGU0MDk3NzgyNWNjMTJiNTc3YThmMjkxNzcyYmU0NWIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFME5UWTBOakl4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

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 * as jspreadsheet from "jspreadsheet";

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('Zjk4MGFiNTJmMzRkNGQzODU0ODY3NjBlYzQxNGNjYzBiMDRjYmYwMDk4M2Q4ZGU0YWM1NTY2ZTRjM2FiODFiMGVlOGJhOTA2NzE1MGRmNDM1YjU5ZjcwN2ZmMjgwYmJmMGU0MDk3NzgyNWNjMTJiNTc3YThmMjkxNzcyYmU0NWIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFME5UWTBOakl4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

@Component({
    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
    ngOnInit() {
        // Create spreadsheet
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            worksheets: [
                minDimensions: [50,20],
                tableOverflow: true,
                tableWidth: '600px',
                tableHeight: '400px',
                zoom: 0.8,
            }]
        });
    }

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

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

Edit this page on GitHub