How to hide column header in Ag-grid?

Question

In my vue.js application, I have a requirement where I want to hide the column headers in the ag-grid but want to display the rows.

I used below property to hide the column headers.

headerHeight: 0

with this I can able to hide the column headers but still the line separator between header and first row is visible. How can I add hide the separator line as well?

Answer 1

You can achieve it by tweaking the ag-header style along with the headerHeight .

In ag-grid template :

:headerHeight="0"

In CSS side :

.ag-header {
  border-bottom: 0px !important
}

Working Plunker : Hide ag-grid column header