Table

This component displays sets of data across rows and columns.

Usage Criteria

Tables display information in a grid-like format of rows and columns. The information is organized this way to make it easy for users to scan and find patterns, insights, or specific information that applies to them within a group.

Do's and Don'ts

• Do use tables for when users need to look up specific information.
• Do use tables when precise numbers are important.
• Do not use tables if there are no static values involved in the information. If information is specifically paired, consider the Content Block: Accordion component.

Design Notes

Try to structure your table so that there are more rows than columns. This can be made possible by swapping the rows and columns if needed. This is because it's easier for users to skim through information that is vertically aligned than horizontal.

Configurable Options

Finding the table

This component is configured through a regular text component. In the configuration window of a basic text box, click the icon on the top right that toggles a full screen mode. From there, click on the table icon in the same area. This will provide the options for adding rows and columns.

Configuring column width and row height

After clicking on the table icon, another icon will appear in the list of options that looks like a table with a pencil. Use this to set width and height. Column width is set via entering the number of pixels you would like it to take, or entering a percentage (which is recommended to keep the table responsive). These options need to be set for each cell on the first row.

Styling a cell

To add colour and style a cell, within the table editing options (pencil icon), a tab should say Cell Properties; select Header in the dropdown for Cell Type. Then for the Id text field, enter in "bclc-" and the colour theme you want the table to be. This may look something like "bclc-orange" in the text field, and must be done for each cell in the first row. It will then automatically style after you exit.

Adding a check icon

To add a check icon, follow the same method as if you were to style a cell, but instead of inputting "bclc-" and the colour, use "bclc-green-check" instead. Currently green is the only option available for the check icon in tables.

"bclc-green-check-circle" is a variation used to display check marks with a circle for success messages.

Developer Notes

Designer Notes