Data table
/DAY-tuh TAY-bul/ · noun · DATA pattern · #070
Rows and columns for comparing many records across the same attributes. Sortable headers are the contract; alignment does the reading.
Also called: data grid, sortable table.
You might call it
- “a sortable table”
- “rows and columns of data”
- “the spreadsheet-like list”
- “a table with column headers you click to sort”
- “a data grid”
…its name is Data table.
Common questions
What is a data table?
A grid of rows and columns that shows structured records, usually with column headers you click to sort, plus filtering, row selection and pagination for long datasets.
Data table vs list: when to use which?
Use a table when people compare values across several attributes (columns); use a list when each item is read on its own, especially on narrow phone screens.
In code
| SwiftUI | Table |
|---|---|
| UIKit | UITableView is a one-column list, not a data table — use a UICollectionView grid |
| Jetpack Compose / Android | No data table component — a LazyColumn of rows with aligned cells |
| Flutter | DataTable PaginatedDataTable |
| Web (HTML / ARIA) | <table> <th scope="col"> aria-sort |
Prompt for your AI coding tool
Show this data as a table: a header row of column names, one row per record, numbers right-aligned and text left-aligned. Clicking a column header sorts by it and clicking again reverses the order, with an arrow on the sorted column and aria-sort set on its header. Keep the header visible while scrolling, let the table scroll horizontally on small screens rather than squashing columns, and use a real <table> with <th scope="col"> on the web.
More UI words to use when vibe coding →