Inline Editing

In CloudTables you can use the form or the API to edit your data - but you can also inline edit the data directly by using the Editor API. This is a comprehensive API, very flexible, and designed to allow you to customize the table for your needs.

To see this, click on a cell and you automatically go into edit mode. This works for cells in the main table, and also when the table has been shrunken responsively. Give it a try!

This example was achieved by adding the following code into the document:

document.addEventListener('ct-ready', function(e) {
  var table = e.table;
  var editor = e.editor;

  $('table.dataTable').on(
    'click',
    'tbody td:not(.child, .ct-column__color), dl dt',
    function (e) {
      // Ignore non-editable columns
      if (
        $(this).hasClass('dtr-control') ||
        $(this).hasClass('ct-column__color') ||
        $(this).hasClass('child')
      ) {
        return;
      }

      e.stopPropagation();

      table.rows().deselect();
      table.row(this).select();

      editor.inline(this);
    }
  );
});