Documentation
Back to the Documentation

Cells

The cells property helps overwrite the column settings for one individual cell. It defines the input data type editor and many other properties, such as read-only, masks, render, and much more.

Documentation

Methods

The following methods interact with the cells programmatically.
MethodDescription
getCell Get the spreadsheet cell object from the cell name. The cell name is the spreadsheet standard such as A1, B3
getCell(cellName: String) => Object
getCellFromCoords Get the spreadsheet cell object from its coordinates. The coordinates starts on zero-zero for the first cell A1.
getCellFromCoords(x: Number, y: Number) => Object
getSelected Get the worksheet selected cells.
getSelected(columnNameOnly: Boolean, ignoreHidden: Boolean) => Array
@param columnNameOnly: To get only the cell names as string (true). Get the cell objects (false).
@param ignoreHidden: Exclude hidden cells (true). Bring all cells (false)
updateCell This is a internal method and it does not perform persistence or history. You should avoid using this method, please use setValue instead.
updateCell(x: Number, y: Number, value: String, force: Boolean) => Array
getCells Get the attribute settings from a cell by cell name.
getCells(cellName: String) => Object
setCells Set the attribute settings for a cell by cell name.
setCells(cellName: String, attributes: Object) => void
isAttached Verify if a cell element is attached to the DOM.
isAttached(x: Number, y: Number) => void


Events

JS events related to the JavaScript grid cells.
PropertyDescription
oncreatecell oncreatecell(worksheet: Object, cell: DOMElement, x: Number, y: Number, value: Value) => void
JSS creates the cells progressively when the viewport is in use.



Cells settings Pro

The following property is available through the initialization of the spreadsheet.
PropertyDescription
cells: arrayArray with the initial cell attributes.



Examples

The following example shows how to initialize the spreadsheet with custom attributes at the cell level.



Source code

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

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

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

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

// Create the spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        data: [
            ['<img src="https://www.autoblog.com/img/research/styles/photos/performance.jpg"
                width="150" tabindex="0"><br><h3>Vehicle Payment Calculator</h3>', ''],
            ['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%' },
            B8: { type:'number', mask: '#.##0,00' },
            B9: { type:'number', mask: '#.##0,00' },
        },
    }]
});
</script>
</html>