Vaadin Tree Right-To-Left Alignment

Question

By default the Vaadin Tree component is left aligned: the roots are on the left and the children are moving to the right.

+ root
|---child
|-----grandchild
|-----grandchild

Is it possible to set the alignment to right-to-left: the roots are on the right and the children are moving to the left? Also the expand/collapse triangles should be on the right.

           root+
       child---|
grandchild-----|
grandchild-----|

Answer 1

Yes, it is possible. You can do it with styles. I wrote simple solution for Valo theme (another theme may have other styles). Hope I didn't forget anything.

.v-tree.rtl-tree {
  direction: rtl;
  .v-tree-node-caption {
    span {
      padding-left: 28px;
      text-align: right;
    }
    .v-icon {
      padding-left: 0;
    }
  }
  .v-icon + span {
    margin-right: 7px;
  }
  .v-tree-node::before {
    right: 19px;
  }
  .v-tree-node.v-tree-node-root::before {
    right: 0; // special for root node
  }
  .v-tree-node-children {
    padding-right: 19px;
  }
}