Data grids

Definition: A data grid is a database with advanced functionalities such as sorting, filtering, grouping, editing, and pagination for easier exploration and manipulation of complex data relationships.

When to use

Use a table grid to display a large quantity of data to easily:

  • find data records that fit the specific criteria
  • view, edit and add data records
  • detect and compare relationships between variables or data records
  • take actions on data records




You have the options to choose between two types of data grid variations with and without zebra stribing:

  1. Read-only
  2. Editable



To ensure that your users do not make any unauthorized changes to important information such as data-rich sets, reports, or analytics, it is imperative to use read-only data grids.




Editable data grids are ideal when your users need to perform tasks like data entry, updates, deletions, or corrections.



Our table rows come in four densities

Condensed: 32px

Default: 40px

Regular: 48px

Relaxed: 56px






There are three major categories of data types within our cells that you can choose from.




Add the functionalities that are applicable to your product.


Sorting is the process of arranging items in a specific order, based on alphabetical order, numerical value, or date. It helps you to organise data for easier comprehension and access.


[Example coming soon]



  • Click the column header once for ascending order and twice for descending order. The date and transactions are sorted on the first click.
  • Apply language-specific sorting rules for characters and numerical sorting from lowest to highest.
  • After sorting the grid, your user's previous selections should remain intact without any rows being deselected.

Dragging involves clicking and holding on a cell, then moving it to a different location by moving the mouse while keeping the button pressed. You can rearrange items, move files, or perform other interactive tasks.


[Example coming soon]

Resizing adjusts the dimensions of a column, to make it larger or smaller. You can drag the top right portion of the column or by double-clicking the right edge of the column, and adjust the width of the columns.


[Example coming soon]

Pinning keeps a cell in a fixed position. It prevents the cell from being automatically rearranged or removed due to various sorting or cleaning actions.


[Example coming soon]

Inline editing edits content within its original context, without opening a separate editing modal or form.


[Example coming soon]



  • Inline editing is a viable option when dealing with small amounts of data per row that can fit within the grid without horizontal scrolling. To accommodate this, an actions column is added at the end of the grid to house the edit, save, and cancel icons.
  • Upon hovering over a row, an edit icon appears in the actions column, allowing users to make changes to the element columns.
  • Once the edit icon is clicked, the save and cancel icons appear in the actions column, allowing changes to be saved or discarded.
  • It is important to choose appropriate sizes for the rows and columns from the beginning to avoid flickering when displaying elements.
  • Only one row can be edited at a time, and if a user tries to edit a row while another is already in edit mode, a message should be displayed asking if they want to discard the changes made on the previous row.

The master-detail editing edits all the details on the same row. The master area contains primary information and the detailed area displays all information for the selected row.


[Example coming soon]



  • It's not recommended for grids with many rows.
  • It's best to place the detailed area below the grid. If no rows are selected, empty the detailed area and add a message saying "x rows selected".

Commands and actions activate behaviors through buttons or menus, using typed or spoken text.


[Example coming soon]



  • Use icons or buttons for single-row commands in the rightmost column to avoid clutter.
  • Perform actions on multiple or all items at once using the bottom left options or the "New" button at the top right to add new data.
  • Primary functions are at the top, while secondary functions are at the top right. This includes search, filtering, and creating new items. Depending on your application, any of these can be either primary or secondary.
  • For advanced grids with many commands, place all actions to the right of the grid. Use split or menu buttons for similar commands such as “Export to Excel” and “Export to PDF" and name it "Export".
  • Disable action buttons that can't be used based on grid selections.