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 also needs to know which resource it belongs to, resolved via useResourceContext from a <ResourceContext> or the `resource` prop. When neither is available, it throws, since row click navigation and permissions depend on the resource name.

Source

Thrown at packages/ra-core/src/test-ui/DataTable.tsx:101

    return <>{value?.toString()}</>;
};

const DataTableRow = (props: {
    children: React.ReactNode;
    record?: RaRecord;
    resource?: string;
}) => {
    const getPathForRecord = useGetPathForRecordCallback();
    const navigate = useNavigate();
    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);
    if (!resource) {
        throw new Error(
            'DataTableRow can only be used within a ResourceContext or be passed a resource prop'
        );
    }

    const { hasBulkActions = false } = useDataTableConfigContext();
    const { handleToggleItem, rowClick } = useDataTableCallbacksContext();
    const selectedIds = useDataTableSelectedIdsContext();

    const handleClick = useEvent(async (event: React.MouseEvent) => {
        event.persist();
        const temporaryLink =
            typeof rowClick === 'function'
                ? rowClick(record.id, resource, record)
                : rowClick;

        const link = isPromise(temporaryLink)
            ? await temporaryLink
            : temporaryLink;

View on GitHub (pinned to 051f511bb0)

Solutions

Pass resource explicitly: <DataTableRow resource="posts" record={post} />
Wrap in <ResourceContextProvider value="posts">
Render the DataTable inside a List/Resource-scoped component so the resource context exists

Example fix

// before
<DataTableRow record={post} />

// after
<DataTableRow record={post} resource="posts" />
// or
<ResourceContextProvider value="posts">
  <DataTableRow record={post} />
</ResourceContextProvider>

Defensive patterns

Strategy: type-guard

Validate before calling

if (!resource) return null; // skip rows without a resource scope
<DataTableRow resource="posts" record={post} />

Type guard

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

Try / catch

try {
  render(<DataTableRow {...props} />);
} catch (e) {
  if (e.message.includes('ResourceContext')) {
    // supply default resource or skip
  } else throw e;
}

Prevention

Pass the resource prop when rendering outside List/Resource scope
Wrap ad-hoc tables in ResourceContextProvider
Keep DataTable usage inside List-derived components where possible
Check that refactors didn't strip the resource prop from shared row components

When it happens

Trigger: Rendering <DataTableRow> outside any ResourceContextProvider and without a resource prop; nesting a DataTable from one resource into another context that doesn't set resource; refactored code removing the resource prop.

Common situations: Custom pages rendering DataTable outside <List>/Resource scope; test setups mounting DataTableRow standalone; moving a DataTable into a dashboard widget.

Related errors

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