Fabric provides components and tools to our product teams, to help them work more efficiently in creating simple, intuitive, and beautiful experiences for FINN users.
Data table
Data tables are containers for displaying information. They allow users to quickly scan, sort, compare, and take action on large amounts of data.
Anatomy
A table contains a header row at the top that has column names, and below there are rows of data. Tables should be used when there are three or more columns of information.
Options
Variants
Data tables come in three different styles - default, borderless and blue. Default is the most commonly used style and fits well in most page layout hierarchies. Borderless is subtle and lightweight, and can be used when there are less rows, or when the information is easy to scan without the help of the divider lines. Blue, which is also commonly known as a zebra style table, is best to use when you need to give your table more visual focus, or when the table contains 10 or more rows, as the zebra-like style makes it easier to scan the data within the table.
Row dividers
Dividers are used for organizing table content and aid the user in parsing related data. in the case og our "blue" variant, we group the whole rows in a zebra-like background color to help the user easily differentiate and scan the different rows of data.
Usage guidelines
Left align textual data
Similar to a paragraph of text, textual data is always left-aligned within a table. Center alignment should never be used.
Right align numerical data
Numerical data should generally be right-aligned for the ease of scanning and comparing. This should only be left-aligned when numbers are arbitrary identifiers, known as “nominal numbers,” which means they can’t be compared or combined arithmetically (e.g., ZIP codes, IP addresses, phone numbers). Column headers follow the alignment of the data.
Respect vertical alignment
All content should be centered vertically within the row to offer the right visual balance.
Use an en dash (–) for missing values
When there are gaps in the data, use an en dash (–) to represent null or not applicable (N/A) values.
