Help

SectionRow - Admin Components

Note: This component is available since Medusa v2.21.0.

The SectionRow component shows a title and its value side by side in a row. The Medusa Admin uses it in the detail sections of its pages, such as a product's general section.

Code
import { SectionRow } from "@medusajs/dashboard/components"

Example#

Use SectionRow inside a container in a widget or UI route:

Code
import { SectionRow } from "@medusajs/dashboard/components"
import { Container, Heading } from "@medusajs/ui"

const BrandGeneralSection = ({ brand }) => {
  return (
    <Container className="divide-y p-0">
      <div className="px-6 py-4">
        <Heading level="h2">Brand</Heading>
      </div>
      <SectionRow title="Name" value={brand.name} />
      <SectionRow title="Handle" value={brand.handle} />
    </Container>
  )
}

Medusa shows a dash when you pass an empty value.

Props#

The component accepts the SectionRowProps type:

titlestring

The row's title, shown in the first column.

valueReact.ReactNode | string | nullOptional

The row's value. Medusa shows a dash when the value is empty. When you pass a React node instead of a string, Medusa wraps it in a flex container that wraps its items, which is useful for badges or lists.

actionsReact.ReactNodeOptional

Content to show at the end of the row, such as an ActionMenu. When you pass it, Medusa adds a third column for the content.

Was this page helpful?