UI components · Data display
Table
Also called: Data table, Data grid, Grid, Spreadsheet view
Lays out many records with the same structure in rows and columns, one record per row and one field per column, so they're easy to compare, sort, and filter.
Click “Labeled” to see what each part is called.
How to tell AI
Swap in your own content firstBuild an orders table with these columns in order: checkbox, Order ID, Customer, Amount (right-aligned, with thousands separators), Status (shown as a tag), Order date, and Actions (Edit and Delete links). Keep the header fixed and make the Amount and Order date columns sortable. Give rows a light gray background on hover, and show a bulk action bar at the top once rows are checked. Put pagination at the bottom, and show an empty state when there's no data.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Table is what you need.
Use Table when
- Uniform items in large numbers with four or more fields each, where users need to compare column by column
- Admin screens where records need sorting, filtering, bulk selection, and actions
- Numbers like amounts and quantities that need to line up vertically so sizes and outliers stand out
Pick something else when
Only two or three fields per item, like a title and a time. A list is cleaner.
Showing the full details of a single record
Use insteadDescription List
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Using a table for data with only two or three fields, leaving big empty columns, when a list would work better
- 02
Left-aligning number columns like amounts and quantities with inconsistent decimal places, so they can't be compared
- 03
Stuffing long paragraphs or big images into cells, so row heights jump around and the table loses its scannability
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A header row, data rows, and cells, often with a checkbox column, an actions column, sort and filter icons, and pagination at the bottom.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A table arranges a batch of same-shaped records in a grid. Each row is a record, each column is a field, and the header names the fields. Because the same field lines up vertically, users can scan a column to compare values and spot outliers. That's why orders, users, logs, and most other data in admin panels are shown in tables, often with sorting, filtering, pagination, and checkboxes for bulk actions.
How to choose between a table, a list, and cards: if the items are uniform, numerous, have four or more fields, and need comparing, use a table. If each item is just a title plus a line or two of description and people mostly browse one by one, use a list. If each item is mainly visual, like an image, there aren't many of them, and no field-by-field comparison is needed, use cards.
With only two or three fields, a table looks empty and a list fits better. On phones, wide tables should scroll horizontally or switch to a card layout.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-table- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
table:not([role="presentation"]):not([class*="picker"]):not([class*="calendar"])[role="grid"][role="table"].table.ant-table.el-table[class*="MuiTable-root"][class*="MuiDataGrid-root"].arco-table.t-table.n-data-table[data-slot="table"]
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026