nili/ui
enfaartr
Tüm bileşenler

Table

Genel görünüm
29 export12 varyant ekseni31 prop4 dosya
import { SortDirection, Table, TableAlign, TableBody, TableCell, TableFooter } from '@nili/ui';

Bu, kütüphanenin kendi genel görünüm sayfası — canlı olarak render ediliyor. Üstten dili veya temayı değiştirin, o da değişir.

Temel

Satır rolü verilmiş div’ler değil, gerçek bir table öğesi. Ekran okuyucular gerçek bir tabloya gezinme kipi verir — hücre hücre ilerlemek, her sıçrayışta sütun başlığını duymak — ve yeniden yazımda bunların hiçbiri kalmaz. label onu adlandırır; adsız bir tablo yalnızca “tablo” diye duyurulur.

MüşteriTutarDurum
Acme Co.1,200ödendi
Globex480beklemede
Initech3,150gecikmiş
Umbrella90ödendi
import {
  Table, TableHeader, TableBody, TableRow, TableHead, TableCell, Badge,
} from "@nili/ui"

export function Example() {
  return (
    <Table label="Invoices">
      <TableHeader>
        <TableRow>
          <TableHead>Customer</TableHead>
          <TableHead align="end">Amount</TableHead>
          <TableHead>Status</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {rows.map((row) => (
          <TableRow key={row.id}>
            <TableCell header>{row.customer}</TableCell>
            <TableCell align="end" numeric>{row.amount}</TableCell>
            <TableCell>
              <Badge appearance="light" color="green" dot>Paid</Badge>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}

Satır yüksekliği ve başlık

İki satır yüksekliği — X-Large (64) ve Large (48). Görünür bir caption tabloyu adlandırır; ayrıca label gerekmez.

size=lg, başlıklı
Invoices from the last 30 days
MüşteriTutar
Acme Co.1,200
Globex480
Initech3,150
import { Table } from "@nili/ui"

export function Example() {
  return (
    <>
      <Table size="xl" label="Invoices">…</Table>
      <Table size="lg" caption={t('sizes.caption')}>…</Table>
    </>
  )
}

Hücre önceliği

Bir sütunun ne kadar yüksek sesle okunduğu. leading satırın kimliğidir, passive gözün atlaması gereken üstveridir ve none hücrenin bir denetim barındırabilmesi için tipografi stilini tümüyle kaldırır.

MüşteriE‑postaGüncellendiEylemler
A
Acme Co.		billing@acme.com2 gün önce
G
Globex		ap@globex.io2 gün önce
I
Initech		finance@initech.dev2 gün önce
import { Table, TableCell } from "@nili/ui"

export function Example() {
  return (
    <TableRow>
      <TableCell priority="leading" header>Acme Co.</TableCell>
      <TableCell priority="regular">billing@acme.com</TableCell>
      <TableCell priority="passive">Updated 2 days ago</TableCell>
      <TableCell priority="none">
        <CompactButton aria-label="More"><Icon icon={RiMore2Fill} /></CompactButton>
      </TableCell>
    </TableRow>
  )
}

Sıralama

sortable sıralama düğmesini çizer ve hücredeki aria-sort’u yönetir. Yalnızca sıralanan sütuna iner — diğer her sütundaki “none”, ekran okuyucunun sesli okuduğu gürültüdür.

Initech3,150
Acme Co.1,200
Globex480
Umbrella90
import { TableHead } from "@nili/ui"

export function Example() {
  const [sort, setSort] = useState({ key: "amount", direction: "desc" })

  return (
    <TableHead
      align="end"
      sortable
      sortDirection={sort.key === "amount" ? sort.direction : null}
      sortLabel={t('sorting.byAmount')}
      onSort={(direction) => setSort({ key: "amount", direction })}
    >
      Amount
    </TableHead>
  )
}

Seçim, yapışkan başlık ve alt bilgi

selected bir satırı vurgular ve aria-selected ekler. interactive yalnızca bir üzerine gelme ipucudur — onClick’i bir kaydı açan bir satır ekran okuyucuya görünmez; bu yüzden hücreye gerçek bir bağlantı ya da düğme koyun ve satır vurgusu onu izlesin.

MüşteriTutar
Acme Co.1,200
Globex480
Initech3,150
Umbrella90
4 öğeden 1 seçili4,920
import { Table, TableRow, TableHead, TableCell, Checkbox } from "@nili/ui"

export function Example() {
  return (
    <Table label="Invoices" stickyHeader>
      <TableHeader sticky>
        <TableRow>
          <TableHead state="empty"><Checkbox aria-label="Select all" /></TableHead>
          <TableHead>Customer</TableHead>
        </TableRow>
      </TableHeader>

      <TableBody>
        <TableRow selected interactive>
          <TableCell priority="none"><Checkbox aria-label="Select row" checked /></TableCell>
          <TableCell header>Globex</TableCell>
        </TableRow>
      </TableBody>

      <TableFooter>
        <TableRow>
          <TableCell colSpan={2}>4 invoices</TableCell>
        </TableRow>
      </TableFooter>
    </Table>
  )
}