Documentation
Back to the Documentation

Rows

This section covers all information about row management.

Documentation

Methods

The following methods interact with the rows programmatically.
MethodDescription
getHeight Get the row height.
getHeight(rowNumber?: Number) => number
setHeight Set the row height.
setHeight(rowNumber: Number, height: Number) => void
getRow Get the row settings by number.
getRow(rowNumber: Number) => Object
moveRow Change the position of a row.
moveRow(rowNumber: Number, newPositionNumber: Number) => void
insertRow Create one or multiple new rows.
insertRow(mixed: Mixed, rowNumber: Number, insertBefore: Boolean, data: Array) => void
@param {number|array} - number of rows to be added | array with the data to be added (it will create a new single row with this data)
@param {number?} rowNumber - The new row reference position | null refers to the last row in the spreadsheet
@param {boolean} insertBefore - The new row(s) should be included before or after the rowNumber defined
@param {array} data - Array with the new row data
deleteRow Delete one or more rows.
deleteRow(rowNumber: Number, numOfRows: Number) => void
@param {number} rowNumber - Which column should be excluded starting from zero
@param {number} numOfRows - Number of rows to be excluded from the define row reference
showRow Show a row by number.
showRow(rowNumber: Number) => void
@param {number} rowNumber - Show the row by its number
hideRow Hide a row by number.
hideRow(rowNumber: Number) => void
@param {number} rowNumber - Hide the row by its number
getSelectedRows Get the selected rows.
getSelectedRows(asIds: Boolean) => array|string


Events

There are several events related to the row in your spreadsheet. There are a few onbefore events to intercept, validate or cancel a user action.
EventDescription
oncreaterow oncreaterow(worksheet: Object, rowNumber: Number, tr: HTMLElement)
After a new row is inserted.
onbeforeinsertrow onbeforeinsertrow(worksheet: Object, rowNumber: Number, numOfRows: Number, insertBefore: Boolean) => Boolean
Before a new row is inserted. Return false to cancel the user action.
oninsertrow oninsertrow(worksheet: Object, rowNumber: Number, numOfRows: Number, historyRecords: Array, insertBefore: Boolean)
After a new row is inserted.
onbeforedeleterow onbeforedeleterow(worksheet: Object, rowNumber: Number, numOfRows: Number)
Before a row is deleted. Return false to cancel the user action.
ondeleterow ondeleterow(worksheet: Object, rowRecords: DOMElements, rowData: Array, cellAttributes: Object)
After a row is deleted.
onmoverow onmoverow(worksheet: Object, origin: Number, destination: Number)
After a row is moved to a new position.
onresizerow onresizerow(worksheet: Object, row: Mixed, height: Mixed, oldHeight: Mixed)
After the height changes for one or more rows.


Initial Settings

The following row-related properties are available through the spreadsheet initialization.
PropertyDescription
allowInsertRow: booleanEnable the user to enter new rows. Default: true
allowManualInsertRow: booleanA new row is automatically inserted when the user presses the enter key in the last row. Default: true
allowDeleteRow: booleanAllow the user to delete rows. Default: true
rowDrag: booleanAllow the user to change the position of one row by dragging and dropping. Default: true
rowResize: booleanAllow the user to resize rows. Default: true
defaultRowHeight: numberThe default row height. From version 8: this can have an impact on the scroll calculations.
minSpareRows: numberThe mandatory number of blank rows at the end of the spreadsheet. Default: none.


Available properties

It is possible to initialize the spreadsheet with a custom id, text and height using the following properties:
PropertyDescription
id: numberDefines the record id. That is helpful for synchronizing the spreadsheet content with a database.
height: numberDefines the row height in pixels.
index: stringThe row index text. Default: row number



Examples

A basic spreadsheet with a few programmatic methods available.



  1. Click to insert a new blank row at the end of the spreadsheet
  2. Click to insert two new blank rows at the beginning of the spreadsheet
  3. Click to insert a new row with pre-populated values at the end of the spreadsheet
  4. Click to delete the last row
  5. Click to move the first row to the third position
  6. Hide the first row
  7. Show the first row

Source code

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

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

<ol class='example' style='cursor:pointer;'>
    <li><a onclick="spreadsheet[0].insertRow()">Click to insert a new blank row at the end of the spreadsheet</a></li>
    <li><a onclick="spreadsheet[0].insertRow(2, 0, 1);">Click to insert two new blank rows at the beginning of the spreadsheet</a></li>
    <li><a onclick="spreadsheet[0].insertRow([ '0.99', '1.22', '3.11', '2.21' ]);">Click to insert a new row with pre-populated values at the end of the spreadsheet</a></li>
    <li><a onclick="spreadsheet[0].deleteRow();">Click to delete the last row</a></li>
    <li><a onclick="spreadsheet[0].moveRow(0, 2);">Click to move the first row to the third position</a></li>
    <li><a onclick="spreadsheet[0].hideRow(0);">Hide the first row</a></li>
    <li><a onclick="spreadsheet[0].showRow(0);">Show the first row</a></li>
</ol>

<script>
// Set the JSS spreadsheet license
jspreadsheet.setLicense('ZmVmNzlkYzA1MThhN2Y2M2U1MThlOTc4NjkwMGQ3ZTlmZDhhZDU4ZDVkNmFjNjVkZDMwODBjZDFlNDdlODdjMGU4NDFjYjg3OWYxOTkwNGQwMWZmZTFhYzk4NjE5NmNjNWQ0M2E1M2Y5MmM1ZWE5MzM0MmE2Y2Q0MTQwYzYwOTcsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOalV3TkRJNU1Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09');

// Create the spreadsheet
var spreadsheet = jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        data: [
            ['US', 'Cheese', 1000 ],
            ['CA', 'Apples', 1200 ],
            ['CA', 'Carrots', 2000 ],
            ['BR', 'Oranges', 3800 ],
        ],
        worksheetName: 'Row management',
    }],
});
</script>
</html>