Accordion Table

There are no notes for this item.

<table class="table">
    <caption class="sr-only"></caption>
    <thead>
        <tr>
            <th scope="col" width="1"></th>
            <th scope="col">Aanvraag/melding</th>
            <th scope="col">Status</th>
            <th scope="col">Ingediend</th>
            <th scope="col">Type</th>
            <th scope="col" width="50"></th>
            <th scope="col" width="250"></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">
                <button type="button" title="Open" class="btn btn-link"><span class="sr-only">Open</span><svg class="di di-chevron-down">
                        <use href="../../dso-icons.svg#chevron-down" />
                    </svg></button>

            </th>
            <td>Vergunning kappen</td>
            <td>Verzonden</td>
            <td>21/11/2017</td>
            <td>Aanvraag</td>
            <td class="text-center"><span class="dso-attachments">1 <span class="sr-only">bijlage</span></span>
            </td>
            <td class="text-right">
                <button type="button" title="Bewerk" class="btn btn-link"><span class="sr-only">Bewerk</span><svg class="di di-pencil">
                        <use href="../../dso-icons.svg#pencil" />
                    </svg></button>

                <button type="button" title="Opnieuw" class="btn btn-link"><span class="sr-only">Opnieuw</span><svg class="di di-redo">
                        <use href="../../dso-icons.svg#redo" />
                    </svg></button>

                <button type="button" title="Kopieer" class="btn btn-link"><span class="sr-only">Kopieer</span><svg class="di di-copy">
                        <use href="../../dso-icons.svg#copy" />
                    </svg></button>

                <button type="button" title="Verwijder" class="btn btn-link"><span class="sr-only">Verwijder</span><svg class="di di-trash">
                        <use href="../../dso-icons.svg#trash" />
                    </svg></button>

            </td>
        </tr>
        <tr>
            <th scope="row">
                <button type="button" title="Open" class="btn btn-link active"><span class="sr-only">Open</span><svg class="di di-chevron-up">
                        <use href="../../dso-icons.svg#chevron-up" />
                    </svg></button>

            </th>
            <td>Boom 23 kappen</td>
            <td>
                <button type="button" class="btn btn-link"><svg class="di di-angle-right">
                        <use href="../../dso-icons.svg#angle-right" />
                    </svg><span>Openen</span></button>

            </td>
            <td>15/10/2017</td>
            <td>Verzoek</td>
            <td class="text-center"><span class="dso-attachments">7 <span class="sr-only">bijlagen</span></span>
                </span></td>
            <td class="text-right">
                <button type="button" title="Bewerk" class="btn btn-link"><span class="sr-only">Bewerk</span><svg class="di di-pencil">
                        <use href="../../dso-icons.svg#pencil" />
                    </svg></button>

                <button type="button" title="Opnieuw" class="btn btn-link"><span class="sr-only">Opnieuw</span><svg class="di di-redo">
                        <use href="../../dso-icons.svg#redo" />
                    </svg></button>

                <button type="button" title="Kopieer" class="btn btn-link"><span class="sr-only">Kopieer</span><svg class="di di-copy">
                        <use href="../../dso-icons.svg#copy" />
                    </svg></button>

                <button type="button" title="Verwijder" class="btn btn-link"><span class="sr-only">Verwijder</span><svg class="di di-trash">
                        <use href="../../dso-icons.svg#trash" />
                    </svg></button>

            </td>
        </tr>
        <tr>
            <td colspan="7" class="text-center" style="line-height: 300px;">
                Container cel
            </td>
        </tr>
        <tr>
            <th scope="row">
                <button type="button" title="Open" class="btn btn-link"><span class="sr-only">Open</span><svg class="di di-chevron-down">
                        <use href="../../dso-icons.svg#chevron-down" />
                    </svg></button>

            </th>
            <td>Pand 24 slopen</td>
            <td>Aangevuld</td>
            <td>13/09/2017</td>
            <td>Melding</td>
            <td class="text-center"><span class="dso-attachments">6 <span class="sr-only">bijlagen</span></span>
                </span></td>
            <td class="text-right">
                <button type="button" title="Kopieer" class="btn btn-link"><span class="sr-only">Kopieer</span><svg class="di di-copy">
                        <use href="../../dso-icons.svg#copy" />
                    </svg></button>

                <button type="button" title="Verwijder" class="btn btn-link"><span class="sr-only">Verwijder</span><svg class="di di-trash">
                        <use href="../../dso-icons.svg#trash" />
                    </svg></button>

            </td>
        </tr>
        <tr>
            <th scope="row">
                <button type="button" title="Open" class="btn btn-link"><span class="sr-only">Open</span><svg class="di di-chevron-down">
                        <use href="../../dso-icons.svg#chevron-down" />
                    </svg></button>

            </th>
            <td>Kerkstraat 10 tuin uitgraven</td>
            <td>Ingetrokken</td>
            <td>11/07/2017</td>
            <td>Aanvraag</td>
            <td></td>
            <td class="text-right">
                <button type="button" title="Verwijder" class="btn btn-link"><span class="sr-only">Verwijder</span><svg class="di di-trash">
                        <use href="../../dso-icons.svg#trash" />
                    </svg></button>

            </td>
        </tr>
        <tr>
            <th scope="row">
                <button type="button" title="Open" class="btn btn-link"><span class="sr-only">Open</span><svg class="di di-chevron-down">
                        <use href="../../dso-icons.svg#chevron-down" />
                    </svg></button>

            </th>
            <td>Grote Markt 31 kabels leggen</td>
            <td>Concept</td>
            <td>28/06/2017</td>
            <td>Aanvraag</td>
            <td></td>
            <td class="text-right">
                <button type="button" title="Verwijder" class="btn btn-link"><span class="sr-only">Verwijder</span><svg class="di di-trash">
                        <use href="../../dso-icons.svg#trash" />
                    </svg></button>

            </td>
        </tr>
    </tbody>
