Products

Documentation keyboard_arrow_right Cells

Spreadsheet Cells

This guide details the various aspects and features of data grid cells, covering essential properties such as DOM element references, editor types, and key attributes including read-only status and custom render functions. It also covers methods for interacting with and customizing cell functionality to meet specific requirements.

Documentation

Methods for Cell Interaction

This section outlines methods for interacting with cells and their attributes within the data grid.

Method Description
getCell Retrieves the DOM element of a cell by its grid reference (e.g., A1, B3).
getCell(cellName: String) : Object
getCellFromCoords Obtains the DOM element of a cell using its grid coordinates, with (0,0) corresponding to A1.
getCellFromCoords(x: Number, y: Number) : Object
isAttached Checks if a cell element is currently part of the DOM tree.
isAttached(x: Number, y: Number) : Boolean
getProperty Fetches the properties of a specified cell.
getProperty(column: Number, row: Number) : Object
setProperty Overwrite the properties for a given cell.
setProperty(column: Number, row: Number, properties: Object) : void
updateProperty Update the properties for a given cell.
updateProperty(column: Number, row: Number, properties: Object) : void

Events

Property Description
oncreatecell This method will be called when a cell is created.
oncreatecell(worksheet: Object, cell: DOMElement, x: Number, y: Number, value: any) : void
onchangeproperty Triggered when cell properties are updated via setProperty or updateProperty.
onchangeproperty(worksheet: Object, updates: Object[]) : void

Cells Settings

Property Description
type: string Define the type of editor to use for the cell. Can be a string to define a native editor, or a method to define a custom editor plugin.
'text' | 'number' | 'numeric' | 'percent' | 'notes' | 'dropdown' | 'autocomplete' | 'calendar' | 'color' | 'checkbox' | 'radio' | 'autonumber' | 'progressbar' | 'rating' | 'email' | 'url' | 'image' | 'html' | 'hidden' | 'tags' | 'record'
title: string The title of the column.
tooltip: string Define the tooltip text to display on mouseover for the column header.
align: string The alignment of the column content. Default: center.
'center' | 'left' | 'right' | 'justify'
source: Array<DropdownItem> The items to show in the dropdown or autocomplete.
autocomplete: boolean Whether the column is an autocomplete field.
multiple: boolean Whether the dropdown or autocomplete can accept multiple options.
delimiter: string The delimiter to use for separating multiple dropdown options. Default: ";".
mask: string The input mask to apply to the data cell. @see https://jsuites.net/v5/javascript-mask
decimal: string The character to use as the decimal separator.
'.' | ','
truncate: number The maximum number of characters to display in the cell before truncating.
disabledMaskOnEdition: boolean Whether to disable the mask when editing.
render: string | function A renderer method or rule for the cell content.
render(td: HTMLElement, value: number|string, x: number, y: number, worksheet: worksheetInstance, options: Column) : void
format: string The format of the date or numbers in the cell. Default for the calendar: "DD/MM/YYYY".
locale: string Locale for Intl.NumberFormat
options: object Extended configuration for the column.
readOnly: boolean Whether the column is read-only.
rotate: number The rotation angle for the text value, between -90 and 90. Default: null.

Examples

Cell-Level Configuration

Basic data grid demonstrating various cell types and attributes.

<html>
<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>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NzEzZDhlNzhjNmY4YmNlOWJhMjliYzU3MGNjNDQyZGI3YWY5NDU0YTZhZjRkZGY4YjNmZTUyYWY0MTFkMWI3M2VmMjE2NDZjMmUxNWQ3MWNlZWU3OTZmY2VlNGE5NDI1MjRmZTQ0ZjNmNmVhMDU4NGI3ZjNiNzg3YTQ3NzdlZjAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNelUwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

