UIGrid (Angular JS) - having a dropdown in a table header column

Question

I am using Angular 1.5 and am using the UI Grid. I was wondering is there a way to put a drop-down (ie a select) in a header column ? I know you can do it within the "data" cells/rows of the table but unsure if it can be done in the header title ?

See the below image link to see a visual of what I mean. I want to put the dropdown into the column header called "Value"

enter image description here

Thanks - Ronan.

Answer 1

You can specify a filter with selectOptions for displaying a dropdown in the header.

Example:

columnDefs: [{ 
              name: 'id', field: 'id'
            }, 
            { 
              name: 'value', field: 'value',
              filter: {
                       type: uiGridConstants.filter.SELECT,
                       selectOptions: [{ value: '1', label: 'One' }, 
                                       { value: '2', label: 'Two' }]
                      }
             }]

For more details check filter section in this link UI Grid ColumnDef - Filters