Mouse-over event p-dataTable table cell

Question

I'm using text-overflow:ellipsis for my cells to keep rows' height consistent and I want to be able to show full content using mouseover in p-dataTable PrimeNG.

Please show a minimal, verifiable and complete example, as described [here](https://stackoverflow.com/help/mcve). — Chris311, Mar 01 '18 at 15:14

score 0 · Answer 1 · answered Mar 07 '18 at 16:33

You can use templating for your cells.

<p-column field="color" header="Color">
    <ng-template let-col let-data="rowData" pTemplate="body">
        <span title="{{data[col.field]}}">{{data[col.field]}}</span>
    </ng-template>
</p-column>

and use the Primeng tooltip component or just a title attribute on the span.

Mouse-over event p-dataTable table cell

1 Answers1