Table custom filter - not working well with Select #658
-
|
I'm trying to implement a custom filter in the table using a Select dropdown. Every time the user tries to click an option, the filter closes, and the filter is not applied. Other elements such as radio boxes work, but a Select or ComboBox would be preferable, as we will have long lists. Relatedly, for a boolean filter, if filtering the table for See this code sandbox. The "supported" column uses a Select, and does not work. The "deprecated" column uses "OptionGroup" and works, though the filter is not highlighted when filtering for false. https://codesandbox.io/s/itwinui-react-example-forked-ww4opp |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 4 replies
-
|
Hi @HaveSpacesuit, thanks for creating this discussion. The problem here is that our popovers are configured to automatically close when clicked "outside". In this case, the dropdown from As a workaround, you can use Hope that helps. |
Beta Was this translation helpful? Give feedback.
-
|
Wonderful, thanks! It looks like we can improve the filter state by changing the filter logic to specifically exclude undefined: // Table.tsx #510
-const areFiltersSet = allColumns.some((column) => !!column.filterValue);
+const areFiltersSet = allColumns.some((column) => column.filterValue !== undefined);
// FilterToggle.tsx
-<IconButton isActive={isVisible || column.filterValue}>
- {column.filterValue ? <SvgFilter /> : <SvgFilterHollow />}
-</IconButton>
+<IconButton isActive={isVisible || column.filterValue !== undefined}>
+ {column.filterValue !== undefined ? <SvgFilter /> : <SvgFilterHollow />}
+</IconButton>
|
Beta Was this translation helpful? Give feedback.
-
|
I agree, it should include Do you want to create a PR for this? |
Beta Was this translation helpful? Give feedback.
-
|
Sure, I'd be happy to. |
Beta Was this translation helpful? Give feedback.
-
|
This is released in 1.38.0 |
Beta Was this translation helpful? Give feedback.
Hi @HaveSpacesuit, thanks for creating this discussion.
The problem here is that our popovers are configured to automatically close when clicked "outside". In this case, the dropdown from
Selectis placed in a portal as a child of<body>, so it is considered to be "outside" the filter popover.As a workaround, you can use
appendTo: 'parent'to place the select dropdown in the same place as the select button. This is also somewhat documented in our FAQ.Hope that helps.