tabulator: Data Tree not showing children records on filtered rows

When a table is setup as a dataTree, and any form of filter is applied to the data (header, or setFilter()), the child rows disappear from the parent. Child rows appear when filters are cleared.

Using version 4.3

Reproduced using headerFilter: https://jsfiddle.net/dylanjnz/nL7458rj/

Expected behaviour Filtering (as documented) should only affect parent rows, child rows are not filtered, but are available for hide/show on the visible parent rows.

  • OS: Mac
  • Browser Chrome
  • Version 75

Happy to provide more detail, just let me know!

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 1
  • Comments: 16 (5 by maintainers)

Most upvoted comments

Hey all,

I have just pushed an update to the 4.8 brach to help with this. it should be released in a couple of weeks time.

the new dataTreeFilter option will allow you to disable filtering of the child rows:

var table = new Tabulator("#example-table", {
    dataTree:true,
    dataTreeFilter:false, //disabled child row filtering
});

Cheers

Oli 😃

Definitely seems like a bug to me. This does filter, but only if the whole tree matches. ie, if you filter for “AAA” you see:

AAA Education Inc. [LDKM-2018] [1234-IMP] :: 135
    BIG AAA sub :: 142
AAA Hospital [PO1234567] :: 54

“Big AAA sub” only shows up because it’s parent has “AAA” in it’s name as well.

Filtering for “BIG” doesn’t return anything, as “BIG AAA sub”'s parent doesn’t have “BIG” in it’s name.

@supportdesk-si how about the code below?

function customFilter(data, headerValue){
  var a = JSON.stringify(data, ['name','_children']).replace(/"(name|_children)":/g,'');
  return a.toLowerCase().indexOf(headerValue.toLowerCase()) !== -1
}

document.getElementById('userFilter').onkeyup = function(){
	userIdGrid.setFilter(customFilter, document.getElementById("userFilter").value);
};

Oli,

As always, thank you for coming back on this issue. Give me few moments to set this up and I will post here.