how set primeng data table columns auto fit?

Question

I have want to make prime ng data table columns set auto fit as well as re sizeable.So I have solved this issue changed in two css class .ui-datatable table and .ui-datatable-tablewrapper.

Answer 1

You need to use 2 properties [resizableColumns]="true" [autoLayout]="true" as defined below inside the <p-table> tag

<p-table [resizableColumns]="true" [autoLayout]="true">

Why it happens? If you inspect it, primeng would by default add the following code from the primeng.min.css file

.ui-table table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
}

You need to change the table-layout property , for this you need to use the [autoLayout]="true". There is another way also in which you can override this by using :host but i would not recommend it as autoLayout is already available to use.

For resizing, you need to use [resizableColumns]="true" in tag

For scrolling, you need to use [scrollable]="true" scrollHeight="300px" in tag