Getting started with React Data Grid Using Hooks from AG Grid

so in this video we're going to use edgy grid with react we're going to create a very small project with a component that wraps ag grid just to show how it gets started now the first thing i'm going to do because we're starting from scratch is i'm going to npx and create a react app and i will call this getting started with eg grid hooks big name now this will take a little while to get everything going so i will fast forward okay let me go into that directory and add it to my visual studio code in the workspace there we go now let's install edgy grid and the react gui again that will take a little bit of time so fast forward and when this is done i would just start up the project in its default installation and we'll amend it from there so let's start the development server and we're good to go so in my project in my app.js i don't need all this boilerplate so what i'm going to do is i'm just going to replace this div with the cars grid that we're about to create which is going to be a small wrapper around edgy grid to render a grid that with some cars data and i'll import that from the cars grid which we haven't created yet but let's do that now so carsgrid.js so let's start with the imports that we need we need react and i'm going to be using state and i want to import all that from react i'll also need some ag grid so let's add the grid column and ag grid react which is the react gui now i'm using the basic examples from our website so if you later on look through the getting started guide on our website then you see all the css files and import instructions i'm just going through this quickly so here's a sneak peek of the documentation and the documentation goes into this in more detail and explains how to use some of the enterprise features but we're doing a cut down version in this getting started just to walk through the basic steps so i've imported react i've imported the ag grid components that we're going to use and i've added some css to make it all look nicer so what i need to do is i'm going to render a grid so let's add the function that will act as our cars grid and let's make it return nothing except a div just to render something on the screen okay so now we can get started blank screen we're ready to go so what do i want in this div well i need to add an ag grid react component and we will then customize this so i'll need to first of all style it and i'll use the ag theme alpine that we imported and i'll control the size just using some inline css to start with so we want a height of 400 and a width of 600. now we have our most basic grid and it's empty because we haven't given it any data so let's do that now rather than make you watch me type in some data in that constant in an array i'm just going to copy and paste this in so that i have my initial raw data now i will want to render this from state so i will say const row data and we will have the ability to set the raw data and this is going to use the state hook to initially set it from the initial raw data that i just typed in and in order to render this the grid has to know what data to use so we will say grid i want you to use the raw data which is contained in the state now at this point we can see that the grid is no longer trying to load something because we've given the data what we haven't done is tell it how to render it so to do that i'm just going to define the columns so let's define a column for the field which is the make and we should now see the make data in there and if i repeat that for the other two columns which would be the model and the price then we should see our data in the grid so we've created the most basic grid we could imagine and we've done it through declarative definition of the columns and the raw data coming in from a constant we're going to change that over the course of this tutorial but for now we have essentially a table of data so to make it a data grid i want to add some in cell editing some sorting filtering and pagination so let's start with the in cell editing now because it's in cell editing i'm going to define this price column as editable now when this re-renders i have the ability to edit the data in here so no real code change required just a property in here and similarly to make it sortable make the make sortable let's do sortable equals true now we should see that the make column has the ability to sort need of the other ones do because we haven't configured them so we're getting a lot of functionality out of the box with a g grid just by setting some attributes here i can make the model filterable let's see you can filter this true so now my model will have the ability for me to filter out the box no coding required now ideally i would like to make the make and the model and the price sortable and filterable i don't really want to keep adding attributes in here so what i'm going to do is tell the grid to have a default column definition so default call def equals and then it's going to be sortable and it's going to allow filter and if i remove the sortable true fill to true then because we have a default all our columns now inherit that default and they are all sortable and filterable but only the price is editable because we've configured that on the column itself now i think my grids are going to have quite a lot of data so let's add some pagination we do this at the grid level so adjust how the grid pagination is set to true so when it refreshes we now have pagination now in order to take advantage of this we better load in some data so let's do that so we want to use an effect so i'm going to fetch from one of our standard tested urls that you see in many of our examples then when we've loaded that data i want to take the result and i really want that result as json so that the grid can then use that as its raw data and we will set the row data from the state so that the grid automatically loads up and there we go so now we have quite a lot of data and the pagination takes effect which makes more sense as to why you might want to add a filter and all of this is out the box now because we're using react we have to be mindful to make sure that we only load in the data when the component is mounted and the other thing we might want to do is to get rid of the column declarations to make them easier to maintain and put them in an object but i'm going to do that in the next video when we cover optimization but before we go on let me quickly show you this feature that you get with ag grid which is the loading screen so if i remove the data there make the data unassigned when i refresh you can if you blink or don't blink you can see the loading logo come up there because we're loading it in and we get that functionality to tell the user that data is loading into the grid in the background for free and we do that by setting the state to unassigned in the next video we'll use objects to define the columns to see what impact that has and then consider some other ways of optimizing our components that are using a g grid you

Channel: ag-Grid

Views: 1,649

Keywords: ag-grid, javascript data grid, react data grid, ag grid, react data grid hooks, reactjs datagrid, react data table, react grid, react datagrid, reactjs data grid, reactjs datagrid example, react data table component, react data table tutorial, react table json data

Id: VIieyjYQ1KE

Length: 10min 23sec (623 seconds)

Published: Thu Aug 19 2021