A table editor extension for Vanilla-DataTables.
npm install vanilla-datatables-editablev0.1.1 and above has been updated to be compatable with v2.0 of Vanilla-DataTables. If you're using an older version of Vanilla-DataTables then you need v0.0.10 of Editable.
bower install vanilla-datatables-editable --save
`
npm
`
npm install vanilla-datatables-editable --save
`
---
$3
Grab the files from one of the CDNs and include them in your page:
`html
//or
`
You can replace latest with the required release number.
NOTE: Make sure the above js file is included AFTER the main Vanilla-DataTables js file.
---
$3
`javascript
var datatable = new DataTable(myTable, {
plugins: {
editable: {
enabled: true
}
}
});
`
Or you can delay initialisation:
`javascript
var datatable = new DataTable(myTable, {
plugins: {
editable: {
enabled: false
}
}
});
datatable.editable.init();
`
---
Options
`javascript
var datatable = new DataTable(myTable, {
plugins: {
editable: {
enabled: true,
// options go here
}
}
});
`
$3
#### type: Boolean
#### default: true
By default right-clicking the table body will open a custom context menu with a list of editor options. Set to false to disable.
$3
#### type: Array
Set the menu items of th context menu. Should be an Array of Objects with the text and action properties set.
The text property can be any string (including HTML) that represents the content of the menu item. The action property is the callback used when clicking the item.
You can use the separator property to add a separator.
The contextMenu option should be set to true.
$3
`javascript
var datatable = new DataTable(myTable, {
plugins: {
editable: {
enabled: true,
// Menu items with custom icons
menuItems: [{
text: " Edit Cell",
action: function(e) {
this.editCell();
}
},
{
text: " Edit Row",
action: function(e) {
this.editRow();
}
},
{
separator: true
},
{
text: " Remove Row",
action: function(e) {
if (confirm("Are you sure?")) {
this.removeRow();
}
}
}
]
}
}
});
`
$3
#### type: Boolean
#### default: false
By default any hidden columns will be ommited from the editor.
---
Public Methods
$3
Initialise the plugin.
`javascript
datatable.editable.init();
`
$3
Destroy the plugin instance.
`javascript
datatable.editable.destroy();
`
$3
Edit a cell. Just pass a reference to the cell you want to edit.
This method sets the cell in edit mode and shows the input for manually entering the content of the cell.
`javascript
// Grab the second cell of the third row
var cell = datatable.activeRows[2].cells[1];
// Edit it
datatable.editable.editCell(cell);
`
$3
Edit a row. Just pass a reference to the row you want to edit.
This method sets the row in edit mode and shows the modal with inputs for manually entering the content for each cell.
`javascript
// Grab the first row
var row = datatable.activeRows[0];
// Edit it
datatable.editable.editRow(row);
`
$3
Set the new content of a cell. Just pass the new cell content as the first argument and a reference to the cell as the second.
This can be used to either close and save a cell that is currently in edit mode (as above) or for quickly setting the content of the cell.
`javascript
// Grab the second cell of the third row
var cell = datatable.activeRows[2].cells[1];
// Save it
datatable.editable.saveCell("Foobar", cell);
`
If you already have a cell in edit mode, then just call the saveCell() method omitting the the second argument:
`javascript
// Grab the second cell of the third row
var cell = datatable.activeRows[2].cells[1];
// Edit it
datatable.editable.editCell(cell);
// Save it
datatable.editable.saveCell("Foobar");
`
$3
Set the new content of a row. Just pass the new row data as the first argument and a reference to the row as the second
This can be used to either close and save a row that is currently in edit mode (as above) or for quickly setting the content of the row.
`javascript
// Grab the third row
var row = datatable.activeRows[2];
// Save it
datatable.editable.saveRow(["foo", "bar", "baz", "qux"], row)
`
If you already have a row in edit mode, then just call the saveRow() method omitting the second argument:
`javascript
// Grab the third row
var row = datatable.activeRows[2].rows[1];
// Edit it
datatable.editable.editRow(row);
// Save it
datatable.editable.saveRow(["foo", "bar", "baz", "qux"]);
`
---
Events
$3
`javascript
/**
* Listen for the the editable.init event
*/
datatable.on("editable.init", function() {
// do something when the plugin initialises
});
`
$3
`javascript
/**
* Listen for the the editable.save.cell event
* @param {String} newValue The new cell content
* @param {String} oldValue The old cell content
* @param {Object} cell The HTMLTableCellElement
*/
datatable.on("editable.save.cell", function(newValue, oldValue, cell) {
// do something when the cell is saved
});
`
$3
`javascript
/**
* Listen for the the editable.save.row event
* @param {Array} newData The new row content
* @param {Array} oldData The old row content
* @param {Object} row The HTMLTableRowElement
*/
datatable.on("editable.save.row", function(newData, oldData, row) {
// do something when the row is saved
});
`
$3
$3
---
Changelog
v0.1.1
* Fixed Enter key not saving row.
v0.0.9
* Change event name:
* datatable.editable.init -> editable.init
* Add events:
* editable.save.cell
* editable.save.row
* editable.context.open
* editable.context.close
v0.0.8
* Allow saveCell() and saveRow() methods to save the current cell/row
v0.0.7
* Fixed context menu not closing
v0.0.6
* saveRow() method added
* saveCell() method added
* Allow disabling of contxt menu
v0.0.5
* Fixed editing rows with hidden columns
v0.0.4`