Table
UI ComponentsA structured layout displaying data in rows and columns, allowing users to compare information and often including features like sorting, filtering, and pagination.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for Table coming soon.
How It Works in Apps/Websites
Tables organize data in a grid of rows (records) and columns (fields). Headers define column names and may be clickable for sorting. Rows alternate background colors for readability (zebra striping). Advanced tables include: sortable columns, searchable, filterable, pagination, selectable rows, and responsive behavior.
How AI Interprets This Term
When you say 'table', AI expects: grid layout with header row (bold, possibly gray background), data rows below, column dividers or borders. Headers may have sort icons. Alternate row colors common. May include checkbox column for selection, action buttons in last column.
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Create a simple table showing name, email, and role columns
Design a user management table: checkbox column, avatar + name, email, role (badge), status (active/inactive badge), actions (edit, delete). Sortable columns with arrow icons, zebra striping, hover highlight. Include search bar and pagination.
Show a basic HTML table vs a full-featured data table with sorting, filtering, and actions
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
States
Usage Guidelines
When to Use
- •Structured data comparison
- •Admin interfaces
- •Order histories
- •User management
When NOT to Use
- •Simple lists (use list component)
- •Card-style content
- •Mobile-first designs (tables don't adapt well)