Advanced User Interface Controls and Components

Column Alignment in Tree Grid for AngularJS

Created: 01 April 2015

By default all columns in Tree Grid directive for AngularJS have their content aligned on the left side. As it is shown in demonstration below, we can change this on demand so that each column can have a different alignment of its header, body and footer cells.

TreeGrid directive is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps

Header Alignment

Content Alignment

Footer Alignment

To change alignment of column cells, we are going to use alignment fields for specified column object. Each column object has three fields which allows you to horizontally align the content:

  • headerAlignment – aligns the content of column header
  • contentAlignment – aligns the content of column body
  • footerAlignment – aligns the content of column footer

There are three values that can be accepted by these fields, that is: 'left', 'center' and 'right'. This allows you to horizontally align the content of specified column. This is particularly useful when you want to show numbers or currency values in columns, which needs to be aligned to the right side, while other columns keep their default alignment.

Here is some sample code, how this looks like:

$scope.columns = [

{ name: 'Column1', headerText: 'Header1', footerText: 'Footer1', headerAlignment: 'center', footerAlignment: 'right', width: 200 },

{ name: 'Column2', headerText: 'Header2', footerText: 'Footer2', headerAlignment: 'center', contentAlignment: 'center', width: 250 },

{ name: 'Column3', headerText: 'Header3', footerText: 'Footer3', contentAlignment: 'right', footerAlignment: 'right', width: 120 }


<iui-treegrid name="{{gridName}}" columns="columns" rows="rows"></iui-treegrid>

As it can be seen from above code, each column can have a different alignment. If an alignment is not specified, it is presumed that default alignment is used, that is content is aligned to the left side of its column.

Did you Like this Article?

Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.