在python中使用dash ag网格表时如何才能有圆角或边缘？

Question

我想定制我的 dash ag 网格表。

我的实际表格是这样的：

但是我想要的是这样的桌子：

我的代码在这里：

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 = {
    # apply green to 2008
   "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,
)

# graph = dcc.Graph(id="my-graph",figure={})

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



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

但是有两件事（rowClassRules 和 rowStyle）不起作用。

还有其他参数需要修改吗？

Answer 1

您需要添加一些样式

/* we remove borders here and set foreground and background for header */
.ag-theme-alpine {
  --ag-borders: none;
  --ag-row-border-style: none;
  --ag-header-foreground-color: white;
  --ag-header-background-color: rgb(4, 13, 94);
}

/* we set border radius for header row  */
.ag-theme-alpine .ag-header {
  border-radius: 10px;
}

/* we set background and border radius for odd rows */
.ag-theme-alpine .ag-row-odd {
  background-color: rgb(238, 241, 238);
  border-radius: 10px;
}

/* we set background and border radius for even rows */
.ag-theme-alpine .ag-row-even {
  background-color: white;
  border-radius: 10px;
}

结果

了解更多信息https://www.ag-grid.com/javascript-data-grid/global-style/