<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:
children
debounce
disableAuthentication
disableSyncWithLocation
exporter
filter
filterDefaultValues
perPage
queryOptions
render
resource
sort
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.