📊 Components: data display

Two components for structured data: Table and Chart. For long lists, ListView is usually a better fit.

🧮 Table

Three nodes: Table → TableRow → TableCell.

• TableRow: header marks the header row.
• TableCell: width, colSize (xs … xl), colSpan, rowSpan, padding, align, vAlign.

<Table>
  <TableRow header>
    <TableCell><Text value="Product" /></TableCell>
    <TableCell align="end"><Text value="Price" /></TableCell>
  </TableRow>
  {items.map(item => (
    <TableRow>
      <TableCell><Text value={item.title} /></TableCell>
      <TableCell align="end"><Text value={item.price} /></TableCell>
    </TableRow>
  ))}
</Table>

The chat window is narrow — more than two or three columns gets cramped.

📈 Chart

Bar, line and area charts.

• data — an array of rows, or a binding to one.
• series — [{ dataKey, label, type, color, stack, curveType }]. type: bar | line | area.
• xAxis — a column name or { dataKey, hide }.
• yAxis — { domain: [min, max] }, plus showYAxis.
• showLegend, showTooltip, barGap, height.
• curveType: linear | natural | monotone | step | stepBefore | stepAfter.
• stack — series sharing a stack value are stacked on top of each other.

<Chart
  data={usage}
  xAxis="day"
  height={180}
  showTooltip
  series={[{ dataKey: "messages", label: "Messages", type: "bar", color: "primary" }]}
/>

💡 Tips

• Always set an explicit height — it is not computed inside the chat window.
• Keep it to 5–10 data points so it stays readable in a narrow bubble.