How to add HTML into a Beautiful Table cell?

[etwakaoz]

Hi, first time question asker here.
I am trying to add some HTML code into a table based on Miguel Grinberg's Beautiful basic table. I am still a novice at Flask, so please forgive me if this is a "stupid" question. When I use the following, the table displays as expected:
new gridjs.Grid({
columns: [
{ id: 'event_id', name: 'Event ID', sort: false }
...
But when I add the following formatter sequence, the table fails to display.
new gridjs.Grid({
columns: [
{ id: 'event_id', name: 'Event ID', sort: false,
formatter: (cell) => html('${cell}')
},
...
What am I doing wrong? Is there a way to add HTML (and specifically href) to a table cell?

Thank you for your time and consideration.
Best regards,
ET

[miguelgrinberg]

See this example, which inserts an email link in a table cell.

In your example above you appear to be using single quotes inside the html() function. If you want to use JS template expressions you have to use back ticks instead.

Finally, if your cell variable has HTML code, be very careful of introducing XSS vulnerabilities in your code. I suggest you use an approach more similar to the one I linked, where the cell value is just data, and the HTML markup is added by you explicitly.

[etwakaoz]

Thanks Miguel. I'm giving it a try, but your example is from a server side table. I tried your example from my basic table, but had troubles. I'll work on modify my table to server side.

[miguelgrinberg]

The formatter attribute of a column is standard, it applies to all tables regardless of how the data is provided. See the docs.

[etwakaoz]

Miguel, thank you very much for your help. I'm almost there :-). I got the formatter to work and able to create an href. But now I would like to pass a parameter to my url. I thought something like the following would work, but it looks like the '$' is unexpected by jinja.

const url = {{ url_for("judgesdb.update_event", event_id=${cell}) }};
jinja2.exceptions.TemplateSyntaxError: unexpected char '$'

looking to use url in html(<a href="${url}"> ${cell} </a>) },

I'm guessing that jinja doesn't like '$', but do not know how to get around this error. I'm an old C programmer writing python like C.

Thanks for any help.

[miguelgrinberg]

You are mixing things that happen when you render the template (the Python side) with things that happen later, when the browser renders the table (JavaScript side). The dollar expressions are valid in JS, you can include them in the Jinja template, but you cannot evaluate them. In other words, you cannot pass a variable that will only be known in the browser in the future to the url_for() function from Flask.

You have two options: Either you generate the URLs for all your cells in Python and include them in the table data, or else you remove the use of url_for and create logic to generate the URL from the cell value in JavaScript.

[etwakaoz]

Thanks again for all your help. I was beginning to think this was the case and now I have to learn JavaScript .