Table

References

• Material Documentation

Example

Open

Basic Usage

Import Template

• Import table-generic.component to use the table component

Column Filters

Open

Non-Unique Column Values

• Columns without unique values across rows should not have a column filter (i.e. columns that contain soley action buttons, or checkboxes)

Filters

• If columns do have filters, at a minimum, they need to include the ability to sort by ‘Ascending’ and ‘Descending’ values, as well as a search field.

Additional Filters

• Date/time column:

  • This column requires a date range filter, to allow users to filter a specific duration of time

Table Controls

Below every table, there can be a set of controls:

• Items per page

• Page navigation

  • First page

  • Previous page

  • Next page

  • Last page

• Download table contents as CSV

• Custom table columns

Tables without pagination

Not every table needs to have every control, and most of the time it depends on if the table requires pagination. If no pagination is required, the ‘items per page’ control and the ‘page navigation’ is not necessary, leaving only the ‘download CSV’ button and the ‘custom table columns’ button.

The below tables are examples where pagination is not required:

• Global > Custom table columns modal

• Leads > Leads Profile Modal > Profile Tab Table

Column Alignment

Left Align

• String values

• Values with inconsistent character lengths

E.g.

• Company name

• First Name

• Telephone Number

Center Align

• Values with consistent character lengths

• Non-character based interface items

• Mat-chip items with relatively similar character lengths

E.g.

• Country codes

• Campaign ID

• Toggle

• Chips

Right Align

• Numerical values

E.g.

• Impressions

• Clicks

• Payout