Primeng: Way to control the cell alignment for DataTable

[kevspadillo]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior

Default column cell alignment for DataTable is LEFT.

Expected behavior

A way to control the alignment of values for each column.

Please tell us about your environment:

• Angular version: ~2.1.1
  

• PrimeNG version: ^1.0.0-beta.16
  

• Browser: All
  

• Language: TypeScript

• Node (for AoT issues): node --version = v0.10.37

[dzhavat]

Why don't you just add a CSS class and control it from there? :)

[Thavarajan]

can you please explain how to add such class for each column
eg
first column has 10%
second column has 40%
third column has 15%
and so on..

[dzhavat]

@Thavarajan You can simply add the class by specifying styleClass.

<p-dataTable [value]="cars">
    <p-column field="vin" styleClass="column-1" header="Vin"></p-column>
    <p-column field="year" styleClass="column-2" header="Year"></p-column>
    <p-column field="brand" styleClass="column-3" header="Brand"></p-column>
    <p-column field="color" styleClass="column-4" header="Color"></p-column>
</p-dataTable>

And you might not even need that at all.

You can simply use a CSS selector

table thead th:nth-child(1) {
  width: 10%;
}

(for first column) and so on ...

Or you can do it directly on the <p-column>

<p-column field="vin" [style]="{'width':'10%'}" header="Vin"></p-column>

[kevspadillo]

Hi @dzhavat,

Thanks for the reply, however, if Iadd the class using the styleClass like below:

<p-dataTable [value]="cars">
    <p-column field="vin" styleClass="text-right" header="Vin"></p-column>
    <p-column field="year" styleClass="text-right" header="Year"></p-column>
    <p-column field="brand" styleClass="text-right" header="Brand"></p-column>
    <p-column field="color" styleClass="text-right" header="Color"></p-column>
</p-dataTable>

The column headers will aswell move to the right. I just want to be the values be moved to right.

[dzhavat]

One easy way is to just change your CSS to td.text-right and that should do it. This will only target td inside tbody.

Another one is to add a template of type body inside the column and then wrap the value in an element with class text-right.

[Thavarajan]

actually you need to use the
tbody /deep/ .colclass

[cagataycivici]

You can use css to do this like examples below.

[sujoydc]

Where is the example @cagataycivici ???

[sujoydc]

@kevspadilla Could you please let us know how did you solve this issue?

[robert99br]

I´m not sure this is the better solution, but I actually do this:

<p-column field="current" header="Current" [style]="{'width':'15%'}" [editable]="true" >
    <ng-template let-obj="rowData" pTemplate="body">
        <div class="my-center-text">{{obj.current | number}}</div>
    </ng-template>
</p-column>

and styles.css has the following entry:

.my-center-text {
    text-align: center;
    width: 100%;
}