# Aurelia-Slickgrid - can anyone help with Filtering/Sorting in a Tree View structure

**URL:** <https://discourse.aurelia.io/t/aurelia-slickgrid-can-anyone-help-with-filtering-sorting-in-a-tree-view-structure/3371>\
**Category:** Help Requests\
**Created:** [April 6, 2020, 5:20pm UTC](https://discourse.aurelia.io/t/aurelia-slickgrid-can-anyone-help-with-filtering-sorting-in-a-tree-view-structure/3371 "2020-04-06T17:20:56Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![ghiscoding](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ghiscoding/32/1199_2.png) [@ghiscoding](https://discourse.aurelia.io/u/ghiscoding)\
**Post date:** [April 6, 2020, 5:20pm UTC](https://discourse.aurelia.io/t/aurelia-slickgrid-can-anyone-help-with-filtering-sorting-in-a-tree-view-structure/3371/1 "2020-04-06T17:20:56Z")

</div>

Hello everyone,

I’m the author of [Aurelia-Slickgrid](https://github.com/ghiscoding/aurelia-slickgrid) and I’m currently facing some issues/challenges with a new feature with a Tree Data View structure (for example a file explorer view in a datagrid). I cannot release until I find how to Filter and Sort in a tree structure (possibly in a recursive fashion). I have an open Stack Overflow question, [How to filter multiple properties of a parent child array which could be several tree level deep](https://stackoverflow.com/questions/61034229/how-to-filter-multiple-properties-of-a-parent-child-array-which-could-be-several) and if I can get an answer to it, I could eventually push this feature.

I’m facing the following 2 issues and I posted only 1 SO question so far [here](https://stackoverflow.com/questions/61034229/how-to-filter-multiple-properties-of-a-parent-child-array-which-could-be-several)

1. How to filter in a tree data structure from a flat parent/child array
2. How to sort (multiple column sort) in a tree data structure

I kinda have Filtering/Sorting on the column that has the tree, but I cannot filter/sort on any other column(s) from the grid, which is what I’m trying to fix.

So please **help** if you can and answer the SO question and if you know how, I would be grateful and happy to release this new feature. Thanks.

Some demos can be seen [here](https://ghiscoding.github.io/slickgrid-universal/#/example05) and [here](https://ghiscoding.github.io/slickgrid-universal/#/example06) however, these demos have the issue that I wrote first previous paragraph.

Here’s a print screen of a possible Tree Data structure

 ![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/f/fe25c64067fd6fb5993bb0834d9034fa653b8951.png)

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [April 6, 2020, 8:42pm UTC](https://discourse.aurelia.io/t/aurelia-slickgrid-can-anyone-help-with-filtering-sorting-in-a-tree-view-structure/3371/2 "2020-04-06T20:42:48Z")

</div>

I dont have an answer to your exact question but perhaps something like [https://deepdash.io](https://deepdash.io) can assist with the deep filtering. As for multiple cols you can express the filter command in a dynamic way by providing multiple props expressions which you’d construct based on the user selection. It isnt the most performant solution for sure but would be a start.

This use case sounds like a typical challenge you have as a DB Admin where SQL is a great way to handle and optimize that bulk. Its for sure overkill but would be perhaps worth taking a look at a JS in-mem SQL Db like [http://alasql.org/](http://alasql.org/)

---

<div class="post-metadata">

**Author:** ![ghiscoding](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ghiscoding/32/1199_2.png) [@ghiscoding](https://discourse.aurelia.io/u/ghiscoding)\
**Post date:** [April 6, 2020, 10:01pm UTC](https://discourse.aurelia.io/t/aurelia-slickgrid-can-anyone-help-with-filtering-sorting-in-a-tree-view-structure/3371/3 "2020-04-06T22:01:33Z")

</div>

Thanks I didn’t know about DeepDash, I was trying to resolve to only vanilla JS code but I might go with external lib if it comes as too hard to without and LoDash is a dependency for the Excel Export, so it wouldn’t add too much size I guess.

As for the other thing you mentioned, I’m mainly looking at just the frontend JS side, it’s a grid and I want to be able to use a hierarchical (tree data) dataset and pass it to the grid and be done with it. AG-Grid already supports that [here](https://www.ag-grid.com/javascript-grid-tree-data/) but their implementation is of course not know and they expect a very strict structure, mine would be a lot less strict… anyway it’s a work project, we would use it as a purchaser quote grid and they require this to be a tree grid.

Thanks for the reply, I’ll definitely look into DeepDash as an alternative

---

<div class="post-metadata">

**Author:** ![ghiscoding](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ghiscoding/32/1199_2.png) [@ghiscoding](https://discourse.aurelia.io/u/ghiscoding)\
**Post date:** [April 10, 2020, 12:13am UTC](https://discourse.aurelia.io/t/aurelia-slickgrid-can-anyone-help-with-filtering-sorting-in-a-tree-view-structure/3371/4 "2020-04-10T00:13:10Z")

</div>

Some update…

I got an answer on the SO Question I had opened, an awesome British guy living in Germany named (Alex) answered my question with barely 30-40 lines of Vanilla JS code and it’s now merged into my own lib.

I now have 2 live demos with [Parent/Child ref](https://ghiscoding.github.io/slickgrid-universal/#/example05) (flat dataset) and with a [Hierarchical Dataset](https://ghiscoding.github.io/slickgrid-universal/#/example06) (tree dataset).

#### Progess

[x] Tree Data View  
[x] Tree Data Filtering  
[x] Tree Single Column Sort  
[] Tree Multi-Column Sort  
[] Aggregation

---

<div class="post-metadata">

**Author:** ![ghiscoding](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ghiscoding/32/1199_2.png) [@ghiscoding](https://discourse.aurelia.io/u/ghiscoding)\
**Post date:** [May 20, 2020, 2:40am UTC](https://discourse.aurelia.io/t/aurelia-slickgrid-can-anyone-help-with-filtering-sorting-in-a-tree-view-structure/3371/5 "2020-05-20T02:40:57Z")

</div>

Quick update on this, I just released a new Aurelia-Slickgrid [release](https://github.com/ghiscoding/aurelia-slickgrid/releases) with the follow 2 new Examples

- Tree Data with Parent/Child refs - [demo](https://ghiscoding.github.io/aurelia-slickgrid/#/slickgrid/example27)
- Tree Data from Hierarchical Dataset - [demo](https://ghiscoding.github.io/aurelia-slickgrid/#/slickgrid/example28)

However note that the limitation I wrote earlier are still the same, I could only get the following to work:

> Tree Data View  
> Tree Data Filtering  
> Tree Single Column Sort  
> Tree Multi-Column Sort  
> Aggregation

That’s it for now, I’m tired of working on this.

---

<div class="post-metadata">

**Author:** ![YuriGor](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/yurigor/32/1832_2.png) [@YuriGor](https://discourse.aurelia.io/u/YuriGor)\
**Post date:** [May 27, 2020, 6:38pm UTC](https://discourse.aurelia.io/t/aurelia-slickgrid-can-anyone-help-with-filtering-sorting-in-a-tree-view-structure/3371/6 "2020-05-27T18:38:12Z")

</div>

Hi, I found this discussion in google because someone mentioned Deepdash here and I was curious 🙂  
If you are still interested - feel free to open question issue in Deepdash project:  
I’ll help you implement deep filtering / aggregation / whatever.  
Best way would be if you create some fiddle or codepen with a sample data and describe what result do you want.  
on [deepdash.io](http://deepdash.io) under most of methods there is a link to correlated codepen - so you can just fork and update one and post it to deepdash github issues.

---

<div class="post-metadata">

**Author:** ![ghiscoding](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ghiscoding/32/1199_2.png) [@ghiscoding](https://discourse.aurelia.io/u/ghiscoding)\
**Post date:** [May 28, 2020, 2:32am UTC](https://discourse.aurelia.io/t/aurelia-slickgrid-can-anyone-help-with-filtering-sorting-in-a-tree-view-structure/3371/7 "2020-05-28T02:32:35Z")

</div>

@YuriGor  
Thanks a lot for your help and comment, I managed to implement the feature with plain TypeScript code and that is what I was aiming for… the less dependencies, the better 🙂

What got me going was mostly this super helpful Stack Overflow [answer](https://stackoverflow.com/a/61105205/1212166).

Nonetheless, I’ll definitely keep a bookmark a DeepDash library, for other projects.  
Cheers 😃