November: Procrastination Month

    table-edits

    0.0.3 • Public • Published

    $.Table Edits

    File Size

    Table Edits is a lightweight jQuery plugin for making table rows editable. Built as minimally as possible so it's easy to extend. Demo

    Table Edits only does a couple things:

    • Replaces cell values with input fields on edit
    • Handles row editing state
    • Fires callbacks for edit, save and cancel

    And optionally, a couple more:

    • Binds a button or double click to start editing
    • Binds enter and escape keys to save and cancel
    • Maintains column widths when switching to edit
    • Create select fields instead of input fields

    Options

    $("table tr").editable({
        keyboard: true,
        dblclick: true,
        button: true,
        buttonSelector: ".edit",
        dropdowns: {},
        maintainWidth: true,
        edit: function(values) {},
        save: function(values) {},
        cancel: function(values) {}
    });
    

    Markup

    The only additional markup Table Edits requires is a data-field attribute on each editable cell with it's column name:

    <table>
        <tr>
            <td data-field="name">Dave Gamache</td>
            <td data-field="age">26</td>
            <td data-field="sex">Male</td>
            <td>
                <a class="edit>Edit</a>
            </td>
        </tr>
    <table>
    

    The last cell will not become editable because it does not have the data-field attribute.

    Saving Table Data

    Table Edits makes it easy to save edits. Callbacks are passed a values object with column names and values of the edited row.

    Posting the new data to an API endpoint is simple.

    $("table tr").editable({
        save: function(values) {
          var id = $(this).data('id');
          $.post('/api/object/' + id, values);
        }
    });
    

    Keywords

    none

    Install

    npm i table-edits

    DownloadsWeekly Downloads

    928

    Version

    0.0.3

    License

    none

    Last publish

    Collaborators

    • nathancahill