Components · 5

Tables

Rows and columns of records: sort them, act on several at once, open one for detail, or pack them tight. Rows move rather than jump, so you never lose your place.

Data table

Sortable records. Click a column header and the rows glide to their new places.

Tenants and rent status

JDJohn Doe	4B	₹24,000	1 Nov	Paid
JSJane Smith	2A	₹18,500	5 Oct	Overdue
AJAlex Johnson	7C	₹32,000	1 Nov	Pending
SLSam Lee	1D	₹15,000	28 Oct	Pending
CBChris Brown	5A	₹27,500	1 Nov	Paid

Row reorder: layout 300ms ease-out
Sort arrow flips 200ms
Row hover 150ms

import { DataTable, type Column } from "@/components/ui/data-table";

Selectable table

Tick rows to act on several at once. The bulk bar covers the header, so the rows never move.

Tenants, with bulk actions
Tenant	Unit	Rent	Due	Status
JDJohn Doe	4B	₹24,000	1 Nov	Paid
JSJane Smith	2A	₹18,500	5 Oct	Overdue
AJAlex Johnson	7C	₹32,000	1 Nov	Pending
SLSam Lee	1D	₹15,000	28 Oct	Pending
CBChris Brown	5A	₹27,500	1 Nov	Paid

Tick draws 300ms
Bar in 200ms ease-out, out 150ms ease-in
Row tint 150ms

import { SelectableTable } from "@/components/ui/selectable-table";

Expandable table

Open a row to see its lease, deposit and recent payments without leaving the list.

Tenants with lease details
Tenant	Unit	Rent	Status
JDJohn Doe	4B	₹24,000	Paid
JSJane Smith	2A	₹18,500	Overdue
AJAlex Johnson	7C	₹32,000	Pending
SLSam Lee	1D	₹15,000	Pending
CBChris Brown	5A	₹27,500	Paid

Chevron turns 90° 200ms
Detail grows 300ms ease-out
Closes 200ms ease-in

import { ExpandableTable } from "@/components/ui/expandable-table";

Compact table

Tighter rows with alternating backgrounds, for long lists like a ledger. Still sortable.

October ledger

1 Oct	Rent · October	4B	+₹24,000
1 Oct	Rent · October	5A	+₹27,500
3 Oct	Plumbing repair	2A	−₹3,200
4 Oct	Rent · October	1D	+₹15,000
7 Oct	Society maintenance	All	−₹18,000
9 Oct	Rent · October	7C	+₹32,000
12 Oct	Lift servicing	All	−₹6,500
15 Oct	Late fee	7C	+₹500
18 Oct	Painting · 2A	2A	−₹11,000

Row reorder: layout 300ms ease-out
Row hover 150ms

<DataTable density="compact" striped … />

Table states

Placeholder rows while data loads, and an empty state with a next step. Switch between them.

Tenants and rent status

Loading rows shimmer 1.4s
Empty illustration floats 3.2s

<DataTable loading={isLoading} empty={<EmptyState … />} … />