Data Table

FREE

Arama, sütun filtresi, sıralama, sayfalama, satır seçimi ve sütun gizleme özellikli tablo.

Kurulum

Terminal

npx @bloxa/cli add data-table
# or: npx shadcn@latest add @bloxa/data-table

Arama, Plan/Ülke filtresi, sütun başlığına tıklayarak sıralama, seçim, sütun gizleme (E-posta gizli başlar) ve sayfalama.

14 / 14

Sayfa 1 / 3

Türkçe etiketler, Ç/Ğ/İ/Ö/Ş/Ü'ye uygun sıralama ve yerel sayı/tarih biçimi.

4 / 4

Her bileşen, oluşturduğu HTML elemanının özelliklerini de kabul eder.

Özellik	Tip	Varsayılan	Açıklama
data	T[]	—	Satırlar.
columns	DataTableColumn<T>[]	—	{ key, header, accessor?, cell?, sortable?, filterable?, align?, hidden? }
rowKey	(row: T) => string	—	Satırın benzersiz kimliği.
searchable	boolean	true	Tüm görünür sütunlarda arama.
pageSize	number	10	Sayfa başına satır; 0 sayfalamayı kapatır.
selectable	boolean	false	Satır seçimi kutuları.
onSelectionChange	(rows: T[]) => void	—	Seçim değişince çağrılır.
columnToggle	boolean	true	Sütun göster/gizle menüsü.
defaultSort	{ key, direction }	—	Başlangıç sıralaması.
toolbar	ReactNode	—	Araç çubuğuna ek kontroller.
tableProps	TableProps	—	Table'a iletilir (striped, hover, stackOnMobile…).
locale	string	—	Sıralama ve sayı/tarih biçimi dili.
labels	{ search?, filter?, columns?, empty?, … }	—	Arayüz metinleri (çeviri için).