Skip to content

✏️ A small jQuery extension to turn a static HTML table into an editable one. For quickly populating a small table with JSON data, letting the user modify it with validation, and then getting JSON data back out.

Notifications You must be signed in to change notification settings

torrobinson/jquery-editable-table

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 

Repository files navigation

jquery-editable-table

A small jQuery extension to turn an HTML table editable for fast data entry and validation

Demo



Config

{
 columns: [], // required
 actions: []  // optional
}

columns

Option Type Description
index int The index of the column in the physical table
isHidden bool Whether or not to hide the column from being seen/edited
name string The name of the attribute bound to this column
maxLength int The max length allowed to input
classes array An array of CSS classes to assign to this column's cells
convertOut function(internalValue) A function to take an internal value (most likely a string) to format or cast it when the value is being extracted with getData()
isValid function(newValue, allData) A function to validate a new valid being added. Function provides all table data to compare against.
afterChange function(newValue, cell) A function that is executed after a cell value is changed (and validated). It provides the new value, as well as the physical table cell holding it.
removeRowIfCleared bool If true, when this cell value is cleared for a row, the entire row will be removed.

actions

Option Type Description
label string HTML for the button or icon for this action
action function(clickEventArgs, row) The action to perform when the button/icon is clicked



Functions

Function Parameters Description
getData () Returns all table data (array)
setData (data array) Accepts data (array) and sets the table to this state
addRow (newRow) Accepts an object and adds to the end of table data
clear () Clears all data from the table

Example...

 <table id="sample-table">
   <thead>
     <tr>
       <th>Unique Id</th>
       <th>Number</th>
     </tr>
   </thead>
   <tbody>
   </tbody>
</table>
$('#sample-table').editableTable({
    columns: [
        // Example of a field that must be unique
        {
            index: 0,
            name: 'id',
            removeRowIfCleared: true,
            isValid: (newVal, data) => {
                // Ensure the id number is unique
                let allIds = data.map(p => p.id);
                return !allIds.includes(newVal);
            }
        },
        // Example of a number that is validated as an int
        {
            index: 1,
            name: 'number',
            classes: ['text-end'],
            isValid: (val) => {
                val = parseInt(val);
                return !isNaN(val) && Number.isInteger(val);
            }
        }
    ],
    actions: [
    	{
      	label: '<button>Delete</button>',
        action: (e, row) => {
        	 // Remove the row from the table
          row.remove();
        }
      },
    ]
});

About

✏️ A small jQuery extension to turn a static HTML table into an editable one. For quickly populating a small table with JSON data, letting the user modify it with validation, and then getting JSON data back out.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published