PrimeNG p-datatable set min width columns

Question

I've a p-datatable responsive and I need to set min-width for each column. This to avoid on resize to have a column width too small. My table is created in this way:

<p-dataTable [value]="listValue" scrollable="true" scrollHeight="200px" [loading]="loading" [responsive]="true">
     <p-column field="first" [style]="{'min-width':'90px'}">
          <ng-template pTemplate="header">
                  <span title="My first Column">My first Column</span>
          </ng-template>
    </p-column>
    ....
</p-dataTable>

It doesn't work. First column became smaller than 90px on resizing page.

You should try this code use class to set min-max width .[https://stackoverflow.com/questions/51075942/how-set-primeng-data-table-columns-auto-fit](https://stackoverflow.com/questions/51075942/how-set-primeng-data-table-columns-auto-fit) — Nitin Wahale, Jul 26 '18 at 06:37

score 2 · Answer 1 · edited Aug 25 '19 at 16:54

2

Like @opt SD said change

.ui-table table {
    table-layout: unset
}

and then make the min-width to your table headers

edited Aug 25 '19 at 16:54

kalehmann

4,821
6
26
36

answered Aug 25 '19 at 16:25

Maryam

69
1
1
7

This breaks the table markup - table cells are become different width than the headers (at version 9.1.3). – AlexDEV.pro Jun 11 '21 at 13:07
This worked for me, but I did have to add this as well to make the footer look good when the min-width is applied: `.ui-table { width: fit-content; }` – nephiw May 01 '23 at 19:10

score 1 · Answer 2 · answered Nov 26 '18 at 09:56

1

Check the layout of your current table (table-layout CSS property)

In this case, your table's layout maybe is FIXED, you are not able to set min-width or max-width for the columns.

answered Nov 26 '18 at 09:56

Opt SD

21
3

PrimeNG p-datatable set min width columns

2 Answers2