marmelab/react-admin · error · Error

DataTableRow can only be used within a RecordContext or be p

Error message

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

What it means

DataTableRow reads the current record via useRecordContext(props) to render its cells and wire row callbacks (toggle, expand, rowClick). If no record is available from context and none is passed via props, it throws — a row without record data is meaningless.

Source

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

    React.forwardRef<HTMLTableRowElement, DataTableRowProps>((inProps, ref) => {
        const props = useThemeProps({
            props: inProps,
            name: PREFIX,
        });
        const { children, className, ...rest } = props;
        const {
            expand,
            expandSingle,
            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,

View on GitHub (pinned to 051f511bb0)

Solutions

1. Render DataTableRow inside a <DataTable> so RecordContext provides the record.
2. Pass `record` explicitly: `<DataTableRow record={post}>...`.
3. Wrap with `<RecordContextProvider value={record}>` for manual composition.

Example fix

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

const record = useRecordContext(props);
if (!record) return null; // guard before rendering DataTableRow

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

When it happens

Trigger: Rendering <DataTableRow> outside a <DataTable>/RecordContext without a `record` prop, or a custom row wrapper that fails to forward `record`.

Common situations: Reusing DataTableRow for consistent styling in an ordinary <table>; isolated rendering in tests/storybook; wrappers that destructure and drop the record prop.

Related errors

• DatagridRow can only be used within a RecordContext or be pa
• <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
• useNextPrevController was called outside of a ResourceContex

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