Change font-size in primeng datatables in angular2 project

Question

I am trying to adjust the font-size of the column headers and may be the content as well. I tried to do a pure css solution based on the structural classes mentioned by Primeng here, but to no avail. https://www.primefaces.org/primeng/#/datatable https://www.primefaces.org/primeng/#/theming

I looked at other stackoverflow but found this way to be the accepted answer.

<p-column field="type" header="Type"
        [style]="{'text-align': 'center', 'font-size': '0.8em'}"></p-column>

Is there a pure css way to modify font size of primeng datatables and other components using pure css solutions.

Worth mentioning that I am not really a UI/UX person. So if someone has already solved this I would be grateful. Thanks a lot.

Answer 1

You can solve it in two ways.

Priming Datatable can be styled using style attribute styleClass or tableStyleClass

Example:

<p-dataTable [value]="cars" tableStyleClass="prime-table">
    <p-column field="vin" header="Vin" styleClass="pr-column1"></p-column>
    <p-column field="year" header="Year" styleClass="pr-column2"></p-column>
    <p-column field="brand" header="Brand" styleClass="pr-column3"></p-column>
    <p-column field="color" header="Color" styleClass="pr-column4"></p-column>. 
</p-dataTable> 

You can give respective style class to this attributes.

The second way of editing the style is please refer https://www.primefaces.org/primeng/showcase/#/table

The bottom part Styling header. Here you can get the styling elements of the datatable. Write your customized style to those elements and it will work for you.

Example:

.ui-datatable-header{
  text-align:center;
  font-size:20px;
} 

Hope these two will help you to sort the issue.