Table

FREE

Responsive table with striped, hover, bordered, compact, sticky header and stack-on-mobile modes.

Playground

Change the props and watch the component and its code update live.

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

Code

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>

Installation

Terminal

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

Examples

Striped with 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

Cards on mobile

Below md, each row turns into a labelled card.

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

API reference

Every component also accepts the props of the element it renders.

Table

Prop	Type	Default	Description
striped	boolean	false	Alternating row colors.
hover	boolean	false	Highlights the hovered row.
bordered	boolean	false	Column borders.
size	"sm" \| "md"	"md"	Cell padding.
stickyHeader	boolean	false	Header stays visible while scrolling.
stackOnMobile	boolean	false	Turns rows into cards below md (give TableCell a label).

TableCell

Prop	Type	Default	Description
label	string	—	Column name in the stacked mobile view.