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&nbsp; &nbsp; #dt&nbsp; &nbsp; [value]="records"&nbsp; &nbsp; [columns]="cols"&nbsp; &nbsp; responsiveLayout="scroll"&nbsp; &nbsp; dataKey="userid"&nbsp; &nbsp; styleClass="p-datatable-sm"&nbsp; &nbsp; [loading]="!loadingSpinner"&nbsp; &nbsp; [columns]="cols"&nbsp; &nbsp; [exportFilename]="exportName"&nbsp; &nbsp; [rows]="100"&nbsp; &nbsp; [(contextMenuSelection)]="selectedItem"&nbsp; &nbsp; scrollHeight="450px"&nbsp; &nbsp; [tableStyle]="{ width: 'max-content'}"&nbsp; &nbsp; [autoLayout]="true"&nbsp; &nbsp; columnResizeMode="expand"&nbsp; &nbsp; [contextMenu]="cm"&nbsp; &nbsp; (onEditComplete)="editGrid($event)"&nbsp; &nbsp; [rowsPerPageOptions]="[100, 200, 500]"&nbsp; >