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.
For the grid's column definitions, we can reuse the
fields array by mapping
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.)