9

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>

enter image description here

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?

ggn979
  • 197
  • 1
  • 6
  • 15

6 Answers6

12

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>
radius
  • 159
  • 1
  • 6
  • 1
    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. – ach Sep 12 '16 at 18:40
5

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>
OpenUserX03
  • 1,448
  • 2
  • 14
  • 21
  • For me, the currect syntax which worked was: header-class=" 'text-center' ", Not: header-class="text-center" – Dudi Dec 25 '17 at 08:47
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.

Community
  • 1
  • 1
Theo Itzaris
  • 4,321
  • 3
  • 37
  • 68
3

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;
}
sch
  • 1,368
  • 3
  • 19
  • 35
1

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:

left

To this:

center

Fergus
  • 2,821
  • 2
  • 27
  • 41
0
table .text-center {
    text-align: center;
}

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

Miguel Mota
  • 20,135
  • 5
  • 45
  • 64