
## 2-hour Workshop

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. Sorting Demo
   2. Sorting Exercise
   3. Sorting Order
   4. Multi-row sorting
   5. Sorting Order and Multiple Column Sort Exercise
3. Default Column Definition
   1. Default Column Definition Exercise
   2. Column Filtering
4. Text Filtering
   1. Number Filtering
   2. Date Filtering
   3. Date Filtering Comparator
   4. Filtering Exercise
5. Cell Rendering
   1. The `cellRenderer` Function
   2. Cell Renderer Exercise

## Prereqs

Attendees should be familiar with the following technologies:

- JavaScript and TypeScript.


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.

Install and get started quickly with AG Grid

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.

Scaffold column definitions with ease

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.

Configure row sorting

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.

Setup column filtering

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.

Build custom cell renderers

The Best JavaScript Grid in the World


## 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.


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.

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.

Infinite row model

Get Started with AG Grid


## Day One Morning/Afternoon

1. NgRx + AG Grid for immutable data
   1. Advantages of immutable data
   2. Requirements for implementing immutable data
   3. Implementing immutable data with NgRx
2. Styling AG Grid
   1. Cell Styling
   2. Row Styling
   3. Theming
3. Custom Angular Components in AG Grid
   1. Registering components
   2. Component interfaces
   3. Cell renderer component
   4. Floating filter component
   5. Header component
   6. Editor component

## Prereqs

Attendees should be familiar with the following technologies:

- JavaScript and TypeScript.
- Basics of Angular.
- Basics of AG Grid.


Pairing up NgRx with Angular and NgRx is a perfect match for high-performant rendering of immutable data in AG Grid. You'll learn how to use NgRx and immutable data with AG Grid.

Efficiently render immutable data in AG Grid

AG Grid ships with default styling and themes that are well-suited for some application, but it's likely that your organization and users expect a branded experience. You'll learn how to style cells, rows, and create themes for AG Grid that are just right for you.

Style AG Grid just right

After learning how to register custom framework component with AG Grid, you'll learn the basic interfaces that must be met for building custom components. Then, you'll learn how to build a custom floating filter component with AG Grid and Angular.

Build a floating filter custom component

Next, you'll build a custom header component to display in AG Grid.

Build a header custom component

Finally, you'll build a custom date editor component. Sure, AG Grid has a date editor, but it's not exactly user friendly since it uses the browser's provided date input. We'll use Angular Material's date picker to build a fancy date editor for AG Grid.

Expert Led AG Grid Workshops

The Best JavaScript Grid in the World

Get Started with AG Grid

Advanced Usage of AG Grid

Get Expert Led Training For Your Team