Nested html forms /custom html fragments in Tabulator?

Question

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!

Answer 1

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
    },
});