DocumentationCells

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.

What's new with Version 13

  • Properties API: setCellProperties and getCellProperties replace setProperty and getProperty. The setter takes an array or a map keyed by cell name, so batch updates are native. More information
  • Replace or update: a record replaces the cell own properties by default; add update: true to merge a subset over the current ones. Passing null resets the cell to the column definitions
  • Effective properties: getCellProperties(x, y) returns what the cell actually uses: its own properties, or the column definitions as fallback
  • Events: onchangecellproperties replaces onchangeproperty
  • Sparse storage: cells are created on demand, so a large grid with few values costs nothing for the empty area. getCellRowObject(y) gives direct access to the row records

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
getCellProperties Retrieves the effective properties of a cell: its own properties, or the column definitions as fallback.
getCellProperties(column: Number, row: Number) : Object
setCellProperties Replaces the own properties of one or more cells. Pass null as the value to reset a cell to its column definitions.
setCellProperties(records: Object[]) : void
setCellProperties The same operation with a map keyed by cell name.
setCellProperties(records: { [cellName: string]: Object }) : void
getCellRowObject Direct access to the sparse row records, for advanced integrations.
getCellRowObject(row: Number) : Object[]

Cell Batch Updates

setCellProperties always works in batch: pass an array of records with the following structure. Column definitions have their own method, setColumnProperties, described in the columns section.

Attribute Description
x: number The zero-indexed column number.
y: number The zero-indexed row number.
value: object | null The properties of the cell. null or an empty object resets the cell to the column definitions.
update?: boolean When true, merges the given properties over the current ones. When false or omitted, replaces the own properties entirely.

