GWT CellTable-How 将排序箭头从左侧移动到右侧

Question

我想将 table header 单元格中的排序箭头从左侧移动到右侧，如下图所示

有什么建议吗？

Answer 1

我想我有一些原始的想法，你可以尝试一下，看看它们是否有帮助：

获取包含箭头 img 的 div 的句柄，以添加将在 CSS 选择器中使用的样式类名 [2.下面]设置了您想要的右对齐样式...也许这样的方法可行：
```
CellTable.getTableHeadElement().addClassName( "myTableHeadersClassname" );
```
如果 1. 成功获得 CellTable 的 thead 元素上的 "myTableHeadersClassname" classname，那么我认为我们的状态很好。我认为这个 CSS 选择器将起作用：
```
.myTableHeadersClassName div div:nth-child(1){
    left: auto;
    right: 0 px;
}
```

我不确定 1. 是否可行，所以这可能是最难的部分。但想法是在 CellTable DOM 层次结构中的某处添加一个类名，然后从中创建 CSS 选择器。只要您可以应用该类名并制作选择器，您就应该只需要摆弄该选择器的样式（尽管我认为 2. 中选择器内部的样式应该在那时起作用）。如果 1. 不起作用，我认为您总是可以在顶级 CellTable 本身上放置一个类名，然后使用这个稍微复杂一些的选择器：

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

无论你走哪条选择器路线，左边的样式都应该覆盖 CellTable 的内联样式；如果我写的没有做到这一点，那么只需向选择器添加更多的特异性，直到它完成。

希望其中的一些帮助...

Answer 2

我找了好久，但是解决起来很简单。单元格 table 使用默认的 header 生成器，它可以选择在左侧或右侧呈现排序图标。

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

干杯！

GWT CellTable-How 将排序箭头从左侧移动到右侧

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

gwt

gwt-celltable