Editable
A plugin that makes your Vanilla-DataTables instance editable.
Demo | Main Repo.
Note that v0.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
.
Install
Bower
bower install vanilla-datatables-editable --save
npm
npm install vanilla-datatables-editable --save
Browser
Grab the files from one of the CDNs and include them in your page:
<link href="https://unpkg.com/vanilla-datatables-editable@latest/datatable.editable.min.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/vanilla-datatables-editable@latest/datatable.editable.min.js" type="text/javascript"></script>
//or
<link href="https://cdn.jsdelivr.net/npm/vanilla-datatables-editable@latest/datatable.editable.min.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/vanilla-datatables-editable@latest/datatable.editable.min.js" type="text/javascript"></script>
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.
Enable Plugin:
var datatable = new DataTable(myTable, {
plugins: {
editable: {
enabled: true
}
}
});
Or you can delay initialisation:
var datatable = new DataTable(myTable, {
plugins: {
editable: {
enabled: false
}
}
});
datatable.editable.init();
Options
var datatable = new DataTable(myTable, {
plugins: {
editable: {
enabled: true,
}
}
});
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.
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
.
Example
var datatable = new DataTable(myTable, {
plugins: {
editable: {
enabled: true,
menuItems: [{
text: "<span class='mdi mdi-lead-pencil'></span> Edit Cell",
action: function(e) {
this.editCell();
}
},
{
text: "<span class='mdi mdi-lead-pencil'></span> Edit Row",
action: function(e) {
this.editRow();
}
},
{
separator: true
},
{
text: "<span class='mdi mdi-delete'></span> Remove Row",
action: function(e) {
if (confirm("Are you sure?")) {
this.removeRow();
}
}
}
]
}
}
});
hiddenColumns
type: Boolean
default: false
By default any hidden columns will be ommited from the editor.
Public Methods
init()
Initialise the plugin.
datatable.editable.init();
destroy()
Destroy the plugin instance.
datatable.editable.destroy();
editCell(cell)
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.
var cell = datatable.activeRows[2].cells[1];
datatable.editable.editCell(cell);
editRow(row)
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.
var row = datatable.activeRows[0];
datatable.editable.editRow(row);
saveCell(value, cell)
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.
var cell = datatable.activeRows[2].cells[1];
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:
var cell = datatable.activeRows[2].cells[1];
datatable.editable.editCell(cell);
datatable.editable.saveCell("Foobar");
saveRow(data, row)
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.
var row = datatable.activeRows[2];
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:
var row = datatable.activeRows[2].rows[1];
datatable.editable.editRow(row);
datatable.editable.saveRow(["foo", "bar", "baz", "qux"]);
Events
editable.init
datatable.on("editable.init", function() {
});
editable.save.cell
datatable.on("editable.save.cell", function(newValue, oldValue, cell) {
});
editable.save.row
datatable.on("editable.save.row", function(newData, oldData, row) {
});
editable.context.open
editable.context.close
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 addedsaveCell()
method added- Allow disabling of contxt menu
v0.0.5
- Fixed editing rows with hidden columns
v0.0.4
- Fixed edit mode exiting when clicking input
Copyright © 2017 Karl Saunders | MIT license