This video is available to students only

Displaying data in the grid

Configuring a grid to display the data

Displaying data in the grid#

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 AG Grid library because the free version is very easy to set up and contains all the functionality we'll need for our purposes.

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. They're good for debugging, but we're trying to make our application user-friendly at this point.

Now we'll add the AG Grid component to the application in order to display the data. We'll need to import the CSS theme files for it as well.

Column definitions#

For the grid's column definitions, we can reuse the fields array by mapping name to field and label to headerName. (The columnDefs definitions 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.)

No discussions yet