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.

npm i ag-grid-community ag-grid-react

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.

-  import valueProcessor from "./valueProcessor";

-  <pre>{formatQuery(query, { format: "sql", valueProcessor })}</pre>

-  <pre>{formatQuery(query, "json")}</pre>

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.

import { AgGridReact } from "ag-grid-react";

// import "ag-grid-community/dist/styles/ag-grid.css";

// import "ag-grid-community/dist/styles/ag-theme-alpine.css";

      <button onClick={getData}>Get data</button>

      <div className="ag-theme-alpine" style={{ height: 400, width: "100%" }}>

        <AgGridReact

          columnDefs={columnDefs}

          rowData={rawData}

          suppressPropertyNamesCheck

        />

      </div>

Column definitions#