How can we have a rounded corner or edges when using dash ag grid table in python?

Question

I want to customize my dash ag grid table.

My actual table is like this :

But what I want to is table like this :

My code is here :

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)

But two things for this (rowClassRules and rowStyle) does not work.

Is there other parameter I have to modify ?

Answer 1

You need to add some styles

/* 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;
}

Result

Read more on https://www.ag-grid.com/javascript-data-grid/global-style/

UPDATE

For gradient background

.ag-theme-alpine .ag-header {
  background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}