</table>
<table class="table">
  <caption class="sr-only">{{ caption }}</caption>
  <thead>
    <tr>
      <th scope="col" width="1"></th>
      <th scope="col">Aanvraag/melding</th>
      <th scope="col">Status</th>
      <th scope="col">Ingediend</th>
      <th scope="col">Type</th>
      <th scope="col" width="50"></th>
      <th scope="col" width="250"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">
        {% render '@button', {type:'button', label:'Open', modifier:'link', icon:'chevron-down', iconOnly:true} %}
      </th>
      <td>Vergunning kappen</td>
      <td>Verzonden</td>
      <td>21/11/2017</td>
      <td>Aanvraag</td>
      <td class="text-center">{% render '@attachments-counter', {count:1} %}</td>
      <td class="text-right">
        {% render '@button', {type:'button', modifier:'link', label:'Bewerk', icon:'pencil', iconOnly:true} %}
        {% render '@button', {type:'button', modifier:'link', label:'Opnieuw', icon:'redo', iconOnly:true} %}
        {% render '@button', {type:'button', modifier:'link', label:'Kopieer', icon:'copy', iconOnly:true} %}
        {% render '@button', {type:'button', modifier:'link', label:'Verwijder', icon:'trash', iconOnly:true} %}
      </td>
    </tr>
    <tr>
      <th scope="row">
        {% render '@button', {type:'button', label:'Open', modifier:'link active', icon:'chevron-up', iconOnly:true} %}
      </th>
      <td>Boom 23 kappen</td>
      <td>
        {% render '@button', {type:'button', modifier:'link', label:'Openen', icon:'angle-right'} %}
      </td>
      <td>15/10/2017</td>
      <td>Verzoek</td>
      <td class="text-center">{% render '@attachments-counter', {count:7} %}</span></td>
      <td class="text-right">
        {% render '@button', {type:'button', modifier:'link', label:'Bewerk', icon:'pencil', iconOnly:true} %}
        {% render '@button', {type:'button', modifier:'link', label:'Opnieuw', icon:'redo', iconOnly:true} %}
        {% render '@button', {type:'button', modifier:'link', label:'Kopieer', icon:'copy', iconOnly:true} %}
        {% render '@button', {type:'button', modifier:'link', label:'Verwijder', icon:'trash', iconOnly:true} %}
      </td>
    </tr>
    <tr>
      <td colspan="7" class="text-center" style="line-height: 300px;">
        Container cel
      </td>
    </tr>
    <tr>
      <th scope="row">
        {% render '@button', {type:'button', label:'Open', modifier:'link', icon:'chevron-down', iconOnly:true} %}
      </th>
      <td>Pand 24 slopen</td>
      <td>Aangevuld</td>
      <td>13/09/2017</td>
      <td>Melding</td>
      <td class="text-center">{% render '@attachments-counter', {count:6} %}</span></td>
      <td class="text-right">
        {% render '@button', {type:'button', modifier:'link', label:'Kopieer', icon:'copy', iconOnly:true} %}
        {% render '@button', {type:'button', modifier:'link', label:'Verwijder', icon:'trash', iconOnly:true} %}
      </td>
    </tr>
    <tr>
      <th scope="row">
        {% render '@button', {type:'button', label:'Open', modifier:'link', icon:'chevron-down', iconOnly:true} %}
      </th>
      <td>Kerkstraat 10 tuin uitgraven</td>
      <td>Ingetrokken</td>
      <td>11/07/2017</td>
      <td>Aanvraag</td>
      <td></td>
      <td class="text-right">
        {% render '@button', {type:'button', modifier:'link', label:'Verwijder', icon:'trash', iconOnly:true} %}
      </td>
    </tr>
    <tr>
      <th scope="row">
        {% render '@button', {type:'button', label:'Open', modifier:'link', icon:'chevron-down', iconOnly:true} %}
      </th>
      <td>Grote Markt 31 kabels leggen</td>
      <td>Concept</td>
      <td>28/06/2017</td>
      <td>Aanvraag</td>
      <td></td>
      <td class="text-right">
        {% render '@button', {type:'button', modifier:'link', label:'Verwijder', icon:'trash', iconOnly:true} %}
      </td>
    </tr>
  </tbody>
</table>
/* No context defined for this component. */