Cells

This section covers the events and methods, and settings related to the cells.

The cells settings help to overwrite the column properties for one individual cell. It defines the input data type editor and many other properties such as read-only, masks, render, and much more. It is recommended the developer read the section Columns before jumping on this one.

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


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 show how to initiate the spreadsheet with custom attributes at the cell level.



Source code

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

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

<script>
var 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)'],
];

jspreadsheet(document.getElementById('spreadsheet'), {
    data: data,
    columns: [
        { width:'300px' },
        { width:'200px' },
    ],
    mergeCells: {
        A1: [2, 1]
    },
    rows: {
        0: { height:'200px' }
    },
    cells: {
        A1: { type:'html', readOnly: true },
        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' },
    },
    license: 'MWEzMTE4MGFkNWY5YzQzNjE4NjZiNmE1NThhM2M0Yjc1NmUyNGM2N2YzZjU2NDQ5ZjM1MGFiYWNmOTFkNTkwODFiYmYwNDE1YjhhM2ViNGUyMzM2YjYzY2Q4NTcyMWE4MGQ4YjVjNjI2NWY4NWYyMTBjMWU5M2ZmNTU4OGI1MDQsZXlKdVlXMWxJam9pY0dGMWJDNW9iMlJsYkNJc0ltUmhkR1VpT2pFMk5UZzVOakk0TURBc0ltUnZiV0ZwYmlJNld5SnFjM0J5WldGa2MyaGxaWFF1WTI5dElpd2lZM05pTG1Gd2NDSXNJbXB6YUdWc2JDNXVaWFFpTENKc2IyTmhiR2h2YzNRaVhTd2ljR3hoYmlJNklqSWlMQ0p6WTI5d1pTSTZXeUoyTnlJc0luWTRJaXdpY0dGeWMyVnlJaXdpYzJobFpYUnpJaXdpWm05eWJYTWlMQ0p5Wlc1a1pYSWlMQ0ptYjNKdGRXeGhJbDE5',
});
</script>
</html>