Records with coordinates beyond the grid are skipped; the valid records of the batch still apply. Every change is one undoable operation, and only the records travel to connected users.

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
onchangecellproperties Triggered after setCellProperties, with the records that were applied.
onchangecellproperties(worksheet: Object, records: 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' | 'progressbar' | 'rating' | 'email' | 'url' | 'image' | 'html' | 'hidden' | 'tags' | 'record'
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/docs/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/v13/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v13/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('YjQ0YTRhYTY0OGI0YThiYzRmYTZkYjZmMWQ1NTdmYmFhOWE0NTgxMmYxZDE4MDRiMjhlZDJmNDAzMTFhZjJhMWNkMDEyYWRiYmM5Yzc0MTViMTA0Yjk3MGNhNDQzNDYzODBiMWMxMWFkZjAyNzUyMjdmN2JmMGMwNzBlYTVhYjgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpnNU16ZzFOVGd4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');

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

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

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";

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

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"

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

@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/v13/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v13/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>
// 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('YjQ0YTRhYTY0OGI0YThiYzRmYTZkYjZmMWQ1NTdmYmFhOWE0NTgxMmYxZDE4MDRiMjhlZDJmNDAzMTFhZjJhMWNkMDEyYWRiYmM5Yzc0MTViMTA0Yjk3MGNhNDQzNDYzODBiMWMxMWFkZjAyNzUyMjdmN2JmMGMwNzBlYTVhYjgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpnNU16ZzFOVGd4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');

const setType = function() {
    // Change the cell editor type
    worksheets[0].setCellProperties([{ x: 0, y: 0, value: {
        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";

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

const setType = (worksheet) => {
    // Change the cell editor type
    worksheet.setCellProperties([{ x: 0, y: 0, value: {
        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('YjQ0YTRhYTY0OGI0YThiYzRmYTZkYjZmMWQ1NTdmYmFhOWE0NTgxMmYxZDE4MDRiMjhlZDJmNDAzMTFhZjJhMWNkMDEyYWRiYmM5Yzc0MTViMTA0Yjk3MGNhNDQzNDYzODBiMWMxMWFkZjAyNzUyMjdmN2JmMGMwNzBlYTVhYjgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpnNU16ZzFOVGd4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');

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

            // Change the cell editor type
            worksheet.setCellProperties([{ x: 0, y: 0, value: {
                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"

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

// 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.setCellProperties([{ x: 0, y: 0, value: {
            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/v13/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v13/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>
// 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('YjQ0YTRhYTY0OGI0YThiYzRmYTZkYjZmMWQ1NTdmYmFhOWE0NTgxMmYxZDE4MDRiMjhlZDJmNDAzMTFhZjJhMWNkMDEyYWRiYmM5Yzc0MTViMTA0Yjk3MGNhNDQzNDYzODBiMWMxMWFkZjAyNzUyMjdmN2JmMGMwNzBlYTVhYjgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpnNU16ZzFOVGd4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');

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].setCellProperties(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>

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

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

const applyBatchUpdates = (worksheet) => {
    // 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
    worksheet.setCellProperties(records);

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

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    // Data
    const data = [
        ['Sample Text', '', '', ''],
        ['', '123', '', ''],
        ['', '', 'Select Item', ''],
        ['Date Here', 'Color Here', '', ''],
        ['', '', '', ''],
    ];
    // Columns
    const columns = [
        { width: '150px' },
        { width: '150px' },
        { width: '150px' },
        { width: '150px' },
    ];

    // Render component
    return (
        <>
            <Spreadsheet ref={spreadsheet}>
                <Worksheet data={data} columns={columns} minDimensions={[4, 5]} />
            </Spreadsheet>
            <p>
                <button onClick={() => applyBatchUpdates(spreadsheet.current[0])}>
                    Apply Batch Updates
                </button>
            </p>
        </>
    );
}

<template>
    <Spreadsheet ref="spreadsheet">
        <Worksheet :data="data" :columns="columns" :minDimensions="[4, 5]" />
    </Spreadsheet>
    <p>
        <button @click="applyBatchUpdates">Apply Batch Updates</button>
    </p>
</template>

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

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

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    data() {
        // Data
        const data = [
            ['Sample Text', '', '', ''],
            ['', '123', '', ''],
            ['', '', 'Select Item', ''],
            ['Date Here', 'Color Here', '', ''],
            ['', '', '', ''],
        ];
        // Columns
        const columns = [
            { width: '150px' },
            { width: '150px' },
            { width: '150px' },
            { width: '150px' },
        ];

        return {
            data,
            columns,
        };
    },
    methods: {
        applyBatchUpdates() {
            const worksheet = this.$refs.spreadsheet.current[0];
            // 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
            worksheet.setCellProperties(records);

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

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

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

// Create component
@Component({
    standalone: true,
    selector: "app-root",
    template: `<div #spreadsheet></div>
        <p>
            <button (click)="applyBatchUpdates()">Apply Batch Updates</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', '', '', ''],
                    ['', '123', '', ''],
                    ['', '', 'Select Item', ''],
                    ['Date Here', 'Color Here', '', ''],
                    ['', '', '', ''],
                ],
                columns: [
                    { width: '150px' },
                    { width: '150px' },
                    { width: '150px' },
                    { width: '150px' },
                ],
                minDimensions: [4, 5],
            }]
        });
    }

    // Apply batch updates
    applyBatchUpdates() {
        // 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
        this.worksheets[0].setCellProperties(records);

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

Reset cell properties to default

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

<html>
<script src="https://jspreadsheet.com/v13/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v13/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>
// 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('YjQ0YTRhYTY0OGI0YThiYzRmYTZkYjZmMWQ1NTdmYmFhOWE0NTgxMmYxZDE4MDRiMjhlZDJmNDAzMTFhZjJhMWNkMDEyYWRiYmM5Yzc0MTViMTA0Yjk3MGNhNDQzNDYzODBiMWMxMWFkZjAyNzUyMjdmN2JmMGMwNzBlYTVhYjgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpnNU16ZzFOVGd4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW5ZeE15SXNJbU5vWVhKMGN5SXNJbVp2Y20xeklpd2labTl5YlhWc1lTSXNJbkJoY25ObGNpSXNJbkpsYm1SbGNpSXNJbU52YlcxbGJuUnpJaXdpYVcxd2IzSjBaWElpTENKaVlYSWlMQ0oyWVd4cFpHRjBhVzl1Y3lJc0luTmxZWEpqYUNJc0luQnlhVzUwSWl3aWMyaGxaWFJ6SWl3aVkyeHBaVzUwSWl3aWMyVnlkbVZ5SWl3aWMyaGhjR1Z6SWl3aVptOXliV0YwSWl3aWNHbDJiM1FpWFN3aVpHVnRieUk2ZEhKMVpYMD0=');

const setCellType = function() {
    // Set A1 as dropdown with custom properties
    worksheets[0].setCellProperties([{ x: 0, y: 0, value: {
        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].setCellProperties([{ x: 0, y: 0, value: 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";

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

const setCellType = (worksheet) => {
    // Set A1 as dropdown with custom properties
    worksheet.setCellProperties([{ x: 0, y: 0, value: {
        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.setCellProperties([{ x: 0, y: 0, value: 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";

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

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.setCellProperties([{ x: 0, y: 0, value: {
                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.setCellProperties([{ x: 0, y: 0, value: 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"

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

// 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].setCellProperties([{ x: 0, y: 0, value: {
            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].setCellProperties([{ x: 0, y: 0, value: null }]);
        this.worksheets[0].setValue('A1', 'Reset');
    }
}

Related data grid documentation