{% macro render(props) -%}
<div class="table__wrapper">
  <table class="table">
    <tr class="table__row header">
      <th class="table__header">Sr No.</th>
      {% for header in props["header"] %}
      <th class="table__header">{{header.displayName}}</th>
      {% endfor %}
      <th class="table__header"></th>
      <th class="table__header"></th>
    </tr>
    {% for content in props["content"] %}
    <tr class="table__row">
      <td class="table__cell">{{loop.index}}</td>
      {% for header in props["header"] %}
      <td class="table__cell">{{content[header["value"]]["displayName"]}}</td>
      {% endfor %}
      <td class="table__cell icon"><a href="{{content['editUrl']}}">edit</a></td>
      <td class="table__cell icon"><a href="{{content['deleteUrl']}}">delete</a></td>
    </tr>
    {% endfor %}
  </table>
</div>
{%- endmacro %}