AG Grid Blog
  • Demo
  • Documentation
  • Pricing
  • Blog
  • Newsletter
  • Search
  • |
  • React |
  • How To |
  • Angular |
  • Releases |
  • Tutorial |
  • Misc |
  • Javascript |
  • Vuejs |
  • Testing |
  • Typescript |
  • Building |
  • Design System |

React

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

Using React Hook Form with AG Grid
How To

Using React Hook Form with AG Grid

This post contributed to the AG Grid blog by Funmilayo Olaiya. Forms are commonly used on various online websites, web applications, mobile apps, and the like for information input and collection, data validation,

  • External Contributor
  • External Contributor
11 min read
Using Playwright to Test AG Grid React Apps
Testing

Using Playwright to Test AG Grid React Apps

You’ll learn how to create a simple React application that utilizes AG Grid and validate the functionality of that application at an E2E and component testing level using Playwright.

  • External Contributor
  • External Contributor
11 min read
Using React-Bootstrap and AG Grid
Tutorial

Using React-Bootstrap and AG Grid

In this article, you’ll learn how to integrate React-Bootstrap with AG Grid and see how easy it is to use both tools to build a compelling, user-friendly UI.

  • External Contributor
  • External Contributor
10 min read
How to Optimize a React Application Using Hooks and AG Grid
React

How to Optimize a React Application Using Hooks and AG Grid

In this guide, you’ll learn about some React optimizations. You’ll also learn about some common mistakes that can lead to unnecessary renders, and you’ll see how you can avoid them.

  • External Contributor
  • External Contributor
13 min read
JS Nation and React Summit June 2022 Overview
Misc

JS Nation and React Summit June 2022 Overview

June was a busy month for the AG Grid team as we were sponsoring and presenting at the JS Nation and React Summit conferences in Amsterdam

  • Alan Richardson
    Alan Richardson
  • Alan Richardson
4 min read
Geekle React Global Summit 2022 Overview
React

Geekle React Global Summit 2022 Overview

The Geekle React Global Online Summit took place in April 2022, AG Grid helped sponsor the conference

  • Alan Richardson
    Alan Richardson
  • Alan Richardson
2 min read
Reactathon - React in the Park May 2022
React

Reactathon - React in the Park May 2022

React in the Park took place in San Francisco, on 2 - 5 May 2022. AG Grid sponsored the live stream for the conference.

  • Alan Richardson
    Alan Richardson
  • Alan Richardson
2 min read
Styling React Data Grid With Custom CSS Styles
React

Styling React Data Grid With Custom CSS Styles

AG Grid offers three different approaches for applying Custom CSS styles. These approaches are: Cell / Row Styles, Cell / Row Classes, and Cell / Row Class Rules. This tutorial will cover all three methods, each of which is useful in specific situations.

  • External Contributor
  • External Contributor
9 min read
Headless React Table Compared to AG Grid React Data Grid
React

Headless React Table Compared to AG Grid React Data Grid

When building complex web applications, you will often find yourself needing something more advanced than a simple table. This is where data grids come into play. In this context, a data grid is essentially an interactive table.

  • External Contributor
  • External Contributor
17 min read
Creating a Custom Theme for AG Grid
Tutorial

Creating a Custom Theme for AG Grid

In this article, you’ll learn how to adapt the React Data Grid to match your website’s look and feel by creating a custom theme.

  • External Contributor
  • External Contributor
10 min read
React Data Grid: Use React Hooks to build a Pomodoro App
React

React Data Grid: Use React Hooks to build a Pomodoro App

Learn how to use React Hooks and AG Grid to build a Pomodoro productivity app. See the detailed explanation and get the source code on github.

  • Shuheb Ahmed
    Shuheb Ahmed
  • Shuheb Ahmed
10 min read
Using AG Grid with React and Next.js
React

Using AG Grid with React and Next.js

If you’ve worked with React recently, you’ve likely heard of, a popular React framework with a great developer experience. Next.js combines well with many other technologies, including AG Grid. Discover how they work together.

  • External Contributor
  • External Contributor
9 min read
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
2 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
3 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
Page 1 of 3 [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-2023