Skip to content

Add render prop support to ReferenceManyCount#11266

Merged
fzaninotto merged 3 commits into
marmelab:nextfrom
Will-thom:feat/reference-many-count-children
Jun 9, 2026
Merged

Add render prop support to ReferenceManyCount#11266
fzaninotto merged 3 commits into
marmelab:nextfrom
Will-thom:feat/reference-many-count-children

Conversation

@Will-thom

Copy link
Copy Markdown

Summary

  • Allow ReferenceManyCountBase to render custom children using a record context containing total
  • Forward ReferenceManyCount children so fields like NumberField source=total can format large counts
  • Add stories, tests, and documentation for the new customization path

Fixes #11242

Tests

  • node .yarn\releases\yarn-4.0.2.cjs test-unit packages/ra-core/src/controller/field/ReferenceManyCountBase.spec.tsx packages/ra-ui-materialui/src/field/ReferenceManyCount.spec.tsx
  • node .yarn\releases\yarn-4.0.2.cjs exec eslint packages/ra-core/src/controller/field/ReferenceManyCountBase.tsx packages/ra-core/src/controller/field/ReferenceManyCountBase.stories.tsx packages/ra-core/src/controller/field/ReferenceManyCountBase.spec.tsx packages/ra-ui-materialui/src/field/ReferenceManyCount.tsx packages/ra-ui-materialui/src/field/ReferenceManyCount.stories.tsx packages/ra-ui-materialui/src/field/ReferenceManyCount.spec.tsx
  • node .yarn\releases\yarn-4.0.2.cjs workspace ra-core build
  • node .yarn\releases\yarn-4.0.2.cjs workspace ra-ui-materialui build

@fzaninotto

Copy link
Copy Markdown
Member

Thanks for your PR. Now that I see the result, I think that supporting children is the wrong choice. Populating the RecordContext with a fake record containing only one total field feels very artificial, I don't find it intuitive and I don't find it shorter than using useReferenceManyFieldController directly.

I think that using a render function (as in RecordField) makes more sense, as there is no convention about any context.

<ReferenceManyCount
  reference="comments"
  target="post_id"
  render=({ total }) => new Intl.NumberFormat("de-DE").format(total)}
/>

If you want to use a Field component there, you can just pass the record explicitly (all fields compmonents support it):

<ReferenceManyCount
  reference="comments"
  target="post_id"
  render=({ total }) => <NumberField record={( total }} source="total" />}
/>

Besides, this syntax is already familiar as it's used by RecordField and DataTable.Col.

@Will-thom Will-thom changed the title Add children support to ReferenceManyCount Add render prop support to ReferenceManyCount Jun 6, 2026
@Will-thom

Copy link
Copy Markdown
Author

Thanks for the guidance. I reworked the PR to use a render function instead of children/RecordContext, matching the RecordField/DataTable.Col style you suggested. The updated implementation passes { total } directly to render, updates both ReferenceManyCount and ReferenceManyCountBase docs/stories, and adds focused coverage for the render customization path. I also updated the PR title to reflect the render prop approach.

@fzaninotto fzaninotto merged commit 5c3db4a into marmelab:next Jun 9, 2026
12 of 14 checks passed
@fzaninotto

Copy link
Copy Markdown
Member

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants