Layouts · Content display
Data Table
Also called: Table view, Data grid, Table page, Records table
Shows lots of records of the same kind in rows and columns, one record per row and one field per column, with filters, sorting, pagination and bulk actions so users can find and compare rows.
Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.
How to tell AI
Swap in your own content firstThis is the order management page. Please use a data table layout. The filter bar at the top has a keyword search, a status dropdown and a date range, with "New" and "Export" buttons on the right. Table columns: checkbox, order ID, customer, amount (right-aligned), status (tag), order date, actions (View/Edit). Column headers are sortable, and the actions column is pinned to the right. Paginate at the bottom with 20 rows per page, and show the total count.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Data Table is what you need.
Use Data Table when
- Items share the same structure, there are many of them (dozens to thousands), and users need to filter, sort and page through them
- Each record has many fields (four or more) that need to be compared column by column
- Users need to select several records and act on them in bulk
- The data is mostly text and numbers, and users don't pick by looking at images
Pick something else when
There's only one record and you need to show all of its properties
Use insteadDescription ListEach item has only one or two fields and doesn't need comparing
Use insteadList ViewMostly viewed on phones, where the screen can't fit many columns
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
Every field made into a column, so there are a dozen-plus columns and users have to scroll sideways to see everything
The wireframe below shows this case. The red dashed box marks the problem.The wireframe on the right shows this case. The red dashed box marks the problem.
- 02
Number columns like amount and quantity are left-aligned or have inconsistent decimal places, so you can't compare them down the column
- 03
No filters or pagination, so thousands of rows render all at once
- 04
Five or six text links crammed into each cell of the actions column
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 filter bar and action buttons at the top, a table with aligned rows and columns in the middle (header, data rows, an actions column on the right), and a paginator at the bottom.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A data table is the most common content layout in admin systems. At the top are the filter bar and action buttons (New, Export, Bulk delete). In the middle is the table: each row is a record and each column is a field, like "Order ID, Customer, Amount, Status, Order date, Actions". At the bottom is pagination.
The core value of a table is alignment. The same field lines up in the same column, so users can scan down a column to find the biggest amount, or click a column header to sort, and quickly find and compare records among hundreds or thousands. A card grid or masonry layout can't do this.
When designing one, limit the number of columns. Show only the five to eight most important ones and put the rest on the detail page. Right-align number columns, show statuses as tags, and pin an actions column on the far right for things like "View" and "Edit". Content with very few fields that people mostly pick by looking at images isn't a good fit for a table.
Developer infoTerm ID, DOM cues, match priority
- Term ID
layout-data-table- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
.ant-table.el-table.arco-table.t-table.n-data-table[class*="MuiDataGrid-root"]table:has(thead)
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026