AG Grid Blog
  • Demo
  • Documentation
  • Pricing
  • Blog
  • Newsletter
  • |
  • React |
  • How To |
  • Angular |
  • Tutorial |
  • Javascript |
  • Releases |
  • Misc |
  • Vuejs |
  • Testing |

React

We are an enterprise React Data Grid here are tips and tutorials for ReactJS and Redux.

Using Storybook.js with React and AG Grid
React

Using Storybook.js with React and AG Grid

A *Storybook* consists of stories for different components that describe your component’s various states. A *story* can be considered as the atomic unit or the smallest component. You can write a story for a component with different parameters or props and see how your component behaves.

  • External Contributor
  • External Contributor
14 min read
Using AG Grid React UI with Remix.run
React

Using AG Grid React UI with Remix.run

Learn how to use Remix with AG Grid. Thanks to Remix and AG Grid, you’ll have both your frontend and backend ready in no time!

  • External Contributor
  • External Contributor
10 min read
React 18 - Avoiding Use Effect Getting Called Twice
React

React 18 - Avoiding Use Effect Getting Called Twice

React 18 introduced a huge breaking change, when in Strict Mode, all components mount and unmount, then mount again... I've created this pattern to work around it.

  • Niall Crosby
    Niall Crosby
  • Niall Crosby
2 min read
Football Stats Direct Interview
Misc

Football Stats Direct Interview

Viqas Hussain created the FootballStatsDirect.com application. Written in React, using RapidAPI and Firebase. We managed to grab some time with Viqas to talk through the project and see a demo of it in action.

  • Alan Richardson
    Alan Richardson
  • Alan Richardson
  • Viqas Hussain
    Viqas Hussain
  • Viqas Hussain
1 min read
Adaptable Tools Demo and Interview
Misc

Adaptable Tools Demo and Interview

We sat down with Jonny Wolfson, CTO of Adaptable Tools, and he provided a demo overview of Adaptable Tools in action.

  • Alan Richardson
    Alan Richardson
  • Alan Richardson
1 min read
Code Tetris in 200 Lines of Code using React
React

Code Tetris in 200 Lines of Code using React

Writing Tetris is exciting, as it forces you to understand many aspects of a programming language / framework in a very small application.

  • Niall Crosby
    Niall Crosby
  • Niall Crosby
6 min read
Why AG Grid's React Rendering Matters
React

Why AG Grid's React Rendering Matters

A React JavaScript Data Grid that is rendered 100% in React. The Grid does exactly the same thing regardless of which rendering engine is used.

  • Niall Crosby
    Niall Crosby
  • Niall Crosby
4 min read
Free Online Training Courses for  React and Angular with AG Grid
Misc

Free Online Training Courses for React and Angular with AG Grid

We are aware that people have different learning styles so here are the free online training courses that we are aware of.

  • Alan Richardson
    Alan Richardson
  • Alan Richardson
2 min read
Using React Testing Library with AG Grid
Testing

Using React Testing Library with AG Grid

Having written a Podcast Player using AG Grid, we should really add some tests. This post shows how to use Jest and the React Testing Library with AG Grid.

  • Alan Richardson
    Alan Richardson
  • Alan Richardson
12 min read
How to Write a Podcast App Using React and AG Grid
Tutorial

How to Write a Podcast App Using React and AG Grid

In this post we will iteratively create a simple Podcast listening app using React. The main GUI for the app will be AG Grid so you can see how simple it is to get a prototype application up and running, leaning on the React Data Grid to do much of the heavy lifting for us.

  • Alan Richardson
    Alan Richardson
  • Alan Richardson
27 min read
Creating a React Tile Slider Puzzle
React

Creating a React Tile Slider Puzzle

AG Grid's new React Rendering Engine is written 100% in React. To demonstrate the use of custom headers in the new React Rendering Engine we created a simple game to add buttons in the header using a custom header renderer, the game code also demonstrates other customization approaches.

  • Alan Richardson
    Alan Richardson
  • Alan Richardson
10 min read
React UI Overview - 100% React
React

React UI Overview - 100% React

AG Grid's React UI is a rendering engine written in pure React 100% throughout so it is fast and plays well with React dev tools and coding approaches.

  • Alan Richardson
    Alan Richardson
  • Alan Richardson
3 min read
Customising React Data Grid with hooks and functions
React

Customising React Data Grid with hooks and functions

AG Grid allows extensive customisation by creating custom components. In this post we will create custom components for rendering cells, filtering column values, editing cell values.

  • Alan Richardson
    Alan Richardson
  • Alan Richardson
6 min read
Getting Started with React Hooks and React Data Grid in 5 minutes
React

