Anatomy

Cell Sizing

Cells (and rows) can have multiple heights to accommodate different table sizes. The three heights a cell can be are:

• Large: 64px
• Medium: 48px
• Small: 32px
Large cells can accommodate 3 lines of text, medium cells can accommodate 2 lines, and small cells can accommodate 1 line. Any text longer than that will be truncated with ellipses at the end of the visible text.

These values can be set in the Column Configuration panel. For editable cells that have text inputs or selects, the inputs are by default 28 px to accommodate the three row heights. Only the medium size is pictured in these guidelines, but all information applies to any size.

Cell States

There are two main types of states that cells in a data table can have: functional states and interactive states.

Functional states are states that are based on the cell type. These include the default cell (read), an editable cell (active), and a contextual cell (focused)

.Interactive states are states that can occur when the cell is being interacted with. These include the selected state and the hover state, as well as the keyboard active state, which performs similarly to the selected state.

Cells can have a combination of these two types of states (i.e. be selectable and non-editable, be non-selectable and editable, etc.) and these change how the cell looks when it is interacted with.

Read Cell State

Read is the default state for all cells, and shows the value of the cell.

Active Cell State

Some cells have text that can be edited inside the table. Hitting enter in an inline editable cell will put the cell in an active state. Hovering on any of the cells in the row or selecting an inline editable cell will also reveal all other cells in the row that are editable.
A row that is selected will have a light blue background and the vertical blue strip on the left most cell.

Focused Cell State

Some cells also have contextual panels they can open to perform additional tasks. When a panel is open, the entire cell is put in a focused state to denote that work is being done inside the cell.
Then a row has a selected checkbox the row background will be light blue.

Selected Cell State

Selected cells are shown highlighted in blue, and remain selected until the user navigates to something else.

Keyboard active cells look identical to a selected cell, but are displayed when a user has navigated to the cell via the keyboard.
Then a row has a selected checkbox the row background will be light blue.

Hover Row State & Hover Cell State

Cells can be hovered over to denote the mouse cursor’s position. When hovering, cells that are selectable or editable will appear differently.

When a row is hovered over, all of the cells in the row are put in the hover row state. When the cell in the row is also hovered over, it is put in the hover cell state.
Example of continuous loading.

Cell Types

There are multiple types of content that can exist inside of a cell. All of the following images display the medium row height and inline editable versions of the cells.

Basic Text Cell

Basic text cells contain plain text and are left-aligned by default. They can also be right-aligned, and text will wrap based on the cell height.
Example of sort indicator icons sitting in the header of two columns.

Button Cell

Button cells are used to show a state and provide an action.
Example of a column header being grabbed.

Company Cell

Company cells have an avatar with two lines of text in large/medium rows, and one line in small rows. The top row is the company name and the bottom row is the address. For small rows, there is no avatar and only the company name is visible. On click, a standard select pops out to open above the cell/table to select a company.
A column that is pinned will pin to the far left of the table and a dropshadow will appear around the column.

Currency Cell

Currency cells are always right aligned, and the currency symbol cannot be edited.
A column that is pinned will pin to the far left of the table and a dropshadow will appear around the column.

Linked Cell

Linked cells display hyperlinks that users can click on to open. Links cannot be edited because they are always associated to existing Procore objects.
A column that is pinned will pin to the far left of the table and a dropshadow will appear around the column.

Multi Select Cell

Multi select cells display values from a multi select. They wrap based on cell height and then truncate. On click, a standard multi select pops out to open above the cell/table.
A column that is pinned will pin to the far left of the table and a dropshadow will appear around the column.

Percentage Cell

Percentage cells are always right aligned, and the percentage symbol cannot be edited.
A column that is pinned will pin to the far left of the table and a dropshadow will appear around the column.

Person Cell

Person cells use an avatar with two lines of text in large/medium rows, and one line in small rows. The top row is the name and the bottom row is the company. For small rows, there is no avatar and only the person name is visible. Cells with multiple people use the avatar stack component and name/company values wrap and then truncate, based on the cell size. On click, a standard multi select pops out to open above the cell/table to select a person.
A column that is pinned will pin to the far left of the table and a dropshadow will appear around the column.

Reorderable Cell

Reorderable cells are used to reorder rows within a table and have a grabber icon that can be used to move rows. These cells are always in the leftmost position of the row.
A column that is pinned will pin to the far left of the table and a dropshadow will appear around the column.

ERP Cell

ERP cells are used to show sync status.
A column that is pinned will pin to the far left of the table and a dropshadow will appear around the column.

Status Cell

Status cells contain pills displaying a status.
A column that is pinned will pin to the far left of the table and a dropshadow will appear around the column.

Checkbox Cell

Checkbox cells are used to select rows for bulk actions and are locked to the left of the table. Checking a box puts the cell into a selected state.
A column that is pinned will pin to the far left of the table and a dropshadow will appear around the column.

Date Cell

Date cells display a date. If there is already a date in the cell, it will display in the select. Otherwise, the calendar allows a date to be selected.
A column that is pinned will pin to the far left of the table and a dropshadow will appear around the column.

Row States

Rows can also have their own statefulness in addition to the cell’s states.

Selected Row State

A row can be selected to perform bulk actions on it via a checkbox cell on the left of the row. When a row is selected, all of the interactions regarding cells in the row will still apply (i.e. a cell can still be edited or selected when a row is selected).
Example of sort indicator icons sitting in the header of two columns.

Active Row State

Rows can also become active via row click. This allows them to open a contextual panel to perform additional tasks (similar to cells). Cells can still be edited when a row is active.
Example of a column header being grabbed.

Row Hover

Hovering anywhere on a row reveals information about the row and the types of cells inside of it, including the presence of inline editable cells.
A column that is pinned will pin to the far left of the table and a dropshadow will appear around the column.

Keyboard Accessibility

Users can navigate the table with the keyboard arrow keys. Keyboard active cells will display the same as cells selected with the mouse (the “selected” state). This cell property can interact with the properties of rows the same way as a selected cell can. For example, a row can be selected while a cell can be keyboard active.

However, because the keyboard navigation operates independently of the mouse navigation, cells and rows can sometimes have both mouse hover states and keyboard active/selected states.