Documentationkeyboard_arrow_rightCells

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

The following methods provide programmatic access to cell properties and DOM elements within the spreadsheet.

Method Description
getCell Retrieves the DOM element of a cell by its alphanumeric reference (e.g., A1, B3).
getCell(cellName: String) : Object
getCellFromCoords Retrieves the DOM element of a cell using zero-indexed coordinates, where (0,0) corresponds to cell A1.
getCellFromCoords(x: Number, y: Number) : Object
isAttached Determines whether a cell element is currently attached to the DOM tree.
isAttached(x: Number, y: Number) : Boolean
getProperty Retrieves the configuration properties of a specific cell.
getProperty(column: Number, row: Number) : Object
setProperty Updates the configuration properties for a single cell.
setProperty(column: Number, row: Number, properties: Object) : void
setProperty Updates the configuration properties for multiple cells in a single operation.
setProperty(updates: object[]) : void

Cell Batch Updates

For batch property updates, pass an array of objects with the following structure:

Attribute Description
x: number The zero-indexed column number.
y?: number The zero-indexed row number. Omit this parameter to apply updates at the column level.
value: object The properties to be applied to the specified cell or column.
update?: boolean When true, merges the new properties with existing ones. When false or omitted, replaces all existing properties entirely.

Events

The following event handlers allow you to respond to cell-related operations.

Event Description
oncreatecell Invoked when a new cell is created in the spreadsheet.
oncreatecell(worksheet: Object, cell: DOMElement, x: Number, y: Number, value: any) : void
onchangeproperty Triggered when cell properties are modified using setProperty or updateProperty.
onchangeproperty(worksheet: Object, updates: Object[]) : void

Cell Configuration Properties

The following properties can be applied to individual cells to control their behavior, appearance, and editing capabilities.

Property Description
type: string Specifies the editor type for the cell. Accepts either a built-in editor type or 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 display title for the column header.
tooltip: string Tooltip text displayed when hovering over the column header.
align: string Horizontal alignment of the cell content. Default: center.
'center' | 'left' | 'right' | 'justify'
source: Array<DropdownItem> Array of items to display in dropdown or autocomplete editors.
autocomplete: boolean Enables autocomplete functionality for the column.
multiple: boolean Allows selection of multiple options in dropdown or autocomplete editors.
delimiter: string Character used to separate multiple dropdown selections. Default: ";".
mask: string Input mask pattern to apply to the cell. See https://jsuites.net/v5/javascript-mask for details.
decimal: string Character used as the decimal separator for numeric values.
'.' | ','
truncate: number Maximum number of characters to display before truncation occurs.
disabledMaskOnEdition: boolean Disables the input mask when the cell is in edit mode.
render: string | function Custom renderer function or rule for cell content.
render(td: HTMLElement, value: number|string, x: number, y: number, worksheet: worksheetInstance, options: Column) : void
format: string Format string for dates or numbers. Default for calendar type: "DD/MM/YYYY".
locale: string Locale identifier for Intl.NumberFormat internationalization.
options: object Additional configuration options for the column.
readOnly: boolean Marks the column as read-only, preventing user edits.
rotate: number Rotation angle for text content, ranging from -90 to 90 degrees. 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('ZDY1MDZjN2E1MDNjNzZkZDI5NTFmNTRlMWFhY2QwOTZhOGMxZDU1ZWI2MGYwYmVjMWM2NTcyMDE2YzljNDFhZjUzZWNkMTZkZWE1YTY5ODc1YmI4NGZmNDMxZTRhMmVjZWQzODc0MmYyN2Y3ODhmMGNmYzliN2M4YTMyMjViMWMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpZek9UWXlNVEV6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

// 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]
        },
        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('ZDY1MDZjN2E1MDNjNzZkZDI5NTFmNTRlMWFhY2QwOTZhOGMxZDU1ZWI2MGYwYmVjMWM2NTcyMDE2YzljNDFhZjUzZWNkMTZkZWE1YTY5ODc1YmI4NGZmNDMxZTRhMmVjZWQzODc0MmYyN2Y3ODhmMGNmYzliN2M4YTMyMjViMWMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpZek9UWXlNVEV6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

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

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

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

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

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

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

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

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

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

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

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

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