New Component: Ellipsis

[ctrl-brk]

I'm submitting a ... (check one with "x")

[ ] bug report => Search github for a similar issue or PR before submitting
[x] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

I'm looking for a general way to show some kind of tooltip (on mouse hover or icon click or something...) if the data overflows the cell. I'm using text-overflow:ellipsis for my cells in order to keep rows height consistent and want to be able to show the full content somehow.

Thanks.

[bmstambaugh-zz]

I would like to same. While resizable columns are an option sometimes its just easier for the user to hover over the cell without affecting the whole table.

[bmstambaugh-zz]

My workaround for this is to use the Tooltip component and a template cell.

`<p-column field="Col1" header="Col1" [sortable]="true" [style]="{'width':'200px'}">

{{ data[col.field] }}

</p-column>` 

and override the class .ui-datatable .ui-datatable-thead>tr>th, .ui-datatable .ui-datatable-tfoot>tr>td, .ui-datatable .ui-datatable-data>tr>td { text-overflow: ellipsis; overflow : hidden; white-space: nowrap; }

[ctrl-brk]

Yes, but it's annoying to put everywhere

[bmstambaugh-zz]

I completely agree. Having it built in would save a lot of HTML markup

[kenisteward]

I have built a component that does it exact thing. it limits itself to 1 line and if that overflows it automatically uses a bootstrap 4 or angular material tooltip to tell you what it is. I'll have to plop it on github at some point

[ctrl-brk]

Would be nice to see. Can you make it work with primeng tooltip? But it's still a component you have to add at every datatable column. Still too bulky.

[kenisteward]

Yeah I can have it work with primeng . Also it is an extremely lightweight component that does everything contained.

On Tue, Jun 27, 2017, 10:37 PM Alex notifications@github.com wrote:

Would be nice to see. Can you make it work with primeng tooltip? But it's still a component you have to add at every datatable column. Still too bulky.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/primefaces/primeng/issues/2601#issuecomment-311540531, or mute the thread https://github.com/notifications/unsubscribe-auth/AMPLtRFHJZXgWDuD-0i95ehMv6exdRrjks5sIbxagaJpZM4NHo_c .

[dhniels]

@kenisteward can we see it?

[kenisteward]

Oh shoot! I went on vacation soon after this and never did update . Now I've reformatted my machine so once I get it back up I can strip the component out and plop it on GitHub :)

On Mon, Aug 21, 2017, 5:07 PM Dave Nielsen notifications@github.com wrote:

@kenisteward https://github.com/kenisteward can we see it?

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/primefaces/primeng/issues/2601#issuecomment-323853399, or mute the thread https://github.com/notifications/unsubscribe-auth/AMPLtfetZdnSs1FKa0tdHAkKnos4FLhZks5safGegaJpZM4NHo_c .

[dagyrox]

@kenisteward still waiting :)

[kenisteward]

This week I'm open sourcing the project that uses it. I'll link the code directly to here ;)

On Mon, Jan 15, 2018, 2:44 PM Jason Politis notifications@github.com wrote:

@kenisteward https://github.com/kenisteward still waiting :)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/primefaces/primeng/issues/2601#issuecomment-357772874, or mute the thread https://github.com/notifications/unsubscribe-auth/AMPLtYkXrANcjBZmqANGMGcpVaxbENuJks5tK6qMgaJpZM4NHo_c .

[malhar12]

@ctrl-brk @cagataycivici - I have made a directive, that does this exact job. Detects, if contents of cell are overflowing, if so, then adds ellipsis to it, and it also works with primeng tooltip. But, I am a bit confused on the process of contributing, as it is not very clear. Like do I add it to showcase with my changes and just raise a PR?

[ctrl-brk]

Do you apply this directive to the whole table or per column? I would like per table.

[malhar12]

I made the directive per column as opposed to per table. I believe, having it per column is more efficient as compared to the table, because then, it would go and check contents of every cell for overflow. Efficient in terms of less DOM traversing to the cells. Usually, the scenarios that I have commonly observed, are that, not all the columns will contain data that overflows.

[ctrl-brk]

But applying it to every single column (and I have tons of them) is annoying. That's why it's desirable to be implemented within the table component itself, not as a directive.

[malhar12]

If this is supposed to work with the primeng tooltip, we would have to apply the tooltips to each column anyway, because the primeng tooltip cannot be triggered from the code, since it is declarative in nature. So,we might just add the directive to the column as well.

[ctrl-brk]

That's why I'm asking for having built-in functionality in the table. So I just set one parameter and all columns automatically have the tooltip (I don't care what kind).

[kenisteward]

@dagyrox Sorry for the wait! https://github.com/FINRAOS/herd-ui/tree/master/src/app/shared/components/ellipsis-overflow

We just open sourced today!

[kenisteward]

@dagyrox @ctrl-brk @malhar12 example usage of said component https://github.com/FINRAOS/herd-ui/blob/6a55b96fea2e844c1dabfe0da572b83345d99521/src/app/data-objects/components/data-object-list/data-object-list.component.html#L49-L71

[ctrl-brk]

Thanks you. But you still need to apply it to each column and even convert the column into template if it doesn't have one. Lots of labor. I still hope that the Prime guys will built such functionality right into the table component.

[kenisteward]

If they took prs I'd plop it in there myself

On Fri, Feb 9, 2018, 4:06 PM Alex notifications@github.com wrote:

Thanks you. But you still need to apply it to each column and even convert the column into template if it doesn't have one. Lots of labor. I till hope that the Prime guys will built such functionality right into the table component.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/primefaces/primeng/issues/2601#issuecomment-364566772, or mute the thread https://github.com/notifications/unsubscribe-auth/AMPLtTOLh7ERJWhcuuuMEqc2aa3Mopxjks5tTLM-gaJpZM4NHo_c .

[malhar12]

@ctrl-brk @kenisteward @cagataycivici @dagyrox @dhniels Following is my approach to the Overflow ellipsis problem. Now, this is implemented to work with the new p-table [Turbo Table] component, and you use it as a directive. You guys can take a look at the demo here:

https://malhar12.github.io/#/table/ellipsis

[mohitlakhera]

@malhar12 any other way to proceed if it is directive is not included in p-table component

[malhar12]

@cagataycivici is this feature still open to work on. Will you guys be accepting PRs for this feature?

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap? Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!

Best Regards,