Customize the list layout

Question

I'm using the rest-admin Framework.

I would like to change the layout of the lists, and add a custom component.

Currently the layout is:

I want is to add a quick search component. And the filter panel show or hide it with an action. Because I think you lose a lot of space on the screen by putting a quick search filter. My idea is to make better use of the blank space.

The next image would be the layou that I need:

I'm based on Google analytic user administration UI:

My question is: Can I do this by reusing the list component of the framework without creating a new "List" component?

Answer 1

You'll have to implement your own List component. However, most of the List work is actually done by the ListController component from ra-core which we didn't get the time to document properly yet but it shouldn't be too difficult to implement. You can copy/paste the code from the List component and adjust it as you need.

Two things to note though:

1. Quick search is already doable with always on filters. So if you can live without your exact layout, that's the way to go. Check the demo source code for an example: https://marmelab.com/react-admin-demo/#/customers

2. We are investigating support of children as a function for some of the ra-ui-material components (List is one of them) to make this kind of customization easier