Skip to content

Commit

Permalink
Add section about the emptyState prop
Browse files Browse the repository at this point in the history
  • Loading branch information
m4theushw committed Nov 29, 2019
1 parent 2106b16 commit a9ebd78
Showing 1 changed file with 30 additions and 0 deletions.
30 changes: 30 additions & 0 deletions docs/List.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ Here are all the props accepted by the `<List>` component:
* [`filterDefaultValues`](#filter-default-values) (the default values for `alwaysOn` filters)
* [`pagination`](#pagination)
* [`aside`](#aside-component)
* [`emptyState`](#empty-state)

Here is the minimal code necessary to display a list of posts:

Expand Down Expand Up @@ -650,6 +651,7 @@ const PostList = props => (
<List aside={<Aside />} {...props}>
...
</List>
);
```
{% endraw %}

Expand Down Expand Up @@ -683,6 +685,34 @@ const Aside = ({ data, ids }) => (
```
{% endraw %}

### Empty state

When there is no result, and there is no active filter, and the resource has a create page then a special page inviting the user to create the first record is displayed. Use the `emptyState` prop to modify that page, passing your custom component:

{% raw %}
```jsx
import Button from '@material-ui/core/Button';
import { CreateButton, List } from 'react-admin';

const EmptyState = ({ basePath }) => (
<div style={{ textAlign: 'center', margin: '1em' }}>
<h1>No products available</h1>
<div>Create one or import from a file</div>
<CreateButton basePath={basePath} />
<Button onClick={...}>Import</Button>
</div>
);

const ProductList = props => (
<List emptyState={<EmptyState />} {...props}>
...
</List>
);
```
{% endraw %}

The `emptyState` component receives the same props as the `aside` prop. Read the [section above](#empty-state) to check them.

### CSS API

The `List` component accepts the usual `className` prop but you can override many class names injected to the inner components by React-admin thanks to the `classes` property (as most Material UI components, see their [documentation about it](https://material-ui.com/customization/components/#overriding-styles-with-classes)). This property accepts the following keys:
Expand Down

0 comments on commit a9ebd78

Please sign in to comment.