marmelab/react-admin · error · Error

Missing at least one of the following props: render, field,

Error message

Missing at least one of the following props: render, field, children, or source

What it means

<DataTableCell> renders a single cell value and needs one of four ways to obtain content: a `render` function, a `field` element, `children`, or a `source` field name (also used for column hiding). When all four are absent it throws, since there is nothing to render and no way to identify the column.

Source

Thrown at packages/ra-ui-materialui/src/list/datatable/DataTableCell.tsx:47

                source,
                sortByOrder,
                label,
                sx,
                ...rest
            } = props;
            const { storeKey, defaultHiddenColumns } =
                useDataTableStoreContext();
            const [hiddenColumns] = useStore<string[]>(
                storeKey,
                defaultHiddenColumns
            );
            const record = useRecordContext();
            const isColumnHidden = hiddenColumns.includes(
                source ?? (label as string)
            );
            if (isColumnHidden) return null;
            if (!render && !field && !children && !source) {
                throw new Error(
                    'Missing at least one of the following props: render, field, children, or source'
                );
            }
            const sxValue = {
                ...(cellSx && record ? cellSx(record) : {}),
                ...sx,
            } as SxProps;

            const fieldValue = get(record, source!);
            return (
                <TableCellStyled
                    ref={ref}
                    className={clsx(
                        DataTableClasses.rowCell,
                        className,
                        cellClassName,
                        `column-${source}`
                    )}

View on GitHub (pinned to 051f511bb0)

Solutions

1. Add a `source` prop: `<DataTableCell source="name" />`.
2. Or pass a `render` function: `<DataTableCell render={record => record.name} />`.
3. Or supply `field`/`children` with a field element to render.

Example fix

// before
<DataTableCell label="Name" />
// after
<DataTableCell label="Name" source="name" />

if (!render && !field && !children && !source) {
  throw new Error('DataTableCell needs one of render, field, children, or source');
}

const renderableCell = (p: { render?: Function; field?: React.ReactElement; children?: React.ReactNode; source?: string }): boolean =>
  !!p.render || !!p.field || React.Children.count(p.children) > 0 || typeof p.source === 'string';

When it happens

Trigger: Rendering <DataTableCell> with none of render/field/children/source, e.g. `<DataTableCell label="Name" />` (label alone is not a source of data) or a props spread that omits all four.

Common situations: Building custom DataTable columns and passing only cosmetic props; conditional rendering where children resolve to nothing; copy-pasting a header-only column config into a cell.

Related errors

• useReferenceFieldController: missing reference prop. You mus
• useShowController requires an id prop or a route with an /:i
• useNextPrevController was called outside of a ResourceContex
• To create a new option, you must pass an onCreate function o
• <InfiniteListBase> requires either a 'render' prop or 'child

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