ListBase.md

layout	default
title	The ListBase Component
storybook_path	ra-core-controller-list-listbase--no-auth-provider

<ListBase>

<ListBase> is a headless variant of <List>. 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 reusable List component, like this one:

import { 
    ListBase,
    ListIterator,
} from 'react-admin';

const MyList = ({ children, actions, filters, title, ...props }) => (
    <ListBase {...props}>
        <h1>{title}</h1>
        <CustomToolbar
            filters={filters}
            actions={actions}
        />
        <div>
            {children}
        </div>
        <CustomPagination />
    </ListBase>
);

const PostList = () => (
    <MyList title="Post List">
        <ListIterator>
            ...
        </ListIterator>
    </MyList>
);

This custom List component has no aside component - it's up to you to add it in pure React.

Props

The <ListBase> component accepts the same props as useListController:

• debounce
• disableAuthentication
• disableSyncWithLocation
• exporter
• filter
• filterDefaultValues
• perPage
• queryOptions
• resource
• sort

In addition, <ListBase> renders its children components inside a ListContext. Check the <List children> documentation for usage examples. Alternatively, you can pass a render function prop instead of children. This function will receive the ListContext as argument.

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, ListIterator } from 'react-admin';

// Resource name is "posts"
const PostList = () => (
    <ListBase>
        <ListIterator>
            <CustomPostRenderer />
        </ListIterator>
    </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.