如何解决Python中Dash AG Grid表格圆角设置无效问题？

问题描述 #

尝试通过rowClassRules和rowStyle为Dash AG Grid表格设置圆角，但样式未生效，现有代码如下：

from dash import Dash,html,dcc,Input,Output
import dash_ag_grid as dag
import pandas as pd
import plotly.express as px

df = px.data.tips()
rowClassRules = {
   "rounded": True,
}
rowStyle={
  "border-radius": "10px"
}
table = dag.AgGrid(
    id = "my-table",
    rowData=df.to_dict('records'),
    defaultColDef={'resizable':True,"sortable":True,'filter':True,"minWidth":115},
    columnDefs=[{'field':i} for i in df.columns],
    columnSize="sizeToFit",
    dashGridOptions={"pagination": True, "paginationPageSize":10},
    className="ag-theme-alpine color-fonts ",
    rowClassRules=rowClassRules,
     rowStyle=rowStyle,
)

app = Dash(__name__)
app.layout = html.Div([table])

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

解决思路与修改方案 #

直接通过rowStyle或rowClassRules设置行圆角不生效的核心原因是：AG Grid的默认主题会覆盖行级样式，且表格容器未设置溢出隐藏，内部元素的圆角会被容器直角遮挡。需通过自定义CSS针对表格容器及关键组件设置样式：

修改步骤 #

1. 给表格添加自定义CSS类（如rounded-table），用于定位样式目标
2. 添加自定义CSS规则，为表格容器设置圆角与溢出隐藏，同时可优化表头、分页栏的圆角匹配

修改后完整代码 #

from dash import Dash, html, dcc, Input, Output
import dash_ag_grid as dag
import pandas as pd
import plotly.express as px

df = px.data.tips()

table = dag.AgGrid(
    id="my-table",
    rowData=df.to_dict('records'),
    defaultColDef={'resizable': True, "sortable": True, 'filter': True, "minWidth": 115},
    columnDefs=[{'field': i} for i in df.columns],
    columnSize="sizeToFit",
    dashGridOptions={"pagination": True, "paginationPageSize": 10},
    # 添加自定义类用于样式控制
    className="ag-theme-alpine color-fonts rounded-table",
)

app = Dash(__name__)
app.layout = html.Div([
    # 插入自定义CSS样式
    html.Style("""
        /* 表格容器设置圆角与溢出隐藏 */
        .rounded-table .ag-root {
            border-radius: 10px;
            overflow: hidden;
            /* 可选：添加表格边框增强视觉效果 */
            border: 1px solid #e0e0e0;
        }
        /* 表头顶部圆角匹配 */
        .rounded-table .ag-header {
            border-radius: 10px 10px 0 0;
        }
        /* 分页栏底部圆角匹配 */
        .rounded-table .ag-paging-panel {
            border-radius: 0 0 10px 10px;
        }
    """),
    table
])

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

额外说明 #

如果需要实现每行独立圆角（而非整体表格圆角），需更细致的CSS规则，比如给行设置margin、border-radius，并调整表格的padding与单元格边框，但这种方式可能影响表格布局的紧凑性，需根据需求调整：

.rounded-table .ag-row {
    border-radius: 8px;
    margin: 4px 8px;
    border: 1px solid #eee;
}
.rounded-table .ag-cell {
    border: none !important;
}

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