visible-data | Cultural learnings of dataviz to make benefit | Data Visualization library

You asked for an example - and I assumed you meant an example using the panes techniques I mentioned, so I have provided one below. However I do still think you may want to consider using the search builder, instead.

My example does the following:

(1) It uses a pane for the first column. The table column shows the "check" and "cross" symbols, but the filter pane uses the words "active" and "inactive".

(2) It opens the table with only "active" records selected, at the start.

I made the following changes:

(a) Changed the HTML source data to use active and inactive, instead of embedding the fontawesome symbols in the HTML table.

(b) Added a render function to handle how the first column is displayed in the table (using the FA symbols instead of the words).

(c) Added logic to handle how the search pane uses this data in the first column.

(d) Pre-selected only "active" records.

I removed all your other logic.

This means the page shows every search pane (just for my demo) - so you may want to restore your logic to hide and show specific search panes, as needed, using your checkboxes. Otherwise the panes take up too much space in the page (in my demo).

Here is the demo: