React Data Grid

In this video, Niall Crosby, the CEO and creator of AG Grid, walks you through the process of installing the free open-source community edition of AG Grid and using it with React to create a basic grid. We'll show you how to display data, enable features to work with this data, such as filtering, editing and sorting, as well as how to style the grid, either via themes or custom CSS.

00:00 Introduction
00:16 Basic setup
02:22 Mapping values
03:31 Formatting text
03:48 Cell components
04:30 Resizing columns
04:50 Default column definitions
05:12 Filtering
06:21 Editing
06:53 Row selection
07:22 Pagination
07:55 Using & Customising Themes
10:00 Row & Cell Styles

This video is a quick start tutorial which follows the React Data Grid tutorial in our documentation:

AG Grid works with React, Angular, Vue, and JavaScript. Available as a free community edition and commercially as an Enterprise product (full support and more features).

This is part of a series of video tutorials showing how to get started with AG Grid and React. All videos are available in a playlist:

[shahrukhkarim]

My company uses ag grid enterprise addition for almost all the components, thanks for the videos

[manelmartinez]

Hello. Thanks for your explanation. One question: when the grid es editable, if we make an edition to any field, can it also change in the database? Or it will just change the view of the grid on that moment and when i refresh I will get my data value?
I’m starting to learn.

[michaelpukmel]

We will be using agGrid in future projects. I installed the community version to learn at home to get a leg up before development starts. As expected, making a few rounds before getting react to display a grid. Stuck on this error 'Can't import the named export 'AgPromise' from non EcmaScript module (only default export is available)" npm -v 6.14.17, node -v 16.13. After npm install "ag-grid-community": "^31.3.2", . Could you point me to how to solve the AgPromise error? Im assuming I have agGrid version issues. Thanks.

[maxmurakami-moses]

Does it work with next.js? I tried follow the documentation and tutorials, but can't get it seem to work with next.js