A Source Table is most often found in the source view of a report, which displays the underlying source data for the report. Source tables can be accompanied by an aggregate table preceding it to display totals and averages.
Visual best practicesCopy URL
- Cell Padding: Space size 350
- When a table has additional columns that don’t fit in the field of view, a thin gradient should be displayed along the edge of either side which has additional columns
- Gradient style: Neutral 200 → Transparent
- Column widths: Determined by content, but can be overridden if necessary
- Font Size 100
- Font weight: 600
- Font color: Neutral 600
- Match alignment of values in the rest of the column (see below)
- Font size: Size 200
- Font weight: 400
- Font color: Neutral 800
- Left align non-numeric values and right align numeric values
Aggregate tableCopy URL
- Font weight: 600
Content best practicesCopy URL
Number formattingCopy URL
- Number formatting for Source Tables can be found in our Number formatting rules under Data Tables.
- Aggregate Rows: When a Source Table contains mostly numerical data, such as in the Paid Campaigns example above, totals and averages should be displayed in a row(s) at the top of the table
- Aggregate Tables: Otherwise, if the Source Table is a mix of data types, the totals and averages should be displayed in a separate Aggregate Table above it
- Totals and averages should only be displayed when more than one data source is selected
Compact and large message viewsCopy URL
- Messages in the Source Tables will have two views: Compact and Large. The user can toggle between the two views using buttons located at the top-right of a Source Table. See Compact & Large Message Views below.
Interaction best practicesCopy URL
- The default sort column should be contextual based on the data and user needs. Otherwise, the following rules apply:
- Metrics default to descending
- Dates default to descending
- Text defaults to ascending
- Clicking on a column header should sort that column based on the above rules. Clicking on it again will reverse the sort.
- The currently-sorted column should be indicated by an up (ascending) or down (descending) arrow next to its header.
- When sorting, nulls are always at the bottom to mirror sorting in Excel, Google Sheets, etc. For example:
- Descending: Highest Clicks > Lowest Clicks > 0 Click Counts > Null Click Count
- Ascending: 0 Click Counts > Lowest Clicks > Highest Clicks > Null Click Count
- A data table should display 50 results when it first loads. As the user scrolls vertically, the table should use infinite scrolling to display additional results.
- After the final result has loaded, display a message indicating there are no more results based on the current date range or filters.
- Example from Pinterest:
You have read all the messages in this date range. To see more, adjust the date range and filters in the right nav bar.
- Horizontal scrolling is allowed, using the styles above, when all columns don’t fit in the viewable area. At least the first column should remain fixed to serve as a reference point.
Message actionsCopy URL
- In some Source Tables, users need to be able to perform actions on the messages listed. Examples include
- Message actions will be displayed only when the message view is expanded.
Compact & large message viewsCopy URL
- Users have two options for toggling between Compact and Large message views:
- Toggle all messages: Users are able to toggle between views for all message by using the buttons located at the top-right of a Source Table
- Toggle individual messages: Users can also toggle individual messages by clicking on the
chevron-downicon at the end of each row