Custom elements inside table cells (e.g., <a> tags)

[paul-maki]

Support Question

Hi,

I was wondering if it’s possible to render custom HTML elements inside the table cells, such as <a> tags or other HTML elements.

Right now, the data is rendered directly inside elements. Is there a way to override or customize this behavior so that I can include elements like:

<td><a href="https://test.com">test.com</a></td>

Currently, we are using the “addEventListener” to display an <a> element inside a <td> (something like):

table.addStyleListener(() => {
   for (const td of table.querySelectorAll("tbody td")) {
      const a = document.createElement("a");
      // ...set <a> info
      td.appendChild(a);
   }
})

Does this approach make sense, or is there a better way to do it within the library’s existing functionality?

Thanks for your time.

[texodus]

This approach is fine and should perform well, especially if the HTML content you want to embed is simple (like an <a> tag). You may optionally return HTMLElement values (not HTML string text, but the HTMLElement objects themselves) directly as data in your setDataListener callback, which can help optimize HTML content which is expensive to mount/dismount, or which causes undue layout thrashing when mounting.

Note that if you do this for expensive elements, you'll want to be careful smartly caching-re-using these physical DOM elements as the users' viewport moves. Otherwise you may introduce flickering or a frame-rate degradation.