Table Toolbar

Tablolar için arama, filtre, toplu aksiyon ve kolon görünürlüğü.

TableToolbar.tsx

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/table-toolbar.json

Kullanım Örneği

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

<TableToolbar query={query} onQueryChange={setQuery} columns={columns} onColumnVisibilityChange={toggleColumn} />

Özellikler & Parametreler (API)

Prop	Tür	Varsayılan	Açıklama
query	string	—	Kontrollü arama metni.
onQueryChange	(query: string) => void	—	Arama metni değişikliği callback'i.
filters	ReactNode	—	Özel filtre kontrolleri.
actions	ReactNode	—	Sağ taraftaki tablo aksiyonları.
selectedCount	number	0	Seçili satır özeti.
columns	TableToolbarColumn[]	—	Kolon görünürlüğü seçenekleri.
onReset	() => void	—	Aktif arama ve filtreleri temizler.
searchLabel	string	"Tabloda ara"	Arama alanının erişilebilir etiketi.
ariaLabel	string	"Tablo araçları"	Toolbar bölgesinin erişilebilir adı.
filtersLabel	string	"Tablo filtreleri"	Filtre grubunun erişilebilir adı.
actionsLabel	string	"Tablo aksiyonları"	Aksiyon grubunun erişilebilir adı.
getSelectedCountLabel	(count: number) => string	—	Canlı seçim özetini yerelleştirir.