Tabulator: Filter on Tree or Nested Data

[YendorMc]

Describe the bug
Tabulator Column filters don't appear to work on nested data structure or child jobs

Tabulator Info
4,1

To Reproduce
Steps to reproduce the behavior:
Execute attached code.
Example.txt
(HTML file)
Go to Favorite color
type 'Red"

Expected behavior
Expect to see all items with "Red"

Filter on column; expect to filter on any data within the column, whether
child or root (e.g. red/blue)

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. Windows 7]
• Browser [e.g. FireFox Quantum]
• Version [e.g. 60.1.0]

Additional context
Add any other context about the problem here.

[olifolkerd]

Hey @YendorMc

This is not a bug, as it says in the documentation it is not currently possible to sort or filter nested rows, only the parent rows are currently sorted or filtered.

It is on the roadmap to add this feature in a future release.

Cheers

Oli :)

[YendorMc]

Ooops, sorry... missed that but clearly see it now (late night)! I can think of about 2-3 different ways to be able to sort... like being about to sort on the child, but also seeing the Parent. Nice feature though!

[fsagaz]

@YendorMc did you finally find out how to sort also on nested rows?...I was trying to but I didn't success.
@olifolkerd do you think that this feature will be soon available?
Thanks

[olifolkerd]

Hey @fsagaz

As of the 4.2 release Tabulator now sorts nested data

Cheers

Oli :)

[fsagaz]

Great!!!! thanks @olifolkerd

[fr0z3nfyr]

Hi Oli.

Sorry to hijack this thread, couldn't see the point in creating a new issue.

I'm using v.4.2.3. and see that filtering is still not supported on nested rows. I understand that it might not be on the top of the list for roadmap but I'd really appreciate if you can suggest a workaround meanwhile.

EDIT: I was thinking about the possibility of adding a custom filter input on headers and use normal text search (I need only text search) on the rows and show rows that contain the text and then run a loop to find parent rows and show them too. Not the best approach but can't think of anything else at the moment. If you think this is the best thing possible at the moment, please point me in right direction.

UPDATE: Figured that it was too soon to assume that I'll be able to do a simple text search. Turns out it is not possible because not all rows exist in DOM, only the rows that are required to be rendered in viewport are present. Any suggestion that can point me in right direction?

Cheers!

[olifolkerd]

Hey @fr0z3nfyr

If you are making a feature request, please create this as a seperate issue. this issue has been closed because it was a question that had been answered.

Filtering is supported on tree child nodes since version 4,2

Cheers

Oli :)

[supportdesk-si]

I would like to revisit this as we are having problems with filtering data in tree (nested) layout. This is using version 4.2.7

How to replicate:

DATA

[{
    "name": "AAA Education Inc. [LDKM-2018] [1234-IMP] :: 135",
    "id": "acnt-135",
    "_children": [{
            "name": "Arcanjo, Tom :: Accounting user",
            "id": 193
        },
        {
            "name": "Brown-user, Thomas (Mr.) :: Administrator",
            "id": 187
        },
        {
            "name": "D'Oulmsting, Jason (Mr.) :: Manager",
            "id": 215
        },
        {
            "name": "Bayview Medical Center [PO-0123] :: 169",
            "id": "acnt-169",
            "ma_id": 135,
            "_children": [{
                    "name": "Brown-user, Thomas (Mr.) :: Administrator",
                    "id": 187
                },
                {
                    "name": "D'Oulmsting, Jason (Mr.) :: Manager",
                    "id": 215
                },
                {
                    "name": "O'Neil, Tom (Mr.) :: Manager",
                    "id": 186
                },
                {
                    "name": "Ross, Bob (Mr.) :: Manager",
                    "id": 288
                }
            ]
        },
        {
            "name": "BIG AAA sub :: 142",
            "id": "acnt-142",
            "ma_id": 135,
            "_children": [{
                    "name": "Brown-user, Thomas (Mr.) :: Administrator",
                    "id": 187
                },
                {
                    "name": "D'Oulmsting, Jason (Mr.) :: Manager",
                    "id": 215
                },
                {
                    "name": "Drake, Tim (Mr.) :: User",
                    "id": 206
                }
            ]
        }
    ]
}]

CREATE TABLE

userIdGrid = new Tabulator("#userIdList", {
        height:350, 
        data:tableData, //assign data to table
        dataTree:true,
        dataTreeStartExpanded:true,
        dataTreeBranchElement:false,
        dataTreeChildIndent:25,
        dataTreeCollapseElement:"<i></i>",
        dataTreeExpandElement:"<i></i>",
        layout:"fitColumns", //fit columns to width of table (optional)
        columns:[ //Define Table Columns
            {title:"Name", field:"name", responsive:1, headerSort:false}, 
        ],
        rowClick:function(e, id, data, row){
            objClass({obj:document.getElementsByClassName('selectedItem')[0],cls:'selectedItem',stts:(0)});
        }
    });

