# Perspective: HTML tags in table cell

**URL:** <https://forum.inductiveautomation.com/t/perspective-html-tags-in-table-cell/99062>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [November 25, 2024, 11:34am UTC](https://forum.inductiveautomation.com/t/perspective-html-tags-in-table-cell/99062 "2024-11-25T11:34:55Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![pgmo](https://avatars.discourse-cdn.com/v4/letter/p/d07c76/32.png) [@pgmo](https://forum.inductiveautomation.com/u/pgmo)\
**Post date:** [November 25, 2024, 11:34am UTC](https://forum.inductiveautomation.com/t/perspective-html-tags-in-table-cell/99062/1 "2024-11-25T11:34:55Z")

</div>

Hi all,  
I'd like to modify the appearance of text in table cells by using HTML tags like `<b>...</b>` or `<br/>`. Unfortunately those tags are rendered textually instead of affecting actual appearance. I tried to debug the problem in the browser by inspecting the elements with F12: I saw that the table is actually a flexbox grid but that is not the cause, I think, for that unwanted rendering behavior.  
Any suggestion is appreciated.  
Thanks, regards

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [November 25, 2024, 1:36pm UTC](https://forum.inductiveautomation.com/t/perspective-html-tags-in-table-cell/99062/2 "2024-11-25T13:36:49Z")

</div>

I'm not sure you can use html in a perspective table. For newline/carriage return type formatting you should be able to use `char(10)`.

[Carriage return in a perspective cells - Ignition - Inductive Automation Forum](https://forum.inductiveautomation.com/t/carriage-return-in-a-perspective-cells/78674)

---

<div class="post-metadata">

**Author:** ![Benjamin\_Furlani](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/benjamin_furlani/32/66084_2.png) [@Benjamin\_Furlani](https://forum.inductiveautomation.com/u/Benjamin_Furlani)\
**Post date:** [November 25, 2024, 2:14pm UTC](https://forum.inductiveautomation.com/t/perspective-html-tags-in-table-cell/99062/3 "2024-11-25T14:14:46Z")

</div>

you could use a view rendered cell and then add a markup component to it with whatever you need to add. You will have the row info passed in a params.

---

<div class="post-metadata">

**Author:** ![pgmo](https://avatars.discourse-cdn.com/v4/letter/p/d07c76/32.png) [@pgmo](https://forum.inductiveautomation.com/u/pgmo)\
**Post date:** [November 25, 2024, 3:08pm UTC](https://forum.inductiveautomation.com/t/perspective-html-tags-in-table-cell/99062/4 "2024-11-25T15:08:08Z")

</div>

> [@Benjamin\_Furlani](#):
>
> you could use a view rendered cell

Hi @Benjamin_Furlani , that is an option I already went for, but the view rendering gets too heavy - almost 100 cols x 12000 rows, each cell in view render mode.  
I tried this [Carriage return in a perspective cells - #2 by dkhayes117](https://forum.inductiveautomation.com/t/carriage-return-in-a-perspective-cells/78674/2) too, but it doesn't seem to work, or I'm doing somthing wrong.

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [November 25, 2024, 3:14pm UTC](https://forum.inductiveautomation.com/t/perspective-html-tags-in-table-cell/99062/5 "2024-11-25T15:14:25Z")

</div>

What did you try, that didn't work? In a MySQL/MariaDB query, I use it like so

```python
SELECT
    concat_ws(CHAR(10 using utf8),column1, column2, column3)
   ...

```

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 25, 2024, 3:14pm UTC](https://forum.inductiveautomation.com/t/perspective-html-tags-in-table-cell/99062/6 "2024-11-25T15:14:41Z")

</div>

with css you can force text to wrap if that is what you want

```python
  white-space: pre-wrap;
  overflow-wrap: break-word;

```

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 25, 2024, 3:16pm UTC](https://forum.inductiveautomation.com/t/perspective-html-tags-in-table-cell/99062/7 "2024-11-25T15:16:36Z")

</div>

> [@pgmo](#):
>
> almost 100 cols x 12000 rows, each cell in view render mode.

did you turn ON virtualized rows? Also what the hell are you displaying if yo need 100 custom colums?

There is no way you would need that many. General layout stuff needs to be done with css.

Please provide a sample screenshot of what your goal is.

---

<div class="post-metadata">

**Author:** ![Benjamin\_Furlani](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/benjamin_furlani/32/66084_2.png) [@Benjamin\_Furlani](https://forum.inductiveautomation.com/u/Benjamin_Furlani)\
**Post date:** [November 25, 2024, 3:18pm UTC](https://forum.inductiveautomation.com/t/perspective-html-tags-in-table-cell/99062/8 "2024-11-25T15:18:14Z")

</div>

> [@pgmo](#):
>
> 100 cols x 12000 rows

Not to derail the point of the topic, but this feels like a pretty large table to display. I am not sure how useful 100 columns are going to be? And do you need this on every column? You can set specific columns to be view rendered and others to not be. Try to consider what data is perinate to the user and then provide a more detailed export possibly?

The number of rows doesn't really matter if you use virtualization or pagination. I use tables with rendered views that have upwards of 40k values depending on the time range and that works fine as long as it is setup to not render every row out of the 40k at the same time.

Just want to make sure you are considering the user experience.

---

<div class="post-metadata">

**Author:** ![pgmo](https://avatars.discourse-cdn.com/v4/letter/p/d07c76/32.png) [@pgmo](https://forum.inductiveautomation.com/u/pgmo)\
**Post date:** [November 25, 2024, 3:48pm UTC](https://forum.inductiveautomation.com/t/perspective-html-tags-in-table-cell/99062/9 "2024-11-25T15:48:00Z")

</div>

Hi all,  
thanks for your help.  
Some answers to you:

- virtualization is turned on and pagination too
- columns are ~100 (sometimes even more) and it needs to be like that: it's a final view for quality operators on a huge screen, **OK** cells are green colored, **KO** cells are red colored, quality operators need to get an overall idea, rather then deep dive into details.

---

<div class="post-metadata">

**Author:** ![Benjamin\_Furlani](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/benjamin_furlani/32/66084_2.png) [@Benjamin\_Furlani](https://forum.inductiveautomation.com/u/Benjamin_Furlani)\
**Post date:** [November 25, 2024, 3:58pm UTC](https://forum.inductiveautomation.com/t/perspective-html-tags-in-table-cell/99062/10 "2024-11-25T15:58:37Z")

</div>

In that case, you may consider a way to break up your table into multiple tables. Personally, I would recommend a PDF if they have the ability to do report builder, but that is typically what most of my customers prefer due to its exportability.

Hopefully you can use one of the options above.

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [November 25, 2024, 4:02pm UTC](https://forum.inductiveautomation.com/t/perspective-html-tags-in-table-cell/99062/11 "2024-11-25T16:02:33Z")

</div>

> [@pgmo](#):
>
> quality operators need to get an overall idea

100 columns, I can see, but 12,000 rows?

I'm pretty sure that no matter how large the screen, 1.2M+ data points is overwhelming for anyone. I know I wouldn't be able to get a very good overall idea when looking at that much data. Your quality operators must be very skilled.

---

<div class="post-metadata">

**Author:** ![pgmo](https://avatars.discourse-cdn.com/v4/letter/p/d07c76/32.png) [@pgmo](https://forum.inductiveautomation.com/u/pgmo)\
**Post date:** [November 25, 2024, 4:07pm UTC](https://forum.inductiveautomation.com/t/perspective-html-tags-in-table-cell/99062/12 "2024-11-25T16:07:44Z")

</div>

> [@lrose](#):
>
> 12,000 rows?

Pagination lets see just 500 rows a time. An option I'm considering is paginating the resultset on the server, rather then letting Ignition paginate the final result.  
However the problem of breaking lines in cell is still there.

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [November 25, 2024, 4:11pm UTC](https://forum.inductiveautomation.com/t/perspective-html-tags-in-table-cell/99062/13 "2024-11-25T16:11:45Z")

</div>

> [@pgmo](#):
>
> However the problem of breaking lines in cell is still there.

I believe that the answer to this, is to do it with CSS as @victordcq pointed out, you just need to target the cells.

---

<div class="post-metadata">

**Author:** ![pgmo](https://avatars.discourse-cdn.com/v4/letter/p/d07c76/32.png) [@pgmo](https://forum.inductiveautomation.com/u/pgmo)\
**Post date:** [November 25, 2024, 4:16pm UTC](https://forum.inductiveautomation.com/t/perspective-html-tags-in-table-cell/99062/14 "2024-11-25T16:16:19Z")

</div>

> [@victordcq](#):
>
> with css you can force text to wrap if that is what you want
> 
> ```python
> white-space: pre-wrap;
> overflow-wrap: break-word;
> 
> ```

This solution will wrap text when the right margin is reached and not just when I want, as with an injected `<br/>` tag.  
If I `concat` a `char(10)` I get no newline either, nor with a `char(10)char(13)`

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [November 25, 2024, 4:55pm UTC](https://forum.inductiveautomation.com/t/perspective-html-tags-in-table-cell/99062/15 "2024-11-25T16:55:48Z")

</div>

It Just Works ™, when I do it from a query, but injecting a `char(10)` from a transform I had to add the `white-space: pre-wrap` too. It does work though.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/e/4ebedae43e2e88c6c35bcf94f4e77f790fb0783a.png)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 26, 2024, 7:35am UTC](https://forum.inductiveautomation.com/t/perspective-html-tags-in-table-cell/99062/16 "2024-11-26T07:35:40Z")

</div>

` white-space: pre-wrap;` should handle new lines
