How to filter table in expandable rows

App Building
1

  • Goal: Create a set of filters for a table component within an expandable row

  • Steps:

  1. So, because of how components work within an expandable row, I realized it is not possible to use "Default filters" as you would with a normal table. Nothing happens when the select component changes and filter stacks are not applied within the nested component.
  2. I thought of adding an event action to my select components by write a script to set the filter stack to the expanded row, using the table.selectedIndex, but it was very buggy , convoluted and I struggled with dates.
  3. I ended up applying the filters directly in the table's data source
  • Screenshots:

image
image1249×581 79.7 KB

Just wondering if some of the bright developers here have found a way to apply filter stacks to tables within expanded rows.

Thanks!

2

Hi @MiguelOrtiz,

Thanks for this detailed post!

:thinking: The set filter api only works when the table is visible in the UI, so you may need to have the set filter event trigger on row expand. I might even add a debounce to the event as well

3

Hi @Tess,

Thanks for this. That was my initial thought, but then if the user wants to change filters after the row is expanded, I would need also to set events within my filter components, making sure they are adding them to the right index for the nested component (assuming user hasn't accidentaly selected another row) or apply the filters to all of the tables that are already available. I started writing the changeFilterStack API but I got a headache pretty quickly....

I also thought of adding filter components within the expanded row, but that looked awful.

The current way, admittedly not the cleanest one, is working fine though.

1 Like