Outline Views

An outline view presents hierarchical data—like folders and the items they contain—cleanly and efficiently in a scrolling list of cells that are organized into columns and rows. At minimum, an outline view includes one column that contains the primary hierarchical data: parent containers and their children. Subsequent columns may be added, as needed, to display additional attributes that supplement the primary data like sizes and modification dates. Within an outline view, parent containers are prefixed with disclosure triangles that can be expanded to reveal the children. Finder windows offer an outline view for navigating the file system.

Screenshot of a Finder window, showing a hierarchy of folders as displayed in List view.

Outline views are ideal for displaying text-based content and are often used for navigation on one side of a split view, with related content on the opposite side. See Split Views.

Use a table view instead of an outline view to present data that’s not hierarchical. See Table Views.

Expose data hierarchy in the first column only. Other columns can display attributes that apply to the hierarchical data displayed in the primary column. When a user clicks a disclosure triangle to reveal an item’s children, the outline view can lengthen and the primary column can widen. If the primary column widens, other columns might shift to the side, but they don’t change their headings or order.

Use descriptive column headings to provide context. Column headings should be noun or short noun phrases with title-style capitalization and no punctuation—they should never include a trailing colon. Always provide column headings in a multi-column outline view. If you don’t include a column heading in a single-column outline view, use a label or other means to make sure there’s enough context for the user.

Let people click column headings to sort an outline view if it provides value. In a sortable outline view, the user can click a column heading to perform an ascending or descending sort based on that column. You can implement additional sorting based on secondary columns behind the scenes, if necessary. If the user clicks the primary column heading, sorting occurs at each hierarchy level. For example, in the Finder, all top-level folders are sorted, then, within each folder, the items they contain items are sorted. If the user clicks the heading of a column that’s already sorted, data should re-sort in the opposite direction.

Allow people to resize columns. Data displayed in an outline view often varies in width. When columns can be resized, the user can adjust their width as needed to reveal clipped data.

Make it easy for people to expand or collapse nested containers. For example, clicking a disclosure triangle for a folder in a Finder window expands only that folder. However, Option-clicking the disclosure triangle expands all the subfolders.

Retain the user’s expansion choices. If the user expands various levels of an outline view to reach a specific item, store the state so you can display it again the next time the outline view is displayed. This way, the user won’t need to navigate back to the same place again.

Consider using alternating row colors in multi-column outline views. Alternating colors make it easier to track row values across columns—especially in wide outline views.

Enable data editing if it makes sense in your app. In an editable outline view cell, the user should be able to single-click a cell to edit its contents. Note that a cell can respond differently to a double-click. For example, an outline view listing files might let the user single-click a file’s name to edit it, but double-click a file’s name to open the file. You can also let people reorder, add, and remove rows if it such functionality is useful.

Use a centered ellipsis to truncate cell text that would otherwise be clipped. An ellipsis in the middle preserves the beginning and end of the cell text, and tends to be more distinct and recognizable than clipped text.

Consider offering a search field to help people find values quickly in a lengthy outline view. Windows with an outline view as the primary feature often include a search field in the toolbar. See Search Fields.

For developer guidance, see NSOutlineView.