Documentationkeyboard_arrow_rightExampleskeyboard_arrow_rightColumn checkbox

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/v12/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v12/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" type="text/css" />

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

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

<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('NjJjZDJmZTlmMjU2YjRlZTU3ODdlODk1OWVkYWRkZDVjNmY3MzI0MDJmODJmNTliZDg4MjA3NjQyMDJhMGZjY2Q1YjcxNzk3MmQ4NTEwZWJkNGZlMTYxZjRiMzM0ZjJkNDFjYTVhYWNlNmE3ZDdlNTU5YTc1YTY5Y2QyYzBhY2UsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjMU1qazBOREF3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');

// 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('NjJjZDJmZTlmMjU2YjRlZTU3ODdlODk1OWVkYWRkZDVjNmY3MzI0MDJmODJmNTliZDg4MjA3NjQyMDJhMGZjY2Q1YjcxNzk3MmQ4NTEwZWJkNGZlMTYxZjRiMzM0ZjJkNDFjYTVhYWNlNmE3ZDdlNTU5YTc1YTY5Y2QyYzBhY2UsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjMU1qazBOREF3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9')

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('NjJjZDJmZTlmMjU2YjRlZTU3ODdlODk1OWVkYWRkZDVjNmY3MzI0MDJmODJmNTliZDg4MjA3NjQyMDJhMGZjY2Q1YjcxNzk3MmQ4NTEwZWJkNGZlMTYxZjRiMzM0ZjJkNDFjYTVhYWNlNmE3ZDdlNTU5YTc1YTY5Y2QyYzBhY2UsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjMU1qazBOREF3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');

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('NjJjZDJmZTlmMjU2YjRlZTU3ODdlODk1OWVkYWRkZDVjNmY3MzI0MDJmODJmNTliZDg4MjA3NjQyMDJhMGZjY2Q1YjcxNzk3MmQ4NTEwZWJkNGZlMTYxZjRiMzM0ZjJkNDFjYTVhYWNlNmE3ZDdlNTU5YTc1YTY5Y2QyYzBhY2UsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjMU1qazBOREF3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');

@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);
                    });
                }
            },
        });
    }
}