How to load nested data from html table

Question

I'm coming to you because I use the library Tabulator in my Laravel project and I have some difficulties to manipulate nested data. To load an HTML Tabulator Table , I have to do it via an HTML Table and via an array of object on JS side. On the JS side, I know how to do it but I'm having trouble loading via the HTML table. In the documentation, it says :

You can define the columns in the usual way with the columns option, or you can set them as th elements in the thead of a table.

Any rows of data in the tbody of the table will automatically be converted to tabulator data in displayed in the resulting table.

You can set options parameters directly in the HTML by using tabulator- attributes on the table and th elements, these will then be set as configuration options on the table.

Unfortunately for attributes passed via HTML elements it seems to be quite limited. Because on JS side we have to use an object as below to add data (including nested data) :

[
    {id:1, name:"Billy Bob", age:"12", "_children":[
        {id:2, name:"Mary May", age:"1"}, //child rows nested under billy bob
        {id:3, name:"Christine Lobowski", age:"42"},
        {id:4, name:"Brendon Philips", age:"125", "_children":[
            {id:5, name:"Margret Marmajuke", age:"16"}, //child rows nested under brendon philps
            {id:6, name:"Frank Peoney", age:"12"},
        ]},
    ]},
    {id:7, name:"Jenny Jane", age:"1"},
    {id:8, name:"Martha Tiddly", age:"42", "_children":[
        {id:9, name:"Frasier Franks", age:"125"}, //child row nested under martha tiddly
    ]},
    {id:10, name:"Bobby Green", age:"11"},
]

But on HTMl Tabulator Table side, I have absolutely no idea. Nothing is mentioned in the documentation. However i tried something like that without success :

<table id="mytable">
    <thead>
        <tr>
            <th tabulator-field="data0">Data 0</th>
            <th tabulator-field="data1">Data 1</th>
            <th tabulator-field="data2">Data 2</th>
            <th tabulator-field="_children"></th>
        </tr>
    </thead>
    <tbody>
        @foreach ($orderlines as $orderline)
        <!-- @foreach -> syntaxe blade blade syntax that is unique to Laravel -->
        <tr>
            <td>{{ $object->getData0() }}</td>
            <td>{{ $object->getData1() }}</td>
            <td>{{ $object->getData2() }}</td>
            <td>[
                {data0:1, data1:"Billy Bob", data2:"12", "_children":[
                {data0:2, data1:"Mary May", data2:"1"}, //child rows nested under billy bob
                {data0:3, data1:"Christine Lobowski", data2:"42"},
                {data0:4, data1:"Brendon Philips", data2:"125", "_children":[
                {data0:5, data1:"Margret Marmajuke", data2:"16"}, //child rows nested under brendon philps
                {data0:6, data1:"Frank Peoney", data2:"12"},
                ]},
                ]},
                ]</td> <!-- example of json object -->
        </tr>
        @endforeach
    </tbody>
</table>
<script>
    new Tabulator("#mytable", {
        dataTree:true
    });
</script>

If someone would have an idea I would be interested :)

@HirenPatel something like that tabulator.info/examples/4.9#tree — Mathieu Cissé
Welcome to SO! :) Is it possible for you to output the data directly as JSON? Is there some specific reason why you built the table in HTML directly? — Joel Peltonen

Joel Peltonen Joel Peltonen · Accepted Answer · 2021-07-12T14:53:30

What I would suggest at this point, if I understand your situation correctly, is to try and output the data as JSON and just let Tabulator handle the entire HTML table generation.

I'm not 100% sure if this approach would work for you, but in pseudocode something like this

<div id="container"></div>
<script>
    const data = `{{ $orderlines }}`
    const table = new Tabulator("#example-table", {
        data: data,
        dataTree:true,
        dataTreeStartExpanded:true,
        columns:[
            {title:"Name",     field:"name",     width:200},
            {title:"Location", field:"location", width:150},
            // Descriptions of your data columns here
        ],
    });
    console.log(table);
</script>

How to load nested data from html table

1 Answers