---
title: "Table UI: anatomy, variants and examples | Kombai"
description: "A table lays data out in rows and columns, so people can scan, compare, sort and act on many records at once."
canonical_url: https://kombai.com/glossary/table/
author: "The Kombai Team"
---

# Table

A table lays data out in rows and columns, so people can scan, compare, sort and act on many records at once.

- Also called: data table, data grid
- Platforms: Web, Mobile
- In the Kombai gallery: [200 web designs](https://kombai.com/gallery/web/table/), [30 mobile designs](https://kombai.com/gallery/mobile/table/)

- [Arcwell](https://kombai.com/gallery/inspirations/table-web-111/) (Web)
- [Azimuth](https://kombai.com/gallery/inspirations/table-ios-14/) (Mobile)
- [Quarry](https://kombai.com/gallery/inspirations/table-web-2/) (Web)

## What is a table?

A table is a grid of rows and columns. Each row is one record, like an invoice or a team member, and each column is one attribute of it, like the amount or the status. Column headers name what every cell holds, so people can read across a row or down a column and compare values.

- A header row names every column and often holds the sort controls.
- Every row has the same columns, so values line up and compare at a glance.

## When to use table

- **Many records, several fields.** Invoices, users or files that people scan and compare by the same fields.
- **Sorting and filtering.** People need the largest, newest or overdue items fast.
- **Acting on several items.** Selecting rows to archive, export or mark as paid in one go.

## When not to use one

- **Page layout.** Don't use a table to place content side by side. Use CSS grid or flexbox.
- **Few fields per item.** If each item has a title and one line of detail, a stacked list reads better.
- **Visual items.** Products, photos and listings sell on their images. Use cards or a gallery.

## Anatomy

1. **Toolbar**: Count, filters and bulk actions
2. **Header row**: Names each column
3. **Sort control**: Reorders rows by a column
4. **Selection checkbox**: Picks rows for bulk actions
5. **Row**: One record, a cell per column
6. **States**: Sorted, selected, focus, empty

## Variants

We sorted every table design in the Kombai gallery and found six patterns.

### 1. Selectable rows with bulk actions

A checkbox starts each row. Selecting rows swaps in actions like delete, export or collect payment, with a count of what is selected.

- [Kestrel](https://kombai.com/gallery/inspirations/table-web-123/) (Web)
- [Trellis](https://kombai.com/gallery/inspirations/table-web-20/) (Web)
- [Ledgerline](https://kombai.com/gallery/inspirations/table-web-33/) (Web)

### 2. Sortable columns

Arrows in the header show which column orders the rows and in which direction. Clicking the header again flips the order.

- [Reelframe](https://kombai.com/gallery/inspirations/table-web-130/) (Web)
- [Corvid](https://kombai.com/gallery/inspirations/table-web-30/) (Web)
- [Kestrel](https://kombai.com/gallery/inspirations/table-web-150/) (Web)

### 3. Status pills

A colored pill in one column, like Live, Paid or Needs update, so people spot the rows that need attention without reading each one.

- [Waypost](https://kombai.com/gallery/inspirations/table-web-115/) (Web)
- [Larkspur Research](https://kombai.com/gallery/inspirations/table-web-138/) (Web)
- [Kestrel Pay](https://kombai.com/gallery/inspirations/table-web-84/) (Web)

### 4. Grouped and expandable rows

Rows sit under group headers that fold away, or open to show the items inside them, like tasks by sprint or line items under a subtotal.

- [Marlow work suite](https://kombai.com/gallery/inspirations/table-web-171/) (Web)
- [Skylark](https://kombai.com/gallery/inspirations/table-web-7/) (Web)
- [Kestrel](https://kombai.com/gallery/inspirations/table-web-146/) (Web)

### 5. Comparison tables

Plans or products across the top, features down the side, and checks, crosses or values in the cells. The most common mobile table in the gallery, often on an upgrade screen.

- [Halcyra](https://kombai.com/gallery/inspirations/table-ios-6/) (Mobile)
- [Detent](https://kombai.com/gallery/inspirations/table-ios-23/) (Mobile)
- [Everstock](https://kombai.com/gallery/inspirations/table-web-91/) (Web)

### 6. Spreadsheet grids

Numbered rows, typed columns and a New row button, the way databases and notes apps show records. People add rows and columns as they go.

- [Quillon Tables](https://kombai.com/gallery/inspirations/table-web-47/) (Web)
- [Malachite](https://kombai.com/gallery/inspirations/table-ios-2/) (Mobile)
- [Bracken](https://kombai.com/gallery/inspirations/table-ios-19/) (Mobile)

## Where tables show up

### Billing and finance

Invoices, account registers and fee schedules, where amounts line up in their own column.

- [Halloway](https://kombai.com/gallery/inspirations/table-web-6/) (Web)
- [Cairn](https://kombai.com/gallery/inspirations/table-web-125/) (Web)
- [Loxodrome](https://kombai.com/gallery/inspirations/table-ios-11/) (Mobile)

### People and access

Members, roles and pending invites in admin settings, one row per person.

- [Signet](https://kombai.com/gallery/inspirations/table-web-19/) (Web)
- [Kiteline](https://kombai.com/gallery/inspirations/table-web-129/) (Web)
- [Quillmark](https://kombai.com/gallery/inspirations/table-web-66/) (Web)

### Size guides

Measurement and conversion charts on mobile shopping screens, usually in a sheet over the product.

- [Northerly](https://kombai.com/gallery/inspirations/table-ios-9/) (Mobile)
- [Tansy](https://kombai.com/gallery/inspirations/table-ios-20/) (Mobile)
- [Zephyrine](https://kombai.com/gallery/inspirations/table-ios-8/) (Mobile)

### Rankings and screeners

Leaderboards, collection rankings and stock screeners, dense with numbers and green and red changes.

- [Obsidize](https://kombai.com/gallery/inspirations/table-ios-5/) (Mobile)
- [Auralis](https://kombai.com/gallery/inspirations/table-web-187/) (Web)
- [Fathom](https://kombai.com/gallery/inspirations/table-web-32/) (Web)

## Table vs similar components

| | [Table](https://kombai.com/glossary/table/) | [Stacked list](https://kombai.com/glossary/stacked-list/) | [Card](https://kombai.com/glossary/card/) | [Kanban board](https://kombai.com/glossary/kanban-board/) |
|---|---|---|---|---|
| Layout | Rows and columns | One row per item | One block per item | Columns of cards by stage |
| Fields per item | Many, in fixed columns | A few, on one or two lines | A few, plus an image | A few, on each card |
| Best for | Dense data people sort and act on | Inboxes, feeds and settings | Mixed content with images | Work moving through stages |

## Build notes

- Use a native <table> with a <caption>, and <th scope="col"> for column headers.
- Wrap each sortable header in a <button>, and set aria-sort on the sorted column only.
- Label each row checkbox with its row. Set select-all to indeterminate when only some rows are picked.
- Right-align columns of numbers so the digits line up for comparison.
- Every control in a table sits in the tab order. Switch to the grid pattern, with arrow keys, only when cells are editable.
- Let wide tables scroll sideways inside their own container on small screens, with the header kept in view.

## FAQ

### What is the difference between a table and a data grid?

A table displays data, and any links, buttons or checkboxes in it sit in the normal tab order. A data grid is an interactive widget: it takes one tab stop, and people move between cells with the arrow keys. Use a plain table unless cells need to be edited or operated like a spreadsheet.

### How do you make a table work on mobile?

Keep only the columns people need and let the table scroll sideways inside its container. When each row has just a few fields, show rows as a stacked list or cards instead. Most mobile tables in the Kombai gallery are plan comparisons, size charts and fee schedules with a few narrow columns.

### Should numbers be right-aligned in a table?

Yes, when people compare them down a column. Right-aligned numbers line up by place value, so 1,240 and 86 are easy to tell apart at a glance. Right-align the column header too, so it sits over its numbers.

### Pagination or infinite scroll for a table?

Pagination, or a Load more button, for tables people work in. It keeps their place, shows how many records there are and leaves the footer reachable. Show the total count and let people pick how many rows a page holds.

## Related terms

- [Stacked list](https://kombai.com/glossary/stacked-list/)
- [Pricing table](https://kombai.com/glossary/pricing-table/)
- [Pagination](https://kombai.com/glossary/pagination/)
- [Filter chips](https://kombai.com/glossary/filter-chips/)

## References

- [WAI-ARIA Authoring Practices: Sortable table example](https://www.w3.org/WAI/ARIA/apg/patterns/table/examples/sortable-table/)
- [WAI-ARIA Authoring Practices: Grid pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/)
- [GOV.UK Design System: Table](https://design-system.service.gov.uk/components/table/)
- [MDN: Checkbox input and the indeterminate state](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/checkbox)