JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Table › Create double rows inside cells

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • December 13, 2023 at 1:02 am #109298
    matdjon
    Participant

    I want to do something like the attached image 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?

    December 13, 2023 at 1:03 am #109299
    matdjon
    Participant

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

    December 13, 2023 at 3:49 pm #109300
    Markov
    Keymaster

    Hi,

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

    Regards,
    Markov

    December 14, 2023 at 1:10 am #109302
    matdjon
    Participant

    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.

    December 14, 2023 at 9:57 pm #109317
    ivanpeevski
    Participant

    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/

    December 15, 2023 at 10:06 am #109319
    matdjon
    Participant

    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?

    December 18, 2023 at 6:54 am #109338
    Markov
    Keymaster

    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
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.