Grids

These screenshots are from older versions, some minor UI changes can be expected

The query grid is a powerful data table component with the following features:

Big data

Users can quickly scroll over a million lines of data. While in practice this would make for a time consuming job, other features such as filtering will make it easy to find relevant data. Developers however do not need to worry about the size of the data set as data is loaded and rendered in a performance and memory efficient way.

Lazy loading

Data set chunks are loaded whenever they should be visible within the visible boundaries of the screen. This means that even if your entire data set would potentially return over a million records but your screen can only show 30 or so at the time, the grid will load a chunk of data (by default in pages of 100 records).

Data sorting

Out of the box sorting of data on any column or multiple columns by holding the CTRL-key and clicking each column in order of sorting priority.

Pin columns

Keep columns in view while horizontally scrolling over your data. This view-state is automatically persisted on their profile.

Hide columns

Users are in control over the amount of data they want on the screen. This view-state is automatically persisted on their profile.

Reorder columns

Users are in control over which columns should be visible first. This view-state is automatically persisted on their profile.

Manage column order, visibility and pinning

Filtering

Easily filter data by clicking on the column filter icon and enter custom filter text or select one or more items from the list with the distinct values for that column in the data set.

Enter search text or select a value from the list

Users can choose to save the filter for later use:

Saved filter that only shows products with color red

Built for performance

The grid component uses cutting edge techniques to ensure that the user experience feels lightning fast. For example, the grid reuses DOM elements in order to keep the memory footprint as small as possible while taking advantage of hardware accelerated rendering.