Configuring data grid columns using React state and AG Grid API

In this video Niall Crosby explains three different ways to control the column state at runtime in AG Grid from React. By amending the column definitions, using the column state API method, and using the column API.

- 00:00 Starting Code with useMemo
- 00:40 state controlled column definitions
- 01:46 Hiding column definitions
- 02:51 Column Width and State
- 06:12 State Attributes
- 07:10 null vs undefined
- 09:48 Column Order
- 10:50 Column State API
- 18:30 Row Grouping
- 20:00 Column APIs
- 21:19 Summary

This video is part of a series of videos showing how to get started with AG Grid and React.

All videos are available in a playlist:

Source code for all videos is available on Github:

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).

[peterhpchen]

In react Hook AG-GRID, How to get the all row data after user finished editing row data?

[jessicajass]

I have a question regarding saving the column state in local storage in Angular 14

[gaganpreetsingh]

Hello, I have a quick question. If I am updating the value in the cell, by using editable:true property in column defs. Just by providing the column Id, will the grid retain the state(edited value in this case)?

In short, how can I preserve my edited cell value, in between components re rendering, without using any react's state management techniques. Is there any out of the box solution provided by ag grid?

[kenanyildiz]

The problem using columnState api is limited. All I want to do is to change `editable` state after some time, but applyColumnState does not get editable as params. The only way archiving this is to use setColumnDefs and pass editable: newEditable. Is there any other way of doing this? I do not want to update react state, can cause performance problem.

[mahmoudvega]

I have a question about localization, when I switch the language of the app the columns dont receive the localized header name. I used useMemo and set the language as a dependency so columns are rerendered when language is changed. However, the initial loaded header names remain the same. So, what can be causing columns not to switch to the localized language? does using value formatter with field require colId too?

[hut_fire]

Hey, Ive got question. I have applied a class to an edited cell but because of virtualization, some of the edited cell loose the applied class as I scroll horizontally or vertically. The question is how do i maintain the class/style being applied to edited cell with virtualization on ?

this is how I apply it:

const defaultColDef = useMemo<ColDef>(() => {
return {
resizable: true,
headerComponent: "customHeader",
onCellValueChanged: params => {
params.colDef.cellClassRules = {
"dirty-cell": value => {
return value.rowIndex.toString() === params.node?.id;
}
};
params.api.refreshCells({
force: true,
columns: [params.column.getId()],
rowNodes: [params.node!]
});
}
};
}, []);

Hope to hear from ag grid dev itself soon ! thanks !

[elizabethmullowney]

Hey! First of all let me say that Niall is an awesome presenter and makes these videos fun to watch...it looks like as of today 3/1/24, the columnAPI is now deprecated for AGGrid and we should be using GridAPI to access that functionality previously provided by columnAPI. Do I understand that correctly, and if so, is there a video out there for column methods like the ones shown here being used with the gridAPI. Thanks so much for any help you can provide!

[LukiausdemKaff]

unfortunately youtube was always deleting my comment due to a link to your website. I have a question regarding the row groups. If you go on your documentation to Group & Pivot --> Aggregation. In this example I made the cells editable. However when I then chang a value it decounts the old one from the sum. If add a higher value it does not add up in the sum. Do you know how to work around this issue? Thanks in advance and kind regards
P.S.: Row grouping is a really nice function that you have. If you one day can make a video about row grouping it would be really nice.