😂5:28 is hilarious, please make a full theme song for Ag Grid. I really enjoyed watching, thanks for making these videos for your users. very clear explanations and definitely not boring like other tutorials I've seen. Looking forward to the other videos in the series :)
The video needs an update. The css file's path is changed, the fetch URL is not working anymore.. And it would be great to see it integrated with Typescript.
Those who are gettimg errors while importing styles, please add - import 'ag-grid-community/styles/ag-grid.css'; import 'ag-grid-community/styles/ag-theme-alpine.css';
@@kartikdolas5988 Thanks! Just to add, we recently released a new Quartz theme, which has replaced Alpine as our default theme. If you want to use the new Quartz theme, you can import it with this line: import "ag-grid-community/styles/ag-theme-quartz.css"; For more info on CSS & themes, take a look at our docs: ag-grid.com/react-data-grid/themes/
Hi, thanks for the nice tutorial. I have a question, ia m using valueFormatter. Example 'active" to "customer active", but when i try to use the filter with thw word "customer" int that column it doesnt work.
Filter works on the underlying value, not the formatted value. But... you might be able to use a custom value Getter to change the value and the filter would work with that. www.ag-grid.com/react-data-grid/value-getters/
Hi Shaun, the marketing team can't answer all technical queries over social media. We recommend stackoverflow tagged with ag-grid stackoverflow.com/questions/tagged/ag-grid and you might need to create a plunker or other online example so people can see your setup. We do have TypeScript examples for all the examples in our docs, and they use plunker so it might be worth look at the source code for some of those.
I followed the same example with ag grid community 30.0.5, ag grid react 30.0.5, react and react Dom as 18.2.0 and react scripts as 5.0.1, the data is populated as per example but the table is not coming up in the browser. I tried to comment the css imports and run it again.. data is being populated but without css. The same is not working with css
npm ERR! While resolving: controlpanel@0.1.0 npm ERR! Found: react@18.0.0 npm ERR! node_modules/react npm ERR! react@"^18.0.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"^16.3.0 || ^17.0.0" from ag-grid-react@27.1.0 npm ERR! node_modules/ag-grid-react npm ERR! ag-grid-react@"*" from the root project this is the error facing when run the command: npm install --save ag-grid-react is there any dependency on the react version
change the React version to 17 in package.json and "npm install". we are aware of this, only came to our attention after React 18 was released, and will be fixing in next weeks AG Grid release.
Thanks for the nice video. Would you or anyone advice how can I refresh minute age column data that is calculated from createdDate field. We want minute age to be refreshed as time goes by. Minute age 1 min and 5 mins later you will see same cell with 6 mins
Those who are gettimg errors while importing styles, please add - import 'ag-grid-community/styles/ag-grid.css'; import 'ag-grid-community/styles/ag-theme-alpine.css';
I am in a hurry as most developers are in a hurry, don't like sticking around and want to be educated fast!! My apologies, one size doesn't necessarily fit all :(
It's a tricky one, as I also want to allow a fair amount of code onto the screen. I was thinking the font is bigger that what an IDE normally presents (I upped the font size in my IDE a lot) so if you go full screen it should be ok???
using same versions as specified in the video but still it give below error Uncaught TypeError: Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element'. at useBrowserResizeObserver (ag-grid-community.cjs.js:40439:1)
The source code is available on github, might be worth comparing your code, including package.json with the github repo code github.com/ag-grid/react-data-grid/tree/main/getting-started-video-tutorial
@@ceolter Thank you I used 16.11.0 version of react and it worked. Great videos by the way. Thanks for all your work. It really helps lot of developers getting started with ag-grid. Thank you.
This tutorial has been replaced by a newer video: th-cam.com/video/6hxbPqziELk/w-d-xo.html
😂5:28 is hilarious, please make a full theme song for Ag Grid. I really enjoyed watching, thanks for making these videos for your users. very clear explanations and definitely not boring like other tutorials I've seen. Looking forward to the other videos in the series :)
We're on it!
This was a quick and amazing introduction that basically gave me everything I needed to know to get started. Cheers :)
You're welcome, glad to assist.
Wow this is the fastest tutorial in the world, I feel like I know everything I need now
thank you
Thanks for this video, was able to get setup in a few mins. Super simple setup.
You're welcome, glad to assist.
Thanks so much for this video, you have saved me a lot of time!
You are welcome, glad you found it useful.
Great work team!
Thank you :)
great video! want videos on infinite scrolling in react ag grid
The video needs an update. The css file's path is changed, the fetch URL is not working anymore.. And it would be great to see it integrated with Typescript.
Those who are gettimg errors while importing styles, please add -
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
Thanks for the feedback - we have a new video currently being recorded/edited which should be out shortly.
@@kartikdolas5988 Thanks! Just to add, we recently released a new Quartz theme, which has replaced Alpine as our default theme. If you want to use the new Quartz theme, you can import it with this line: import "ag-grid-community/styles/ag-theme-quartz.css";
For more info on CSS & themes, take a look at our docs: ag-grid.com/react-data-grid/themes/
please tell me how to delete the exrta blank colom on the right
Hi, thanks for the nice tutorial. I have a question, ia m using valueFormatter. Example 'active" to "customer active", but when i try to use the filter with thw word "customer" int that column it doesnt work.
Filter works on the underlying value, not the formatted value. But... you might be able to use a custom value Getter to change the value and the filter would work with that. www.ag-grid.com/react-data-grid/value-getters/
Don’t stop being awesome
Will try our best!!
How do you use the gridapi correctly with typescript?
I keep getting "Property 'api' does not exist on type 'never'."
Hi Shaun, the marketing team can't answer all technical queries over social media. We recommend stackoverflow tagged with ag-grid stackoverflow.com/questions/tagged/ag-grid and you might need to create a plunker or other online example so people can see your setup. We do have TypeScript examples for all the examples in our docs, and they use plunker so it might be worth look at the source code for some of those.
All our examples in the docs now have TypeScrip option for React. Do this: const gridRef = useRef(null);
@@ceolter Awesome, thanks a lot that helped me.
Great tutorial, thank you.
You're welcome.
Beautiful. Style height 500 and we see the grid
I followed the same example with ag grid community 30.0.5, ag grid react 30.0.5, react and react Dom as 18.2.0 and react scripts as 5.0.1, the data is populated as per example but the table is not coming up in the browser. I tried to comment the css imports and run it again.. data is being populated but without css. The same is not working with css
the files have moved in one of the more recent versions and if you remove the dist from the roots in the imports it works as the tutorial does
npm ERR! While resolving: controlpanel@0.1.0
npm ERR! Found: react@18.0.0
npm ERR! node_modules/react
npm ERR! react@"^18.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.3.0 || ^17.0.0" from ag-grid-react@27.1.0
npm ERR! node_modules/ag-grid-react
npm ERR! ag-grid-react@"*" from the root project
this is the error facing when run the command: npm install --save ag-grid-react
is there any dependency on the react version
change the React version to 17 in package.json and "npm install". we are aware of this, only came to our attention after React 18 was released, and will be fixing in next weeks AG Grid release.
You are in so hurry that it appears you are going to catch a flight and you have no time.
You are lucky I didn't put it all into a TikTok!
Thanks for the nice video.
Would you or anyone advice how can I refresh minute age column data that is calculated from createdDate field. We want minute age to be refreshed as time goes by.
Minute age 1 min and 5 mins later you will see same cell with 6 mins
I would create your own Cell Renderer and do it there. As this sounds like the data isn't changing, just the visual representation of it is changing.
@@agGrid thanks for the help. From cell renderer how can I make sure minute age is updating with time.
I get 'AgGridReact' is not a known element even though AgGridReact is installed and imported
Cool! Thanks
Your welcome.
Those who are gettimg errors while importing styles, please add -
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
Can you help me with some project
If its not t9 much to ask
Why are you in hurry it appears you are going to catch a flight and you have to finish the tutorial somehow
I am in a hurry as most developers are in a hurry, don't like sticking around and want to be educated fast!! My apologies, one size doesn't necessarily fit all :(
Actually your teaching is good. But you can zoom in your screen more so that no one get eye pain
Thanks for your feedback, we'll take this into consideration
It's a tricky one, as I also want to allow a fair amount of code onto the screen. I was thinking the font is bigger that what an IDE normally presents (I upped the font size in my IDE a lot) so if you go full screen it should be ok???
using same versions as specified in the video but still it give below error
Uncaught TypeError: Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element'.
at useBrowserResizeObserver (ag-grid-community.cjs.js:40439:1)
The source code is available on github, might be worth comparing your code, including package.json with the github repo code github.com/ag-grid/react-data-grid/tree/main/getting-started-video-tutorial
Please check you are using latest ag grid version. If yes and still issue, please report via github, or if customer report via our support.
@@ceolter Thank you I used 16.11.0 version of react and it worked. Great videos by the way. Thanks for all your work. It really helps lot of developers getting started with ag-grid. Thank you.