// Create a new spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        data: [
            ['<h4>Vehicle Payment Calculator</h4>', ''],
            ['Purchase price', '19700'],
            ['Down payment', '1000'],
            ['Trade-in value', '500'],
            ['Interest rate', '0.0305'],
            ['Length of loan (in months)', '60'],
            ['', ''],
            ['Monthly payment', '=PMT(B5/12,B6,B2-(B3+B4))'],
            ['Total cost', '=-(B8*B6)+(B3+B4)'],
        ],
        columns: [
            { width:'300px' },
            { width:'200px' },
        ],
        mergeCells: {
            A1: [2, 1]
        },
        rows: {
            0: { height:'200px' }
        },
        cells: {
            A1: { type:'html' },
            B2: { type:'number', mask: '#.##0,00' },
            B3: { type:'number', mask: '#.##0,00' },
            B4: { type:'number', mask: '#.##0,00' },
            B5: { type:'number', mask: '0.00%' },
            B6: { type: 'dropdown', source: [12,24,36,48,60] },
            B8: { type:'number', mask: '#.##0,00' },
            B9: { type:'number', mask: '#.##0,00' },
        },
    }]
});
</script>
</html>

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

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

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    // Data
    const data = [
        ['<h4>Vehicle Payment Calculator</h4>', ''],
        ['Purchase price', '19700'],
        ['Down payment', '1000'],
        ['Trade-in value', '500'],
        ['Interest rate', '0.0305'],
        ['Length of loan (in months)', '60'],
        ['', ''],
        ['Monthly payment', '=PMT(B5/12,B6,B2-(B3+B4))'],
        ['Total cost', '=-(B8*B6)+(B3+B4)'],
    ];
    // Cells
    const cells = {
        A1: {type: 'html'},
        B2: {type: 'number', mask: '#.##0,00'},
        B3: {type: 'number', mask: '#.##0,00'},
        B4: {type: 'number', mask: '#.##0,00'},
        B5: {type: 'number', mask: '0.00%'},
        B6: {type: 'dropdown', source: [12, 24, 36, 48, 60]},
        B8: {type: 'number', mask: '#.##0,00'},
        B9: {type: 'number', mask: '#.##0,00'},
    }
    // Columns
    const columns = [
        {width: '300px'},
        {width: '200px'},
    ];
    // Merge cells
    const mergeCells = {
        A1: [2, 1],
    }
    // Rows properties
    const rows = {
        0: {height: '200px'}
    }

    // Render component
    return (
        <Spreadsheet ref={spreadsheet}>
            <Worksheet data={data} cells={cells} columns={columns} mergeCells={mergeCells} rows={rows}/>
        </Spreadsheet>
    );
}

<template>
    <Spreadsheet ref="spreadsheet">
        <Worksheet :data="data" :columns="columns" :cells="cells" :mergeCells="mergeCells" :rows="rows" />
    </Spreadsheet>
</template>

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

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

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    data() {
        // Data
        const data = [
            ['<h4>Vehicle Payment Calculator</h4>', ''],
            ['Purchase price', '19700'],
            ['Down payment', '1000'],
            ['Trade-in value', '500'],
            ['Interest rate', '0.0305'],
            ['Length of loan (in months)', '60'],
            ['', ''],
            ['Monthly payment', '=PMT(B5/12,B6,B2-(B3+B4))'],
            ['Total cost', '=-(B8*B6)+(B3+B4)'],
        ];
        // Cells
        const cells = {
            A1: { type:'html' },
            B2: { type:'number', mask: '#.##0,00' },
            B3: { type:'number', mask: '#.##0,00' },
            B4: { type:'number', mask: '#.##0,00' },
            B5: { type:'number', mask: '0.00%' },
            B6: { type: 'dropdown', source: [12,24,36,48,60] },
            B8: { type:'number', mask: '#.##0,00' },
            B9: { type:'number', mask: '#.##0,00' },
        }
        // Columns
        const columns = [
            { width:'300px' },
            { width:'200px' },
        ];
        // Merge cells
        const mergeCells = {
            A1: [2, 1],
        }
        // Rows properties
        const rows = {
            0: { height:'200px' }
        }

        return {
            data,
            cells,
            columns,
            mergeCells,
            rows
        };
    }
}
</script>

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

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

@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: [{
                data: [
                    ['<h4>Vehicle Payment Calculator</h4>', ''],
                    ['Purchase price', '19700'],
                    ['Down payment', '1000'],
                    ['Trade-in value', '500'],
                    ['Interest rate', '0.0305'],
                    ['Length of loan (in months)', '60'],
                    ['', ''],
                    ['Monthly payment', '=PMT(B5/12,B6,B2-(B3+B4))'],
                    ['Total cost', '=-(B8*B6)+(B3+B4)'],
                ],
                columns: [
                    { width: '300px' },
                    { width: '200px' },
                ],
                mergeCells: {
                    A1: [2, 1]
                },
                rows: {
                    0: { height: '200px' }
                },
                cells: {
                    A1: { type:'html' },
                    B2: { type:'number', mask: '#.##0,00' },
                    B3: { type:'number', mask: '#.##0,00' },
                    B4: { type:'number', mask: '#.##0,00' },
                    B5: { type:'number', mask: '0.00%' },
                    B6: { type: 'dropdown', source: [12,24,36,48,60] },
                    B8: { type:'number', mask: '#.##0,00' },
                    B9: { type:'number', mask: '#.##0,00' },
                },
            }]
        });
    }
}

Changing Cell Type Programmatically

This example demonstrates how to dynamically change a specific cell's type.

<html>
<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>

<p><input type="button" value="Change A1 to dropdown" id="btn1" /></p>

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

const setType = function() {
    // Change the cell editor type
    worksheets[0].setProperty(0,0,{
        type: 'dropdown',
        source: ['Male','Female'],
    });
    // Define the new value
    worksheets[0].setValue('A1', 'Male');
}

