Spreadsheet-like Data Grid With Cell Editing - rsLiteGrid

rsLiteGrid is a simple, dynamic, editable data table plugin where the users are able to edit/save cell content just like in a spreadsheet.

More features:

• Keyboard Accessibility.
• Auto appends new rows to the table when the last row is changed.
• Renders a data table from JSON data.
• Export the current tabular data into JSON.

How to use it:

1. Download and insert the JavaScript jquery.rsLiteGrid.js after jQuery JavaScript library.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.rsLiteGrid.js"></script>

2. Create an emtpy table element for the data grid.

<table class="table"></table>

3. Prepare your tabular data.

• name: Mandatory identifier for JSON data exchange. Type: String.
• header: Optional column header, that is placed inside the <th> tag. Type: String. If ommited, then an empty <th></th> is created. But if header is always ommited in every element of cols, then not a single <th> is ever created (and therefore <header> is not created as well).
• markup: Control placed on this column. If ommited, then <input type="text"> is used. Type: String.
• defaultValue: Used to determine whether the cell has been changed.
• tabStop: Whether this column's cells are focusable on keyboard (tab or arrow keys) navigation. If ommited, then true is used. Type: boolean.

myData = [{
  name: 'name',
  header: 'Name'
}, {
  name: 'gender',
  header: 'Gender',
  markup: '<select><option value="male">Male</option><option value="female">Female</option></select>',
  defaultValue: 'male'
}, {
  name: 'age',
  header: 'Age',
  markup: '<input type="number">'
}, {
  name: 'rule',
  header: 'Rule'
}, {
  markup: '<button title="delete this row">X</button>',
  tabStop: false
}]

4. Populate the HTML table with the tabular data.

$('table').rsLiteGrid({
  cols: myData
})

5. Add a <caption> tag to the <table>. Default: null.

$('table').rsLiteGrid({
  cols: myData,
  caption: 'My Table Caption'
})

6. Set the min/max number of table rows.

• minRows: Minimum allowed number of rows. Use null or 0 if it is ok for the table to be empty. Type: positive integer.
• maxRows: Maximum allowed number of rows. Use null if there is no limit to the number of rows. Type: positive integer. Example: If table should have only 3 rows, set minRows = maxRows = 3; If table should have between 1 and 5 rows, set minRows = 1 and maxRows = 5; If table should have at least one row, set minRows = 1 and maxRows = null.

$('table').rsLiteGrid({
  cols: myData,
  minRows: 1,
  maxRows: null
})

7. Determines whether a new row is appended to the bottom of the table, when the last row is changed. Default: true.

$('table').rsLiteGrid({
  cols: myData,
  autoAddRows: true
})

8. Fire an event when a new row is about to be appended to the table. Possible parameters:

• $newRow: A jQuery object holding the content to be added
• index: A zero-based number that indicates the index of the new row in the table.

$('table').rsLiteGrid({
  cols: myData,
  onAddingRow: function(event, $newRow, index){
    // do something
  }
})

9. Fire an event after a new row is appended to the table. Possible parameters:

• $newRow: A jQuery object holding the content to be added
• index: A zero-based number that indicates the index of the new row in the table.

$('table').rsLiteGrid({
  cols: myData,
  onAddRow: function(event, $newRow, index){
    // do something
  }
})

10. Fire an event when a row is about to be removed from the table. Possible parameters:

• $deleteRow: A jQuery object holding the content to be removed.
• index: A zero-based number that indicates the index of the new row in the table.

$('table').rsLiteGrid({
  cols: myData,
  onRemovingRow: function(event, $deleteRow, index){
    // do something
  }
})

11. Fire an event after a row is removed from the table. Possible parameters:

• $deleteRow: A jQuery object holding the content to be removed.
• index: A zero-based number that indicates the index of the new row in the table.

$('table').rsLiteGrid({
  cols: myData,
  onRemoveRow: function(event, $newRow, index){
    // do something
  }
})

12. More callback functions.

$('table').rsLiteGrid({
  cols: myData,
  onCreate: null,
  onDestroy: null
})

13. Get the tabular data (JSON).

$('table').rsLiteGrid('getData')

14. Add a new row to the data table.

$('table').rsLiteGrid('addRow', rowData)

15. Set the row data.

$('table').rsLiteGrid('setData', [
  { name: 'John', rule: 'Developer', age: 43 },
  { name: 'Maria', gender: 'female' }
]);

16. Delete a row.

$('table').rsLiteGrid('delRow', $deleteRow);

17. Destroy the data table.

$('table').rsLiteGrid('destroy');

Changelog:

2019-10-07

• Adding empty row on setData method

---

This awesome jQuery plugin is developed by ruisoftware. For more Advanced Usages, please check the demo page or visit the official website.