tabulator

Nested html forms /custom html fragments in Tabulator?


I know Tabulator allows nested tables, but is it possible to nest html forms or other html custom fragments(for editing a row, or adding a new one)? Thanks!


Solution

  • You can use a rowFormatter to embed any custom content into a row. You can access the rows containing div using the row.getElement() function.

    In the example below we will append a new div (you will likely want to ensure any custom content is added in a div so that it does not interfere with the column layouts) to the bottom of the row with an input element in it

    var table = new Tabulator("#example-table", {
        rowFormatter:function(row){
            //row - row component
            var divEl = document.createElement("div");
            var inputEl = document.createElement("input");
    
            divEl.appendChild(inputEl);
            row.getElement().appendChild(divEl); //append new div to row
        },
    });