Effortless Data Management with Checkboxes

Take advantage of the checkbox column to simplify managing large datasets. By ticking the master checkbox in the header, you can easily select or deselect all items in the column. This functionality is essential for efficiently managing large datasets, ensuring accuracy and speed in your workflow.

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

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

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

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

// Create a new spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        minDimensions: [100,100],
        tableOverflow: true,
        tableWidth: 600,
        columns: [{ type:'checkbox', title: ' ' }],
        columnSortingOnDblClick: false,
    }],
    oncreatecolumn: function(worksheet, column, th) {
    	if (column === 0) {
          let selectAll = document.createElement('input');
          selectAll.type = 'checkbox';
          th.appendChild(selectAll);
          selectAll.addEventListener('click', function() {
               let state = this.checked;
               console.log(state)
               let numOfRows = worksheet.rows.length;
               let records = [];
               for (let j = 0; j < numOfRows; j++) {
                   records.push({
                       x: 0,
                       y: j,
                       value: state,
                   })
               }
               worksheet.setValue(records);
          })
      }
    }
});
</script>

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

jspreadsheet.setLicense('NTZlMTM0MjE4ZjQ5YzcyZjcxY2U0MWY5YTFhZTVhNzE2NGViZWIxNmU0OWMzYTEzZTAxZWU0ZTM3YmMxMTdiOTcwMThhOGVlMjQ5YmFjMDRmMjM0ZWE2MTZjNmIwMGIxMTUwODJkOWMwYjQzNjBjODdlZTBhZTNhNGNmNjU2NzIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRd01qazVNall5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==')

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

    const onCreateColumn = function(worksheet, column, th) {
        if (column === 0) {
            let selectAll = document.createElement('input');
            selectAll.type = 'checkbox';
            th.appendChild(selectAll);
            selectAll.addEventListener('click', function() {
                let state = this.checked;
                console.log(state)
                let numOfRows = worksheet.rows.length;
                let records = [];
                for (let j = 0; j < numOfRows; j++) {
                    records.push({
                        x: 0,
                        y: j,
                        value: state,
                    })
                }
                worksheet.setValue(records);
            })
        }
    }

    // Render component
    return <Spreadsheet ref={spreadsheet} oncreatecolumn={onCreateColumn}>
                <Worksheet
                    minDimensions={[100, 100]}
                    tableWidth={600}
                    columns={[{ type: 'checkbox', title: ' ' }]}
                    columnSortingOnDblClick={false}
                    tableOverflow
                />
            </Spreadsheet>;
}

<template>
    <Spreadsheet ref="spreadsheet" :oncreatecolumn="onCreateColumn">
        <Worksheet
            :minDimensions="[100, 100]"
            :tableWidth="600"
            :columns="[{ type: 'checkbox', title: ' ' }]"
            :columnSortingOnDblClick="false"
            :tableOverflow="true"
        />
    </Spreadsheet>
</template>

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

jspreadsheet.setLicense('NTZlMTM0MjE4ZjQ5YzcyZjcxY2U0MWY5YTFhZTVhNzE2NGViZWIxNmU0OWMzYTEzZTAxZWU0ZTM3YmMxMTdiOTcwMThhOGVlMjQ5YmFjMDRmMjM0ZWE2MTZjNmIwMGIxMTUwODJkOWMwYjQzNjBjODdlZTBhZTNhNGNmNjU2NzIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRd01qazVNall5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

export default {
    components: {
        Spreadsheet,
        Worksheet
    },
    methods: {
        onCreateColumn: function(worksheet, column, th) {
            if (column === 0) {
                let selectAll = document.createElement('input');
                selectAll.type = 'checkbox';
                th.appendChild(selectAll);
                selectAll.addEventListener('click', function () {
                    let state = this.checked;
                    console.log(state)
                    let numOfRows = worksheet.rows.length;
                    let records = [];
                    for (let j = 0; j < numOfRows; j++) {
                        records.push({
                            x: 0,
                            y: j,
                            value: state,
                        })
                    }
                    worksheet.setValue(records);
                })
            }
        }
    }
}
</script>

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

// Add license
jspreadsheet.setLicense('NTZlMTM0MjE4ZjQ5YzcyZjcxY2U0MWY5YTFhZTVhNzE2NGViZWIxNmU0OWMzYTEzZTAxZWU0ZTM3YmMxMTdiOTcwMThhOGVlMjQ5YmFjMDRmMjM0ZWE2MTZjNmIwMGIxMTUwODJkOWMwYjQzNjBjODdlZTBhZTNhNGNmNjU2NzIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRd01qazVNall5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

@Component({
    standalone: true,
    selector: 'app-root',
    template: `<div #spreadsheet></div>`,
})
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, {
            worksheets: [
                {
                    minDimensions: [100, 100],
                    tableOverflow: true,
                    tableWidth: 600,
                    columns: [{ type: 'checkbox', title: ' ' }],
                    columnSortingOnDblClick: false,
                },
            ],
            oncreatecolumn: function (worksheet, column, th) {
                if (column === 0) {
                    let selectAll = document.createElement('input');
                    selectAll.type = 'checkbox';
                    th.appendChild(selectAll);
                    selectAll.addEventListener('click', function () {
                        let state = this.checked;
                        console.log(state);
                        let numOfRows = worksheet.rows.length;
                        let records = [];
                        for (let j = 0; j < numOfRows; j++) {
                            records.push({
                                x: 0,
                                y: j,
                                value: state,
                            });
                        }
                        worksheet.setValue(records);
                    });
                }
            },
        });
    }
}