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

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

<jqxDataTable [theme]="'material'" #myDataTable
    [width]="getWidth()" [source]="dataAdapter" [columns]="columns"
    [sortable]="true" [pageable]="true" [columnsResize]="true">
</jqxDataTable>

<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'" (onChange)="columnAlignment($event)"
        [height]="25" [autoDropDownHeight]="true"
        [selectedIndex]="0" [source]="dropDownsSource">
    </jqxDropDownList>

  </div>
  <div style="float: left; width: 300px">
    <h4>Cells Alignment</h4>

    <jqxDropDownList [theme]="'material'" (onChange)="cellsAlignment($event)"
        [height]="25" [autoDropDownHeight]="true"
        [selectedIndex]="0" [source]="dropDownsSource">
    </jqxDropDownList>

  </div>
</div>