Bubble Editing

The inline editing example demonstrate how you can use the Editor API to edit records directly in the table. This example is similar, but demonstrates Editor's bubble editing capabilities.

Like before, clicking on a cell initiates the edit mode, for both records in the table and records that have been responsively moved into the child rows.

This example uses the following code:

<script>
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')i
      ) {
        return;
      }

      e.stopPropagation();

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

      editor.bubble(this);
    }
  );
});
</script>