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,

            // options go here
        }
    }
});

contextMenu

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.

menuItems

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,

            // 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

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.

// 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"]);

Events

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

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

• Fixed edit mode exiting when clicking input

Copyright © 2017 Karl Saunders | MIT license