How to Center Align ng-Table Header?

Question

All , I am using ng-table for the Grid. I am using following code snippet to set the column .

<td data-title="'Access ID'" sortable="'accessID'" style="width:120px" class="text-center">{{people.accessID}}</td>

But I am not able to center align the Column Header but column data.

Here is the source code snippet for Access ID Header.

<th ng-repeat="column in $columns" ng-class="{ 'sortable': parse(column.sortable), 'sort-asc': params.sorting()[parse(column.sortable)]=='asc', 'sort-desc': params.sorting()[parse(column.sortable)]=='desc' }" ng-click="sortBy(column, $event)" ng-show="column.show(this)" ng-init="template=column.headerTemplateURL(this)" class="header  sortable"> <!-- ngIf: !template --><div ng-if="!template" ng-show="!template" ng-bind="parse(column.title)" class="ng-binding ng-scope">Access ID</div><!-- end ngIf: !template --> <!-- ngIf: template --> </th>

Question is , How to center align the Header for a particular column in ng-table?

Configuration

text-align center not working? – Hobnob

@Gokul: Did you find solution to your program? – Ial

Answer 1

The answer submitted by @OpenUserX03 is almost perfect, except you have to wrap the class name in single quotes, like so:

<td data-title="'Access ID'" sortable="'accessID'" style="width:120px" class="text-center" header-class="'text-center'">{{people.accessID}}</td>

Electrothermics

It likely depends on the version of the library you're using. The version that we have (oddly enough not included in the JS) does not support the expression form of headerClass; @OpenUserX03's answer works for me. – Bedlam

Answer 2

You can use the header-class attribute to set the class for - you guessed it - the header.

<td data-title="'Access ID'" sortable="'accessID'" style="width:120px" class="text-center" header-class="text-center">{{people.accessID}}</td>

Readily

For me, the currect syntax which worked was: header-class=" 'text-center' ", Not: header-class="text-center" – Preform

Answer 3

i used to have the same issue how to align left my ng-table headers. on the documentation of ng-table it does not say anything nor at the examples.

you have two ways to do this the fast and the more 'professional'

fast way:

open files ng-table/dist/ng-table.css and ng-table.min.css, according on which css file you use. on the first line it manages the header,

.ng-table th {
  text-align: center;/*just change that parameter to left/right*/
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

'professional' way: create a custom style and add it to your website css file ,like this :

.table thead th {
  text-align: left;/*change that parameter to left/right*/
}

Hope helps, good luck.

Lowder

Answer 4

To anyone who still has this issue, also OP, since he has not yet accepted an answer, this is how I do it. in your css (any .css)

table[ng-table] th {
  text-align: left;
  border-top: none;
}

Alysonalysoun

Answer 5

Fix for ngTable

For those seeing this a year later. None of the above solutions worked for me. I added this to a custom css file:

.ng-table th {
   text-align: center !important;
}

Which centered the content in the header (see images)

From this:

To this:

Burletta

Answer 6

table .text-center {
    text-align: center;
}

JSFiddle http://jsfiddle.net/BrTzg/411/

Hobnob

He is asking specifically about column headers using ng-table. Your example works because it isn't using ng-table. – Readily

add the headers are not centered in the jsFiddle – Burletta