You will walk away from this workshop being able to do all of these things by yourself.

  • 01. Install and get started quickly with AG Grid

    You'll be able to quickly install and get started with AG Grid, wiring up the necessary dependencies, and ready to get rolling on your first AG Grid implementation.

  • 02. Scaffold column definitions with ease

    You'll be able to quickly get start scaffolding the columns in your grid and provide the row data to AG Grid to render data for your application into the grid.

  • 03. Configure row sorting

    Row sorting is a critical feature of a data grid in Angular applications. You'll be setting up row sorting, multi-row sorting, and creating default column definitions in no time at all.

  • 04. Setup column filtering

    Column filtering enables your users to quickly find the data they need. You'll learn the basics of setting up column filtering for text, number and date values. You'll also learn how to use the floating filter, and create a simple quick filter to easily filter for any value in the grid.

  • 05. Build custom cell renderers

    While AG Grid ships with some basic cell renderers you'll likely need to create a custom cell render to display data in your application. You'll learn how to use the `cellRenderer` function to create a simple custom cell renderer.

  • 06. Infinite row model

    Display loads (and loads) of data in AG Grid is pretty efficient, but there comes a time when you want to display an infinite amount of data. You'll learn to use the infinite row model in AG Grid to load and rendering data in chunks as the user scrolls through data in the grid.

Day One Morning/Afternoon

  1. Installing and getting started with AG Grid
    1. Angular Module
    2. Styles and themes
    3. Column Definition
    4. Row Data
  2. Row Sorting
    1. Row Sorting
    2. Sorting Demo
    3. Sorting Exercise
    4. Sorting Order
    5. Multi-row sorting
    6. Sorting Order and Multiple Column Sort Exercise
    7. Default Column Definition
    8. Default Column Definition Exercise
  3. Column Filtering
    1. Text Filtering
    2. Number Filtering
    3. Date Filtering
    4. Date Filtering Comparator
    5. Filtering Exercise
    6. Floating Filter
    7. Floating Filter Exercise
    8. Quick Filter
    9. Quick Filter Exercise
  4. Cell Rendering
    1. The cellRenderer Function
    2. Cell Renderer Exercise
  5. Infinite Row Model
    1. Implementing Infinite Row Model
    2. Infinite Row Model Exercise

Prereqs

Attendees should be familiar with the following technologies:

  • JavaScript and TypeScript.
  • Basics of Angular.

Can’t find the topic you are looking for? Contact Us  to learn about our custom training solutions.

Get Expert Led Training For Your Team
Schedule Get Started with AG Grid Workshop