[Feature]: The columns in the table component support hover to display customized content

[gzlinzihong]

Is there an existing issue for this?

• [X] I have searched the existing issues

Summary

I hope I can customize the content displayed by hover when the mouse moves to the corresponding cell. Similar to the following form

Why should this be worked on?

The data source may store some technology-related content. When the content is displayed in a table, some semantic translation is required. At the same time, I hope that the original content can be displayed when the mouse is hovering over it. If it is something like translated content (pre-translated content), this form will cause the entire column to be too long.

[PrasadMadine]

@gzlinzihong @Nikhil-Nandagopal @somangshu If the content is too larger than the available view, then only we show the title. My question is what customization we want to show? Do you want to show any other text?

[gzlinzihong]

@gzlinzihong @Nikhil-Nandagopal @somangshu If the content is too larger than the available view, then only we show the title. My question is what customization we want to show? Do you want to show any other text?

@PrasadMadine Yes, I want to be able to display custom content when hovering

[akshayvijayjain]

@gzlinzihong , I am also working with @PrasadMadine , I have a question

what is the plan to get the custom content for each cell of the table?

if we have to add custom content from UI, we should have other table created for holding the custom content corresponding to each cell?

what other possible way to get the content to show?

[gzlinzihong]

@gzlinzihong , I am also working with @PrasadMadine , I have a question

what is the plan to get the custom content for each cell of the table?

if we have to add custom content from UI, we should have other table created for holding the custom content corresponding to each cell?

what other possible way to get the content to show?

Hi @akshayvijayjain 。 Let me give you an example Our usage scenario is to display some records stored in the database to customer service colleagues through tables to facilitate them to answer user questions. The content stored in the database is technical-related, and customer service colleagues cannot directly understand the meaning, so we perform semantic translation when displaying it.

For example, when we do full-link tracking There is a field stored in the database called Request Backend Service. This is the URL address of a service. Like 'http://member.org/isvip'. In order to facilitate customer service understanding, it will be translated into Membership services requested. This way the customer service colleagues can understand the meaning of this. But for a technician, he can understand the URL, so he hopes to see the content stored in the original database. That’s why I hope to be able to display the pre-translation content when hovering.

The above scenario can definitely be displayed in other ways, such as using two tables, But if you deal with it this way It is not so convenient to retrieve different expressions of the same cell. At the same time, it will increase the cost of back-end production. The form needs to be copied, and all settings need to be reset.

We think it’s a better way to show it when hovering

If you have a better way to display the above scenarios, you can recommend it~

[akshayvijayjain]

Thank you @gzlinzihong , for detail on the use case.

How does frontend know that Membership services requested to be shown for 'http://member.org/isvip'

do you intend to add option to call an api for each cell content, and thus get the custom content from api.

I see we can add the customized content to show, by appending it to the actual content.

that means,

when we are storing 'http://member.org/isvip' in the cell, we can instead store 'http://member.org/isvip' | Membership services requested

thus both the things in same cell, separated by |,

or actually it is mongodb, so we might also store json, {content: 'http://member.org/isvip', title:Membership services requested} instead of 'http://member.org/isvip'

+

we can also given an option in the UI to enter both the details through a form and store it appropriately in the DB

@gzlinzihong , let me know what you think?

[gzlinzihong]

@akshayvijayjain thanks for your advice How does frontend know that Membership services requested to be shown for 'http://member.org/isvip'

I just made a simple example in the example. The actual translation behavior can be understood as calling a function. This may be done through the API or local logic execution.

As for storage, something like {content:'http://member.org/isvip', title:Membership services requested} I think this form is unacceptable

In the back-end service logic, it should not store the content required for background display in its own logical table. This display logic should be translated by a background service, and appsmith plays the role of this background service.

We can use JSObject to convert the original http://member.org/isvip => converted into {content: 'http://member.org/isvip', title:Membership services requested} But if you put it in a cell like this, it will increase the content length of the cell, which may be too long and cause the content to be abbreviated.

Essentially, a separate display function is still needed Similar to Write in the Computed Value of the cell {{currentRow["url"].title}}

And add a new Hover Value, write {{currentRow["url"].content}}

You can consider it ~

[akshayvijayjain]

dear @gzlinzihong , I have been trying to understand what you want from the issue, but honestly not able to understand the exact steps needed to resolve the issue.

the last comment is also not clear, when you said " i just made a simple example in the example"

I would need more clarity then I would be happy to proceed on this issue.

[akshayvijayjain]

what seems problematic is if there are 10 cells in the columns, or 20 or 30, we will make api call for each of those 30 cell, so 30 api calls?

[gzlinzihong]

Hi @akshayvijayjain . I am sorry for the unclear expression

I want to achieve the following effect

Add a hover value input box, which can execute the query, and then call it to display when hovering

[gzlinzihong]

what seems problematic is if there are 10 cells in the columns, or 20 or 30, we will make api call for each of those 30 cell, so 30 api calls?

Are you worried that if the translation needs to call the API, it will need to initiate a large number of requests and cause lag?

For example, adding a mouseover event listener to the cell should not cause the above problems.

@akshayvijayjain Thank you for your patience and would love to hear your feedback

[akshayvijayjain]

Thank you @gzlinzihong , for more details , based on the input,

here is how , we are trying to proceed on this

1. we create a table and connect to datasource
2. we create js function, that takes a string, makes api call and returns customized string value
3. can we create first two things in appsmith
4. connect 1 & 2, through mouse-over
5. probably, we do not have mouse-over in the appsmith supported feature.
6. to explore, if we can put this feature @PrasadMadine is working on this.

Let us know are your thoughts

[gzlinzihong]

@akshayvijayjain Thank you very much for your patience and effort!

Please do let me know once you have a conclusion.

If you're short on time but feel that this feature is feasible, guiding me on how to make these modifications would be greatly appreciated.

Let's work together to make Appsmith even better!

[akshayvijayjain]

sure @gzlinzihong , we will keep you posted!

[PrasadMadine]

@Nikhil-Nandagopal @gzlinzihong There are mouse events on input widget.

Similarly we are thinking to add mouse event(hover effect on specific cell)

What are your thoughts on this?

[gzlinzihong]

Hi @PrasadMadine

Is onHoveredValue intended for an entire row? If each column has a different hoveredValue, how should it be used? My original intention was to apply this within each individual column.