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.


Sign-up to our newsletter and you will receive news on upcoming events, latest articles, samples and special offers.
Name: Email: *
*By checking this box, I agree to receive a newsletter from Lidor Systems in accordance with the Privacy Policy. I understand that I can unsubscribe from these communications at any time by clicking on the unsubscribe link in all emails.