Question

Technologies:

javascript

Tolerim

21 hours ago

How can I transfer information from a Flask route to an AG Grid table?

My Flask Route contains a Dataframe that I want to render into an AG Grid. However, I'm unsure of how to get the data into the table. I would appreciate any assistance in this regard.

@blueprint.route('/datatablegrid_data', methods=['GET', 'POST'])
@login_required
def datatablegrid_data():
    # Read data from the parquet file and sort it by specified columns
    data = pd.readparquet("apps/data/limits.parquet")[['CMPLRULESK', 'PORINVESTMENTTYPE', 'PORTFOLIO', 'KUNDE', 'MANAGER', 'GRENZE', 'RESULT', 'TAGEGV', 'KOMMENTAR']].sort_values(by='KUNDE')
    # Convert data to JSON format
    jsondata = data.tojson(orient='records')
    # Return JSON response
    return jsonify(json_data)

Here is a sample of the AG GRID, which I'm attempting to use to display my 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 select all rows
    function selectAll() {
      gridOptions.api.selectAll();
    }

    // Function to clear row selection
    function clearSelection() {
      gridOptions.api.deselectAll();
    }

    const gridOptions = {
      // Set column definitions
      columnDefs: [
        {
          field: "checkbox",
          headerCheckboxSelection: true,
          headerCheckboxSelectionFilteredOnly: true,
          checkboxSelection: true,
          width: 50,
          // Enable filtering
          filter: true,
          filterParams: {
            valueGetter: function (params) {
              return params.data.checkbox;
            },
          },
          // Hide filter button
          floatingFilterComponentParams: { suppressFilterButton: true },
        },
        { field: "CMPLRULESK" },
        { field: "PORINVESTMENTTYPE" },
        { 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 },
      // Enable multiple row selection
      rowSelection: "multiple",
      // Enable animation
      animateRows: true,
      // Log cell clicks
      onCellClicked: (params) => {
        console.log("Cell was clicked", params);
      },
      // Remove custom row style
      getRowStyle: () => null,
      // Enable side bar
      sideBar: true,
      // Prevent menu from hiding
      suppressMenuHide: true,
    };

    const eGridDiv = document.getElementById("myGrid");
    new agGrid.Grid(eGridDiv, gridOptions);

    // Load example data
    fetch("https://www.ag-grid.com/example-assets/row-data.json")
      .then((response) => response.json())
      .then((data) => {
        gridOptions.api.setRowData(data);
      });

  </script>

Answers(1)

Accepted Answer

To render your own data into the AG Grid, you just need to update the setRowData method with your JSON data instead of the example data provided in the fetch call. Assuming that you are passing the JSON response from your Flask route as a variable called json_data to your HTML template, you can update your script as follows:

<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);

  const jsonData = JSON.parse('{{ json_data|tojson|safe }}'); // Parse JSON data passed from Flask
  gridOptions.api.setRowData(jsonData); // Set JSON data to AG Grid rows

</script>

In this example, we are using the JSON.parse() method to parse the json_data variable passed from Flask into a JSON object that the setRowData() method can use to populate the AG Grid. We then pass this JSON object to setRowData() method to render your data into the table.