primeng数据表列宽根据内容自动调整

Question

我在我的角度应用程序中使用 prime ng 数据表，我想根据内容调整宽度，而不给出它应该自动调整的固定宽度。谁能帮我这个？<p-table #dataGrid [columns]="columns" [value]="data" [paginator]="columns.length > 0 ? paginator : false"  [rowsPerPageOptions]="rowsPerPageOptions" [totalRecords]="totalRecords" [first]="first"  [reorderableColumns]="true" [resizableColumns]="true" [(rows)]="rows" [lazy]="lazy" [lazyLoadOnInit]="false"  (onLazyLoad)="loadData($event)" [loading]="loading" selectionMode="single" (onRowSelect)="rowSelect($event)"  (onColReorder)="saveStateToSession()" (onPage)="paginationEvent();" [sortOrder]="sortOrder" [ngClass]="{'disabledrow':disabledRow}"  (onRowReorder)="updatePriority($event)"><!---Some data----></p-table>

Answer 1

如果有人仍在为此苦苦挣扎：

使用： [autoLayout]="true"

但删除： [resizeableColumns]="true"和[scrollable]="true"

由于技术原因，可滚动和可调整大小的属性与 autoLayout 属性不兼容。

这将使您的列的宽度与内容决定的宽度一样。

Answer 2

这会对你有所帮助。

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

Answer 3

由于技术原因，可滚动和可调整大小的属性与 autoLayout 属性不兼容。

<p-table

    #dt

    [value]="records"

    [columns]="cols"

    responsiveLayout="scroll"

    dataKey="userid"

    styleClass="p-datatable-sm"

    [loading]="!loadingSpinner"

    [columns]="cols"

    [exportFilename]="exportName"

    [rows]="100"

    [(contextMenuSelection)]="selectedItem"

    scrollHeight="450px"

    [tableStyle]="{ width: 'max-content'}"

    [autoLayout]="true"

    columnResizeMode="expand"

    [contextMenu]="cm"

    (onEditComplete)="editGrid($event)"

    [rowsPerPageOptions]="[100, 200, 500]"

  >