Sprout Social

Patterns

Source tables

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.

Examples

Paid Campaigns

Pinterest Pins

Instagram Posts

Listener Posts

Visual best practices

Table

  • 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: → Transparent
  • Column widths: Determined by content, but can be overridden if necessary

Headers

  • Font
  • Font weight: 600
  • Font color:
  • Match alignment of values in the rest of the column (see below)

Body

  • Font size:
  • Font weight: 400
  • Font color:
  • Left align non-numeric values and right align numeric values

Aggregate table

  • Font weight: 600

Content best practices

Number formatting

  • Number formatting for Source Tables can be found in our Number formatting rules under Data Tables.

Aggregates

  • 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 views

  • 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 practices

Sorting

  • 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

Scrolling

  • 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 actions

  • In some Source Tables, users need to be able to perform actions on the messages listed. Examples include Send Again, Delete, Boost, Tag, etc.
  • Message actions will be displayed only when the message view is expanded. Message Actions

Compact & large message views

  • 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 Compact / Large toggle
    • Toggle individual messages: Users can also toggle individual messages by clicking on the chevron-down-outline icon at the end of each row Message toggle