DataTable: How to filter a boolean column?


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


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?


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 = "✔️";

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?


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!

1 Like

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?

Hi Adam,

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

Cheers and happy holidays,