将数据从烧瓶路由传递到AG网格表

我有一个Flask Route,其中有一个数据帧,我想将其渲染到AG网格中。不,我不知道如何将这些数据输入表格。如果有人能帮忙,那就太好了。

@blueprint.route('/datatablegrid_data', methods=['GET', 'POST'])
@login_required
def datatablegrid_data():

    data = pd.read_parquet("apps/data/limits.parquet")  # Read data from the parquet file
    # Sort data by specified columns
    data = data[['CMPL_RULE_SK', 'POR_INVESTMENT_TYPE', 'PORTFOLIO', 'KUNDE', 'MANAGER', 'GRENZE', 'RESULT', 'TAGE_GV', 'KOMMENTAR']]
    data = data.sort_values(by='KUNDE')
    # Convert data to JSON format
    json_data = data.to_json(orient='records')
    # Return the JSON response
    return jsonify(json_data)

AG网格是这样的。 我试图将数据传递到我的html模板,其中AG网格正在使用示例data,但当我试图将自己的数据传递到模板时,我无法将其呈现到表中

     <script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>
      <script type="text/javascript">
        // Function to demonstrate calling grid's API to select all rows
        function selectAll() {
          gridOptions.api.selectAll();
        }
    
        // Function to demonstrate calling grid's API to clear row selection
        function clearSelection() {
          gridOptions.api.deselectAll();
        }
    
    const gridOptions = {
      columnDefs: [
        {
          field: "checkbox",
          headerCheckboxSelection: true,
          headerCheckboxSelectionFilteredOnly: true,
          checkboxSelection: true,
          width: 50,
          filter: true, // Enable filtering
          filterParams: {
            valueGetter: function (params) {
              return params.data.checkbox;
            },
          },
          floatingFilterComponentParams: { suppressFilterButton: true },
        },
        { field: "CMPL_RULE_SK" },
        { field: "POR_INVESTMENT_TYPE" },
        { field: "PORTFOLIO", sortable: true, filter: true },
   { field: "KUNDE", sortable: true, filter: true },
   { field: "MANAGER", sortable: true, filter: true },
   { field: "GRENZE", sortable: true, filter: true },
   { field: "RESULT", sortable: true, filter: true },

   { field: "TAGE_GV", sortable: true, filter: true },


      ],
      defaultColDef: { sortable: true, filter: true },
      rowSelection: "multiple",
      animateRows: true,
      onCellClicked: (params) => {
        console.log("Cell was clicked", params);
      },
      getRowStyle: () => null, // Remove custom row style
      sideBar: true,
      suppressMenuHide: true,
    };
    
    const eGridDiv = document.getElementById("myGrid");
    new agGrid.Grid(eGridDiv, gridOptions);
    
    fetch("https://www.ag-grid.com/example-assets/row-data.json")
      .then((response) => response.json())
      .then((data) => {
        gridOptions.api.setRowData(data);
      });
    
      </script>