Use the Grid Component to let the user browse and interact with a vast amount of complex data that is visually represented in tabular fashion and provide means for filtering, sorting, paging, and much more. The Grid is visually identical to the Ignite UI for Angular Grid Component
Detach from Symbol
The Grid is essentially a repeater of columns and rows showing data in a tabular fashion. Therefore, the easiest way to use it is by dragging one of the predefined grids to your artboard - there are three presets available for the three display densities supported. Once in your artboard, by right-clicking on top of it, and selecting the
Detach from Symbol option near the bottom of the contextual menu you should see the following in your layers panel under the newly appeared group:
|🚫 metadata||A special locked layer starting with a prohibited icon. This layer is required by the code generation and you should avoid deleting or modifying it.|
|Header||Contains all the cells in the header|
|Body||Contains all the cells in the body|
After detaching, you may alter the number of headers you need, in order to show all the dimensions of your data and insert as many visible records as you want to show in your design simply by duplicating one of the rows of data that you already have.
The Grid provides three types of cells serving different data visualization purposes. The Header Cell is only one per column and appears at the top of the grid to display the textual description of the data in that particular column. The Body Cell is used to build the content table displaying data records and its type may vary. The Summary Cell is used to create a section at the bottom of the Grid where Summaries columns are displayed for each dimension such as count, minimum, and maximum value.
There is also one special sub-type of Header Cell, the Row Filter Header Cell that is used to create an additional Header row at the bottom of the Header in order to enable the Row Filtering functionality.
Cell Display Density
Header, Body, and Summary Cells support three display density variants of the Grid: comfortable, cosy, and compact. Each of them come with distinct symbols as can be seen for the Header Cells below:
Items and Features (Header Cell)
The Grid Header Cell supports various layout combinations through the
Items override and different feature configurations via the
Feature Left and
Feature Right overrides. Moreover there are a number of additional overrides that are not visible but enable different column features on the Grid, such as Editing, Moving, Resizing, Hiding, and Pinning.
State and Grid Feature (Body Cell)
The Grid Body Cell supports the following interactive states: inactive for the normal state and active for the focused/selected cell. Only one cell in the whole grid can be active at any given moment.
The Grid Body Cell has styling support for some of the Grid features defined through the headers via the
Grid Feature override. There are style variants for regular cells, editable cells, and cells that belong to a selected row.
The Grid Header Cell provides presets for the four generic types of data that the Grid needs to accommodate: Number for numeric values, the one combining Text,Date,Bool for the respective data types, Row Selection that is used for the first column when selection of multiple rows is desired, and Group By - used to expand and collapse grouped data rows.
The Grid Body Cell provides presets for the same generic types of data like the Header Cell with an additional icon type to visualize simple graphics.
Grid Horizontal Scrolling
One way to achieve certain Grid dimensions, either as an absolute width or in relation to a parent group/container, is by adding a mask within the main group for the Grid. Simply insert a rectangle without any style and set its dimensions according to your needs, in the image below we have a Grid that is always exactly 800px wide.
You may fix the width and height of the rectangle, change its name to
Mask and position it at the bottom of the layers panel. Then right-click on top of it and select the
Mask option near the bottom of the contextual menu.
Now your Grid group will take the dimensions of the Mask and you may use it in your layout in the same way as you would use a Grid without horizontal scrolling. When code for this component is generated it will automatically add a horizontal scrollbar respecting the mask dimensions and using them for your Grid.
The Grid comes with styling flexibility achievable through styling the individual cell text, icons, and background colors in the various states available, as well as the hiding of horizontal and vertical borders.
The most important thing about the Grid is the alignment of the data inside its Header and Body Cells. Text should always be aligned left, leaving variable empty space to the right, and numbers should always be aligned right, leaving variable empty space to the left.
- Grid Toolbar
- Grid Export
- Grid Grouping
- Grid Column Pinning
- Grid Column Hiding
- Grid Column Moving
- Grid Column Resizing
- Grid Sorting
- Grid Row Filter
- Grid Excel Style Filter
- Grid Row Selection
- Grid Editing
- Grid Display Density
- Grid Paging
- Grid Summaries
- Hierarchical Grid
- Tree Grid
- Grid Patterns
- Grid Skeleton
Our community is active and always welcoming to new ideas.