p-dataTable default widths

[tokyoite]

I would like to set default widths for each p-column but allow the user to resize them at will. Is this possible?

I have tried [style]="{'width':'150px'}" and it does not seem to work.

Any help is appreciated. Thank you!

Tavi

[liorklain]

I have the same issue

[cagatay.civici]

Can you please elaborate? What part doesn't work? Isn't the style applied to the th and td elements? Can you post your code please?

[tokyoite]

I tried applying the [style] attribute exactly as mentioned in the documentation to the p-column. You will see this in the template provided below.

Currently this is not working correctly. Just wondering if there is a work around or if there is a plan to fix this in the next release.

Again, I appreciate any help and enjoy using the tools thus far.

<p-dataTable [value]="audits" [rows]="10" [paginator]="true" resizableColumns="true" selectionMode="multiple" [(selection)]="selectedAudits">
<p-column [style]="{width:'75px'}">
<template pTemplate type="header">
Edit
</template>
<template let-audit="rowData" pTemplate type="body">
<button type="button" style="width:100%;" pButton (click)="edit_audit(audit)" icon="fa-pencil"></button>
</template>
</p-column>
<p-column field="id" header="ID" [filter]="true" [sortable]="true"></p-column>
<p-column field="agentNumber" header="Agent" [filter]="true" [sortable]="true" [style]="{width:'150px'}"></p-column>
<p-column field="agencyName" header="Name" [filter]="true" [sortable]="true" [style]="{width:'500px'}"></p-column>
<p-column header="Audit Date" [filter]="true" [sortable]="true" [style]="{width:'150px'}">
<template let-audit="rowData" pTemplate type="body">
{{audit.auditdate | date: 'MM/dd/yyyy'}}
</template>
</p-column>
<p-column header="Audit Date End" [filter]="true" [style]="{width:'150px'}">
<template let-audit="rowData" pTemplate type="body">
{{audit.auditdate_end | date: 'MM/dd/yyyy'}}
</template>
</p-column>
<p-column field="scope" header="Scope" [filter]="true" [sortable]="true" [style]="{width:'150px'}"></p-column>
<p-column field="auditor" header="Auditor" [filter]="true" [sortable]="true" [style]="{width:'150px'}"></p-column>
<p-column field="state" header="ST" [filter]="true" [sortable]="true" [style]="{width:'50px'}"></p-column>
<p-column field="region" header="Region" [filter]="true" [sortable]="true"></p-column>
<p-column field="marketingagent" header="Rep" [filter]="true" [sortable]="true" [style]="{width:'150px'}"></p-column>
<p-column field="parent" header="Parent" [filter]="true" [sortable]="true" [style]="{width:'150px'}"></p-column>
</p-dataTable>

[DarthMaul]

Hi,

This one is fixed for next release RC4(this week).

But before using it if you are using resizableColumns="true" and fixed width for columns you should add columnResizeMode="expand" to your datatable.

Second option is you can use fit mode with percentage widths for columns for example [style]="{width:'20%'}"

[tokyoite]

I really appreciate your help Trypticon I will give this a try with RC4 and let you know how it works out.

Thanks again..

Tavi

[tokyoite]

@Trypticon FYI, this is working well. Thank you!

[DarthMaul]

Hi,

Thanks for your kind words, I'm glad to hear that.