How to sort column in AG-Grid with empty Header Name

Question

How to sort column in AG-Grid with empty Header?

colDef that is being passed:

var columnDefs = [{
    headerName: " ",
    sortable: true,
    suppressToolPanel: true,
    field: "  "
}];

Plunker: https://plnkr.co/edit/ujdHr9UlcOuP3mHw7uam?p=preview First column's header name(Athlete) is marked empty string. On click on its header, it is not sorting that column.

I checked here but no where it is said if header name need not to be empty to enable sorting. : https://www.ag-grid.com/javascript-grid-column-properties/

============================================================================

Updated Plunker after checking @UniCoder 's answer: https://plnkr.co/edit/wQadPgAgBWeFbLc4MuKu?p=preview (specifically hidden header text)

Answer 1

Solution 1: Keep headerName as "" and give field: "name"

var columnDefs = [{
          headerName: "",
          field: "name",
          width: 150,
          pinned: true
}]

Solution 2: use headerClass as shown below and set that class opacity to 0.

var columnDefs = [{
     headerName: "header-name",
     sortable: true,
     suppressToolPanel: true,
     headerClass: 'hide-header',
     field: "  "
}];

//in css file

.hide-header{
  opacity: 0;
}

codepens link for working example