How to implement useExpand and useGlobalFilter properly ?

[ZiedHf]

Example in CodeSandBox below

I am trying to use useExpand and useGlobalFilter in the same table but I am facing some issues :

1. In the example below, I don't understand why writing "injury" in the Filter Input will display it as it is a simple row ? If I provide a custom globalFilter method I can see that the row is unaxpandable { canExpand: false }

Even after deleting the global filter ?!

What I am doing wrong ?
How can I display it as a Parent Row after feletring and how to display all of its Sub Rows ?

This is what I am looking for :

• 

• 

• 

2. In a custom globalFilter method, is it possible to display a row according to the state of its Parent or the state of its SubRows ?
3. What is the best way to change the IsExpanded state of a row after filtering ? Should this go into the globalFilter method as well ?

A CodeSandBox example :
https://codesandbox.io/s/react-table-expanded-global-filter-l2bct

[ZiedHf]

A fix for this

Even after deleting the global filter ?!

Here

[ZiedHf]

Fix

https://codesandbox.io/s/react-table-expanded-global-filter-1-kibuy

[vpak555]

That is awesome. Helped a lot! You are the only one solved and posted this solution. Thanks a lot!
Also interested how to manipulate expansion/collapse of rows and subrows depending on filter value?
For example, if filter value is matching 3rd level of data then expand all 3 levels, if it's matching second level, then expand 2 levels, but hide 3rd level etc.
Would appreciate any suggestion!

[NarenderDhamarlapally]

please give this in v8

[mbauchet]

Is there any working codesandbox for this?