Design Elaborate Grid Experiences with Indigo.Design and Generate Angular Apps

Stefan Ivanov / Friday, July 12, 2019

On Monday we have launched yet another amazing update to Indigo.Design including vast improvements to the UI Kit for Sketch, especially in the area of the Grid component. In the latest release available in your indigo.design cloud account, we also managed to squeeze tree and hierarchical grids with all the features that the regular, flat grid offers. In this short article I will walk you through the creation of a seemingly simple grid design with a lot of feature horsepower under the hood.

We will start by inserting the following grid pattern from the Indigo-Patterns library file "Grid/Pinning+Row Selection+Active Cell". Yes, we have created some feature presets for you available as patterns to speed up your design process and guide you on the proper way to configure features on the grid both in terms of look and generation of code.
Upon performing "Detach from Symbol" on the added pattern we can already discover how some of the grid features have been configured. Row selection, for example, is achieved by inserting an additional column to the left of the grid and using "Checkbox" for the "Type" of the "Body" and "Header" cells of the whole column.
To further elaborate things, we may set the "State" to one of the "Body" cells to "On" and configure all the cells belonging to that row as "RowSelected" cells via the "Grid Feature" override.
The "Header" cells are much more interesting, however, since through them are enabled many of the functionalities on the grid, since they are column-specific. This is the case with column pinning and since we would like to have two narrow pinned columns we will slightly rearrange columns 2,3 and 4 of the grid to achieve the following layout.
After renaming the Status column header to Sr. No. and the Progress one to SKU, we will proceed by selecting both and setting their "Feature Right" to "Pinning", of course, that will show an override for the "State", which should be set to "Unpin"."Feature Right" and "Feature Left" overrides support identical values ("Filtering" "Pinning" "Sorting") allowing for configuration of the corresponding features on the grid and column in particular.
We will continue by disabling the pinning on the Subject column via the "Feature Right" being set to "None" and there is one small detail to take care of - the right border. Since the right-most pinned column has a thick right border we need to set the "Right Border" override of all cells belonging to the SKU column to "Pinned Line" and for all cells belonging to the Subject column to "None".
While scrolling down to the "Right Border" override you may have come across a set of overrides for "Editing", "Column Moving", "Column Resizing", and "Column Hiding" that are responsible for the corresponding grid functionalities. Of course, when properly set, all the overrides so far will be interpreted by our code generation engine when creating an Ignite UI for Angular grid.
Before we go on with adding more features to the grid, let's stop for a moment and edit the rest of the headers and all the body cells to contain some actual data. I have decided to depict some typical data for an order and therefore besides Sr. No. and SKU I will add some more columns like Description, Quantity, Price, Final Cost, and Total, as well as, two columns for actions on the record: Comment and Remove.
After filling in all the body cells with appropriate values, changing the cell "Type" to "Number" for the numeric values and configuring the "Type" of the last two columns' body cells to "Icon" we are more or less ready to go on and add some more features to the grid. Of course, to polish up things for the actions columns we may want to pick an appropriate icon glyph and color for it from the possibilities ensured by the Indigo-Styling library.
Before wrapping up our design we will also take a look at configuring the active cell of the grid, it is usually the cell that moves the focus while we browse the grid via the keyboard. This is done very easily as the "State" override of every body cell can be set to "Cell:active" in order for the cell to receive an additional style that is applied on top of any other underlying styles the cell may have.
Now with the data we have used it becomes quite obvious that the grid is sorted according to the Sr. No. column and let's add an indication for that by selecting the header, navigating to "Feature Left" override (we already used the right one for pinning) and setting it to "Sorting". The order of the grids tells us that for the "Sorting State" we should choose "Ascending" and we are ready to add a couple of final elements.
Orders often have a notion of total quantity/size to estimate shipment and total value of the content to estimate insurance or invoice the recipient. We will reflect this by adding a summary row and to achieve this let's insert form "Grid/Features/Sumamries" the symbol denoted as "Comfortable". If we were to click on any of the header and body cells, we will also find the Comfortable signifier for the symbol in the right panel. The grid as well as some other components nave this notion of Display Density, which may be one of these three values: Comfortable, Cosy and Compact. In the case of a grid cell they more or less tell it how high it is and what are its internal padding such that Comfortable cells always have more air than Cosy ones, and the Compact cells are always the most dense arrangements with minimal paddings.
After performing "Detach from Symbol" on the Comfortable summaries create a layout with the cells at hand that show a single row of summaries with "State" configured as "Summary:unavailable" for all columns except for Quantity and Total ones, where appropriate values need to be provided.

The last feature that we will add to the grid will be Export to Excel and CSV, for which we need to insert a "Toolbar" from "Grid/Features" and set the "Action 1" override to none since we don't have column hiding enabled on any of the columns. However, since we enabled pinning on a couple of columns, the rest of the actions will be left intact. Once we set the "Title" of the "Toolbar" to have relevant content for the order like the order number for example, and voilà! our grid design is complete.

Below are some useful link for you to discover...

how the attached Sketch design file is arranged
and inspect the prototype on Indigo.Design Cloud
the Angular Code on StackBlitz

Get started with Indigo.Design

Don't stop with prototypes; get it in the hands of real users with our 1-click sharing, and the ability to view prototypes on any device. Harness the power of Indigo.Design Cloud for recording user sessions and task analytics

Get Indigo.Design Professional starting at $39/mo for a complete UX prototyping solution. Want Code Generation? Get Indigo.Design Enterprise for $99/month!

Grid.sketch.zip