GWT CellTable-How to Move the Sorting Arrow from Left to Right side

Question

I Would like to move the sorting arrow from left to right side in the cell table header which is shown in below image

Any Suggestion?

Answer 1

It took me a while to find, but the solution is very easy. Cell table uses default header builder which has an option to render sort icon on left or right side.

DefaultHeaderOrFooterBuilder<Contact> headerBuilder = new DefaultHeaderOrFooterBuilder<>(table, false);
headerBuilder.setSortIconStartOfLine(false);
table.setHeaderBuilder(headerBuilder);

Cheers!

Answer 2

I think I have some raw ideas you could play with and see if they help:

1. Get a handle on the div containing the arrow img, to add a style classname that will be used in a CSS selector [2. below] that styles the right-alignment you want... Maybe something like this would work:

   CellTable.getTableHeadElement().addClassName( "myTableHeadersClassname" );
   

2. If 1. succeeded in getting "myTableHeadersClassname" classname on the CellTable's thead element, then I think we are in good shape. I think this CSS selector will then work:

   .myTableHeadersClassName div div:nth-child(1){
       left: auto;
       right: 0 px;
   }
   

I'm not sure if 1. will work, so that might be the hard part. But the idea is to add a classname somewhere in the CellTable DOM hierarchy to then create the CSS selector out of. As long as you can apply that classname and make the selector, you should be just faced with fiddling with that selector's style (although I think the style inside the selector in 2. should work at that point). If 1. doesn't work, I think you could always just put a classname on the top-level CellTable itself, and then have this slightly more complex selector:

.myCellTableClassname thead div div:nth-child(1)

Whichever selector route you go, the left style should be overriding CellTable's inlined style; if what I wrote does not do that, then just add more specificity to the selector until it does.

Hope some of this helps...