Adding styles to a specific header cell in AgGrid

Question

I am working on AgGrid (AgGridReact component) with one of the header cells having a checkbox for 'select all'

Was wondering if there is a way to pad/margin the select-all checkbox in alignment with the checkboxes in the column.

Answer 1

You can add headerClass to a specific column definition and apply the css style as usual

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

Live Demo