AG Grid Community Updates October 2021
Tags: aggrid
Published: 2021-10-29 12:55:44

---
title: AG Grid Community Updates October 2021
published: true
description: What has happened in and around the world of AG Grid in October 2021? Well... lots.
tags: aggrid
//cover_image: https://direct_url_to_image.jpg
---

What's happened in and around the world of AG Grid in October 2021?

We put most of our blog content over at [blog.ag-grid.com](https://blog.ag-grid.com) and release notifications of content we find useful on our social media accounts.

But I thought I'd summarise some of it in this post to bring the 'good stuff' to a wider audience.

Hope you find this useful.


## Angular Nation

[Angular Nation](https://www.angularnation.net/feed) received some more positive feedback online with [Igor Minar, Team Lead of Angular](https://twitter.com/IgorMinar) promoting the [Angular Nation Patreon Account](https://twitter.com/IgorMinar/status/1453020262618726405).

[Angular Nation](https://www.angularnation.net/feed) is a free online Angular Community with many free events, talks and courses.


## Plunker

[Plunker](https://plnkr.co/) don't create release notes or announce their new features but it's recently had an update to:

- use HTTPS throughout
- make embedding easier

The HTTPS has helped make the embedding faster and avoid any mixed content warning messages. The embedding makes Plunker even faster to load, so if you are looking for different code hosting sites for releasing code online. Remember to give [Plunker](https://plnkr.co/) an evaluation.

## Conferences

The [React Summit compiled a list of talks](https://portal.gitnation.org/contents/watch-the-best-react-talks-from-the-20202021-season) from their 2020/2021 season.

I'm still working through the talks but I found the talk from [Shawn Swyx Wang](https://www.swyx.io/) in explaining some of the fundamental concepts around React.

[Kent C Dodds](https://kentcdodds.com/) talk on Managing React Application State explained React Context very well.

And it was interesting to learn about React on the server with Blitz and Redwood from [Brandon Bayer](https://twitter.com/flybayer)'s talk.

I have yet to listen to the other talks, but there are plenty there that look interesting.

## Community Apps and Examples

Most of AG Grid's customers use AG Grid on commercially sensitive applications and as a result we don't list all of the Fortune 500 customers that use our product, which is why it is great to see community projects using AG Grid. Those we can talk about and promote easily.

### Unit Testing Angular Components

[Guillermo Arellano](https://twitter.com/NomadProgramm3r) demonstrates the use of Karma and Jasmine in this [YouTube video](https://www.youtube.com/watch?v=Ajr6M_Omaic) showing Unit Testing of Angular AG Grid Custom Renderer Components.

There is also [a detailed blog post](https://thenomadprogrammer.com/2021/10/11/how-to-unit-test-a-custom-ag-grid-renderer-component-in-angular-with-karma-and-jasmine/) from Guillermo explaining the approach and showing the code.

- [video](https://www.youtube.com/watch?v=Ajr6M_Omaic)
- [blog post](https://thenomadprogrammer.com/2021/10/11/how-to-unit-test-a-custom-ag-grid-renderer-component-in-angular-with-karma-and-jasmine/)

### Test Data Generation and Table Editing

One of those is a project I created. It started as a simple Markdown and CSV editor, with most of the heavy lifting being carried out by AG Grid. Then I expanded it to cover Gherkin, HTML Table code generation, and in the last release I added Test Data Generation.

It uses RandExp and Faker to generate data, so a simple spec like:

```
name
faker.fake {{name.lastName}}, {{name.firstName}}
desc
faker.lorem.paragraph
collects
faker.hacker.noun
prefers
(Connie|Bob)
```

Can generate data like this:

|name|desc|collects|prefers|
|-----|-----|-----|-----|
|Oberbrunner, Augustine|Dolorem quod consequuntur. Cum consequuntur ut quae exercitationem aperiam inventore ipsa eveniet facilis. Temporibus voluptatum architecto velit esse qui itaque harum fugiat. Voluptatum nostrum dignissimos maiores expedita. Cumque temporibus quo provident ut.|panel|Bob|
|Hamill, Lulu|A quia omnis et qui. Consequatur commodi est. Cupiditate commodi id illum et occaecati vel.|transmitter|Bob|
|Hagenes, Godfrey|Perspiciatis et exercitationem distinctio ipsum. Quasi libero perferendis modi est aperiam recusandae. Aliquam earum ut amet ea rerum dolorem consequatur qui distinctio.|transmitter|Bob|

It remains a CSV and Table editor so the data is easy to re-order and amend.

[Source Code for the Markdown and CSV Table Editor](https://github.com/eviltester/grid-table-editor) and a [Runnable Version on GitPages](https://eviltester.github.io/grid-table-editor/) or [Stackblitz](https://stackblitz.com/edit/grid-table-editor)


### Flight Delays

[Armela Gjoka](https://twitter.com/AgdevT/status/1450160575787450369) showed a preview of a Flight Delay project with [source here](https://github.com/ArmelaGjoka/flight-delays).

I like reading through other people's source doe to see what I can learn, and find it useful to see a project early on when the code is usually smaller

## React Docs

The beta versions of the React Docs have been released:

https://beta.reactjs.org/

I'm particularly interested in reading these because all the examples are now using Hooks rather than Classes.

And... just like [The documentation for AG Grid](https://www.ag-grid.com/react-data-grid/) all of the examples have interactive code samples. The React docs use [codesandbox.io](https://codesandbox.io) we use[Plunker](https://plnkr.co/).

## Podcasts

- WebRush [Building StackBlitz with Eric Simmons](https://webrush.io/episodes/episode-157-building-stackblitz-with-eric-simmons)
    - Discussions of StackBlitz architecture with a lot of [WebAssembly](https://webassembly.org/) and the [ByteCode Alliance](https://bytecodealliance.org/articles/) being an interesting site to learn more.

The [WebRush podcast](https://webrush.io/episodes) is always a good listen.    

Back in episode 149, Proof Trading described their architecture for a high performance trading system. We have a [Summary of the episode with transcribed quotes](https://blog.ag-grid.com/proof-trading-webrush-podcast-using-ag-grid/) on the blog, because Proof Trading use AG Grid as part of their GUI.

- [JavaScript Jabber Podcast - From Open Source to Successful Business with Niall Crosby](https://javascriptjabber.com/aggrid-from-open-source-to-successful-business-ft-niall-crosby-jsj-504)

Niall Crosby, founder of AG Grid, appeared on the JavaScript Jabber podcast Episode 504. Topics discussed included - JavaScript Data Grids, supporting multiple frameworks, DOM performance, Web Components, IOC, developing with no dependencies, turning open source into a profitable business model, typescript and more.

We have [an edited transcript of the podcast episode](https://blog.ag-grid.com/javascript-jabber-podcast/) on the blog.

## On the Blog

We have released quite a few blog posts in October:

- [How to use Tippy to create custom popup menus](https://blog.ag-grid.com/creating-popups-in-ag-grid/)


I find our blog posts educational and I'll probably try and add Tippy into my Test Data and Table Editor to simplify the GUI at little.

- [How to Write a Podcast App Using React and AG Grid](https://blog.ag-grid.com/how-to-write-a-podcast-app-using-react/)

This was a 'mega' post. I was using a Podcast Player as an example to learn AG Grid and I created a version in plain JavaScript. In order to learn React I wanted to convert the app over to React so I kept notes as I was doing the conversion and created the tutorial blog post.

The post also has two videos showing the creation process [Part 1](https://www.youtube.com/watch?v=2TDIWOubvp0) and [Part 2](https://www.youtube.com/watch?v=rsamoG6bD4Y)

- [Advanced Filter in AG Grid using Or And Filtering Conditions](https://blog.ag-grid.com/advanced-filtering-in-ag-grid-using-or-filtering-conditions/)

Shows how to apply OR filtering conditions in a Custom Tool Panel.

- [Using TypeScript to Auto Generate Documentation](https://blog.ag-grid.com/extracting-types-for-code-generation-and-documentation/)

Because our documentation has multiple framework support, the development team have created a whole bunch of ways of auto generating a lot of it. In this post you'l learn how we use JSDoc and ASTs to generate the type definition documentation.

The [Type Definitions are explained in this blog post](https://blog.ag-grid.com/fully-typed-angular-components/).

- [AG Grid Sparlines](https://blog.ag-grid.com/introducing-ag-grid-sparklines/)

The latest version of AG Grid introduces in cell Sparkline charts which is an easy way to add programmer controlled charting in the grid rows.

- [Creating a React Tile Slider Puzzle](https://blog.ag-grid.com/creating-a-react-tile-slider-puzzle/)

Just for fun I created a slider puzzle game using AG Grid, this has buttons in a cell renderer and custom headers to simulate a 3x3 tile puzzle game.