marmelab/react-admin · error · Error

DatagridRow can only be used within a RecordContext or be pa

Error message

DatagridRow can only be used within a RecordContext or be passed a record prop

What it means

After checking the id, DatagridRow calls useRecordContext(props) and throws when no record is found: it needs the record data to render cells and compute rowClick. A record must come from an enclosing RecordContext (as inside <Datagrid>) or be passed via the `record` prop.

Source

Thrown at packages/ra-ui-materialui/src/list/datagrid/DatagridRow.tsx:66

        hover = true,
        id,
        onToggleItem,
        record: recordOverride,
        rowClick,
        selected = false,
        style,
        selectable = true,
        ...rest
    } = props;

    if (typeof id === 'undefined') {
        throw new Error('DatagridRow expects an id prop');
    }
    const context = useDatagridContext();
    const translate = useTranslate();
    const record = useRecordContext(props);
    if (!record) {
        throw new Error(
            'DatagridRow can only be used within a RecordContext or be passed a record prop'
        );
    }
    const resource = useResourceContext(props);
    const resourceDefinition = useResourceDefinition(props);
    const hasDetailView =
        resourceDefinition.hasShow || resourceDefinition.hasEdit;
    if (!resource) {
        throw new Error(
            'DatagridRow can only be used within a ResourceContext or be passed a resource prop'
        );
    }
    const expandable =
        (!context ||
            !context.isRowExpandable ||
            context.isRowExpandable(record)) &&
        expand;
    const [expanded, toggleExpanded] = useExpanded(

View on GitHub (pinned to 051f511bb0)

Solutions

1. Render DatagridRow inside a <Datagrid> so RecordContext supplies the record.
2. Pass `record` explicitly: `<DatagridRow id={record.id} record={record}>...`.
3. Wrap with `<RecordContextProvider value={record}>` when composing manually.

Example fix

// before
<DatagridRow id={1} resource="posts">...
// after
<DatagridRow id={1} record={post} resource="posts">...

const record = useRecordContext(props);
if (!record) return null; // or render a placeholder instead of DatagridRow

const hasRecord = <T extends { record?: RaRecord }>(p: T): p is T & { record: RaRecord } =>
  p.record !== undefined && p.record !== null;

When it happens

Trigger: Rendering <DatagridRow> outside a <Datagrid>/RecordContext without a `record` prop, or in a custom row wrapper that fails to forward the record.

Common situations: Reusing DatagridRow in a plain table or list for consistent styling; unit tests mounting DatagridRow bare; a wrapper component that destructures and drops `record`.

Related errors

• DatagridRow can only be used within a ResourceContext or be
• DataTableRow can only be used within a RecordContext or be p
• <InfiniteList> was called outside of a ResourceContext and w
• useListController requires a non-empty resource prop or cont
• useShowController requires a non-empty resource prop or cont

AI-assisted analysis of marmelab/react-admin@051f511bb0 (2026-08-30). Data as JSON: /api/errors/318476705874e4b1. Report an issue: GitHub.