{#
 * Custom grouped table view template
 * Place in: YOUR_THEME/templates/views/views-view-table--YOURVIEWID.html.twig
#}
<div class="table-responsive">
  <table class="table table-striped table-bordered media-player-devices">
    <thead>
      <tr>
        {# Skip the first column in header (grouped column) #}
        {% for header_cell in header|slice(1) %}
          <th{{ header_cell.attributes.addClass('text-nowrap') }}>{{ header_cell.content }}</th>
        {% endfor %}
      </tr>
    </thead>
    <tbody>
      {% set current_group = '' %}

      {% for row in rows %}
        {# Get the group-by column value (first column assumed as title) #}
        {% set group_value = row.columns.title.content[0].field_output['#markup']|striptags %}

        {% if group_value != current_group %}
          <tr class="group-row-header">
            <td colspan="{{ header|length - 1 }}">
              <div class="group-toggle">
                <span class="toggle-arrow">▼</span>
                <span class="group-name">{{ group_value }}</span>
                <span class="device-count"></span>
                <span class="status-dots"></span>
              </div>
            </td>
          </tr>
          {% set current_group = group_value %}
        {% endif %}

        <tr{{ row.attributes.addClass('device-row') }}>
          {# Skip first column in data rows #}
          {% for column in row.columns|slice(1) %}
            <td{{ column.attributes }}>{{ column.content }}</td>
          {% endfor %}
        </tr>
      {% endfor %}
      
    </tbody>
  </table>
</div>