Table

Kurulum

Paket

@bigbang/ui

İçe aktarma

import { Table } from '@bigbang/ui';

Kaynak

Table.tsx

Storybook

Table · Playground

Table, @bigbang/ui paketindedir. Kurulum ve stil dosyaları Button ile aynıdır; ayrıntılar için Button kod sekmesine bakın.

import { Table } from '@bigbang/ui';

<Table caption="Öğe listesi">
  <Table.Header>
    <Table.Row>
      <Table.HeaderCell>Ad</Table.HeaderCell>
      <Table.HeaderCell numeric>Adet</Table.HeaderCell>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.RowHeader>Birinci öğe</Table.RowHeader>
      <Table.Cell numeric>12</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>;

Parça prop tipleri de dışa açılır: TableHeaderProps, TableBodyProps, TableFooterProps, TableRowProps, TableHeaderCellProps, TableRowHeaderProps, TableCellProps.

Özellikler

captionZorunlu

Açıklama

Tablonun başlığı. Tabloyu ekran okuyucuya ve scrollable iken kaydırma bölgesine adlandırır. Her zaman zorunludur; görsel olarak gizlemek için captionHidden kullanın.

Tür

ReactNode

captionHidden

Açıklama

Başlığı görsel olarak gizler, yardımcı teknolojiler için korur. Üstteki bir başlık zaten aynı şeyi söylüyorsa kullanın.

Tür

boolean

Varsayılan

false

scrollable

Açıklama

Tabloyu, klavye kullanıcılarının kapsayıcıdan geniş ya da yüksek bir tabloyu kaydırabilmesi için adlandırılmış ve odaklanabilir bir kaydırma bölgesine sarar. Tablo hiç taşmıyorsa kapatın.

Tür

boolean

Varsayılan

true

density

Açıklama

En az satır yüksekliği: compact 32 px, standard 40 px, comfortable 48 px. Başlık satırı standard yoğunlukta 40 px'tir.

Tür

'compact' | 'standard' | 'comfortable'

Varsayılan

'standard'

striped

Açıklama

Her ikinci gövde satırını boyar; gözün geniş tabloda satırı izlemesine yardım eder.

Tür

boolean

Varsayılan

false

stickyHeader

Açıklama

Gövde kayarken üst bilgi hücrelerini yukarıda tutar. Kapsayıcıya className ile max-h-96 gibi bir yükseklik verin; üst bilgi onun içinde yapışır.

Tür

boolean

Varsayılan

false

hoverable

Açıklama

Gövde satırını üzerine gelince yalnızca renk değişimiyle boyar; satır asla yükselmez. Gözün satırı izlemesine yardım eder; yalnızca birkaç değer gösteren tabloda kapatın.

Tür

boolean

Varsayılan

true

dividers

Açıklama

Satır çizgileri: rows her satırın altına 1 px çizgi çizer, none çizgileri kaldırır.

Tür

'rows' | 'none'

Varsayılan

'rows'

className

Açıklama

Yalnızca yerleşim için: genişlik, kenar boşlukları ve sabit üst bilgi için max-h-*. Bu sınıf kaydırma kapsayıcısına gider.

Tür

string

children

Açıklama

Tablo parçaları: Table.Header, Table.Body ve Table.Footer.

Tür

ReactNode

Bunların dışında yerel <table> öznitelikleri (id, aria-*) <table> öğesine iletilir. className kaydırma kapsayıcısına gider.

Parçalar

Parça	Öğe	Özellikler
Table.Header	<thead>	Yerel öznitelikler ve className.
Table.Body	<tbody>	Yerel öznitelikler ve className.
Table.Footer	<tfoot>	Yerel öznitelikler ve className. Üst bilgi rengini alır.
Table.Row	<tr>	selected (data-selected ve seçili arka plan; aria-selected yok), yerel öznitelikler.
Table.HeaderCell	<th scope="col">	align (start, center, end), numeric, scope, yerel öznitelikler.
Table.RowHeader	<th scope="row">	align, numeric, scope, yerel öznitelikler.
Table.Cell	<td>	align, numeric, truncate, yerel öznitelikler.

Veri öznitelikleri

• data-component="table": kaydırma kapsayıcısında.
• data-density, data-dividers, data-striped, data-hoverable, data-sticky: <table> öğesinde. Parçalar seçenekleri bu öznitelikler üzerinden okur; böylece aynı parçalar başka bir kökle de kullanılabilir.
• data-part: caption, header, body, footer, row, header-cell, row-header, cell.
• data-selected: seçili satırda.

Stiller

tableStyles, parçaların tv tanımıdır (container, table, caption, header, body, footer, row, headerCell, rowHeader, cell). DataTable aynı tanımı yeniden kullanır; kendi tablonuzu kurarken de kullanabilirsiniz.

Sabit üst bilgi

<Table caption="Öğe listesi" stickyHeader className="max-h-96">
  …
</Table>