DataTable: How to filter a boolean column?

Dash Python
1

Hello,

I have a Dash DataTable with a column that contains a boolean value:

image

The original values were 0 and 1 but I transformed them into the X n V emojis shown for a better UX.

I have native filtering enabled on my DataTable. How can I let users filter by X or V? Is there a way for me to replace the default text filter with a dropwdown list? Or 2 radio buttons?

Can I get this done without having to dive into React and overriding the relevant React components?

Thanks,
urig

PS - I’ve tried setting the value using a custom javascript script but the results is that I see that the value is set, filtering doesn’t work and after a second, the value is erased (?!)

window.setTimeout(work, 2000)

function work() {
  filter = document.querySelector('*[class="dash-filter column-5"] div input[type="text"]')
  filter.value = "✔️";
}
2

Hi @urig
That’s a tricky one. Could you do what @eliasdabbas did in their post and put the dropdown right above the success column?

3 Likes
3

Hi Adam,

Just wanted to say thanks for referring me to Elias’ post. I used a Checklist as the component for the filter and used server-side filtering as in the post.

Many thanks!
Uri

1 Like
4

you’re welcome @urig

Are you able to share that snippet of the code with us so this Forum topic can be a viable solution for members that encounter the same challenge in the future?

5

Hi Adam,

I’ll try and get this done sometime in the next couple of weeks.

Cheers and happy holidays,
Uri