Grids

Summaries of information or records are represented in Cobalt by Grids. Grids are tables of information with advanced per-column and whole-grid filtering built right in.

Below is an example of a Grid you can find on the Accounts page:

Filtering

You will notice that each column has either search box or dropdown box at the top. These allow you to filter the results by matching the values of the column with the value in the search / dropdown box.

For example, we can filter the Name column by the search term “Bloggs”:

As you can see, the Grid has changed to only display results where the Name column contains the term “Bloggs”.

You can also apply filters across multiple columns to return only the results which meet every condition. For example, we can extend our filtering to only display results where the Status column is “On Hold”:

As you can see, the Grid has now removed Joe Bloggs from the results as the Status column is set to “Active”, meaning this record no longer meets every filter condition.

Above each Grid there is also a free-text search box, which allows you to filter every column by a given search term. When using this, the Grid will display results where any of the columns match the search term.

Sorting

Most Grids will also allow you to sort the results by the selected column. You can sort the results by clicking on the column you want to sort by.

After clicking on the column, an upwards-facing arrow will appear on the column to let you know that it is sorting by that column in ascending order.

If you click on the same column again, it will switch to a downwards-facing arrow to let you know that it is sorting by that column in descending order.

For example, we can sort by the Account column in ascending order:

Pagination

Grids which display large numbers of results are split into pages, one per 20 results, through a process known as Pagination.

Below the Grid on the left-hand side, you will see the Pages which the Grid is split into. Clicking on a page number will take you directly to that page. Clicking on the … button will cycle up the hidden page numbers.

There are also arrows which allow you to switch between pages, which are represented by the following icons: