Command Palette

Search for a command to run...

Components / Display

Table

அட்டவணை

Tables display structured data in rows and columns. Use them for comparative data, beneficiary lists, and administrative records.

அட்டவணைகள் வரிசைகள் மற்றும் நெடுவரிசைகளில் கட்டமைக்கப்பட்ட தரவை காட்டுகின்றன.

Basic table

Component preview
Citizen registryகுடிமக்கள் பதிவு பட்டியல்

Anatomy

Structure

Anatomy

6 parts documented for implementation and review.

Component map
1

Table container

அட்டவணை கொள்கலன்required<table>

Root wrapper using native HTML <table> for semantic structure and accessibility. Uses a fixed responsive table layout with breakable cell content so narrow viewports do not need horizontal scrolling.

2

TableHeader

அட்டவணை தலைப்புrequired<thead>

Header row group containing TableHead cells. Background uses bg-muted/50 for subtle differentiation from data rows. Sticky positioning can be applied for long scrollable tables. Column names should be sentence-case, not uppercase.

3

TableHead

நெடுவரிசை தலைப்புrequired<th>

Individual column header cell. Uses text-xs font-medium with muted-foreground color. Height is 40px (h-10) with px-4 padding. Right-align numeric columns via text-right. For Tamil headers, apply font-tamil class.

4

TableBody + Row

உடல் + வரிசைrequired<tbody>/<tr>

Data rows container and individual rows. Each row applies hover:bg-muted/50 for scannable highlighting and border-b for row separation. Selected/active rows use data-[state=selected]:bg-muted. Transition duration is kept subtle for performance.

5

TableCell

கலம்required<td>

Data cell with px-4 py-2 padding and text-sm sizing. Vertical alignment is middle by default. For Tamil content, add font-tamil font-medium. Use tabular-nums for number columns. Supports inline badges, links, and action buttons.

6

TableCaption

தலைப்பு விளக்கம்<caption>

Descriptive caption rendered below the table via caption-bottom. Uses text-sm text-muted-foreground. Should describe the data context for accessibility — 'Last 10 scheme applications' or 'கடந்த 10 திட்ட விண்ணப்பங்கள்'.

Usage guidance

  • Always right-align numeric columns for easy scanning.
  • Tamil names in tables: use font-tamil font-medium on TableCell.
  • Horizontal scrolling is handled by the table container on small screens.
  • Use TableCaption to describe the table for screen reader accessibility.
API

Props

1 prop
className
Type
string
Default
-
Description
Styles to merge into the wrapper container.

Best practices

Use scope='col' on all th elements
அனைத்து th கூறுகளிலும் scope='col' பயன்படுத்தவும்

Adding scope='col' on TableHead cells lets screen readers associate each column header with its data cells.

scope='col' சேர்ப்பது திரை வாசகர்களுக்கு நெடுவரிசை தலைப்பையும் தரவு கலங்களையும் இணைக்க உதவுகிறது.

Don't use a Table for fewer than 3 rows
3 வரிசைகளுக்கும் குறைவாக இருந்தால் Table பயன்படுத்தாதே

For 2 or fewer data rows, a description list or key-value layout is cleaner and more accessible than a full table.

இரண்டு அல்லது குறைவான தரவு வரிசைகளுக்கு முழு அட்டவணை தேவையில்லை — விளக்க பட்டியல் பயன்படுத்தவும்.

Right-align numeric columns
எண் நெடுவரிசைகளை வலதுபுறம் சேர்க்கவும்

Right-aligning numbers makes them easy to compare across rows and matches financial data conventions.

வலதுபுற சேர்க்கை எண்களை வரிசைகளில் ஒப்பிட எளிதாக்குகிறது.

Don't left-align numbers in a data table
தரவு அட்டவணையில் எண்களை இடதுபுறம் சேர்க்காதே

Left-aligned numbers in a column are visually unaligned and make value comparison across rows difficult.

இடதுபுறம் சேர்க்கப்பட்ட எண்கள் காட்சி ரீதியாக ஒழுங்கற்று இருக்கும் மற்றும் ஒப்பிட கடினமாக இருக்கும்.