5 Must-Have Angular Grid Row Features & How To Use Them

Zdravko Kolev / Thursday, June 15, 2023

Working with big data is not that easy. Every component should provide the means and tooling to actually make sense of the data that is going to be used by the end user. This is where components like the Ignite UI for Angular Grid and rich row features prove to be handy.

In this article, I will look at the top 5 Angular Grid row features to consider for your next project.

Showcase the Data-analytics sample that we have based on row selection:

Data analytics with selection

In Brief – What Is Grid Row Feature in Angular?

Grid row features refer to the functionalities and capabilities that a certain Angular UI library (like Ignite UI for Angular library, for example) provides so developers can manage and manipulate rows within a grid component efficiently and easily.

Here are my top 5 Angular Grid Row features that you must have:

Row Selection

With row selection in Ignite UI for Angular, a row selector column precedes all other columns within the row. When a user clicks on the row selector, the row will either become selected or deselected, enabling the user to select multiple rows of data.

The sample below demonstrates the three types of Grid's row selection behavior. Use the buttons below to enable each of the available selection modes. A brief description will be provided on each button interaction through a snackbar message box. Use the switch button to hide or show the row selector checkbox.

Row selection example

Multi-Row Layout

Multi-row Layout extends the rendering capabilities of the igxGridComponent. The feature allows splitting a single data record into multiple visible rows.

Multi-row layout

Row UI Actions

The grid component in Ignite UI for Angular provides the ability to use ActionStrip and utilize CRUD for row/cell components and row pinning. The Action Strip component can host predefined UI controls for these operations.

Row actions example

Row Pinning

One or multiple rows can be pinned to the top or bottom of the Angular UI Grid. Row Pinning in Ignite UI for Angular allows end-users to pin rows in a particular order, duplicating them in a special, visible area even when they scroll the Grid vertically. The Material UI Grid has a built-in row pinning UI, which is enabled by initializing an igxActionStrip component in the context of the Grid. In addition, you can define custom UI and change the pin state of the rows via the Row Pinning API.
Row pinning

Row Dragging

Row dragging provides users with a row drag-handle with which they can initiate the dragging of a row.

 Row dragging example

Wrap Up

There are different Grid row features and functionalities in Angular UI libraries available on the market. But to me, the must-have features are precisely Row selection, Multi-row layout, Role UI actions, Row pinning, and Row dragging. With them, users can more easily manage and manipulate tabular data.

If you need more details, we encourage you to check out our:

Other useful articles on similar topics:

5 Must-Have Angular Grid Column-Based Features

What Are The Top 4 Angular Grid Data Manipulation Features?

The Top 5 Angular Data Grid Features You Never Knew You Needed

To experience everything, visit the customer portal and get the latest version. As usual, we are always excited to get your feedback and hear what you want to add or recommend. So please email me at zkolev@infragistics.com and let me know how we can help you continue delivering value to your customers with Infragistics.

Ignite UI for Angular benefits