Table

Tablo verisi için stillenmiş primitive'ler: ince çizgi halkalı bir çerçeve içinde, yer kalmadığında yatayda kayan gerçek bir <table>. Sıralama, sayfalama ve seçim mantığı senin kodunda kalır.

<Table scrollLabel="Faturalar">
<TableHead>
  <TableRow>
    <TableHeader>Fatura</TableHeader>
    <TableHeader>Müşteri</TableHeader>
    <TableHeader>Durum</TableHeader>
    <TableHeader align="end">Tutar</TableHeader>
  </TableRow>
</TableHead>
<TableBody>
  <TableRow>
    <TableCell>INV-1042</TableCell>
    <TableCell>Northwind</TableCell>
    <TableCell><Badge tone="success">Ödendi</Badge></TableCell>
    <TableCell align="end">1.240,00</TableCell>
  </TableRow>
  {/* … */}
</TableBody>
</Table>

Import

import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from "@merid/react";

Örnekler

Sıkı, hover'sız

density="sm" hücreleri 10px × 12px'e sıkılaştırır; hoverable={false} salt okunur tablolar için satırdaki hover rengini kapatır.

<Table density="sm" hoverable={false} scrollLabel="API anahtarları">
<TableHead>
  <TableRow>
    <TableHeader>Anahtar</TableHeader>
    <TableHeader align="end">İstek</TableHeader>
  </TableRow>
</TableHead>
<TableBody>
  <TableRow>
    <TableCell>api/search</TableCell>
    <TableCell align="end">12.480</TableCell>
  </TableRow>
</TableBody>
</Table>

Satır seçimi

Bir satırdaki selected, accent-soft dolguyu uygular. Seçimin kullanılabilir olması ve duyurulması için bunu bir Checkbox kolonuyla birlikte kullan. scrollLabel çerçeveyi focus alabilen, adlandırılmış bir bölgeye çevirir; böylece klavye kullanıcıları onu kaydırabilir.

<Table scrollLabel="Faturalar">
<TableHead>
  <TableRow>
    <TableHeader><Checkbox aria-label="Tümünü seç" checked={allSelected} indeterminate={someSelected} onChange={toggleAll} /></TableHeader>
    <TableHeader>Fatura</TableHeader>
    <TableHeader align="end">Tutar</TableHeader>
  </TableRow>
</TableHead>
<TableBody>
  {rows.map((row) => (
    <TableRow key={row.id} selected={selected.includes(row.id)}>
      <TableCell><Checkbox aria-label={row.id + " faturasını seç"} checked={selected.includes(row.id)} onChange={() => toggle(row.id)} /></TableCell>
      <TableCell>{row.id}</TableCell>
      <TableCell align="end">{row.amount}</TableCell>
    </TableRow>
  ))}
</TableBody>
</Table>

Sıralanabilir kolonlar

Bir başlığa sortDirection ve onSort ver: <th> üzerine aria-sort koyar ve etiketi yön ikonlu gerçek bir butona sarar. Satırları sıralamak senin işin; sıralanabilir ama o an aktif sıralama olmayan kolonlarda "none" kullan.

const [sort, setSort] = useState<{ key: "name" | "amount"; dir: "ascending" | "descending" }>({ key: "name", dir: "ascending" });
const toggle = (key: "name" | "amount") =>
  setSort((s) => ({ key, dir: s.key === key && s.dir === "ascending" ? "descending" : "ascending" }));

<TableHeader sortDirection={sort.key === "name" ? sort.dir : "none"} onSort={() => toggle("name")}>
  Ad
</TableHeader>

API referansı

Her parça ref'ini karşılık gelen native elemana iletir ve native attribute'ları aktarır.

Table

Çerçeve div'i <table>'ı sarar; className ve native prop'lar <table>'a gider.

TableHead, TableBody

<thead> (hafif yüzey üzerinde) ve <tbody>. Native attribute'lar dışında prop'ları yok.

TableRow

TableHeader

TableCell

Stil verme

Component değişkeni: her yoğunluk için ayarlanan --mrd-table-cell-padding.

Erişilebilirlik

• Native bir tablo olduğu için ekran okuyucular satır ve kolon gezintisini hazır alır. TableHeader varsayılan olarak scope="col"'dur; satır başlıkları için scope="row" kullan.
• Tabloyu tanımlamak için bir <caption> (bunu VisuallyHidden ile görsel olarak gizleyebilirsin) ya da tabloya aria-label ekle.
• TableRow selected yalnızca görseldir (data-selected); düz bir tablonun seçim anlamı yoktur, bu yüzden state'i satırdaki seçim kontrolü taşımalı.
• Tablo taşabiliyorsa scrollLabel ver; çerçeveye Tab ile ulaşılır ve ok tuşlarıyla kaydırılır.

Kullanım ilkeleri

İlgili sayfalar

• Checkbox: satır seçimi.
• Pagination: uzun tabloları sayfalamak.
• EmptyState: tabloda hiç satır olmadığında.