Hello all! A bit new to agGrid. I have created a custom style, however, my arrow icon looked like a square once I created the theme and I don’t seem to be able to do anything about it. Please help.
python
dag.AgGrid(
columnDefs= [{"headerName": x, "field": x, } for x in df.columns],
rowData= df.to_dict('records'),
className="ag-theme-custom-theme",
columnSize="sizeToFit",
style={'height': '700px'},
defaultColDef={"resizable": True, "sortable": True, "filter": True, "minWidth": 125, },
dashGridOptions={"enableCellTextSelection": True, "ensureDomOrder": True},
style.css
.ag-theme-custom-theme.ag-theme-custom-theme {
/* customise with CSS variables */
--ag-grid-size: 8px;
--ag-border-color:#0E2334;
--ag-odd-row-color: #0E2334 ;
--ag-header-background-color: #ff8c00;
}
.ag-theme-custom-theme .ag-center-cols-clipper .ag-row:nth-child(even) {
background-color: #0F2537; /* Replace #123456 with your preferred color */
}
.ag-theme-custom-theme .ag-center-cols-clipper .ag-row:nth-child(odd) {
background-color: #324F5F; /* Replace #123456 with your preferred color */
}
/* Style the grid body */
.ag-theme-custom-theme .ag-body-viewport {
background-color: #0F2537; /* Set the body background color to #0E2334 */
}
.ag-theme-custom-theme .ag-cell {
color: white; /* Set the font color to white */
}
.ag-theme-custom-theme .ag-header-cell {
font-weight: bold; /* Set the header font weight to bold */
font-size: 16px; /* Set the header font size to a larger value */
}
.ag-theme-custom-theme .ag-cell {
border-color: #0F2537; /* Change the column border color to #0F2537 */
}
.ag-theme-custom-theme .ag-header-cell {
border-color: #0F2537; /* Change the header cell border color to #0F2537 */
}
/* Menu icon on hover */
.ag-theme-custom-theme .ag-header-cell:hover .ag-icon-menu::before {
content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><rect y="0" width="12" height="2" fill="%23000000"/><rect y="5" width="12" height="2" fill="%23000000"/><rect y="10" width="12" height="2" fill="%23000000"/></svg>') !important;
}
.ag-theme-custom-theme .ag-header-cell .ag-icon-menu {
display: inline-block;
fill: #000; /* Set the color to black */
}
.ag-theme-custom-theme .ag-icon-desc {
border: none;
outline: none;
}
.ag-theme-custom-theme .ag-icon-desc,
.ag-theme-custom-theme .ag-icon-asc {
color: #000;
}
/* Descending sort icon */
.ag-theme-custom-theme .ag-icon-desc {
content: "";
background: transparent url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"%3E%3Cpolygon fill="%23000000" points="0,12 6,0 12,12"%3E%3C/polygon%3E%3C/svg%3E') no-repeat !important;
border: none !important;
box-shadow: none !important;
}
/* Ascending sort icon */
.ag-theme-custom-theme .ag-icon-asc {
content: "";
background: transparent url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"%3E%3Cpolygon fill="%23000000" points="0,0 12,0 6,12"%3E%3C/polygon%3E%3C/svg%3E') no-repeat !important;
border: none !important;
box-shadow: none !important;
}