Spreadsheet-like Tabular Data Manipulation Plugin - Tabular Input

Tabular Input is a jQuery plugin that generates a Spreadsheet-like data table / grid with specific number of rows/columns and input fields for manipulating your tabular data on the web.

How to use it:

1. Add the jQuery Tabular Input plugin's JS and CSS files into your webpage which has jQuery library embedded.

<link href="css/tabular-input.css" rel="stylesheet">
<script src="js/tabular-input.js"></script>

2. Generate a 5x5 table / data grid inside a specific container.

jQuery('#demo').tabularInput({
  'rows': 5,
  'columns': 5
});

3. Enable animations on the data table / grid.

jQuery('#demo').tabularInput({
  'rows': 5,
  'columns': 5
  'animate': false
});

4. Add custom table headers.

jQuery('#demo').tabularInput({
  'rows': 5,
  'columns': 5
  'animate': false,
  'columnHeads': ['Name', 'Age', 'Sex', 'Occupation', 'Email']
});

5. Move to the last cell and press Tab.

jQuery('#demo').tabularInput({
  'rows': 5,
  'columns': 5
  'animate': false,
  'columnHeads': ['Name', 'Age', 'Sex', 'Occupation', 'Email'],
  'newRowOnTab': true,
});

6. Limit the maximum number of table rows.

jQuery('#demo').tabularInput({
  'rows': 5,
  'columns': 5
  'animate': false,
  'columnHeads': ['Name', 'Age', 'Sex', 'Occupation', 'Email'],
  'newRowOnTab': true,
  'maxRows': 10,
});

7. Assign a name to the data table / grid.

jQuery('#demo').tabularInput({
  'rows': 5,
  'columns': 5
  'animate': false,
  'columnHeads': ['Name', 'Age', 'Sex', 'Occupation', 'Email'],
  'newRowOnTab': true,
  'maxRows': 10,
  'name': 'myField'
});

8. API methods.

// Add a row at the end
$("#demo").tabularInput("addRow");      

// Delete the last row
$("#demo").tabularInput("deleteRow");     

// Delete row at index 2
$("#demo").tabularInput("deleteRow", 2);    

// Add a column at the end
$("#demo").tabularInput("addColumn");   

// Delete the last column  
$("#demo").tabularInput("deleteColumn");    

// Add headers to the table
$('#demo').tabularInput('setColumnHeads', ['Name', 'Age', 'Sex', 'Occupation']);

// Fetch value of first column, in the second row
$('[name="myField[0][1]"]').val();

// Set value of third column, in the fourth row
$('[name="myField[2][3]"]').val('JavaScript');

Change log:

2016-08-31

• Fixed FireFox tab bug

---

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