Tabulator: Provide a way to lazy load tree node sub-items.

[B-Esmaili]

Hi thanks for premium quality free library.
I am in demand of new feature for tree structure.There is some scenario in which i need to load children of a node lazily on demand, but i couldn't find formal way of doing that and i made it working using a trick.
my trick right now is using dataTreeRowExpanded event and make an ajax request for sub-items and populating row's model children property with new data and calling updateData on table instance but definitely this is not best practice.At least providing another event handler like dataTreeBeforeRowExpand will avoid extra call to updateData.
thanks for you'r concern

[olifolkerd]

Im afraid there is no way to achieve this with a good user experience.

The table is simply not setup to load data asynchronously into child rows, and even if it were it would be a terrible user experience for users to click an element and nothing happen for a while untill the data loaded.

For that reason i have no intention of adding this as a feature to Tabulator.

That being said, if you wanted to implement something yourself it should be achievable.

I would recommend that you populate your rows with a dummy "loading" row that displays an ajax spinner when it is opened, that way the user is then aware that they are waiting for data.

you could then use the dataTreeRowExpanded callback to request the data, and then call the update function on the row component to pass the new children into the row.

I Hope that helps,

Cheers

Oli :)

[B-Esmaili]

But if so then there is not use of treetable and it seems to be more of a toy than a serious piece of software (if you don't mind me saying...) to play role in big data scenarios doesn't it?between you said

I'm afraid there is no way to achieve this with a good user experience

The table is simply not setup to load data asynchronously into child rows, and even if it were it would be a terrible user experience for users to click an element and nothing happen for a while until the data loaded

why? at worse case we can display a loadin... message inside the expanding row and remove it as soon as we receive the data.

I would recommend that you populate your rows with a dummy "loading" row that displays an ajax spinner when it is opened, that way the user is then aware that they are waiting for data.

you could then use the _dataTreeRowExpanded_ callback to request the data, and then call the _update_ function on the row component to pass the new children into the row.

this is what i am doing right now but i couldn't find any way to update a single row and i am having to update whole table to refresh the view.is there any way to update view of single row?

[olifolkerd]

Hey @B-Esmaili

First off calling Tabulator, a library used by tens of thousands of developers a "toy" just because it does not immediately do the one thing you want it to do out of the box it is extremely petty and childish. If you can't have a sensible adult discussion about things on this issue list i will simply close this issue and refuse to offer you any advice going forward. This list is a place of respectful conversation and you will adhere to the code of conduct or you will not be welcome here.

Secondly I would be happy to offer you advice on how to fix issues with your current configuration, but in order to do that i would need to see the source for your current setup, or ideally a working JS Fiddle or Code Pen that i could see in action.

Cheers

Oli :)

[B-Esmaili]

Hey olifolkerd
First off I beg your pardon for not using proper word.but i am not talking about Tabulator as you may noticed i was talking about treetable , just a tiny part of the library.Let's be honest , say i have tens of thousands of data in hierarchy is it reasonable to load all of theme at once?For a library in this class i think lacking of that essential feature is not expected.
At the end i again appreciate all the works you've done so far 👍 .

[olifolkerd]

Hey @B-Esmaili

You don't need to load all data into a table at once. Tabulator comes with Progressive Ajax Loading to cover that scenario,

And as i have already said, if you can provide me with a copy/example of how you are trying to load your data i would be happy to point out how to get it to do what you want, but if you don't want any advice then thats fine, let me know now and i will close this issue.

I will also need to know which version of Tabulator you are using to offer you the correct advice.

Cheers

Oli :)

[drivera-armedia]

Hi! I realize this is over a year old, but I have the same problem.

This is the JavaScript snippet that I'm trying to make work:

    var table = new Tabulator("#example-table", {
      // blablabla...
      ajaxURL:"/alfresco/wcs/armedia/duplicates/tabulator-main",
      dataTree:true,
      dataTreeStartExpanded:false,
      dataTreeRowExpanded:function(row, level) {
         // Load the row's contents via AJAX
         var rowAjaxURL = "/alfresco/wcs/armedia/duplicates/tabulator/row/";

         var data = row.getData();
         var hash = data["id"];

         // Execute the AJAX pull
         // TODO: For now, use static data
         var newData = {}; // some properly-structured object, omitted for brevity
         // call row.update() with the loaded data
         row.update(newData);
      },
      // ... rest of the stuff

What I'm missing is what the "clean" way would be to actually trigger the AJAX fetch for the given URL (the hash would be appended at the end of the URL, as this is for a Spring REST endpoint).

Thoughts?

I'd also have to add code to ensure that no double-fetches happen, but I can handle that easily enough - I'm more concerned with getting this to work proper.

Thanks!

[drivera-armedia]

I seem to have spoken too soon... the row.update() invocation causes the expansion to fail. If I remove that, the row is expanded correctly with the placeholder data from the base template.

I also tried row.getTable().updateRow(row.getIndex(), newData)

I also tried adding a row.reformat() invocation to the update promise...no dice...

The reason this is necessary is because we know that the initial "summary" will return a LOT of rows, but it's very very quick, so we can display the full table. However, if we try to pull the details for each row, then things get VERY slow because the detail fetches are expensive when done in bulk.

Thus, it's cheaper to just pull the details on demand as the user needs them (i.e. they expand each row). We don't do pagination because we chose to keep the server-side API simple.

So....thoughts?