为 react-admin 列表视图添加自定义过滤器下拉列表

Question

Question 1: I have a list view with a column for "Active":

I want to allow the user to select Active/Inactive from a radio button group as a filter (or dropdown). I know react-admin provides filters for reference fields out of the box. What about a non-reference field, like "Active"?

Question 2: Any way to add a clear button or "X" by the search field to quickly clear all filters? Currently, you have to select what's in Search and clear the text. Annoying having to use the mouse AND keyboard to clear filters. But, I'm guessing there's a way around it.

Thanks.

Answer 1

I want to allow the user to select Active/Inactive from a radio button group as a filter (or dropdown). I know react-admin provides filters for reference fields out of the box. What about a non-reference field, like "Active"?

There is BooleanInput and NullableBooleanInput . Documentation is quite well written and there are lots of Input components to use.

Question 2: Any way to add a clear button or "X" by the search field to quickly clear all filters? Currently, you have to select what's in Search and clear the text. Annoying having to use the mouse AND keyboard to clear filters. But, I'm guessing there's a way around it.

if you are using TextInput for search field there is prop resettable

With those two things combined you should have more or less similar code in filter component:

<Filter {...props}>
   <TextInput label="Search" source="q" alwaysOn resettable />
   <NullableBooleanInput label="Is Active" source="active" alwaysOn/>
</Filter>