CODEWITHSUNDEEP
filteringag-grid
ystan-
ystan-

Reputation: 1536

Per-column Filter on ag-grid

How do I show per-column filters between the header label and data in ag-grid rather than having the filter in each column's dropdown menu?

enter image description here

Upvotes: 3

Views: 2972

Answers (2)

tengen
tengen

Reputation: 2165

There is also a floatingFilter option for the grid config that does something close to this as well:

gridOptions = {
   // turn on floating filters
   floatingFilter: true
   ... 
}

Upvotes: 3

Jarod Moser
Jarod Moser

Reputation: 7338

Best option on that would be to use the Header Template and include an input in there. You will also need to increase the height of the header inside of the gridOptions.

var gridOptions = {
    ...
    headerHeight: 150, // make this as tall as you need...
    headerCellTemplate: HEADER_CELL_TEMPLATE, // I chose to name template vars in all caps
    ...
}

var HEADER_CELL_TEMPLATE = '<div class="ag-header-cell">' + 
    '<div id="agResizeBar" class="ag-header-cell-resize"></div>' +
    '<span id="agMenu" class="ag-header-icon ag-header-cell-menu-button"></span>' +
    '<div id="agHeaderCellLabel" class="ag-header-cell-label">' +
        '<span id="agSortAsc" class="ag-header-icon ag-sort-ascending-icon"></span>' +
        '<span id="agSortDesc" class="ag-header-icon ag-sort-descending-icon"></span>' +
        '<span id="agNoSort" class="ag-header-icon ag-sort-none-icon"></span>' +
        '<span id="agFilter" class="ag-header-icon ag-filter-icon"></span>' +
        '<span id="agText" class="ag-header-cell-text"></span>' +
    '</div>' +
    '<input type="text" ></input>' +
'</div>'

Upvotes: 2

Related Questions