Click a column name to sort. The arrow is the sort indicator; gray every-other rows are zebra stripes
Data Table (Table View)
/ <table> · NSTableView /
also called data grid, sortable table, table view (Apple term), list view with columns, grid of records
“A list of records with columns” is a data table: an HTML <table> on the web, an NSTableView (SwiftUI Table) on the Mac, the Details view in Windows File Explorer. Each row is one record and each column one field, under a header row of column names; click a name to sort by it, and a small arrow shows which column and which way. Many add zebra stripes, a checkbox column and draggable column dividers. It is not a spreadsheet (you can't type in the cells) or an outline view (rows don't nest), and on iPhone a UITableView is a one-column list, not a grid.
If you called it…
…you meant Data Table (Table View).
Anatomy — every part, named
- 1Select-all checkbox
HTMLInputElement.indeterminate“The checkbox at the top with a minus in it” is the select-all checkbox: it ticks every row, and shows a dash (its indeterminate state) when only some rows are ticked.
- 2Column resize handle
header.getResizeHandler()“The thin line between two column names” is the column resize handle: drag it to make the column on its left wider or narrower.
- 3Sort indicator (sort arrow)
aria-sort="ascending"“The little arrow next to a column name” is the sort indicator: it marks the one column the rows are sorted by, pointing up for ascending and down for descending.
- 4Selected row
aria-selected="true"“The row that turns blue when you tick it” is a selected row: its checkbox is ticked and the whole row takes a pale accent tint.
- 5Zebra stripes (alternating rows)
usesAlternatingRowBackgroundColors“Rows that alternate white and light gray” are zebra stripes: every other row gets a faint band so your eye can follow one row across.
Prompt — paste into your agent
Build a data table (HTML <table>; macOS NSTableView, SwiftUI Table): a header row of column names where clicking one sorts by it and a small arrow shows the direction (aria-sort on that header), zebra-striped rows, and a checkbox column whose header box selects all and shows a dash when only some rows are ticked. Right-align number columns. Sort the whole data set, not just the rows on screen.
Debug prompt — when it misbehaves
Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.
Debug my data table (<table>, aria-sort, TanStack Table, NSTableView). Rule out: sorting only the current page instead of the whole data set; numbers sorting as text, so $1,215 lands above $640; the arrow drawn on one column while aria-sort sits on another, or on several headers at once; stripes baked into each row's data, so they double up after sorting or filtering instead of following tbody tr:nth-child(even); the select-all checkbox never showing its dash because indeterminate can only be set from JavaScript; a sticky header that scrolls away because an ancestor has overflow: hidden; columns jumping width when rows change because widths are not fixed (table-layout: fixed); an NSTableView header with no arrow because the column has no sortDescriptorPrototype. The symptom:
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| HTML | <table> | with <thead>, <th scope="col"> headers and <tbody> rows |
| AppKit | NSTableView | the Mac's table view; its column headings sit in an NSTableHeaderView |
| SwiftUI | Table(_:selection:sortOrder:columns:) | macOS 12+, iOS 16+; binds the ticked rows and the sort |
| ARIA | aria-sort="descending" | on the one header the rows are sorted by |
| shadcn/ui | <Table> | its Data Table guide adds sorting and row selection with TanStack Table |
| Material UI | <DataGrid> | @mui/x-data-grid: checkboxSelection, sorting and column resizing in the free version |