📊 Компоненты: таблица и график

Для структурированных данных есть два компонента: Table и Chart. Для длинных списков удобнее ListView.

🧮 Table

Три узла: Table → TableRow → TableCell.

• TableRow: header — строка заголовка.
• TableCell: width, colSize (xs … xl), colSpan, rowSpan, padding, align, vAlign.

<Table>
  <TableRow header>
    <TableCell><Text value="Товар" /></TableCell>
    <TableCell align="end"><Text value="Цена" /></TableCell>
  </TableRow>
  {items.map(item => (
    <TableRow>
      <TableCell><Text value={item.title} /></TableCell>
      <TableCell align="end"><Text value={item.price} /></TableCell>
    </TableRow>
  ))}
</Table>

Окно чата узкое — больше двух-трёх колонок читается плохо.

📈 Chart

Столбчатые, линейные и area-графики.

• data — массив строк или привязка к нему.
• series — [{ dataKey, label, type, color, stack, curveType }]. type: bar | line | area.
• xAxis — имя колонки или { dataKey, hide }.
• yAxis — { domain: [min, max] }, а также showYAxis.
• showLegend, showTooltip, barGap, height.
• curveType: linear | natural | monotone | step | stepBefore | stepAfter.
• stack — серии с одинаковым значением складываются друг на друга.

<Chart
  data={usage}
  xAxis="day"
  height={180}
  showTooltip
  series={[{ dataKey: "messages", label: "Сообщения", type: "bar", color: "primary" }]}
/>

💡 Советы

• Задавайте height явно — в окне чата он не вычисляется автоматически.
• 5–10 точек данных — предел читаемости в узком пузыре чата.