Data Table

Sıralanabilir ve seçilebilir tablo veri sunumu.

DataTable.tsx

Üretim Dağıtım Matrisi
		Durum	Sürüm
Button	Form	Tamamlandı	v2.1.0	3.4 kB
DataTable	Data Display	Tamamlandı	v1.8.4	8.2 kB
CommandPalette	Overlay	İşleniyor	v0.9.1	11.5 kB
ToastManager	Feedback	Aktif	v1.2.0	4.1 kB

1 öğe seçildi (Toplam 4 kayıt)Sayfa 1 / 1

Kurulum

shadcn CLI ile projenize ekleyebilir veya yukarıdaki "Kaynak Kodu" sekmesinden kodu doğrudan projenize kopyalayabilirsiniz:

$npx shadcn@latest add https://ui.cagriozay.com.tr/r/data-table.json

Kullanım Örneği

import { DataTable } from "@/components/data-display/DataTable"

<DataTable
  columns={columns}
  data={rows}
  sortKey={sort.key}
  sortDirection={sort.direction}
  onSort={handleSort}
  getRowLabel={(row) => row.name}
/>

Özellikler & Parametreler (API)

Prop	Tür	Varsayılan	Açıklama
columns	TableColumn<T>[]	—	Sütun, render, hizalama ve sıralama ayarları.
data	T[]	—	Tablo satırları.
caption	string	—	Tablonun erişilebilir başlığı.
sortKey	string	—	Aktif sıralama sütunu.
sortDirection	"asc" \| "desc"	"asc"	aria-sort ile belirtilen yön.
onSort	(key: string) => void	—	Sıralama düğmesi callback'i.
onRowClick	(row: T) => void	—	Fare ve klavye ile satır aktivasyonu.
getRowLabel	(row: T, index: number) => string	—	Etkileşimli satırın erişilebilir adını üretir.
selectable	boolean	false	Çoklu satır seçimini etkinleştirir.
selectionLabel	string	"Satır seçimi"	Checkbox sütunu başlığı.
getRowId	(row: T) => string \| number	—	Kararlı satır kimliği.