Skip to main content

<DetailHub>

The default layout component rendered by <Detail>. It automatically separates scalar fields (text, numbers, dates, etc.) from collection fields (like <ReferenceManyField>), rendering them in distinct sections:

  1. A page header with title, description, and actions (e.g. Edit button)
  2. A Container with a <KeyValuePairs> for scalar fields
  3. Collection fields (each rendered below the main container)

Usage​

<DetailHub> is used automatically by <Detail> — you rarely need to use it directly. The most common reason is to set it as a resource's detailComponent in the schema.

<ResourceSchema name="products" detailComponent={DetailHub}>
  ...
</ResourceSchema>

Custom layout​

You can pass children to override the auto-layout. Scalar and collection fields are still separated automatically.

<DetailHub title="Product Details">
  <KeyValuePairs columns={2} />
  <ReferenceManyField reference="reviews" target="productId" />
</DetailHub>

Include / Exclude​

Control which fields appear using detailInclude or detailExclude on the ResourceSchema:

<ResourceSchema name="products" detailExclude={['internalNotes']}>
  ...
</ResourceSchema>

Props​

PropTypeDefaultDescription