Unable to change p-column [style] to [styleClass]

[JiroDan]

I have an existing data table that I have specified sizes for each column, such as:
<p-column [style]="{'width':'10%'}" field="state" header="State" [sortable]="true"></p-column>

I am trying to move in-line styles out of the html, but I cannot seem to get this to work for the columns in the datatable, neither of these seem to work:

<p-column [styleClass]="column-state" field="state" header="State" [sortable]="true"></p-column>
<p-column styleClass="column-state" field="state" header="State" [sortable]="true"></p-column>

[tengel92]

Does anyone have an idea on this? I'm experiencing the same issue even after updating to Angular 2.0 and primeng beta 16.

Code: Select all

<p-dataTable #exportCSV [value]="acknowledgements" [rows]="25" [paginator]="true" [rowsPerPageOptions]="[25,50,100]" [globalFilter]="globalFilter" resizableColumns="true" reorderableColumns="true" expandableRows="true" sortField="DataChangePrimaryID" sortOrder="-1">
    <p-column expander="true" header="Details" styleClass="col-icon"></p-column>

This is the CSS class

Code: Select all

.col-icon {
  width: 75px;
  text-align: center;
}

[ladk]

I think you have to change your CSS to :

Code: Select all

:host >>> .col-icon {
  width: 75px;
  text-align: center;
}

It should be ok

[tengel92]

Thanks for your reply ladk. It unfortunately didn't work. I did stumble upon a related thread that explains what the issue is. It seems to be related to resizableColumns="true". Once I removed that from the datatable the styleClass worked fine.

http://forum.primefaces.org/viewtopic.php?f=35&t=46449

[Samisama]

Hello, I have the same issue. I can't use styleClass on my column.
Also i'm not using resizableColumns so your solution is not working for me.

The weird thing is that my class does not appear anyware on the css when I look on the web browser source code. It's like it was completely ignored.
I am using less file instead of css file in my project.