Search code examples
filtertabulator

Tabulator header filter formatting

Hi I have a tabulator table which the headers are all icons

enter image description here

I want to add in a fitler box for one field but when I do so using the headerFilter:true the filter is below the icons

enter image description here

is there any clever way to have the filter on the same level as the icons, space is a premuim on my page so ideally Id like them all aligned

Solution

  • I've solved this by modifying the tabulator css I had to give the header-filter a negative top position and it now works fine

    enter image description here

    `.tabulator .tabulator-header .tabulator-col .tabulator-header-filter 
{
 position: relative;  
 box-sizing: border-box;
 margin-top: -23px;
 width: 100%;
 text-align: center;
 height: 33px ;
} `