Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
vanilla-datatables-editable
Advanced tools
Readme
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
.
bower install vanilla-datatables-editable --save
npm install vanilla-datatables-editable --save
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.
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();
var datatable = new DataTable(myTable, {
plugins: {
editable: {
enabled: true,
// options go here
}
}
});
contextMenu
Boolean
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.
menuItems
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
.
var datatable = new DataTable(myTable, {
plugins: {
editable: {
enabled: true,
// Menu items with custom icons
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
Boolean
false
By default any hidden columns will be ommited from the editor.
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.
// Grab the second cell of the third row
var cell = datatable.activeRows[2].cells[1];
// Edit it
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.
// Grab the first row
var row = datatable.activeRows[0];
// Edit it
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.
// 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:
// 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");
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 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:
// 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"]);
editable.init
/**
* Listen for the the editable.init event
*/
datatable.on("editable.init", function() {
// do something when the plugin initialises
});
editable.save.cell
/**
* 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
});
editable.save.row
/**
* 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
});
editable.context.open
editable.context.close
v0.1.1
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
saveCell()
and saveRow()
methods to save the current cell/rowv0.0.7
v0.0.6
saveRow()
method addedsaveCell()
method addedv0.0.5
v0.0.4
Copyright © 2017 Karl Saunders | MIT license
FAQs
A table editor extension for Vanilla-DataTables.
The npm package vanilla-datatables-editable receives a total of 23 weekly downloads. As such, vanilla-datatables-editable popularity was classified as not popular.
We found that vanilla-datatables-editable demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.