Overview
Table
Presents data in combination of columns and rows.
Overview
Tables are great at presenting a clear structure that can be scanned to get just the right information. A table can organise, and present data that is relative, and it can enable user interactions like selecting, adding, deleting, and reordering.
When to use
- When you want to group related data in a scannable manner.
- To present data that has a repetive structure.
Anatomy
- Column header:Â Used for indicating the column heading. Optionally paired with actions like checkbox or arrange arrows.
- Leading cell: Used for showing the first (i.e. leading) column in the table. Usually placed in the leftmost (i.e. first) column.
- General content cell: Comes with a variety of content types and used for all other cells in the table.
Best Practices
- Let people edit a table when it makes sense.
- Provide appropriate feedback when people select a row or column. Shipfaster provides all necessary states such as rest, active, and hover.
- Choose a row style that fits the information you need to display.
Recommended resources
Get instant access to over 6,000 Figma Components with Shipfaster UI. A Figma UI Kit & Design system used by over 2,000 designers.
180+ ratings
Figma's most powerful and comprehensive UI kit and design system. Get instant access to over 6,000 components.
Learn more