How to change the position of the datatable column filter to outside header?

0
votes

Taking this showcase example as a starting point: http://www.primefaces.org/showcase/ui/data/datatable/filter.xhtml

I want to place the input of each column filter instead of here:

I would like to have it here:

Below the header and above rows containing data.

Is this possible? I saw the attribute filterPosition of the p:column but it only accepts top and bottom and both are still inside the header.

1
primefacesfilterdatatable

1 Answers

1
votes

I managed to do it but in a really hackish way, so I'll accept this until someone finds something else.

Having table_with_filter as a styleClass of the p:dataTable, I added the following css:

First, I created space between the data and the header with a border:

.table_with_filter.ui-datatable-data {
    border-top: 25px solid #DDDDDD; 
}

Then, I move the input downwards with a custom negative bottom, and set the overflow of the header visible so I could see the filter outside it.

.table_with_filter.ui-column-filter.ui-inputfield {
    position: relative;
    bottom: -26px;
}
.table_with_filter th.ui-state-default {
    overflow: visible; 
}

Maybe some minor adjustments more on the styles to fit everything perfectly and that was it.

Result:

enter image description here