Datagrid Guidelines

Overview Pages

An Overview page displays a table of items of a single product section — e.g. the list of email campaigns, automation programs, etc. They help users find and manage existing resources and inform them about performance.

Overview Page Guidelines

• The Page Title should be the service name (e.g. "Mobile Engage"), not the table's or tab's name.
• Horizontal tabs should be used for navigating between sub-pages on the same level.
• Buttons should be included in the header of the overview datagrid, not above it.
• Avoid putting content over and under the datagrid on overview pages.

Datagrid Header

Filter bar:

• Starts with a search field with a placeholder indicating the function (e.g. "Search campaigns").
• If there are too many filters, hide them by default behind a "Show filters" toggle.
• Use compact form elements for filters. Avoid radio buttons and toggle buttons.

Table action buttons: the main action to interact with the table goes here, e.g. "Create Email".

Datagrid Footer

• The default number of items to show should be 10.

Column Headings

• Use text labels that describe the data in the column, e.g. "Title", "Created On", "Changed By".
• Be specific — use "Created On" instead of "Date".
• Avoid using icons in heading cells.
• Don't use column headers for interactions.
• Column headers can't be empty, except for the actions column.

Sorting:

• Empty cells are displayed at the end of a sorted list, both ascending and descending.

Rows

• Avoid displaying entire rows as disabled — make only specific actions disabled instead.
• Avoid multi-line rows; provide sufficient column width for user-entered content.
• Show an empty state when there are no rows to display.
• No zebra stripes — each row has a bottom border and a hover state.

Columns

• All cells in the same column must be the same type (text, number, date, actions).
• Avoid showing units of measurement in the column heading — show them in cells instead.

Column types:

1. Textual — left-aligned, for titles, descriptions, status.
2. Numeric — right-aligned, for numbers, percentages, currency.
3. Numbers as strings — left-aligned, for IDs, codes, phone numbers.
4. Date — left-aligned, e.g. 04-11-2017 03:35 pm.
5. Time-interval — left-aligned, e.g. 01m 25s.
6. Other — image + text, switch, checkbox, radio button.

Cells

• Avoid coloured text in cells — use coloured tags instead.
• If there is no value, leave the cell blank. Do not display "N/A".
• Avoid icon-only cells — use text or text + icon.

Row Action Icons

Order from left to right:

1. Service-specific / external functions (e.g. "View Report")
2. Editing functions (e.g. "Edit Campaign")
3. Viewing functions (e.g. "Full Preview")
4. Duplication functions (e.g. "Copy")
5. Destructive functions (e.g. "Remove")

Bulk Select Rows

• First column should be a checkbox column.
• When at least one row is selected, show the multiselect bar with bulk actions.

Recommended Column Order

Column Group	Position	Examples
Main Identifiers	Far Left	Customer Name, Campaign Name
Categorical Attributes	Left-Center	Segment, Channel, Category
Primary Metrics	Center	Revenue, Clicks, Conversion Rate
Time-based Columns	Center-Right	Created On, Created By
Actions	Far Right	Edit, Delete, View

Try to avoid:

• Overloading tables with too many columns by default.
• Placing primary action buttons on the left.
• Showing too many time-based columns.
• Mixing unrelated data types in columns.