Good evening folks, I am trying to represent a relatively simple excel document as part of a grid using the plain JavaScript version of AG Grid community. I have a couple functions to get the header row and the data, as below:

def get_excel_data_headers():
    path = Path("/Users/excel_doc.xlsx")
    df = pd.read_excel(path, header=0)
    return df.columns

def get_excel_data():
    path = Path("/Users/excel_doc.xlsx")
    df = pd.read_excel(path, header=0)
    cell = []
    for rowIndex, row in df.iterrows(): #iterate over rows
        for columnIndex, value in row.items():
            #print(value, end="\t")
            cell.append(value)
    return cell

and my views.py

class excel(ListView):#The project detailed view of all submitted info
    model = Project
    template_name = "home/grid_upload.html"
    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context['headers'] = get_excel_data_headers()
        context['row_data'] = get_excel_data()
        return context

However I am unsure how to represent this in the template. I can get the header row to work however I don't know the best approach to add the data as the argument requires the header row to be specified for each row data item but this is set as part of a different for loop, below is my current template code however it docent render correctly and I am lost in the direction to properly implement this,

<script type="text/javascript" charset="utf-8">
    // specify the columns
    const columnDefs = [{% for head in headers %}
    { field: "{{head}}", sortable: true, filter: true },
    {% endfor %}
    ];

    // specify the data
    const rowData = [
    {% for data in row_data %}
    { {{headers}}: "{{row_data}}", {{headers}}: "{{data}}", {{headers}}: {{data}}},
    {% endfor %}
    ];

    // let the grid know which columns and what data to use
    const gridOptions = {
    columnDefs: columnDefs,
    rowData: rowData
    };

    function onRowDataA() {
gridOptions.api.setRowData(rowDataA);
}

// lookup the container we want the Grid to use
const eGridDiv = document.querySelector('#myGrid');

// create the grid passing in the div to use together with the columns & data we want to use
new agGrid.Grid(eGridDiv, gridOptions);

</script>

Any help with this is greatly appreciated