Table and data grid guidelines
Tables are components used to house and display large amounts of data in a logical order.
Applies to:
Style
There are 5 ways you can style a table.
Ruled grid
A ruled grid draws vertical and horizontal lines between each cell. One of the benefits of this style is that it’s very clear which elements belong to which row and which cells belong to what header. However, one of the downsides is that it can look cluttered as all the lines may not be necessary.
Ruled rows
A table with ruled rows means that horizontal lines separate each row. This style is less cluttered than the ruled grid but still very easy to read. Because of this, it’s one of the more common grid styles, especially for large tables.
Zebra stripes
Zebra stripes, or alternating rows, are when the background color of every second row is a slightly different color. Like the ruled rows, it is straightforward to read and not cluttered. One of the downsides of using zebra stripes is that users with visual impairments may not be able to see the slight change in row color.
Zebra stripes can be used in conjunction with the other ruled styles of tables. For example, you can have a table with ruled rows and zebra stripes.
Ruled columns
A table with ruled columns means that there are vertical lines separating cells. This style isn’t as popular as the ruled rows type.
Free-form
A free-form table doesn’t have any rules or zebra stripes. While it may look clean and uncluttered, it may be difficult for users to read correctly.
Common cell types
There are many different cell types, but 3 of the most common are text, number, and checkbox cells.
Text cells
Text cells are table cells with regular text. This could include names, job titles, eating preferences, etc. If users were to click sort, they would see the table’s rows reorder in alphabetical or reverse-alphabetical order..
Number cells
Number cells are table cells with numbers. These numbers can include ages, amounts, money, and more. Sorting number cells reorders them in numerical order from highest to lowest or vice versa.
How to in Balsamiq In Balsamiq, you can left, right, or center align your columns using some shortcode. In the below example, you can see how the last line of the shortcode relates to the alignment of the different columns: "L" means left, "R" means right, and "C" means center.
Make sure that your alignment code is always in curly brackets at the bottom of the shortcode editor and that a comma separates each alignment letter.
Here is the text from the example to copy and try yourself:
Name v, Position v^, Age v^, Remote worker v^
Andrew Long, General Manager, 32, []
Carla Stevens, Developer, 28, [x]
Eric Jackson, Designer, 30, [x]
{L, L, R, C}
Checkbox
A checkbox cell is a table cell with a checkbox. A checkbox is a boolean variable that can only be "checked" or "unchecked" and less often "indeterminate." Checkboxes in the context of a table are often used to indicate yes/no variables such as whether a project is done, whether an invoice has been sent, or whether a team member is a remote worker. Sorting checkbox cells will group all the checked checkboxes at the top and the unchecked checkboxes at the bottom or vice versa.
Tables on mobile
Tables are, generally speaking, big, bulky components that do not display well on mobile phones. There are 2 ways to approach tables on mobile.
Default
Without changing anything, a table on mobile will have a long horizontal scroll (and potentially a long vertical scroll). While this is easy to do, some users may get confused when scrolling back and forth and associate the wrong values with one another.
Vertical list
By taking the values out of a table and putting them into a list, the user can easily see all the associated data. However, one of the downsides of this pattern is that it’s difficult to see the values in the context of one another.
Best practices
When creating tables, you want the data to be as easy to navigate and interpret as possible.
Allow users to sort rows
Allow users to sort the rows using the arrows (i.e., the little triangles) in the title bar.
Active - Ascending: When a column is set to active ascending, it means that the values are in alphabetical or ascending order (e.g., A - Z, or 0 - 10, or checked - unchecked). This is useful for ordering prices from lowest to highest or organizing names alphabetically.
Active - Descending: When a column is set to active – descending, it means that the values are in reverse-alphabetical or descending order (e.g. Z–A, 10–0, or unchecked–checked). This is useful for organizing prices from highest to lowest or names in reverse-alphabetical order.
Sortable: If there are two arrows, one pointing up and the other down, it means that the table isn’t currently sorted by that column, but it can be if you click on it.
Non-sortable: If there aren’t arrows by the title, it means that the user can’t sort the table by that column.
How to in Balsamiq In Balsamiq, you can create sortable arrows using the caret symbol "^" and the "v" character. If you use both together, you can create a sortable symbol.
Here is the text from the example:
Sortable v^, Ascending v, Descending ^, Non-sortable
A, B, C, D
Fix the header on scroll
When you have a table that has a scroll, it’s recommended to always make the header fixed (or frozen). This means that as the user scrolls down, the header stays in the same place, making it easier for the user to navigate.
Consider fixing the left column
When dealing with tables that have long rows, consider fixing or freezing the left-most column. This will help users when navigating through large amounts of data.
Space columns based on their content
Tables should always be spaced according to the content within each column. For example, checkboxes and small numbers won’t need as much column space as a name or an occupation.
How to in Balsamiq
Balsamiq automatically sizes data grids based on the content inside them. However, if you want more control, you can set the size of your columns—similar to the way you would set the text alignment.
To set relative sizes, use ratios to space the columns in your grid. For example, "{4,1}" means that the first column is four times that of the second, as shown in the example below.
Ensure that your spacing shortcode is always in curly brackets at the bottom of the shortcode editor and that a comma separates each column. Learn more about using the data grid control here.
Here is the text from the example:
Name ^, Age v^
Jake Hobbs, 32
Gabby Gilson, 24
Eric Jackson, 30
Carla Stevens, 28
Andrew Long, 32
{4L, 1R}