将样式添加到 AgGrid 中的特定 header 单元格
Adding styles to a specific header cell in AgGrid
我正在开发 AgGrid(AgGridReact
组件),其中一个 header 单元有一个 'select all'
的复选框
想知道是否有办法 pad/margin select-all 复选框与列中的复选框对齐。
您可以将 headerClass
添加到特定列定义并像往常一样应用 css 样式
const columnDefs = [
{
checkboxSelection: true,
headerCheckboxSelection: true,
headerClass: "checkbox",
width: 70
},
{
headerName: "ID",
field: "id",
width: 70
},
...
}
Css
/* add role attribute to increase specificity */
.ag-header-cell.checkbox[role="presentation"] {
padding: 20px;
}
现场演示
我正在开发 AgGrid(AgGridReact
组件),其中一个 header 单元有一个 'select all'
想知道是否有办法 pad/margin select-all 复选框与列中的复选框对齐。
您可以将 headerClass
添加到特定列定义并像往常一样应用 css 样式
const columnDefs = [
{
checkboxSelection: true,
headerCheckboxSelection: true,
headerClass: "checkbox",
width: 70
},
{
headerName: "ID",
field: "id",
width: 70
},
...
}
Css
/* add role attribute to increase specificity */
.ag-header-cell.checkbox[role="presentation"] {
padding: 20px;
}