How do I pass a custom style into 'item'?

[TomLewis]

I need to be able to set custom class names based on specific rows to highlight them in my list. I cant pass a variable into the 'item' it only allows me to set inside but I need to SET the class name per item in my list.

        <script>
            var options = {
              valueNames: [ 
                'name', 
                'rank',
                { 
                  attr: 'src', 
                  name: 'image' 
                },
                { 
                  attr: 'href', 
                  name: 'link' 
                },
              ],
              
              item: '<li class="list-group-item list-group-item-action p-1 small"><img class="image img-fluid" src="" /><a class="link name" href=""></a> - <span class="rank"></span></li>'

            };
            
            var values = [];
            var userList = new List('users', options, values);
</script>

[javve]

Interesting feature. I think this could be solved by #634 if I rewrote it a bit. We'll see. I'll keep this issue open.

[MartijnHarmenzon]

@javve Has this feature ever made it? I can not find any documentation. I would also really like to have this feature. And #634 is still open... @FrozenBeard did you manage to achieve this?

As the image shows, I would like to change the color of the badges based on it's status. I would like to do this by changing the color class associated to the badge. Using Tailwind CSS to style.

[TomLewis]

Yeah, I moved to a different library ☹️

[MartijnHarmenzon]

@FrozenBeard I see. Out of curiosity, where did you move to?

I managed to solve it for now by adding the color classes afterwards by using the following code.

    notificationList.items.forEach(function (element) {
      const status = element.values().status;
      let bg_color;

      switch (status) {
        case 'High':
          bg_color = 'bg-red-700';
          break;
        case 'Middle':
        bg_color = 'bg-orange-500';
          break;
        case 'Low':
        bg_color = 'bg-green-600';
          break;
        default:
        bg_color = 'bg-gray-400';
          break;
      }

      element.elm.cells[1].children[0].classList.add(bg_color);
    });

[pmarks-net]

You can solve this using an item function that generates arbitrary HTML:

item: function(v) {
  return `<whatever class="name ${v.myclass}"></whatever>`;
}