adding a search field/dropdown to a table header screws up the sort buttons


I am trying to add a dropdown box on a table widget so that a user could filter the table by their selection.

I have the dropdown and the filtering working just fine, but I cannot seem to figure out where to actually place the dropdown so that it sits under the column heading text (along with the little arrows for sorting.  See below:

For some reason, I cannot find any place to put the dropdown box without it stepping on the sort arrows.

What am I missing?  I'm sure it's something simple.

thank you

Hi Tom,

have you tried putting the dropdown inside a container and limit the container to i.e. 80%?

Hi Jose,

Thank you for your reply.

I just tried that, and it seems like the sort arrows are tied to the right edge of the column header field...does that sound right?  Here is what happens when I change the dropdown width to 6 col...

I have the web page open in the background (with the arrow) and the Service Studio open in front.

I can't seem to find a way to get this dropdown to start under the column header.

You can try to adjust through Inspect on the browser, it's easier to test a solution.

ok...I found the actual div that holds the sort icon...the container for the dropdown is listed above it right now and if I swap their place, all is starting to work...however, how do I make this change in Service Studio?

div layout from default Service Studio build:

After swapping the div's in Chrome:

So after seeing that, I went back in and set the container holding the dropdown's width to "Full"

That popped it one level below and gives me the look I want.

So how do I tell Service Studio how to order those div's?

If the sorting icons are built automatically and placed in the end of the header I dont think you will be able to switch divs. 

You need to search for another solution manipulating the html. 

Hmmm....there has to be a way to put text filter ability on a table widget isn't there?

I just want something similar to this type of thing:

Sure, that is easy to implement. Assign a variable to each input and filter your aggregate/sql with them.

Just a tip for performance: 

  • validate if the input is empty before applying "like" in the filter
    • If(InputFirst="", True, Entity.First like "%" + InputFirst + "%")

Hi. This is a CSS problem. 

Add "vertical-align" class to your table cell and enclose all content inside of the table cell in a div. Should look something like this.

Then add this CSS to your theme ".table-header th {    height: unset ; }". OutsystemsUI sets table header's height has 48px, so you might want to override the rule, and also add some padding-bottom or top. Be careful as this will impact all tables of your application, so you might want to create a CSS class for this. 

Good luck,

Gabriel Cardoso

But looking into your use-case, you might want to look into , it is an OutSystems supported component that implements that filter behaviour also, as you have in Excel. 

I think that may fit the bill...thank you for that.  I'll get it installed now and give it a try

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.