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.
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.
The PrimeNG datatable is basically an HTML table so you can change it by just using td and th to change font-size for the cells, headers or both.
th, td {
text-align: center;
font-size: 0.8em;
}
However, if you want to change styles through CSS for the whole table easily, you can use the tableStyleClass property and just create a new class for the table like this:
<p-dataTable [value]="cars" tableStyleClass="prime-table">
<p-column field="vin" header="Vin"></p-column>
<p-column field="year" header="Year"></p-column>
<p-column field="brand" header="Brand"></p-column>
<p-column field="color" header="Color"></p-column>
</p-dataTable>
And add the styling to the class:
.prime-table{
text-align: center;
font-size: 0.8em;
}
You can use the following code to suit your needs
.ui-table,
.ui-table .ui-table-wrapper table {
font-size: 16px !important;
}
ui-table, and ui-table-wrapper are css classes defined in the latest version of tables of PrimeNG