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 (react-admin test UI) renders a row for a record and needs to know which record to display and navigate to. It reads the record via useRecordContext; if no record is found in context AND no record prop was supplied, it throws because the row has nothing to render.

Source

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

        );
    }
};

const DataTableCellValue = (props: { source: string }) => {
    const value = useFieldValue(props);
    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'

View on GitHub (pinned to 051f511bb0)

Solutions

Wrap the row in <RecordContextProvider value={record}> or render it inside a component that provides one
Pass the record explicitly: <DataTableRow record={post} />
Guard the render: only render DataTableRow when the record exists

Example fix

// before
<DataTableRow resource="posts" />

// after
posts.map(post => (
  <RecordContextProvider key={post.id} value={post}>
    <DataTableRow resource="posts" />
  </RecordContextProvider>
))

Defensive patterns

Strategy: type-guard

Validate before calling

if (!record) return null; // or skip rendering the row
<DataTableRow resource="posts" record={post} />

Type guard

const canRenderRow = (props: { record?: Record }) =>
  props.record != null;
// usage: {canRenderRow(props) ? <DataTableRow {...props} /> : null}

Try / catch

try {
  render(<DataTableRow {...props} />);
} catch (e) {
  if (e.message.includes('DataTableRow can only be used within a RecordContext')) {
    // render placeholder / skip row
  } else throw e;
}

Prevention

Always pass record explicitly when DataTableRow is used outside RecordContextProvider
Never map over possibly-undefined array entries; filter first
Wrap rows in RecordContextProvider in custom table layouts
Add a null-record guard before rendering row components

When it happens

Trigger: Rendering <DataTableRow> outside a <RecordContextProvider> without a `record` prop; using it inside DataTable with records that are undefined/null; forgetting to pass record when composing custom table bodies.

Common situations: Custom list layouts built from the test-ui DataTable components; unit tests rendering DataTableRow in isolation; mapping over data where an entry is undefined.

Related errors

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