Plotly Dash中AG Grid表格过小无法自适应全屏问题求助

问题描述 #

在Django集成Plotly Dash的项目中，AG Grid表格显示过短，无法调整尺寸，希望实现自适应全屏显示。尝试过调整aggrid.html、测试Bootstrap类、修改aggrid.py中的布局等多种方法均未解决问题。

相关代码 #

dashboard/dash_apps/aggrid.py

# dashboard/dash_apps/aggrid.py

from dash import html
import dash_ag_grid as dag
import dash_bootstrap_components as dbc
from django_plotly_dash import DjangoDash
from dashboard.views import get_latest_data
from dashboard.config_views.config import column_settings

external_stylesheets = [dbc.themes.BOOTSTRAP]

app = DjangoDash("AGGrid", external_stylesheets=external_stylesheets)

df = get_latest_data()

column_defs = ..

app.layout = (
    dag.AgGrid(
        id="ag-grid",
        columnDefs=column_defs,
        rowData=df.to_dict("records"),
        defaultColDef={
            "filter": True,
            "sortable": True,
            "resizable": True,
        },
        dashGridOptions={
            "domLayout": "autoHeight",
            "pagination": True,  # 启用分页
            "paginationPageSize": 50,
        },  # 设置每页显示50行
    ),
)

dashboard/templates/dashboard/base.html

<!-- dashboard/templates/dashboard/base.html -->
<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>{% block title %}我的Django应用{% endblock %}</title>
        {% load static %}

        <!-- Bootstrap 5 CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
        
        <style>
            html, body {
                height: 100%;
                margin: 0;
            }
            #app {
                height: 100%;
            }
            main {
                height: 100%;
            }
        </style>
    </head>
<body>
    <div id="app" class="container-fluid h-100 d-flex flex-column">
        
        <header class="mb-4">
            <!-- 导航栏 -->
            <nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
                <div class="container-fluid">
                   ....
                </div>
            </nav>
        </header>

        <main class="flex-grow-1">
            {% block content %}
            <!-- 具体内容将插入此处 -->
            {% endblock %}
        </main>

        <footer class="text-center mt-4">
            <p>&copy; 2023 我的Django应用</p>
        </footer>
    </div>

    <!-- jQuery（Bootstrap依赖） -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>

    <!-- Bootstrap Bundle 包含Popper.js -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
</body>
</html>

dashboard/templates/dashboard/aggrid.html

<!-- dashboard/templates/dashboard/aggrid.html -->
{% extends 'dashboard/base.html' %}
{% load plotly_dash %}

{% block title %}
  Dash AG Grid 视图
{% endblock %}

{% block content %}
    {% plotly_app name="AGGrid" %}
{% endblock %}

解决方案 #

修改aggrid.html中的{% plotly_app %}标签，添加height属性，设置为视口高度的百分比（例如85vh），让表格自适应剩余空间：

修改前：

{% plotly_app name="AGGrid" %}

修改后：

{% plotly_app name="AGGrid" height="85vh"%}

内容的提问来源于stack exchange，提问作者coder338