How to Build a Data Table in React With AG Grid

[00:00 - 00:14] To display the data we retrieved from the server in a grid, we'll need to add a couple of dependencies. We'll use the AGGrid library because the free version is very easy to set up and contains all the functionality we'll need for our purposes.

[00:15 - 00:45] Let's go back to our terminal and in the client folder, we're going to npm install AGGrid community and AGGrid React. Well, that's running. Before we add our grid to the page, you may want to remove the pre tags with the SQL and JSON representations of our query from the app.tsx file.

[00:46 - 01:03] They're good for debugging, but we're trying to make our application user- friendly at this point. So we can take out this value processor because the only place it is used is here in the pre tags, which we are removing.

[01:04 - 01:24] And save that. Let's go back to our terminal and those are installed. Good. Now we'll add the AGGrid component to the application in order to display the data. We'll need to import the CSS theme files for it as well.

[01:25 - 02:57] So we can remove format query as well. And we need to import from AGGrid React, AGGrid React. And then we'll also import the CSS theme files. So import AGGrid community/dist /styles/ag-grid.css And also the theme file, AGthemeAlpine.css And then down here below our get data button, we're going to add a div with class name of AGthemeAlpine and style with height of 400 and width of 100%.

[02:58 - 03:39] And that's going to wrap the AGGrid component. The column-deafs are going to equal our column-deafs object, which we'll define here in a second. The row data is going to equal our raw data state variable. And we need one more prop, which is press property names check, because we're going to have more properties on our column-deafs than AGGrid is aware of.

[03:40 - 04:00] So we're going to add that off and save it. For the grid's column definitions, we can reuse the fields array by mapping name to field and label to header name . The column-deafs definition can go outside the scope of the app function, since they will only be defined once and don't need to be redefined on every render.

[04:01 - 05:00] So we're going to add const column-deafs, and that's going to equal the fields array mapped to return an object that spreads the original field, but also maps field to f.name and header name to f.label. Build and view the application again to make sure everything is working. So save that, go to our terminal and npm run build, and that should build for us in just a second.

[05:01 - 05:39] Once it's done, we'll go see if everything is working in the browser, and if we 're getting our data in the grid. And that should be done just now. There we go. Let's go back to the browser, refresh, and add a rule.

[05:40 - 06:05] Order ID is greater than zero, and get data. And you can see that our data is showing up in the grid. Looks like we're missing one of our CSS files. So we'll go back to Visual Studio Code and fix that.

[06:06 - 06:17] Maybe I've got my class name wrong. Yep, there we go. Okay, we'll fix that in just a little bit, rebuild it in just a little bit.

[06:18 - 06:42] Let's make the data look a little nicer by adding some AG grid specific configurations to the fields array. First, add a cell renderer to the order date and ship date fields. So in fields .ts, we want to add a date cell renderer function for the date cells.

[06:43 - 07:12] So we're going to start by declaring date cell renderer equals a function that takes an object that has a value. And we can define this as I cell renderer params. We can get that from AG grid community.

[07:13 - 07:33] And that's going to return. If we have a value, then format from date, Evans parse ISO from date, Evans. The value.

[07:34 - 07:50] And we're going to format that as the ISO 8601 format, which is Y Y Y dash capital M M dash D D. Close off the parentheses. Otherwise, we'll just return null.

[07:51 - 07:58] Okay. Let me see if I can.

[07:59 - 08:10] There we go. Import that from AG grid community. And then for order date and sales date.

[08:11 - 08:24] Or sorry, order date and ship date. We're going to define the cell renderer as date cell renderer.

[08:25 - 08:32] Let's save that. Next, add type right aligned to all the numeric fields.

[08:33 - 08:44] So we can select that by finding input type number. And I'm going to hit command D to select the next.

[08:45 - 08:56] The next instance of the selected text. And add type right aligned.

[08:57 - 09:08] And save that. For the order priority field, we can use the ref data attribute to decode the priorities from a single letter to the full description.

[09:09 - 09:30] So somewhere after the priorities const, let's define const priorities. And that's going to be a record with keys of type string and values of type string.

[09:31 - 09:41] And it's going to initially just be an empty object. And then for priorities, we're going to loop through them.

[09:42 - 10:03] So for each priority, we're going to set the priorities ref data. Property of p.name equal to p.label.

[10:04 - 10:19] All right, and now we need to use priorities ref data here as the ref data. For order priority.

[10:20 - 10:27] Save that. Let's build the application again.

[10:28 - 10:46] And hopefully this time our CSS files will have been properly applied. And we'll be able to see the ref data attributes for order priority and the numbers right aligned.

[10:47 - 10:51] In the grid. Okay, that's done.

[10:52 - 11:08] So let's go back to our application and refresh and looks like our CSS is properly applied. So if ordering ID is greater than zero, just get data.

[11:09 - 11:20] And there it is. So now you can see our order priority has the word low, medium, high or critical, instead of just the letter L in H or C.

[11:21 - 11:27] And our numbers are right aligned. So order ID is right aligned.

[11:28 - 11:36] Order date is a proper date string, so ship date. Everything looks good.