Getting Started with React Hooks and React Data Grid in 5 minutes

In this post we will cover Getting Started using Hooks and how to optimise components which use the React Data Grid.

  • Alan Richardson
    Alan Richardson
  • Alan Richardson
6 min read
React Data Grid Example Projects
Tutorial

React Data Grid Example Projects

This post will provide a quick overview of the React Data Grid example repo with some suggested exercises to act as introductions for developing using AG Grid.

  • Alan Richardson
    Alan Richardson
  • Alan Richardson
6 min read
Standalone React Data Charts
How To

Standalone React Data Charts

In this post I will create a drop in replacement for the existing D3 based Historical Data Chart panel, and instead use the Free AG Grid Standalone Charts library.

  • Alan Richardson
    Alan Richardson
  • Alan Richardson
8 min read
Adding and removing rows and columns in AG Grid with React and Redux Toolkit
How To

Adding and removing rows and columns in AG Grid with React and Redux Toolkit

Learn how to add and remove rows and columns in AG Grid with React and Redux Toolkit. See a sample storing row data and column definitions in a Redux store.

  • Louis Moore
    Louis Moore
  • Louis Moore
6 min read
React Data Grid vs. React Data Table vs. React Grid
Misc

React Data Grid vs. React Data Table vs. React Grid

Grid provides functionality for page layout vs Data Table which provides data rendering and some interactivity vs Data Grid provides rich spreadsheet-like interactivity.

  • Alan Richardson
    Alan Richardson
  • Alan Richardson
13 min read
Switching the localization language in AG Grid
Tutorial

Switching the localization language in AG Grid

Learn how to switch the localization language on the fly in AG Grid, translating the grid UI language, column names and cell values. See the live sample using React.

  • Bam Fard
  • Bam Fard
11 min read
Exporting AG Grid to PDF with pdfMake
Tutorial

Exporting AG Grid to PDF with pdfMake

Learn how to export AG Grid to PDF using the PDF library pdfMake. Get the samples in JavaScript, React, Angular and Vue to integrate this in your projects.

  • Ahmed Gadir
    Ahmed Gadir
  • Ahmed Gadir
9 min read
Full-row editing in ag-Grid committing changes on a button click
How To

Full-row editing in ag-Grid committing changes on a button click

This post shows how to use full-row editing together with buttons to start editing, cancel editing, commit changes or delete the row. See the live samples in JavaScript, Angular, React and Vue.js.

  • Davis Jaunbruns
    Davis Jaunbruns
  • Davis Jaunbruns
5 min read
Refreshing Set Filter items after data update when using Server-side data in ag-Grid
How To

Refreshing Set Filter items after data update when using Server-side data in ag-Grid

Learn how to refresh set filter items after a data update when using server-side row model in ag-Grid. See the live sample code in JavaScript, Angular, React and Vue.JS.

  • Shuheb Ahmed
    Shuheb Ahmed
  • Shuheb Ahmed
6 min read
Styling selected rows and cell ranges in ag-Grid
How To

Styling selected rows and cell ranges in ag-Grid

This post shows how to style selected rows and cell ranges in ag-Grid using plain CSS. This is demonstrated in live samples in JavaScript, Angular, React and Vue.js.

  • Davis Jaunbruns
    Davis Jaunbruns
  • Davis Jaunbruns
5 min read
Using Dynamic Column Definitions in ag-Grid
How To

Using Dynamic Column Definitions in ag-Grid

In this post we'll go over how to set ag-Grid column definitions dynamically based on the columns in your row data. We demonstrate this in live examples in Angular, React, Vue.JS and JavaScript.

  • Ahmed Gadir
    Ahmed Gadir
  • Ahmed Gadir
7 min read
Refresh ag-Grid after a data change with React, Angular, Vue and JS
How To

Refresh ag-Grid after a data change with React, Angular, Vue and JS

This blogpost shows how to refresh ag-Grid after row adding/update/delete in all the popular web frameworks - Angular, React, VueJS.

  • Louis Moore
    Louis Moore
  • Louis Moore
6 min read
Page 1 of 2 [Next Page]
Documentation
  • Getting Started
  • Changelog
  • Pipeline
  • Documentation Archive
Support & Community
  • Stack Overflow
  • License & Pricing
  • Support via Zendesk
The Company
  • About
  • Blog
  • Privacy Policy
  • Cookies Policy
Follow
  • Github
  • Twitter
  • YouTube
  • LinkedIn
  • npm

AG Grid Limited registered in the United Kingdom. Company No. 07318192.

© AG Grid Ltd. 2015-2022