Create double rows inside cells

[matdjon]

I want to do something like the attached image .

Right now I’m filling the column with html-like string, like "<span style='color: red'>Alarm</span><br>" for the red Alarm text. But ideally, I want for each of row inside cell to be bind with javascript, as in using $('#smartTableId') will get the parent of the table, then I just go through the DOM like $('#smartTableId').children.children to get the row element <row><span>Alarm</span></row>.

Is there any way to do this right now in the smart-table API?

[matdjon]

can’t embed the image. the link is https://imgur.com/O5wq5bc

[Markov]

Hi,

Please. look at https://www.htmlelements.com/demos/table/overview/ which shows how to display html in cells.

Regards,
Markov

[matdjon]

the page is very broad. can I get a more specific example?

And also I try to find the documentation for templateElement and formatFunction but to no avail.

[ivanpeevski]

Hi,

 

The two properties are found under the “columns” property.

For a specific example how to achieve the table in the image, please see the demo here – codepen

 

Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/

[matdjon]

Thanks Markov and ivanpeevski for the helpful input.

My code is working now.
From my understanding, the templateElement is intended for a short html code, while formatFunction is for an elaborate, long html lines. Is this correct?

[Markov]

Hi,

Not exactly, the templateElement can be used for pointing to a HTMLTemplate which could be a complex DOM structure, too, but with formatFunction, you have more control over what’s displayed as you can customize it dynamically and easily.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts