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: 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.
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.
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.
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.
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.
Keyboard active cells look identical to a selected cell, but are displayed when a user has navigated to the cell via the keyboard.
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.
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.
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.
Button Cell
Button cells are used to show a state and provide an action.
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.
Currency Cell
Currency cells are always right aligned, and the currency symbol cannot be edited.
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.
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.
Percentage Cell
Percentage cells are always right aligned, and the percentage symbol cannot be edited.
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.
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.
ERP Cell
ERP cells are used to show sync status.
Status Cell
Status cells contain pills displaying a status.
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.
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.
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).
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.
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.
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.
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.