Advanced Usage of ag-Grid

Learn to effectively implement advanced techniques with ag-Grid

ag-Grid is the best JavaScript grid in the world.

ag-Grid is highly performant, feature-rich, and tightly integrated with the Angular framework. In this advanced usage of ag-Grid workshop you'll learn how to leverage NgRx with the delta row model for effective data mutation, how to extend the styling of ag-Grid, and how to build custom Angular components for rendering, filtering, and editing data. You will walk away from this half-day workshop equipped with the knowledge to integrate ag-Grid with NgRx's store, and how to extend ag-Grid for your application's unique requirements.


  1. NgRx + ag-Grid for immutable data

    • Advantages of immutable data
    • Requirements for implementing immutable data
    • Implementing immutable data with NgRx
  2. Styling ag-Grid

    • Cell Styling
    • Row Styling
    • Theming
  3. Custom Angular Components in ag-Grid

    • Registering components
    • Component interfaces
    • Cell renderer component
    • Floating filter component
    • Header component
    • Editor component


The goals of the Getting Started with ag-Grid course are:

  1. Learn the advantages and requirements for implementing immutable data structures in ag-Grid.
  2. Implement immutable data using NgRx with ag-Grid.
  3. Style ag-Grid's cells and rows.
  4. Theming ag-Grid.
  5. Registering custom Angular component for use in ag-Grid.
  6. Create custom cell renderer, floating filter, header, and editor components in ag-Grid.


Students should be familiar with the following techologies:

  • JavaScript and TypeScript.
  • Basics of Angular.
  • Basics of ag-Grid.


Duration1 day


Site © by LiveLoveApp, LLC

We are the best.

Hire the best for your project.

Let's Talk