React-admin: it should be possible to disable the Empty page in listview

[dobe]

Is your feature request related to a problem? Please describe.
it is currently. not possible to just disable the Empty view in the ListView in order to re-use user defined create actions also if there are no results

Describe the solution you'd like
in order to disable the Empty page, we could just set the property to something falsy and then react admin should fallback to render the empty list page along with the actions.

for clarification link to the code https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/list/List.js#L171-L176

[JulienMattiussi]

Maybe you can set a custom Pagination object and them defined it a limit prop to specify an object with the actions you want when the list is empty.

Something like this:

import { List, Pagination } from 'react-admin';

const PaginationWithCustomEmpty = ({limit, ...props}) => (
   const SomeObjectWithActions = () => (<>/*something*/</>);
   return (<Pagination {...props} limit={<SomeObjectWithActions/>} />);

<List pagination={<PaginationWithCustomEmpty />}>

Does it solve your problem @dobe ?

[fzaninotto]

You can use your custom ListActions in a custom EmptyPage. Just define it as explained in the doc:

const Empty = (props) => (
    <MyListActions {...props} >
);

const ProductList = props => (
    <List empty={<Empty />} {...props}>
        ...
    </List>
);

In the general case, our impression is that the default List view doesn't make sense for empty lists, that's why we added the Empty element. I don't think that allowing to display the default list view when the list is empty would be better than defining a custom Empty page.

Let's leave this issue open for discussion to see if we implement the default list view on empty=false, or if we change nothing.

[dobe]

You can use your custom ListActions in a custom EmptyPage. Just define it as explained in the doc:

jep this is our current workaroudn ... have defined a custom empty page with our custom actions, however this is a lot of boilerplate to handle this case we need to do for every create view.

In the general case, our impression is that the default List view doesn't make sense for empty lists

if you have custom create buttons in your actions like we have, those are not displayed if no items are there and we need to add them by hand. it would be much easier to just enable the normal list view, which is imho also more consistent when multiple actions are defined.

[djhi]

// src/ui/List.js
import { List as RaList } from 'react-admin';

const Empty = (props) => (
    <MyListActions {...props} />
);

// My List with my own default props
const List = props => (
    <RaList empty={<Empty />} {...props}>
        // ...
    </RaList>
);

export default List;

// in src/products/ProductList.js
import List from '../ui/List'

const ProductList = props => (
    <List {...props}>
        // ...
    </List>
);

[jtrezza]

@dobe Try passing a filterDefaultValues prop to the list. That will disable the empty page.

[gary-menzel]

I have another use case for this (i.e. something like empty={false})...

It is when there is a lot of information stored and no suitable "default" view that would make sense to the users. I have a back end that serves an empty array if there is no search or filter - so I still want the Filter bar displayed and all the allowed Actions. I may even have a "bulk import" action that should still display (and not want them to create things manually).

Maybe I just have to bypass the React Admin framework (i.e. not adding a Create component into the Resource definition) and add my own "Create" button so that the hasCreate (combined with checks for an empty state) won't trigger all this behaviour?

Or possibly use my own custom <ListView /> component that to either skips over that logic or implements a prop to allow this behaviour. But it seems a shame to have to duplicate all of that wonderful code just for this small feature.

@jtrezza That sort of worked for me but, because I am heavily manipulating the filters in my Filter component, the "reset" I have on my Search filter causes the same problem when I return to my "empty" list (which is only empty because no filter criteria has been supplied). So, unfortunately, I have to look at other workarounds.

[InfiniteRandomVariable]

In my case, my Listview uses a calendar as a filter for displaying daily expense. A user visits the page in the beginning of each day, it will display an empty default page which will replace my calendar filter. The list won't be available for viewing.

Disabling the default empty page with the intended Listview with its filters and actions be still available when the search result is non, that will be great.

I follow this tut which supports my use case, but it isn't as straightforward as with the deprecation of "react-router-redux" and its replacement "connected-react-router".

https://marmelab.com/blog/2019/02/07/react-admin-advanced-recipes-creating-and-editing-a-record-from-the-list-page.html

Thanks for the pointers.

[fzaninotto]

fixed by #5165