Showing data on an ag-grid using Flask – Blancer.com Tutorials and projects

I’m a newbie at this and would appreciate some guidance. I’m trying to show some data from Python in an ag-grid on HTML, using Flask and JS, but don’t seem to getting anywhere. Could someone please help me ?

This is the Python code with the rowData that I want to show in an ag-grid:

from flask import Flask, render_template, request
import pandas as pd

app = Flask(__name__)

@app.route('/')
def settings():
    rowData = [{ make: "Toyota", model: "Celica", price: 35000 },
    { make: "Ford", model: "Mondeo", price: 32000 },
    { make: "Porsche", model: "Boxter", price: 72000 }]

    return render_template('settings.html', rowData=rowData)

I’ve put the ag-grid into a JS function and wanted to call it from the HTML:

function myFunc(rowData) {
      
     const columnDefs = [
        { field: "make" },
        { field: "model" },
        { field: "price" }
       ];

      // let the grid know which columns and what data to use
      const gridOptions = {
        columnDefs: columnDefs,
        rowData: rowData
      };
      
      // setup the grid after the page has finished loading
      document.addEventListener('DOMContentLoaded', () => {
          const gridDiv = document.querySelector('#myGrid');
          new agGrid.Grid(gridDiv, gridOptions);
      });
}

The HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Ag-Grid Basic Example</title>
    <script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.js"></script>
    <script src="app.js" type="text/javascript">
        myVar = myFunc({{rowData|tojson}})
    </script>
</head>
<body>
    <div id="myGrid" style="height: 200px; width:500px;" class="ag-theme-alpine"></div>
</body>
</html>