Skip to content
Paramanu v0.1.0-alpha.0

Structured List

Structured List uses display: table for column alignment without a real <table> element. Useful for settings panels and configuration displays.

Basic Usage

Name
Value
CPU
85%
import { StructList, StructListHead, StructListBody, StructListRow, StructListCell, StructListHeaderCell } from "@paramanu/data-display-react"


export default function App() {
return (
  <StructList>
    <StructListHead>
      <StructListRow>
        <StructListHeaderCell>Name</StructListHeaderCell>
        <StructListHeaderCell>Value</StructListHeaderCell>
      </StructListRow>
    </StructListHead>
    <StructListBody>
      <StructListRow>
        <StructListCell>CPU</StructListCell>
        <StructListCell>85%</StructListCell>
      </StructListRow>
    </StructListBody>
  </StructList>
)
}
<div class="pm-struct-list pm-struct-list--md" role="table">
<div class="pm-struct-list__head">
  <div class="pm-struct-list__row" role="row">
    <div class="pm-struct-list__header-cell" role="columnheader">Name</div>
    <div class="pm-struct-list__header-cell" role="columnheader">Value</div>
  </div>
</div>
<div class="pm-struct-list__body">
  <div class="pm-struct-list__row" role="row">
    <div class="pm-struct-list__cell" role="cell">CPU</div>
    <div class="pm-struct-list__cell" role="cell">85%</div>
  </div>
</div>
</div>