FilterButton

Dropdown that lets users add, remove, and manage the filters displayed in the top <FilterForm> of a <List> view.

Usage

<FilterButton> is rendered by default by <List> whenever you pass it a filters prop, but you can render it manually inside a custom actions toolbar:

import {
  Admin,
  DataTable,
  FilterButton,
  List,
  Resource,
  SearchInput,
  SelectInput,
  TextInput,
} from "@/components/admin";
 
const postFilters = [
  <SearchInput key="q" source="q" alwaysOn />,
  <TextInput key="title" source="title" />,
  <SelectInput
    key="status"
    source="status"
    choices={[
      { id: "published", name: "Published" },
      { id: "draft", name: "Draft" },
    ]}
  />,
];
 
const PostList = () => (
  <List filters={postFilters} actions={<FilterButton />}>
    <DataTable>
      <DataTable.Col source="title" />
    </DataTable>
  </List>
);

The dropdown lists every filter input that is not marked alwaysOn. Selecting one of them shows the corresponding input in the <FilterForm> and focuses it; unselecting hides it.

<FilterButton> also exposes commands to manage saved queries:

• "Save current query…" when the user has applied some filters but never saved this exact query
• "Remove query "…"" when the current filters match an existing saved query
• "Remove all filters" when at least one filter is active

Props

filters

Most of the time, <FilterButton> reads the filter list from the surrounding <FilterContext>, which is populated by <List filters>. You can pass an explicit filters array when rendering <FilterButton> outside that context.

disableSaveQuery

Set this prop to true to hide the saved-query options from the dropdown:

<FilterButton disableSaveQuery />