Editable
A plugin that makes your Vanilla-DataTables instance editable.
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:
//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.
Enable Plugin:
var datatable = myTable plugins: editable: enabled: true ;
Or you can delay initialisation:
var datatable = myTable plugins: editable: enabled: false ; datatableeditable;
Options
var datatable = myTable plugins: editable: enabled: true // options go here ;
contextMenu
Boolean
type: true
default: By default right-clicking the table body will open a custom context menu with a list of editor options. Set to false
to disable.
menuItems
Array
type: 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 = myTable plugins: editable: enabled: true // Menu items with custom icons menuItems: text: "<span class='mdi mdi-lead-pencil'></span> Edit Cell" { this; } text: "<span class='mdi mdi-lead-pencil'></span> Edit Row" { this; } separator: true text: "<span class='mdi mdi-delete'></span> Remove Row" { if this; } ;
hiddenColumns
Boolean
type: false
default: By default any hidden columns will be ommited from the editor.
Public Methods
init()
Initialise the plugin.
datatableeditable;
destroy()
Destroy the plugin instance.
datatableeditable;
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.
// Grab the second cell of the third rowvar cell = datatableactiveRows2cells1; // Edit itdatatableeditable;
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.
// Grab the first rowvar row = datatableactiveRows0; // Edit itdatatableeditable;
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.
// Grab the second cell of the third rowvar cell = datatableactiveRows2cells1; // Save itdatatableeditable;
If you already have a cell in edit mode, then just call the saveCell()
method omitting the the second argument:
// Grab the second cell of the third rowvar cell = datatableactiveRows2cells1; // Edit itdatatableeditable; // Save itdatatableeditable;
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.
// Grab the third rowvar row = datatableactiveRows2; // Save itdatatableeditable
If you already have a row in edit mode, then just call the saveRow()
method omitting the second argument:
// Grab the third rowvar row = datatableactiveRows2rows1; // Edit itdatatableeditable; // Save itdatatableeditable;
Events
editable.init
/** * Listen for the the editable.init event */datatable;
editable.save.cell
/** * Listen for the the editable.save.cell event * @param * @param * @param */datatable;
editable.save.row
/** * Listen for the the editable.save.row event * @param * @param * @param */datatable;
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()
andsaveRow()
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