Table

FREE

Çizgili, hover, kenarlıklı, sıkı, sabit başlıklı ve mobilde karta dönüşen duyarlı tablo.

Canlı düzenle

Ayarları değiştir; bileşen ve kodu anında güncellensin.

Component	Category	Examples
Button	Forms	8
Select	Forms	4
Data Table	Data	2
Grid	Layout	3
Date Picker	Forms	3
Tabs	Overlays	2

Kod

import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";

<Table
  striped
  hover
  stackOnMobile
>
  <TableHeader>
    <TableRow>
      <TableHead>Component</TableHead>
      <TableHead>Category</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell label="Component">Button</TableCell>
      <TableCell label="Category">Forms</TableCell>
    </TableRow>
  </TableBody>
</Table>

Kurulum

Terminal

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

Örnekler

Çizgili ve hover

Recent invoices
Invoice	Customer	Status	Amount
INV-001	Ayşe Yılmaz	Paid	₺999
INV-002	John Carter	Pending	$49
INV-003	Mehmet Kaya	Paid	₺999
INV-004	Lena Fischer	Refunded	€45

Mobilde kart

md'den dar ekranlarda her satır etiketli bir karta dönüşür.

Name	Role	City	Joined
Ayşe Yılmaz	Design lead	Istanbul	2024
John Carter	Engineer	London	2025
Mehmet Kaya	Engineer	Manisa	2023

API

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

Table

Özellik	Tip	Varsayılan	Açıklama
striped	boolean	false	Satırlar dönüşümlü renkli.
hover	boolean	false	Üzerine gelinen satırı vurgular.
bordered	boolean	false	Sütun kenarlıkları.
size	"sm" \| "md"	"md"	Hücre dolgusu.
stickyHeader	boolean	false	Kaydırırken başlık sabit kalır.
stackOnMobile	boolean	false	md altında satırları karta çevirir (TableCell'e label ver).

TableCell

Özellik	Tip	Varsayılan	Açıklama
label	string	—	Mobil kart görünümünde sütun adı.