FILTER CODE

userIdGrid.setFilter(
    "name", "like", document.getElementById("userFilter").value
);

When filtering using _Jason_ the expected behavior is to see all "parent" branch and the child that contains _Jason_ in it. In reality, filter removes everything as no branches on nest level 0 contain the pattern.

[henneman]

Hello,

I use tab 4.3.

We have a data tree that works in the basic functions but has 2 weaknesses:

1.) in the documentation for version 4.2. is to read:
"Data Tree
Filtering

Filters applied to the table are now applied to all child rows, not just to top level parent rows. "

in the documentaiton to the version 4.3 I find no more information.

Filtering the top parent rows works. But I do not know what the code for the child rows must look like. Is there an example?

2.) The table would be easier to read if the childs expand symbol were indented so far that the symbol would be under the parent's first character. Currently it is between the symbol of the parents and the first sign of the parent.

[engin-can]

Same problem here. setFilter seems to be filtering parents, not childs...
Is this correct?

[engin-can]

I tried callingsetFilter function on my Tabulator tree structure, in order to filter out items. It seems to only filter out top parents. Any idea how to make this work for any level (any children or parents)? http://tabulator.info/docs/4.1/tree doesn't say much about how filtering works.

Function

table.setFilter('id', '=', 214659) is not returning anything...

Tree structure

[
   {
      "level":0,
      "name":"word1",
      "id":125582,
      "_children":[
         {
            "level":1,
            "name":"word6",
            "id":214659
         },
         {
            "level":1,
            "name":"word7",
            "id":214633
         },
         {
            "level":1,
            "name":"word2",
            "id":214263,
            "_children":[
               {
                  "level":2,
                  "name":"word8",
                  "id":131673
               },
               {
                  "level":2,
                  "name":"word9",
                  "id":125579
               },
               {
                  "level":2,
                  "name":"word10",
                  "id":125578
               },
               {
                  "level":2,
                  "name":"word4",
                  "id":172670,
                  "_children":[
                     {
                        "level":3,
                        "name":"word13",
                        "id":172669
                     },
                     {
                        "level":3,
                        "name":"word14",
                        "id":174777
                     },
                     {
                        "level":3,
                        "name":"word5",
                        "id":207661,
                        "_children":[
                           {
                              "level":4,
                              "name":"word15",
                              "id":216529
                           },
                           {
                              "level":4,
                              "name":"word16",
                              "id":223884,
                              "_children":[
                                 {
                                    "level":5,
                                    "name":"word17",
                                    "id":223885,
                                    "_children":[
                                       {
                                          "level":6,
                                          "name":"word18",
                                          "id":229186,
                                          "_children":[
                                             {
                                                "level":7,
                                                "name":"word19",
                                                "id":219062
                                             },
                                             {
                                                "level":7,
                                                "name":"word20",
                                                "id":222243
                                             }
                                          ]
                                       }
                                    ]
                                 }
                              ]
                           }
                        ]
                     }
                  ]
               },
               {
                  "level":2,
                  "name":"word3",
                  "id":214266,
                  "_children":[
                     {
                        "level":3,
                        "name":"word11",
                        "id":216675
                     },
                     {
                        "level":3,
                        "name":"word12",
                        "id":216671
                     }
                  ]
               }
            ]
         }
      ]
   }
]

[systek17]

Hey @YendorMc, what was the method that actually worked? I'm thinking of keeping the tree in its expanded initial state, and then hide the rows that don't match the substring. But can't find hide row function...

[systek17]

If it helps anyone, this is how I did it.

• implement a search tree function that recurses the whole data tree using table.getRows() as input, and building an array of rows that you want to show after the filter is applied

• disable the in-built filtering, by using a custom function and always return true

• every time a new token is received from the header filter, it is passed as a key to a hashtable, if it exists, returns a list of rows from which data is extracted and then I go table.replaceData()

• if the key does not exist, then recurse the data tree and add that into the hashtable, and replacing the data thereafter.

Performance is a little bit impacted by this, but it is the best I can do as of now. There is another solution on stackoverflow, it uses thetable.setData() function. You may return the original tree structure of the filtered rows within your search function that has the tree expanding view, but I decided it is better in my case to show textual data hierarchy view using a separator, like '/' which doesn't involve clicking on parent rows to reveal the search hits.

[anttir]

If it helps anyone, this is how I did it.