// Create a new spreadsheet
let worksheets = jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        minDimensions: [6, 6],
    }]
});

document.getElementById('btn1').onclick = setType;
</script>
</html>

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

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

const setType = (worksheet) => {
    // Change the cell editor type
    worksheet.setProperty(0,0,{
        type: 'dropdown',
        source: ['Male','Female'],
    });
    // Define the new value
    worksheet.setValue('A1', 'Male');
}

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

    // Render component
    return (
        <>
            <Spreadsheet ref={spreadsheet}>
                <Worksheet minDimensions={[6, 6]} />
            </Spreadsheet>
            <input type="button" onClick={() => setType(spreadsheet.current[0])} value="Change A1 to a dropdown" />
        </>
    );
}

<template>
    <Spreadsheet ref="spreadsheet">
        <Worksheet :minDimensions="[6, 6]" />
    </Spreadsheet>
    <input type="button" @click="setType" value="Change A1 to a dropdown" />
</template>

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

jspreadsheet.setLicense('NzEzZDhlNzhjNmY4YmNlOWJhMjliYzU3MGNjNDQyZGI3YWY5NDU0YTZhZjRkZGY4YjNmZTUyYWY0MTFkMWI3M2VmMjE2NDZjMmUxNWQ3MWNlZWU3OTZmY2VlNGE5NDI1MjRmZTQ0ZjNmNmVhMDU4NGI3ZjNiNzg3YTQ3NzdlZjAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNelUwTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    methods: {
        setType() {
            // First worksheet
            let worksheet = this.$refs.spreadsheet.current[0];

            // Change the cell editor type
            worksheet.setProperty(0, 0, {
                type: 'dropdown',
                source: ['Male', 'Female'],
            });

            // Define the new value
            worksheet.setValue('A1', 'Male');
        },
    },
};
</script>

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

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

// Create component
@Component({
    standalone: true,
    selector: "app-root",
    template: `<div #spreadsheet></div>
        <input type="button" (click)="setType(this.worksheets[0])" value="Change A1 to a dropdown" />`,
})
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: [6, 6] }]
        });
    }

    // Set the type
    setType = (worksheet: any) => {
        // Change the cell editor type
        worksheet.setProperty(0, 0, {
            type: 'dropdown',
            source: ['Male', 'Female'],
        });
        // Define the new value
        worksheet.setValue('A1', 'Male');
    }
}

More information

Batch Updates

This example demonstrates how to change the cell type of multiple cells simultaneously using the setProperty method.

<html>
<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>

<p><input type="button" value="Apply Batch Updates" id="batchBtn" /></p>

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

const applyBatchUpdates = function() {
    // Define multiple property updates
    let records = [
        { x: 0, y: 0, value: { type: 'html' } },
        { x: 1, y: 1, value: { type: 'number', mask: '#.##0,00' } },
        { x: 2, y: 2, value: { type: 'dropdown', source: ['Option 1', 'Option 2', 'Option 3'] } },
        { x: 0, y: 3, value: { type: 'calendar', format: 'DD/MM/YYYY' } },
        { x: 1, y: 3, value: { type: 'color' } },
    ];

    // Apply batch property updates
    worksheets[0].setProperty(records);

    // Set some sample values to demonstrate the cell types
    worksheets[0].setValue('A1', '<b>Bold Text</b>');
    worksheets[0].setValue('B2', '1234.56');
    worksheets[0].setValue('C3', 'Option 1');
    worksheets[0].setValue('A4', '25/12/2023');
    worksheets[0].setValue('B4', '#ff0000');
}

// Create a new spreadsheet
let worksheets = jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        data: [
            ['Sample Text', '', '', ''],
            ['', '123', '', ''],
            ['', '', 'Select Item', ''],
            ['Date Here', 'Color Here', '', ''],
            ['', '', '', ''],
        ],
        columns: [
            { width: '150px' },
            { width: '150px' },
            { width: '150px' },
            { width: '150px' },
        ],
        minDimensions: [4, 5],
    }]
});

document.getElementById('batchBtn').onclick = applyBatchUpdates;
</script>
</html>

Reset cell properties to default

This example demonstrates how to reset cell properties to their default column settings.

<html>
<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>

<p>
    <input type="button" value="Set A1 as dropdown" id="setBtn" />
    <input type="button" value="Reset A1 to default" id="resetBtn" />
</p>

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

const setCellType = function() {
    // Set A1 as dropdown with custom properties
    worksheets[0].setProperty(0, 0, {
        type: 'dropdown',
        source: ['Option 1', 'Option 2', 'Option 3'],
        readOnly: false
    });
    worksheets[0].setValue('A1', 'Option 1');
}

const resetCellType = function() {
    // Reset A1 properties to default (inherits from column settings)
    worksheets[0].setProperty(0, 0, null);
    worksheets[0].setValue('A1', 'Reset');
}

