<ListBase>
<ListBase> is a headless List page component. It fetches a list of records from the data provider, puts it in a ListContext, and renders its children. Use it to build a custom list layout.
Contrary to <List>, it does not render the page layout, so no title, no actions, no <Card>, and no pagination.
<ListBase> relies on the useListController hook.
Usage
You can use ListBase to create your own custom List page component, like this one:
import {
DataTable,
ListBase,
ListToolbar,
DataTable,
Pagination,
Title,
} from 'react-admin';
import { Card } from '@mui/material';
const PostList = () => (
<ListBase>
<Title title="Post List"/>
<ListToolbar
filters={[
{ source: 'q', label: 'Search', alwaysOn: true },
{ source: 'published', label: 'Published', type: 'boolean' },
]}
/>
<Card>
<DataTable>
<DataTable.Col source="title" />
<DataTable.Col source="author" />
<DataTable.Col source="published_at" />
</DataTable>
</Card>
<Pagination />
</ListBase>
);
Alternatively, you can pass a render function prop instead of children. This function will receive the ListContext as argument.
const PostList = () => (
<ListBase render={({ data, total, isPending, error }) => (
<Card>
<Title title="Post List" />
<ListToolbar
filters={[
{ source: 'q', label: 'Search', alwaysOn: true },
{ source: 'published', label: 'Published', type: 'boolean' },
]}
/>
<DataTable>
{data?.map(record => (
<DataTable.Row key={record.id}>
<DataTable.Col source="title" record={record} />
<DataTable.Col source="author" record={record} />
<DataTable.Col source="published_at" record={record} />
</DataTable.Row>
))}
</DataTable>
<Pagination total={total} />
</Card>
)} />
);
Props
The <ListBase> component accepts the following props:
authLoadingchildrendebouncedisableAuthenticationdisableSyncWithLocationemptyemptyWhileLoadingerrorexporterfilterfilterDefaultValuesloadingofflineperPagequeryOptionsrenderresourcesortstoreKey
In addition, <ListBase> renders its children components inside a ListContext. Check the <List children> documentation for usage examples.
Security
The <ListBase> component requires authentication and will redirect anonymous users to the login page. If you want to allow anonymous access, use the disableAuthentication prop.
If your authProvider implements Access Control, <ListBase> will only render if the user has the "list" access to the related resource.
For instance, for the <PostList> page below:
import { ListBase, DataTable } from 'react-admin';
// Resource name is "posts"
const PostList = () => (
<ListBase>
<DataTable>
<DataTable.Col source="title" />
<DataTable.Col source="author" />
<DataTable.Col source="published_at" />
</DataTable>
</ListBase>
);
<ListBase> will call authProvider.canAccess() using the following parameters:
{ action: "list", resource: "posts" }
Users without access will be redirected to the Access Denied page.
Note: Access control is disabled when you use the disableAuthentication prop.