marmelab/react-admin · error · Error

DataTableRow can only be used within a ResourceContext or be

Error message

DataTableRow can only be used within a ResourceContext or be passed a resource prop

What it means

DataTableRow resolves its resource via useResourceContext (either the ResourceContext from a surrounding <Resource>/<ListContext> or an explicit resource prop). react-admin throws when neither exists, because without a resource name it cannot resolve the record's list route, row click behavior, or resource definition (hasShow/hasEdit).

Source

Thrown at packages/ra-ui-materialui/src/list/datatable/DataTableRow.tsx:71

            hasBulkActions = false,
            hover = true,
        } = useDataTableConfigContext();

        const { handleToggleItem, isRowExpandable, isRowSelectable, rowClick } =
            useDataTableCallbacksContext();

        const record = useRecordContext(props);
        if (!record) {
            throw new Error(
                'DataTableRow 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(
                'DataTableRow can only be used within a ResourceContext or be passed a resource prop'
            );
        }
        const selectable = !isRowSelectable || isRowSelectable(record);
        const expandable =
            (!isRowExpandable || isRowExpandable(record)) && expand;
        const [expanded, toggleExpanded] = useExpanded(
            resource,
            record.id,
            expandSingle
        );
        const [nbColumns, setNbColumns] = useState(() =>
            computeNbColumns(expandable, children, hasBulkActions)
        );
        useEffect(() => {
            // Fields can be hidden dynamically based on permissions;
            // The expand panel must span over the remaining columns
            // So we must recompute the number of columns to span on

View on GitHub (pinned to 051f511bb0)

Solutions

1. Pass an explicit resource prop: <DataTableRow resource="posts" ...>.
2. Render the row inside a ListContext/ResourceContextProvider supplying the resource.
3. Use <DataTable> inside a <List> so the resource context is provided automatically.

Example fix

// before
<TableBody><DataTableRow record={record} /></TableBody>
// after
<TableBody><DataTableRow resource="posts" record={record} /></TableBody>

if (!resource) throw new Error('DataTableRow requires a resource: wrap in <List>/<Resource> or pass resource prop');

const hasResource = (p: { resource?: string }): p is { resource: string } => typeof p.resource === 'string' && p.resource.length > 0;

try { renderRow(); } catch (e) { if (String(e).includes('DataTableRow can only be used')) return <DataTableRow resource="posts" {...rowProps} />; throw e; }

When it happens

Trigger: Rendering <DataTableRow> outside a ListContext/ResourceContext (e.g. in a plain <TableBody> or custom page) without passing resource="posts".

Common situations: Custom standalone tables, storybook examples, or extracting a row component out of a <DataTable> without threading the resource down.

Related errors

• useCanAccess must be used inside a <Resource> component or p
• useCreateController requires a non-empty resource prop or co
• useEditController requires a non-empty resource prop or cont
• DataTableRow can only be used within a RecordContext or be p
• DataTableRow can only be used within a ResourceContext or be

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