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 Weba suite of UI Components for development of web apps

Selected Column:

Header Alignment

LeftCenterRight

Content Alignment

LeftCenterRight

Footer Alignment

LeftCenterRight

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.

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.

Tab content switching

Newsletter

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.