Showcase Grid Examples and Applications
Tags: tutorial
Published: 2021-11-04 10:42:17

---
title: Showcase Grid Examples and Applications
published: true
date: 2021-06-29 10:09:02 UTC
tags: Tutorial
canonical_url: https://blog.ag-grid.com/showcase/
---

 ![Showcase Grid Examples and Applications](https://blog.ag-grid.com/content/images/2021/06/showcase.png)

A small selection of sample applications and examples for AG Grid. Some created internally and some public examples found in the wild. All have live demos you can play with to see AG Grid in action.


## Example Grids


This sample of grid examples from our site and [documentation](https://ag-grid.com/javascript-grid/) often show more features than are required in a live grid, but are useful for exploring the capabilities.


### The Kitchen Sink Demo

![Showcase Grid Examples and Applications](https://blog.ag-grid.com/content/images/2021/06/AG-Grid--Demo-of-high-performance-datagrid-2021-06-28-at-3.40.22-pm.jpg)



The [main example](https://www.ag-grid.com/example.php) used on the AG Grid site. It has as many features as possible activated to demonstrate the enterprise features: embedded charts, filtering, Excel and CSV export, custom menu items, pivot, custom cell renderers, quick filter, themes.

- [ag-grid.com/example.php](https://www.ag-grid.com/example.php)

### The First Example

![Showcase Grid Examples and Applications](https://blog.ag-grid.com/content/images/2021/06/AG-Grid--High-Performance-React-Grid--Angular-Grid--JavaScript-Grid-2021-06-28-at-3.54.09-pm.jpg)



The first example on our website shows custom rendering of cells, row selection, column spanning in the header, sorting, filtering and other basic functions. We even hid an easter egg, view the page at less than 767 pixels and see what happens.

- [ag-grid.com](https://ag-grid.com)

### Application Created Integrated Charts

![Showcase Grid Examples and Applications](https://blog.ag-grid.com/content/images/2021/06/application-created-charts.gif)



This example is also on our home page, but the [version in the documentation](https://www.ag-grid.com/javascript-grid/integrated-charts/#example-application-created-charts) for charts is editable so you can play with it and see how it works. The predefined chart in the example is updating at the same time as the data in the grid updates.

- [ag-grid.com/javascript-grid/integrated-charts/#example-application-created-charts](https://ag-grid.com/javascript-grid/integrated-charts/#example-application-created-charts)

### A Dashboard

![Showcase Grid Examples and Applications](https://blog.ag-grid.com/content/images/2021/06/JavaScript-example-2021-06-28-at-4.01.41-pm.jpg)



We created three dashboard examples in the [Integrated Charting documentation](https://www.ag-grid.com/javascript-grid/integrated-charts-cross-filtering/). The thumbnail highlights the Sales Dashboard example to provide an demo of the type of application page that might be present in an admin interface. Because we've linked to the documentation, you can edit the example and see how it works.

- [See it in action and experiment](https://www.ag-grid.com/javascript-grid/integrated-charts-cross-filtering/#example-sales-dashboard2)

### Third Party Library as Embedded Cell Renderer

![Showcase Grid Examples and Applications](https://blog.ag-grid.com/content/images/2021/06/JavaScript-example-2021-06-28-at-4.06.17-pm.jpg)



Even though we have our own charting library, we still support [3rd party libraries](https://www.ag-grid.com/javascript-grid/third-party-charting/) as custom renderers. You can add pretty much any library and use it to create the cell contents. The example chosen uses Sparklines for simple cell based charts.

- [See it in action and play with the example in the documentation](https://www.ag-grid.com/javascript-grid/third-party-charting/#example-inline-graphs)

### Standalone Charts Explorer

![Showcase Grid Examples and Applications](https://blog.ag-grid.com/content/images/2021/06/charts-explorer.gif)



Our own chart library has a lot of options and we have a [separate gallery page](https://www.ag-grid.com/javascript-charts/overview/) in the documentation just for the chart library. Rather than showcase the gallery we are using the [Charts API Explorer](https://www.ag-grid.com/javascript-charts/api-explorer/), and interactive page where you can amend the customisation and create different charts dynamically.

- [https://www.ag-grid.com/javascript-charts/api-explorer/](https://www.ag-grid.com/javascript-charts/api-explorer/)

## Blog Example Applications

Some of our blog posts have fairly complicated examples to support them, usually in the tutorials category. We've cherry picked a few below. Since they come with full source code you can expand them to add the missing features which is a great way to learn to work with existing grid application code.

### Holiday Tracking App

![Showcase Grid Examples and Applications](https://blog.ag-grid.com/content/images/2021/06/AgGridHolidayApp-2021-06-28-at-4.20.29-pm.jpg)



The Holiday Tracking App from [Shuheb](https://blog.ag-grid.com/author/shuheb/) in this [3rd Party DatePickers blog post](https://blog.ag-grid.com/using-third-party-datepickers-in-ag-grid/) doesn't just show 3rd party DatePickers, it also has Custom Cell Rendering on the Status and "Actions" field. Suggested improvements to try and implement are 'clear' the holidays to start a new year, and storing the holiday status to local storage.

- [StackBlitz hosted example](https://stackblitz.com/edit/ag-grid-holiday-app)
- [Github Source (Angular)](https://github.com/shuheb/ag-grid-holiday-app)

### TODO App

![Showcase Grid Examples and Applications](https://blog.ag-grid.com/content/images/2021/06/ag-grid-todo-list-react-typescript.stackblitz.io-2021-06-28-at-4.33.01-pm.jpg)



Putting to one side any discussion of [Ahmed's](https://blog.ag-grid.com/author/ahmed/) chosen colour scheme, this Todo App written for the "[Renderers as Editors](https://blog.ag-grid.com/take-full-control-of-editing-in-ag-grid/)" blog post is pretty good starting point for a todo app. Suggested next steps when playing with the code are: add local storage, filtering on done/not done, highlighting over-due tasks.

- [StackBlitz hosted example](https://stackblitz.com/edit/ag-grid-todo-list-react-typescript)
- [Github Repo (React)](https://github.com/AhmedAGadir/ag-grid-todo-list-react-typescript)

## 3rd Party Public Examples

### Flight Fuel Consumption Tables

![Showcase Grid Examples and Applications](https://blog.ag-grid.com/content/images/2021/06/---Flight-Fuel-Consumption-Table-2021-06-28-at-4.40.16-pm.jpg)



The [Flight Fuel Consumptions Tables](https://despouy.ca/flight-fuel-table/) application shows up to date information of recent flights and their associated fuel consumption. Created by [Pedro Despouy](https://despouy.ca/) to bypass the 2 year delay in official Canadian emissions reporting. AG Grid is used to render the data and provide out of the box sorting and filter. Pedro has added custom cell rendering, data loading from API and 'on click' display of data in the text view.

- [Use the Flight Fuel Consumption Tables App](https://despouy.ca/flight-fuel-table/)

### Unavco Network Monitoring Map

![Showcase Grid Examples and Applications](https://blog.ag-grid.com/content/images/2021/06/UNAVCO-Network-Monitoring-Map-2021-06-28-at-4.50.53-pm.jpg)



[Unavco](https://www.unavco.org/) use AG Grid a part of their [public Network Monitoring application](https://www.unavco.org/instrumentation/networks/map/map.html). Combining a linked map view and grid view with custom cell renderers to make the data easy to understand at a glance and to click through for more information.

- [Use the application on the Unavco Site here](https://www.unavco.org/instrumentation/networks/map/map.html)

* * *

_If you know of any public applications, or have written an application using AG Grid that we might be able to showcase then let us know [info@ag-grid.com](mailto:info@ag-grid.com)_