@rws-framework/components/src/components/rws/rws-table/template.html

<div class="flex-table">
  <div class="flex-table-row table-header">
    ${T.repeat(x => x.dataColumns, T.html`<div class="flex-table-cell">${x => x.header}</div>`)}
    ${T.when(x => x.actions.length, T.html`<div class="flex-table-cell" data-field="_actions">Actions</div>`)}
  </div>
  
  ${T.repeat((x, dataContext) => x.data,  T.html`<div class="flex-table-row table-body">
          ${T.repeat((x, columnContext) => columnContext.parent.dataColumns, T.html`<div class="flex-table-cell" data-field="${x => x.key}">
                  ${(column, ctx) => {                                            
                      const value = ctx.parent[column.key];                                                    
                      return column.formatter ? column.formatter(value) : value;
                  }}                    
              </div>
          `)}
          ${T.when((x,c) => c.parent.actions && c.parent.actions.length, T.html`<div class="flex-table-cell" data-field="_actions">
            ${T.repeat((x, c) => c.parent.actions, T.html`
              <sl-button @click="${ (x, c) => x.handler(c.parent.id) }" variant="${x => x.variant}" >${x => x.label}</sl-button>  
            `)}                
          </div>`)}
      </div>
  `)}

  ${T.when(x => !x.data.length, T.html`<div class="flex-table-row flex-table-empty table-body">
    <div class="flex-table-cell full-row"><strong>${ x => x.emptyLabel }</strong></div>
  </div>`)}
  
</div>