diff --git a/docs/StackedFilters.md b/docs/StackedFilters.md
index 139ec8db18..e2d3edc6d5 100644
--- a/docs/StackedFilters.md
+++ b/docs/StackedFilters.md
@@ -75,7 +75,7 @@ It looks like this:
```tsx
import { FiltersConfig, StackedFilters, textFilter } from '@react-admin/ra-form-layout';
-import { NumberInput } from 'react-admin';
+import { NumberInput, TextInput } from 'react-admin';
import { MyNumberRangeInput } from './MyNumberRangeInput';
const postListFilters: FiltersConfig = {
@@ -83,7 +83,7 @@ const postListFilters: FiltersConfig = {
views: {
operators: [
{ value: 'eq', label: 'Equals', type: 'single' },
- { value: 'neq', label: 'Not Equals', type: 'single' },
+ { value: 'neq', label: 'Not Equals', type: 'single', defaultValue: 0 },
{
value: 'between',
label: 'Between',
@@ -93,6 +93,14 @@ const postListFilters: FiltersConfig = {
],
input: ({ source }) => ,
},
+ description: {
+ operators: [
+ { value: 'eq', label: 'Equals', type: 'single' },
+ { value: 'neq', label: 'Not Equals', type: 'single' },
+ ],
+ input: ({ source }) => ,
+ defaultValue: 'Lorem Ipsum',
+ }
};
export const PostListToolbar = () => (
@@ -105,10 +113,11 @@ export const PostListToolbar = () => (
For a given field, the filter configuration should be an object containing an array of `operators` and a default `input`, used for operators that don't define their own. You can use the [filter configuration builders](#filter-configuration-builders) (like `textFilter`) to build filter configuration objects.
-An operator is an object that has a `label`, a `value` and a `type`.
+An **operator** is an object that has a `label`, a `value`, a `defaultValue` and a `type`.
- The `label` is a string, and can be a translation key.
- The `value` is used as a suffix to the `source` and passed to the list filters.
+- The `defaultValue` is used as the default `value` of the `source`.
- The `type` ensures that when selecting an operator with a different type than the previous one, React-admin resets the filter value. Its value should be either `single` for filters that accepts a single value (for instance a `string`) or `multiple` for filters that accepts multiple values (for instance an `Array` of `string`). Should you need to differentiate a custom input from those two types, you may provide any type you want to the `type` option (for instance, `map`).
For instance, if the user adds the `views` filter with the `eq` operator and a value of `0`, the `dataProvider.getList()` will receive the following `filter` parameter:
@@ -117,6 +126,11 @@ For instance, if the user adds the `views` filter with the `eq` operator and a v
{ views_eq: 0 }
```
+In your filter declaration, you can provide an `operator`, an `input` and a `defaultValue`.
+The **input** is a react object taking `source` as prop and rendering the input you will need to fill for your filter.
+
+**Tip:** The **defaultValue** of a filter is not the same as the `defaultValue` of an `operator`.
+
## Filter Configuration Builders
To make it easier to create a filter configuration, `ra-form-layout` provides some helper functions. Each of them has predefined operators and inputs. They accept an array of operators if you want to remove some of them.
@@ -268,7 +282,7 @@ const postListFilters: FiltersConfig = {
views: {
operators: [
{ value: 'eq', label: 'Equals', type: 'single' },
- { value: 'neq', label: 'Not Equals', type: 'single' },
+ { value: 'neq', label: 'Not Equals', type: 'single', defaultValue: 1 },
{
value: 'between',
label: 'Between',
@@ -277,6 +291,7 @@ const postListFilters: FiltersConfig = {
},
],
input: ({ source }) => ,
+ defaultValue: 0
},
};
@@ -477,7 +492,7 @@ const postListFilters: FiltersConfig = {
views: {
operators: [
{ value: 'eq', label: 'Equals', type: 'single' },
- { value: 'neq', label: 'Not Equals', type: 'single' },
+ { value: 'neq', label: 'Not Equals', type: 'single', defaultValue: 1 },
{
value: 'between',
label: 'Between',
@@ -486,6 +501,7 @@ const postListFilters: FiltersConfig = {
},
],
input: ({ source }) => ,
+ defaultValue: 0,
},
};