• implement a search tree function that resurses the whole data tree using table.getRows() as input, and building an array of rows that you want to show after the filter is applied
• disable the in-built filtering, by using a custom function and always return true
• every time a new token is received from the header filter, it is passed as a key to a hashtable, if it exists, returns a list of rows from which data is extracted and then I go table.replaceData()
• if the key does not exist, then recurse the data tree and add that into the hashtable, and replacing the data thereafter.

Hi @systek17 ,
do you happen to have any demo code of your implementation. I need to make some kind of implementation and just thought that I could get a running start if you happen to have some code to share. Thanks in advance!

[olifolkerd]

Hey @anttir

There is no longer any need for a work around, as the feed says, filtering supported by default on tree child nodes since version 4,2

See the Documentation for more infor

Cheers

Oli :)

[systek17]

I'm not sure how the framework has changed these days but despite Oli telling us it can do it, it did not do auto recursive filter at the time. Therefore had to implement my own. Will get back with details if I get time to explain better, and help a fellow engineer.

[olifolkerd]

Hey @systek17

It very much does do filtering these days, If you believe there is an issue and it is not filtering as you like, please create a new issue with a JS fiddle that demonstrates the problem and i would be happy to look into a patch for it.

Cheers

Oli :)

[anttir]

Thank you both @systek17 and @olifolkerd for your very quick answers. I hadn't noticed the new 4.8 release, but go it installed now.

The filter -function works as explained, but unfortunately this is kind or "the wrong way of filtering" for my use case.

The filter function in Tabulator 4.8 with dataTreeFilter enabled seems to work so, that it starts from the root nodes and walks recursively through all the child nodes and hides all the nodes that don't match the filter.

a
 aa
  aaa
  aab
  aac
 ab
  aba
  abb
b
 ba
 bb
  bba
  bbb
 bc
c
 ca

dataTreeFilter enabled: filter "like 'a'" =>

a
 aa
  aaa
  aab
  aac
 ab
  aba
  abb

Example: https://jsfiddle.net/5gfcdk98/5/

What I would like to have is filter (or more like search) where the result would be all the nodes and their parent node mathing the filter, so the filter "like 'a'" would become:

a   - matches filter
 aa - matches filter
  aaa   - matches filter
  aab   - matches filter
  aac   - matches filter
 ab - matches filter
  aba   - matches filter
  abb   - matches filter
b   - parent of a node that matched filter
 ba - matches filter
 bb - parent of a node that matched filter
  bba   - matches filter
c   - parent of a node that matched filter
  ca    - matches filter

I would need the functionality exactly like described in the accepted answer of https://stackoverflow.com/questions/60779347/how-to-filter-children-in-tree-structure-in-tabulator

I am already able to a) disable the default filtering functionality and b) create the needed result data that I want by using the solution provided in the stackoverflow comment (loadash and deepdash).

Now the problem is just that I cannot figure out what is the _last_ filtering event that gets triggered after e.g. headerFilter action so that I could then use that event to replace the data with the my custom made filtered data. for e.g. in my jsfddle example a filter with keyword "a" creates 4 pairs of "dataFiltering" and "dataFiltered" -pairs.

Hope this explanation is clear enough to describe what I'm looking after.

[systek17]

@anttir
In short I don't have a demo code. However maybe I can help clarify my previous comment instead - my implementation is different from what you're doing. So if I recall correctly, I was trying to build a new list of rows where any node in the original data tree at any level that has the substring from the search header, will be pushed as a row. This node could be a parent or a child. If parent, then return this row object and its collapsed children. Since I used a tree of arrays (HAT) the function you're looking for is getTreeChildren() which allows you to iterate over all the children in each recursive call within the data tree.

The last filtering event that you described could be that the API uses this to do its own filtering on each row, so I just return true for the headerFilterFunc field. I use jQuery to look for user input event in the input bar, and trigger the search function. The best technique is to avoid using these in-built triggers because they do more harm than good some of the times. Or I may not have understood the API due to time crunch.

[anttir]

thanks @systek17 , for your help. I can see that we had some what different goals. The idea to use events from user input may ease with the timing problem!

[olifolkerd]

Thanks for your feedback @systek17 @anttir

The filtering system works as intended based on feedback from the community, where only filtered rows that match are shown, a parent must match to show any of its children and the dataTreeFilter determines if the child rows are then also filtered.

Your usage scenarios fit outside of this scope, as such this is not a bug but a new mode of operation. If this is something that you would like to see included in Tabulator (and i think you present a valid usage case worthy of consideration) then please can you raise a separate issue to make the feature request as this issue represented a bug that has been resolved and has been closed so cannot be used to track new functionality.

I will be locking this thread shortly to ensure it does not drift too far from its original purpose.

Cheers

Oli :)