Skip to main content

DetailsList()

DetailsList(__namedParameters): Element

A semantic details list component for displaying metadata in key-value pairs. Uses CSS Grid layout with labels in the first column and values in the second column. Perfect for map object details, user profiles, or any structured information.

Parameters​

__namedParameters​

DetailsListProps

Returns​

Element

Example​

<DetailsList align="left">
  <DetailsListLabel>Key</DetailsListLabel>
  <DetailsListValue>Value</DetailsListValue>

  <DetailsListLabel>Ships</DetailsListLabel>
  <DetailsListValue>Millennium Falcon</DetailsListValue>
  <DetailsListValue>USS Enterprise NCC-1701</DetailsListValue>
  <DetailsListValue>Serenity</DetailsListValue>

  <DetailsListLabel>Coordinates</DetailsListLabel>
  <DetailsListValue>
    <div>Great Pyramid of Giza: 29°58'44" N 31°08'02" E</div>
    <div>Machu Picchu: 13°09'47" S 72°32'41" W</div>
    <div>Colosseum: 41°53'24" N 12°29'32" E</div>
    <div>Taj Mahal: 27°10'30" N 78°02'31" E</div>
  </DetailsListValue>
</DetailsList>

Child Component Behavior​

  • DetailsListLabel: Minimum of 1
  • DetailsListValue: Minimum of 1