Data Grid

Pattern

The Data Grid pattern is a versatile and dynamic tool designed to display structured data in a clear and organized manner.

It presents information in a grid format, allowing users to easily comprehend and analyze complex datasets with efficiency and precision.

Whether used in web applications, data visualization platforms, or enterprise systems, this component offers unparalleled flexibility and functionality.

A: Regular Style

B: Compact Style

1: Checkbox

2: Dedicated Filter

3: Hover Actions

4. Overflow Menu

5: Cell

6 – Items to Show

7 – No. of Items

8 – Group by Columns

Demo

Access the Figma file and inspect the element using Dev Mode.

What’s New?

• Updated color variables;

Variations

Line

Regular

.Regular {
  height: 48px;
  background: var(--grey-1);
  stroke: var(--grey-4);
  checkbox: var(--small-enabled);
  overflow-menu: var(--regular-enabled);
}

Compact

.Compact {
  height: 32px;
  background: var(--grey-1);
  stroke: var(--grey-4);
  checkbox: var(--small-enabled);
  overflow-menu: var(--small-enabled);
}

Cells

Regular

.Default {
  height: 48px;
  color: var(--grey-1);
  text: var(--grey-8);
}
  
.Info {
  height: 48px;
  color: var(--info-10);
  text: var(--info-highlight);
}

.Warning {
  height: 48px;
  color: var(--warning-10);
  text: var(--warning-highlight);
}

.Error {
  height: 48px;
  color: var(--error-10);
  text: var(--error-highlight);
}

.Success {
  height: 48px;
  color: var(--success-10);
  text: var(--success-highlight);
}

Compact

.Default {
  height: 32px;
  color: var(--grey-1);
  text: var(--grey-8);
}
  
.Info {
  height: 32px;
  color: var(--info-10);
  text: var(--info-highlight);
}

.Warning {
  height: 32px;
  color: var(--warning-10);
  text: var(--warning-highlight);
}

.Error {
  height: 32px;
  color: var(--error-10);
  text: var(--error-highlight);
}

.Success {
  height: 32px;
  color: var(--success-10);
  text: var(--success-highlight);
}

Advanced Filters

Enabled

.Enabled {
  height: 130px;
  color: var(--grey-2);
  stroke: var(--grey-4);
  text-field: var(--regular-enabled);
  checkbox: var(--small-enabled);
  buttons: var(--tertiary-small-disabled, --primary-small-disabled);
}

Focus

.Focus {
  height: 130px;
  color: var(--grey-2);
  stroke: var(--grey-4);
  text-field: var(--regular-active);
  checkbox: var(--small-enabled);
  buttons: var(--tertiary-small-enabled, --primary-small-enabled);
}

Active

.Active {
  height: 48px;
  color: var(--grey-2);
  stroke: var(--grey-4);
  text: var(--grey-8);
  tags: var(--selectable-enabled);
  buttons: var(--tertiary-small-enabled);
}

Behavior

Column Resizing

The width of the columns can be adjusted by dragging the right edge of the column or double-clicking on the right edge of the column. For the latter case, the Data Grid will determine the best width for the column content.

Multi-Selection

This type of list allows you to apply actions in bulk, i.e. actions that can be applied to several items.

When you select at least one line in the list, the options that can be applied in bulk become active in the action bar and the number of selected items and the ‘Clear selection’ option are displayed at the bottom of the list.

You can quickly select or deselect all rows using the general checkbox.

Sorting

Columns can be sorted by clicking on the label and the sort arrow. By default, the ascending sort is the first to be displayed.

One or more columns can be sorted and the number of the sort order is displayed.

The sorting can have these variations:

• No sorting;
• Hover in column header;
• Sorting in ascending order;
• Sorting in descending order;
• Multiple sorting.

Move Columns

Columns can be moved to visualize the Data Grid, according to the user’s needs and preferences.

Filtering

The Data Grid can be filtered using various filtering methods. Filters are displayed at the top of the Data Grid and in the columns to provide a robust and extensive search.

• Search Field

The search field allows you to search by text and select various parameters present in the Data Grid. The search results should appear dynamically in the table, depending on what the user types.

The search field can have the following states:

• Enabled;
• Hover;
• Focus;
• Select search parameter;
• Active.

• Highlighted Filter

Select a maximum of one or two filters to highlight. The date range should be favored in lists with start and end date filters.

If you have any doubts as to which filters are most important to the user, you can consult analytical data on their use.

• Advanced Filters

This section allows advanced filtering with filters that are not present or are invisible in the table columns.

• Column Filtering

You can add a filter to each column, depending on its type of values. This can include text fields, checkboxes, date pickers and radio buttons.

Empty State

There are different types of empty states: no data to present and no results found.

• No data to present: this empty state is displayed when no items are being loaded into the list.

• No results found: this empty state is displayed when a filter is run, but there are no results to display.

Column Grouping

Grouping columns enables the table to have several levels of columns in the form of headers and to expand or reduce the columns within the group. You can group one or more columns, according to your needs.

Grouping with Totalizers

It is also possible to present totalizers and subtotalizers by column groupings. These can be displayed for a better understanding of the data.

Advanced Interactions

The table has advanced interactions present in each item/row of the table.

Each item/row can have two actions highlighted in the hover state. By default, the actions are ‘View more’ and ‘Edit’, but the most appropriate actions can be set according to the purpose of the table. For example, the ‘Send to’ and ‘Delete’ actions can be highlighted.

The overflow menu shows the other actions associated with the item/row, as well as the two highlighted actions. If the label exceeds the maximum width, the text should be truncated and a tooltip with the full label should appear.

Both the highlighted actions and the overflow menu must be pinned if there is a side scroll in the table.

Dos & Dont’s

---