如何让 Dash Ag-Grid 列更宽？

Question

我正在 Python Dash Ag-Grid 中制作一个表格，但我似乎无法使列更宽。我右边有很多额外的空间，我认为

columnSize=auto-size

或

columnSize=sizeToFit

会让桌子填满整个空间。

这是

columnDefs

的专栏：

        {
            "field": "description",
            "headerName": "Part Description",
            "headerTooltip": "More information about the part",
            "wrapText": True,
            "autoHeight": True,
            "cellDataType": "text",
            "sortable": True,
            "resizable": True,
            "filter": True,
            # note my attempts at setting width params below:
            "minWidth": 100,
            "width": 180,
            "maxWidth": 400,
        },

这是 AgGrid 本身：

AgGrid(
    id="inventory_ag_grid",
    rowData=df.to_dict("records"),
    columnDefs=get_inventory_columns(df=df),
    # Default theme is "ag-theme-quartz"
    className="ag-theme-quartz",
    dashGridOptions={
        # allow the grid to auto-size its height to fit rows
        # "domLayout": "autoHeight"
        # Default tooltip show delay is 2000 ms (2 seconds)
        "tooltipShowDelay": 100,
        "animateRows": True,
        "pagination": True,
        "skipHeaderOnAutoSize": True,
    },
    # 80vh is 80% of the viewport height
    style={
        "height": "80vh",
        "width": "100%",
    },
    # https://dash.plotly.com/dash-ag-grid/column-sizing
    columnSize="sizeToFit",
    # columnSize="autoSize",
    # columnSizeOptions={
    #     "defaultMinWidth": 100,
    #     # "columnLimits": [{"key": "description", "maxWidth": "30%"}],
    # },
    defaultColDef={"resizable": True},
    getRowStyle={
        "styleConditions": [
            {
                # Set every 2nd row to have a background color
                "condition": "params.rowIndex % 2 === 0",
                "style": {
                    "backgroundColor": "rgba(0, 0, 0, 0.05)",
                },
            },
        ]
    },
)

文档： https://dash.plotly.com/dash-ag-grid/column-sizing

这是一个可重现的示例：

import dash
import pandas as pd
from dash import html
from dash_ag_grid import AgGrid

# Sample DataFrame
df = pd.DataFrame(
    {
        "id": [1, 2, 3],
        "description": [
            "Short description",
            "Medium description with a bit more text",
            "Long description with a lot of text",
        ],
    }
)

# Dash app
app = dash.Dash(__name__)

app.layout = html.Div(
    [
        html.H1("Ag-Grid Example"),
        AgGrid(
            id="inventory_ag_grid",
            columnDefs=[
                {"field": "id", "headerName": "ID", "maxWidth": 400,},
                {
                    "field": "description",
                    "headerName": "Part Description",
                    "headerTooltip": "More information about the part",
                    "wrapText": True,
                    "autoHeight": True,
                    "cellDataType": "text",
                    "sortable": True,
                    "resizable": True,
                    "filter": True,
                    "minWidth": 100,
                    "width": 180,
                    "maxWidth": 800,
                },
            ],
            rowData=df.to_dict("records"),
            # Default theme is "ag-theme-alpine"
            className="ag-theme-alpine",
            style={
                "height": "500px",
                "width": "100%",
            },
            columnSize="sizeToFit",
            defaultColDef={"resizable": True},
        ),
    ]
)

if __name__ == "__main__":
    app.run_server(debug=True)

Answer 1

我找到了解决方案。

在生产中，我实际上是在回调中更新“rowData”和“columnDefs”。由于运行“自动调整大小”时它们不可用，因此它实际上不起作用。需要在链式回调中设置“rowData”和“columnDefs”之后设置“columnSize”。

这有效：

    @dash_app.callback(
        Output("inventory_ag_grid", "columnSize"),
        Input("inventory_ag_grid", "columnDefs"),
        prevent_initial_call=True,
    )
    def set_column_size_after_columnDefs_and_rowData(_):
        """Must set the column size after the columnDefs and rowData; otherwise it won't work!"""
        # autoSize fits the column width to its content
        return "autoSize"

我在另一个问题中找到了解决方案：

https://community.plotly.com/t/how-does-columnsize-autosize-work-when-aggrid-dag-values-are-set-with-a-callback/74798