ReferenceManyCountBase

When you need to render the number of records related to another record via a one-to-many relationship (e.g. the number of comments related to a post), use the <ReferenceManyCountBase> component. It calls dataProvider.getManyReference() with the pagination parameter set to retrieve no data - only the total number of records.

Usage

Use <ReferenceManyCountBase> anywhere inside a RecordContext. You must set the reference and target props to match the relationship:

• reference is the name of the related resource to fetch (e.g. comments)
• target is the name of the field in the related resource that points to the current resource (e.g. post_id)

For instance, to display the number of comments related to a post in a List view:

import { 
    ListBase,
    RecordsIterator,
    ReferenceManyCountBase,
} from 'ra-core';
import { TextField } from './TextField';
import { DateField } from './DateField';

export const PostList = () => (
    <ListBase>
        <table>
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Title</th>
                    <th>Published</th>
                    <th>Nb comments</th>
                </tr>
            </thead>
            <tbody>
                <RecordsIterator>
                    <tr>
                        <td><TextField source="id" /></td>
                        <td><TextField source="title" /></td>
                        <td><DateField source="published_at" /></td>
                        <td>
                            <ReferenceManyCountBase
                                reference="comments"
                                target="post_id"
                            />
                        </td>
                    </tr>
                </RecordsIterator>
            </tbody>
        </table>
    </ListBase>
)

Props

filter

If you want to count the number of records matching a given filter, pass it as the filter prop. For example, to count the number of comments already published:

<ReferenceManyCountBase 
    label="Comments"
    reference="comments"
    target="post_id"
    filter={{ is_published: true }}
/>

reference

The reference prop is required and must be the name of the related resource to fetch. For instance, to fetch the number of comments related to the current post:

<ReferenceManyCountBase 
    label="Comments"
    reference="comments"
    target="post_id"
/>

resource

By default, the <ReferenceManyCountBase> component uses the current ResourceContext, so you don't need to pass the resource prop to count the number of records in the current Resource. If you want to count a different resource, pass it as the resource prop.

<ReferenceManyCountBase 
    label="Comments"
    reference="comments"
    target="post_id"
    resource="posts"
/>

sort

If you want to customize the sort options passed to getManyReference (for instance because your relation table does not have an id column), you can pass a custom sort prop:

<ReferenceManyCountBase 
    label="Comments"
    reference="comments"
    target="post_id"
    sort={{ field: 'custom_id', order: 'ASC' }}
/>

target

The target prop is required and must be the name of the field in the related resource that points to the current one. For instance, when fetching the number of comments related to the current post, if a comment relates to a post via a post_id foreign key, you must set the target prop to post_id:

<ReferenceManyCountBase 
    label="Comments"
    reference="comments"
    target="post_id"
/>

timeout

The <ReferenceManyCountBase> component displays a loading indicator after 1 second. This is useful to avoid displaying a loading indicator when the count is retrieved in a few milliseconds. You can change this delay by passing a timeout prop.

<ReferenceManyCountBase 
    label="Comments"
    reference="comments"
    target="post_id"
    timeout={500}
/>