Skip to content

Composing a list

A list reads as a tool when its columns are the ones a person scans for and its tabs are the ways the work divides. Compass’s tasks are the worked example.

Compass’s tasks: counted tabs from Overdue to All, a rail of filters with counts on the left, and rows of task, status, priority, due date, owner and account.

  • Always, show 4–7 columns: the name first, then the state, the parent by name (owner_id.name), a figure and a date; never a raw id — compass/views.ts:67.
  • When the rows are people or companies, an avatar and a muted subtitle on the first column — compass/resources.ts:27.
  • When the work divides by state or date, tabs in the order it is worked, All last — views.ts:75.
  • When it is worked by narrowing on three or more facets, filterBar: 'rail' — views.ts:73; fewer, the bar’s chips of filters — views.ts:14.
  • When triage happens in the list, make those columns editable — views.ts:70.
  • When a record’s verbs are the work, rowActions: true — views.ts:12.
  • When a figure adds up, totals under the rows — views.ts:31; when a count or sum of children says more, a rollup such as open_pipeline shown like a column — views.ts:45.
  • When it can be empty, an empty that says what belongs there and where it comes from — depot/views.ts:31.
  • When the rows are things to look at, a cards presentation — forecourt/views.ts:17.

The keys are in Lists.