// Create a new spreadsheet
let worksheets = jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        data: [
            ['Sample Text', 'Column B', 'Column C'],
            ['Row 2', 'Data B2', 'Data C2'],
            ['Row 3', 'Data B3', 'Data C3'],
        ],
        columns: [
            { width: '150px', type: 'text' },
            { width: '150px', type: 'text' },
            { width: '150px', type: 'text' },
        ],
        minDimensions: [3, 5],
    }]
});

document.getElementById('setBtn').onclick = setCellType;
document.getElementById('resetBtn').onclick = resetCellType;
</script>
</html>

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

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

const setCellType = (worksheet) => {
    // Set A1 as dropdown with custom properties
    worksheet.setProperty(0, 0, {
        type: 'dropdown',
        source: ['Option 1', 'Option 2', 'Option 3'],
        readOnly: false
    });
    worksheet.setValue('A1', 'Option 1');
}

const resetCellType = (worksheet) => {
    // Reset A1 properties to default (inherits from column settings)
    worksheet.setProperty(0, 0, null);
    worksheet.setValue('A1', 'Reset');
}

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    // Data
    const data = [
        ['Sample Text', 'Column B', 'Column C'],
        ['Row 2', 'Data B2', 'Data C2'],
        ['Row 3', 'Data B3', 'Data C3'],
    ];
    // Columns
    const columns = [
        { width: '150px', type: 'text' },
        { width: '150px', type: 'text' },
        { width: '150px', type: 'text' },
    ];

    // Render component
    return (
        <>
            <Spreadsheet ref={spreadsheet}>
                <Worksheet data={data} columns={columns} minDimensions={[3, 5]} />
            </Spreadsheet>
            <p>
                <button onClick={() => setCellType(spreadsheet.current[0])}>
                    Set A1 as dropdown
                </button>
                <button onClick={() => resetCellType(spreadsheet.current[0])}>
                    Reset A1 to default
                </button>
            </p>
        </>
    );
}

<template>
    <Spreadsheet ref="spreadsheet">
        <Worksheet :data="data" :columns="columns" :minDimensions="[3, 5]" />
    </Spreadsheet>
    <p>
        <button @click="setCellType">Set A1 as dropdown</button>
        <button @click="resetCellType">Reset A1 to default</button>
    </p>
</template>

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

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

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    data() {
        // Data
        const data = [
            ['Sample Text', 'Column B', 'Column C'],
            ['Row 2', 'Data B2', 'Data C2'],
            ['Row 3', 'Data B3', 'Data C3'],
        ];
        // Columns
        const columns = [
            { width: '150px', type: 'text' },
            { width: '150px', type: 'text' },
            { width: '150px', type: 'text' },
        ];

        return {
            data,
            columns,
        };
    },
    methods: {
        setCellType() {
            const worksheet = this.$refs.spreadsheet.current[0];
            // Set A1 as a dropdown with custom properties
            worksheet.setProperty(0, 0, {
                type: 'dropdown',
                source: ['Option 1', 'Option 2', 'Option 3'],
                readOnly: false
            });
            worksheet.setValue('A1', 'Option 1');
        },
        resetCellType() {
            const worksheet = this.$refs.spreadsheet.current[0];
            // Reset A1 properties to default (inherits from column settings)
            worksheet.setProperty(0, 0, null);
            worksheet.setValue('A1', 'Reset');
        },
    },
};
</script>

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

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

// Create component
@Component({
    standalone: true,
    selector: "app-root",
    template: `<div #spreadsheet></div>
        <p>
            <button (click)="setCellType()">Set A1 as dropdown</button>
            <button (click)="resetCellType()">Reset A1 to default</button>
        </p>`,
})
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: [{
                data: [
                    ['Sample Text', 'Column B', 'Column C'],
                    ['Row 2', 'Data B2', 'Data C2'],
                    ['Row 3', 'Data B3', 'Data C3'],
                ],
                columns: [
                    { width: '150px', type: 'text' },
                    { width: '150px', type: 'text' },
                    { width: '150px', type: 'text' },
                ],
                minDimensions: [3, 5],
            }]
        });
    }

    // Set cell type
    setCellType() {
        // Set A1 as dropdown with custom properties
        this.worksheets[0].setProperty(0, 0, {
            type: 'dropdown',
            source: ['Option 1', 'Option 2', 'Option 3'],
            readOnly: false
        });
        this.worksheets[0].setValue('A1', 'Option 1');
    }

    // Reset cell type
    resetCellType() {
        // Reset A1 properties to default (inherits from column settings)
        this.worksheets[0].setProperty(0, 0, null);
        this.worksheets[0].setValue('A1', 'Reset');
    }
}

Related data grid documentation

Edit this page on GitHub