Tabulator: Hierarchy

[fhariano]

How to create hierarchy rows as a level/sub-level?

Example:
1st leve - customer

• expand 1st level
  2nd level - orders row
  
  
  
  • expand 2nd level
    
    3th level - orders detail
    
    
  
  

[olifolkerd]

Hi,

At the moment there is no way to do this directly through Tabulator im afraid, but with a custom rowFormatter there might be something we can do.

Leave it will me for a couple of days, i will have a think over the weekend and put together an solution as close to that as possible.

Cheers

Oli

[olifolkerd]

Hey,

Your best bet would be to use a custom rowFormatter to insert a table element after the rows and then build the sub-tables using that. You could store the data for the sub-table in an object in the row data and then access it from the data object passed into the row formatter:

$("#example-table").tabulator({
    fitColumns:true,
    columns:[...],
    rowFormatter:function(row, data){


        //define a table layout structure and set width of row
        var table = $("<table style='width:100%'></table>");

       //build table using data held in sub-table object
       //data.subtable

        //append newly formatted contents to the row
        row.append(table);
    },
});

I Hope that is of some use to you.

Cheers

Oli

[JimSmithJr]

I am attempting the above solution and keep running into this error:
Uncaught TypeError: row.append is not a function

Google searches do not return any useful information. Would you have any ideas or alternate proposals?

Thank you,
Jim

[olifolkerd]

Hey @JimSmithJr

The example above was written for Tabulation version 2.x as of version 3.x a row component is passed into the function instead of the row element. To get the element from the row component you can call the getElement function:

$("#example-table").tabulator({
    fitColumns:true,
    columns:[...],
    rowFormatter:function(row, data){
        //define a table layout structure and set width of row
        var table = $("<table style='width:100%'></table>");

       //build table using data held in sub-table object
       //data.subtable

        //append newly formatted contents to the row
        row.getElement().append(table);
    },
});

[JimSmithJr]

Thanks VERY much. That did the trick. And from the design I assume the recommendation is to pull the child data from the subtable data as opposed to making constant API calls to populate the child table. Of course in my case I'll be doing a collapse function as the child rows will not be displayed by default. I can't thank you enough!

Jim

[Rodbjartson]

@JimSmithJr could you please share your code? I think many tabulator-users would find the solution handy until tabulator 4.0 is released

[JimSmithJr]

Rodbjartson,

Agreed! I have already found some challenges with how the rows are rendered through the virtual DOM and of course preventing click propagation from the child grid to the parent grid. I'll reach out to you if I get stuck on something.

[BenTongue]

Please can someone provide a full working example of this?

Regards,
Ben

[olifolkerd]

Hey @BenTongue

have a look at the Examples Page it is full of example of the different types of functionality

Cheers

Oli :)