jqwidgets-scripts-custom/demos/Angular/treegrid/columnalignment/src/app/app.component.html

jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.

<jqxTreeGrid [theme]="'material'" [width]="getWidth()"
             [source]="dataAdapter"
             [sortable]="true"
             [columns]="columns"
             #TreeGrid>
</jqxTreeGrid>

<div style="font-size: 13px; font-family: Verdana; width: 600px; margin-top: 10px;">
  <div style="float: left; width: 300px">
    <h4>Column Alignment</h4>
    <jqxDropDownList [theme]="'material'" #columnAlignment
                     (onChange)="columnAlignmentChange($event)"
                     [height]="25"
                     [selectedIndex]="0"
                     [autoDropDownHeight]="true"
                     [source]="['Left', 'Center' , 'Right' ]">
    </jqxDropDownList>
  </div>
  <div style="float: left; width: 300px">
    <h4>Cells Alignment</h4>
    <jqxDropDownList [theme]="'material'" #cellsAlignment
                     (onChange)="cellsAlignmentChange($event)"
                     [height]="25"
                     [selectedIndex]="0"
                     [autoDropDownHeight]="true"
                     [source]="['Left', 'Center' , 'Right' ]">
    </jqxDropDownList>
  </div>
</div>