Content & display

Data Table

Q: How do people describe a Data Table in plain words?

the spreadsheet-looking list of rows and columns a table of users with sortable headers rows of data I can scan, sort, and select

Q: How do I implement a Data Table?

Implement a data table of users with sortable Name/Email/Role columns, row selection, sticky header, empty state, and pagination; use semantic table markup.

A grid of rows and columns for comparing structured records.

Also known as grid table · data grid · spreadsheet-like list

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Data Table".

Implement a data table of users with sortable Name/Email/Role columns, row selection, sticky header, empty state, and pagination; use semantic table markup.

Anatomy:
- column headers: Sortable labels; sticky on long tables.
- row: One record; optional selection checkbox.
- cell: Typed content; truncate with reveal patterns.

Preferred API / pattern: `TanStack Table + shadcn Data Table`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Div soup instead of table for true tabular data
○Avoid: No empty or loading state for async tables.
○Avoid: Sorting only visual with unsorted data from the server.

In plain wordsHow people search for it

“the spreadsheet-looking list of rows and columns”“a table of users with sortable headers”“rows of data I can scan, sort, and select”

AnatomyOpen for part names

column headers: Sortable labels; sticky on long tables.
row: One record; optional selection checkbox.
cell: Typed content; truncate with reveal patterns.

How to write itOpen for stack patterns

Web (HTML/CSS)<table> / CSS grid for simple cases

React + Tailwind + shadcn/uiTanStack Table + shadcn Data Table

SwiftUITable { } / List for simple

Ant Design<Table columns dataSource>

Notes

Use real tables for tabular data (screen readers get row/column context). Offer sort, filter, and pagination for large sets. On mobile, prefer stacked cards or horizontal scroll with sticky first column—don't crush five columns into unreadable wraps.

Common mistakesHumans and models trip here

Div soup instead of table for true tabular data: hurts SR users.
No empty or loading state for async tables.
Sorting only visual with unsorted data from the server.

More failure symptoms on AI broke it.

Related patterns

PaginationControls that split large result sets into numbered pages.Empty StateA deliberate screen when a list or view has no items—guidance, not a blank void.Checkbox & RadioCheckboxes for multi-select; radios for a single choice in a group.

Spotted a wrong name or missing pattern?

Message on X