How to truncate long text with ellipsis in Angular PrimeNG 19 table?

Question

I am using PrimeNG version 19 in my Angular 19 project, and I have a table where some columns contain long text. Currently, the text wraps onto multiple lines, but I want to truncate the text with an ellipsis (...) if it overflows the column width.

Component

<p-table
  [value]="rulesSignal()"
  [paginator]="true"
  [rows]="10"
  [rowHover]="true"
  stripedRows
  [tableStyle]="{'min-width': '50rem'}"
>
  <ng-template #header>
    <tr>
      <th pSortableColumn="name">
        Name
        <p-sortIcon field="name" />
        <p-columnFilter type="text" field="name" display="menu" />
      </th>
      <th>Note</th>
      <th pSortableColumn="salience">
        Salience
        <p-sortIcon field="salience" />
        <p-columnFilter type="text" field="salience" display="menu" />
      </th>
      <th>When Condition</th>
      <th>Then Expression</th>
      <th pSortableColumn="active">
        Active
        <p-sortIcon field="active" />
        <p-columnFilter type="boolean" field="active" display="menu" />
      </th>
    </tr>
  </ng-template>
  <ng-template #body let-rule>
    <tr>
      <td>{{ rule.name }}</td>
      <td>{{ rule.note }}</td>
      <td>{{ rule.salience }}</td>
      <td class="source-code" (click)="openCodeDialog(rule.whenText)">{{ rule.whenText }}</td>
      <td class="source-code" (click)="openCodeDialog(rule.thenText)">{{ rule.thenText }}</td>
      <td>{{ rule.active }}</td>
    </tr>
  </ng-template>
</p-table>

This CSS file does not work, nowrap style will make the column as large as the longest text.

.source-code {
  cursor: zoom-in;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

when I turn it off, the column width is OK, but its content is not truncated.

Bonus: I would love to have resizable columns, but that settings make the table overflow as well.

Answer 1

1. You need to implement the max-width style to the .source-code to make the text ellipsis work.

.source-code {
  cursor: zoom-in;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 10rem;
}

2. PrimeNG Table supports the column resizing by implementing [resizableColumns]="true" to <p-table> and pResizableColumn attribute to <th> element for the resizable column(s).

<p-table
  [value]="rulesSignal()"
  [paginator]="true"
  [rows]="10"
  [rowHover]="true"
  stripedRows
  [tableStyle]="{'min-width': '50rem'}"
  [resizableColumns]="true"
>
  <ng-template #header>
    <tr>
      <th pSortableColumn="name" pResizableColumn>
        Name
        <p-sortIcon field="name" />
        <p-columnFilter type="text" field="name" display="menu" />
      </th>
      <th>Note</th>
      <th pSortableColumn="salience" pResizableColumn>
        Salience
        <p-sortIcon field="salience" />
        <p-columnFilter type="text" field="salience" display="menu" />
      </th>
      <th pResizableColumn>When Condition</th>
      <th pResizableColumn>Then Expression</th>
      <th pSortableColumn="active" pResizableColumn>
        Active
        <p-sortIcon field="active" />
        <p-columnFilter type="boolean" field="active" display="menu" />
      </th>
    </tr>
  </ng-template>
  <ng-template #body let-rule>
    <tr>
      <td>{{ rule.name }}</td>
      <td>{{ rule.note }}</td>
      <td>{{ rule.salience }}</td>
      <td class="source-code" (click)="openCodeDialog(rule.whenText)">{{ rule.whenText }}</td>
      <td class="source-code" (click)="openCodeDialog(rule.thenText)">{{ rule.thenText }}</td>
      <td>{{ rule.active }}</td>
    </tr>
  </ng-template>
</p-table>

Similar Demo @ StackBlitz