How do you create a multi-column table in HabPanel?

Setup, Configuration and Use Beginners
1

I am not new to OpenHab, but new to HabPanel and I am not proficient in HTML/JS.

I want to create a widget in HabPanel that shows the status of all of my lights. I don’t plan to make them controllable in the first iteration. I have done this for a few of my other items such as doors, fans, etc. However, I have a lot more lights than I do doors, etc. For this reason I want to spread the table wide with multiple columns.

Eventually, I would like it to look something like the light status in Matrix Theme:

image
image758×226 45.7 KB

For now though, I am happy to just have the light name and the status in three columns. However, I can’t seem to find a way to make a 3 column table. I have tried multiple different methods but I am making no progress.

Here is my current template:

<h4>
  <strong>
    {{(itemsInGroup('Lights') | filter:{state:'on'}).length}}
    /
    {{(itemsInGroup('Lights')).length}}
  </strong>
  Lights
</h4>

<table class="table table-condensed" columns="2">
	<tr ng-repeat="item in itemsInGroup('Lights')" columns="2">
    <td class="text-right">{{item.label.replace("Lights","")}}:</td>
    <td class="text-left" ng-style="{color: (itemState(item.name)=='on')?'red':'green'}">
      {{itemState(item.name)}}
    </td>
  </tr>
</table>

Which renders like this:

image
image1078×297 8.17 KB

Any tips on how to code a 3 column table? I tried looking at the source for the Matrix theme, but it wasn’t clear to me how that was working either…

2

I think this is more a CSS question normally to add a column is easy.
Just copy the 2 TD that you have two times.

<table class="table table-condensed" columns="6">
	<tr ng-repeat="item in itemsInGroup('Lights')" columns="6">
           <!-- first column --!>
           <td class="text-right">{{item.label.replace("Lights","")}}:</td>
           <td class="text-left" ng-style="{color: (itemState(item.name)=='on')?'red':'green'}">
      {{itemState(item.name)}}
           <!-- second column --!>
           <td class="text-right">{{item.label.replace("Lights","")}}:</td>
          <td class="text-left" ng-style="{color: (itemState(item.name)=='on')?'red':'green'}">
      {{itemState(item.name)}}
         <!-- third column --!>
         <td class="text-right">{{item.label.replace("Lights","")}}:</td>
         <td class="text-left" ng-style="{color: (itemState(item.name)=='on')?'red':'green'}">
      {{itemState(item.name)}}
    </td>
  </tr>
</table>
3

Thanks for the help. Unfortunately, that then repeats the same element across all 3 columns.

4

You need to use the<button > tag for the item and a CSS float:left instead of the old <table> tags.
Just download and edit the html file from this theme to better understand.
Regards
Lorenzo