Tabulator Nested Row - tabulator

Question

I was wondering if it's possible to have a nested data tree where the child row has different headers that the parent row.
E.g.
Parent row has the following headers: Make, Model, SellDate, Warranty
The data type for the headers above are: String, String, Date, Boolean
The child row will have the following headers: Warranty Start Date, Warranty End Date, Type of Warranty
The data type for the headers above are: Date, Date, String
So I would like to create something like this:
Make, Model, Selldate, Warranty
BMW, S3, 13-DEC-2017, Yes
13-DEC-2017, 13-DEC-2010, Labour & Parts

Answer 1

I just got finished writing this same thing. You can accomplish this with a combination of Nested Data and Row Formatters.
On your outer table configuration, specify:
dataTree: true,
rowFormatter: childRowFormatter,
Then, for the rowFormatter function, you can specify something like the below (following the lead from Tabulator's own Nested Tables example):
function childRowFormatter(row) {
// skip if not a child/nested data row - let main table rows render as usual
if (!row.getTreeParent())
return;
var rowEl = row.getElement();
var parentChildData = row.getTreeParent().getData()._children;
// only generate a new table for the first row of child data
if (
row.getPrevRow().getIndex() !== row.getTreeParent().getIndex() ||
row.getPrevRow().getPosition() < 0
) {
rowEl.remove();
// set row element to empty element without size
row._row.element = document.createElement('span');
return;
}
// remove generated cell elements
row._row.deleteCells();
// create and style holder elements
var holderEl = document.createElement("div");
var tableEl = document.createElement("div");
holderEl.style.boxSizing = "border-box";
holderEl.style.padding = "10px 30px 10px 10px";
holderEl.style.background = "#ddd";
holderEl.appendChild(tableEl);
// replace with holder
rowEl.appendChild(holderEl);
// create the new table
var subTable = new Tabulator(tableEl, {
data: parentChildData,
columns: [
{ ... },
...
],
dataTree: true,
dataTreeStartExpanded: true,
rowFormatter: childRowFormatter,
});
}
EDIT: I updated my code after realizing it was a bit more intricate than first revealed. Be cautious, as this code uses some undocumented properties and methods that weren't meant to be exposed to the developer.