Today is the day… the day I announce all the awesomeness that is Ignite UI for React. Today, I finally get to tell you about all the great new components and features we have been working on over the last several months. I’m not going to bore you with some lame intro, let’s just get right into the good stuff!

Dock Manager

Let me start this post off by blowing your mind! I am super excited to announce the immediate availability of the Dock Manager component.  That’s right! You heard me… it’s a dock manager for React.  It’s 100% dependency free, a pure HTML/JavaScript component, and takes the layout in your React applications to the next level.

What is a dock manager? Well, if you have ever used Visual Studio you know exactly what it is. If you haven’t, it’s a component that provides a way to manage a complex layout using different type of panes with various sizes, positions, and behaviors, and that can be docked to various locations within an app. The dock manager allows your end-users to customize it further by pinning, resizing, moving, floating, and hiding panes.  Besides the data grid, this is a game changer for all web applications.

Data Grid

The data grid is probably the most important control an app can have. So, it's no surprise that we are continuously improving our data grid.  In this 20.1 release, the React data grid gets column pinning, column summaries, filtering, hiding and show, and much more.  Let's dig into the details of these newly added data grid features.

Toolbar

First up is the brand-new grid toolbar component which is essentially a container for UI operations. The toolbar is located at the top of the Grid and it matches its horizontal size. The toolbar container hosts different UI controls which are related to some of the Grid's features - column hiding, column pinning, and filtering just to name a few.

Column Chooser

A brand-new column chooser component has been added which allows end-users to perform column hiding/showing directly through the UI. This new column chooser can be used through the grid's toolbar to change the visible state of the columns. In addition, developers can always define the column hiding UI as a separate component and place it anywhere they want on the page.

Column Options Dialog

With the addition of all these great grid features, and to help expose the existing features from previous releases, we have created a brand-new Column Options Dialog.  This dialog will give your end-users the ability to group, hide, pin, move, and sort a column, as well as apply excel style filtering with a single click of a button. The new Options Dialog can be access by clicking on the 3-dots in the column header.

Column Pinning

With this latest release, end-users can now pin a column, or multiple columns, to the left or right side of the data grid. End-users can also lock columns in a specific order. The grid has a built-in column pinning UI, which can be used through the grid's toolbar, or the new grid options dialog, to change the pin state of the columns. In addition, you can define a custom UI and change the pin state of the columns using the data grid’s column pinning API.

Column Summaries

The grid now ships with a summaries feature that functions on a per-column level as a group footer. Summaries are a powerful feature which enables the end-user to aggregate data in a very simplistic way using a predefined set of default summary items, depending on the type of data within the column.

The built-in summaries include:

• count
• min
• max
• average
• Sum
• Custom

It is also possible to create custom summaries by creating a custom SummaryCalculator.

Let’s Wrap this Baby Up!

If you have ideas about new features we should bring to our components, important issues we need to fix, or even brand new components you’d like us to introduce, please let us know by posting them on our Product Ideas website.  Follow and engage with us on Twitter via @infragistics. You can also follow and contact me directly on Twitter at @brianlagunas. You can also subscribe to my YouTube channel to be notified of new videos, and follow me on Twitch to watch me stream live.  Also make sure to connect with our various teams via our Community Forums where you can interact with Infragistics engineers and other customers.  

Lastly, when you do build something cool with our controls, please make sure to let us know.