Log in to like this post! Exciting Additions to Our Angular Data Grid Sarah Roman / Friday, July 6, 2018 Our Angular Data Grid has had some user-friendly and powerful changes come with the launch for v6.1. With our development looking to keep the grid updated with a mobile-first design, it shows in the components that they're implementing along the way to bring customization and data control to the developers. Let's take a look at the newest updates to Ignite UI for Angular and the impact it'll have on your Angular grid options. Multi-column Headers Multi-column headers have now made their way into the extensive column features that we have, joining the likes of Column Pinning, Column Moving, Column Resizing, and Summaries. With the columns, you can now group them under a common header. It's an excellent way to organize columns and make sure that each grouping best represents your data. GroupBy The GroupBy component also works with column grouping, as it helps you visualize your data records in hierarchical groups. The grouping is going to be dependent on the column values, and it can be expanded, collapsed, and reordered through the UI or API. Updates to Cell Editing More customization choices have been added to the cell features, helping you tailor the Angular grid to your needs. Copy and Paste: You can easily copy and paste information amongst individual cells and across cell ranges. Selection: Effortlessly select or deselect individual cells. Styling: You can apply specific styles of your choice to cells to help highlight certain data points. Templates: You can also choose or create custom templates for your cells. Columns: Moving and Hiding You can move your columns around, helping you to reorder, organize, and drag your information around. This works well with the Column Pinning feature, since moving a column into the pinned area will automatically pin the column to that area. You can also quickly hide your columns from view, displaying your most pertinent data. The Toolbar You now have a container for UI operations with the toolbar that's located at the top of the Angular grid. It'll match the grid's horizontal size and contains UI controls that are related to grid features like the column hiding, column pinning, Excel exporting, and others. Combo The igx-combo component proves itself to be a strong input feature, as it combines the elements of the basic HTML input and select function and the igx-drop-down component. The combo component offers you a way to easily filter and select multiple items, group custom values, and also add custom values to a particular dropdown list. There are custom templates that you can use to change the header, footer, and items, plus the component integrates with the template driven and reactive forms. The igx-combo component also reaps the benefits of our virtualization directive and our ARIA support, since you're able to interact with intuitive keyboard navigation and quick, smooth dropdowns. Dropdown The dropdown component offers a variety of handy features: single-selection, keyboard navigation, and full accessibility compliance. Overlay The overlay service for our Angular grid is tied directly to our toggle directive. A developer can set additional overlay parameters to the toggle content to change the way it's rendered. The New Filtering UI With the overlay replacing the toggle component, you have more control over the parameters with which you'd use to filter your data. You can easily add your own custom filtering conditions and scale up in complexity to filter by what you need. Chips With the addition of chips to the UI, you can now see a display of individual and keyboard accessible values. Keyboard Navigation The keyboard navigation has expanded, offering accessibility support and navigational ease. For instance, now the Tab button will automatically move you to the next cell while saving your data in the previous cell. If you hit Shift plus Tab, you'll be brought back to the previous cell. Global Search The new global search feature will apply the search to all of the grid's columns, making it easy to find what you need. Overall, these additions are sure to enhance your applications built with Ignite UI for Angular and its powerful Angular Data Grid.