Build an interactive dashboard w/ React, AG Grid & AG Charts
summary
Live coding builds a full financial dashboard using React, AG Grid and AG Charts in about 45 minutes, following 10 steps plus a bonus. It implements currency formatting, custom cell renderers and sparkline cells, a computed P&L column with conditional red/green styling, single-row selection tied to a detailed financial chart, and an integrated treemap generated on first-data-render. Clicking treemap nodes programmatically selects and scrolls the corresponding grid row. The demo runs and updates interactively; code and demo links are provided.
AI-written summary · about
chapters (13)
- 0:00Introduction
- 1:04Change AG Grid column headers
- 2:49Format price as currency
- 5:55Add logo cell renderers
- 8:25Spark lines for price history
- 10:12Add profit/loss column
- 14:03Conditional P&L styling
- 16:51Enable row selection
- 21:48Link grid to financial chart
- 25:17Integrate tree map chart
- 29:07Chart click listeners
- 34:26Summary
- 35:08Q&A
related talks
06mAG Grid's New React Rendering Engine
06mAG Grid's New React Rendering Engine
30mPrototyping Data UI FAST with Ag-Grid & Angular
14mLightning Talk: Visualizing Data Confidently. Integrating React and Tableau Public
12mag-Grid sponsor talk
24mCreating Interactive Data Visualizations for the Web
01h 30mCreating responsive data visualisations
32mD3 and React, Together