A Small jQuery Extension to Convert An Editable HTML Table

Editable Table is a small jQuery extension to convert an editable HTML table for fast data entry and validation. A small jQuery extension to convert a static HTML table into an editable table. Quickly populate a small table with JSON data, allow the user to modify it with validation, and then restore the JSON data.

editable html table using javascript, how to edit data in html table using jquery, editable table in html, jquery edit table row example, jquery inline edit table row

How to make use of it:

1. To get began, embrace the jquery-editable-table.min.js after loading the newest jQuery library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery-editable-table.min.js"></script>

2. Create an empty HTML table with predefined header cells.

<table id="example-table" class="my-table">
   <thead>
     <tr>
       <th>Id</th>
       <th>Custom Color Example</th>
       <th>Secret Value</th>
       <th>Number Example</th>
     </tr>
   </thead>
   <tbody>
   </tbody>
</table>

3. Initialize the plugin and config the editable cells for every column.

let myEditableTable = $('#example-table').editableTable({
    columns: [
      // column 1
      {
        index: 0,
        name: 'id',
        removeRowIfCleared: true,
        isValid: (newVal, data) => {
          // do something
        }
      },
      // column 2
      {
        index: 1,
        name: 'color',
        classes: ['text-center'], // additional CSS classes
        isValid: (newVal, data) => {
          // do something
        }
        afterAdd: function (addedColor, cell) {
          // do something
        }
        afterChange: function (newColor, cell) {
          // do something
        }
        convertOut: (outgoingVal) => {
          // do something
        }
      },
      // hidden column
      {
        index: 2,
        name: 'secretValue',
        isHidden: true
      },
      // column 4
      {
        index: 3,
        name: 'number',
        classes: ['text-end'],
        isValid: (val) => {
          val = parseInt(val);
          return !isNaN(val) && Number.isInteger(val);
        },
        convertOut: (outgoingVal) => {
          // Convert to a number
          return Number(outgoingVal);
        },
      }
    ]
});

4. Populate the HTML table with the information you provide.

myEditableTable.setData([
  {
    id: 0,
    color: '#eb348c',
    number: 321,
    secretValue: 'secret0'
  },
    {
    id: 1,
    color: '#34bdeb',
    number: 123,
    secretValue: 'secret1'
  },
      {
    id: 2,
    color: '#000',
    number: 666,
    secretValue: 'secret2'
  }
]);

5. Add a brand new row to the editable table.

myEditableTable.addRow({
  id: 5, 
  color: '#FFFFFF', 
  number: 0, 
  secretValue: 'secretNewwwww',
});

6. Get the current table information.

myEditableTable.getData();

7. Clear all table information.

myEditableTable.clear();

Tiny Editable Table With Data Conversion & Validation, jquery editable table Plugin/Github, editable table, html dynamic editable table, inline edit table javascript