DSO Toolkit | Component Library

Table Data Grid 

<div class="dso-example-wrapper">
    <div class="dso-example-text">
        <h2>Data-grid</h2>
        <p>Een data grid is een dynamischere weergave van informatie. Het bevat wel interactieve elementen om de tabel aan te passen.</p>
    </div>
    <table class="table" role="grid">
        <caption class="sr-only">Overzicht toegevoegde documenten</caption>
        <thead>
            <tr>
                <th scope="col">
                    #
                </th>
                <th scope="col">
                    Documentnaam
                </th>
                <th scope="col">
                    Eigenaar
                </th>
                <th scope="col">
                    Upload datum
                </th>
                <th scope="col">
                    Acties
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td><a href="#tekening">Tekening.jpg</a></td>
                <td>P.J. Puk</td>
                <td>21-07-2019</td>
                <td>
                    <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="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">2</th>
                <td><a href="#omgevingsplan">Omgevingsplan.pdf</a></td>
                <td>H.G. Griff</td>
                <td>22-07-2019</td>
                <td>
                    <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="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">3</th>
                <td><a href="#bodemonderzoek">Bodemonderzoek.pdf</a></td>
                <td>P.J. Puk</td>
                <td>23-07-2019</td>
                <td>
                    <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="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">4</th>
                <td><a href="#maatregelen">Maatregelen.pdf</a></td>
                <td>P.J. Puk</td>
                <td>23-07-2019</td>
                <td>
                    <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="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">5</th>
                <td><a href="#omgevingsplan">Plattegrond.pdf</a></td>
                <td>P.J. Puk</td>
                <td>28-07-2019</td>
                <td>
                    <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="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>
</div>
 
<div class="dso-example-wrapper">
  <div class="dso-example-text">
    <h2>Data-grid</h2>
    <p>Een data grid is een dynamischere weergave van informatie. Het bevat wel interactieve elementen om de tabel aan te passen.</p>
  </div>
  <table {{#if modifier}} class="{{modifier}}"{{/if}} role="grid">
    <caption {{#unless showCaption}} class="sr-only"{{/unless}}>{{ caption }}</caption>
    <thead>
      <tr>
        {{#each columnHeaders}}
        <th scope="col">
          {{title}}
        </th>
        {{/each}}
      </tr>
    </thead>
    <tbody>
      {{#each rowContent}}
      <tr {{#if rowNotification}} class="{{rowNotification}}"{{/if}}>
        {{#if rowHeader}}
        <th scope="row">{{rowHeader}}</th>
        {{/if}}
        <td><a href="#{{linkHref}}">{{documentNaam}}</a></td>
        <td>{{eigenaar}}</td>
        <td>{{uploadDatum}}</td>
        <td>
          {{> '@button' type='button' modifier='link' label='Bewerk' icon='pencil' iconOnly=true }}
          {{> '@button' type='button' modifier='link' label='Verwijder' icon='trash' iconOnly=true }}
        </td>
      </tr>
      {{/each}}
    </tbody>
  </table>
</div>
 
modifier: table
caption: Overzicht toegevoegde documenten
columnHeaders:
  - title: '#'
  - title: Documentnaam
  - title: Eigenaar
  - title: Upload datum
  - title: Acties
rowContent:
  - rowHeader: 1
    linkHref: tekening
    documentNaam: Tekening.jpg
    eigenaar: P.J. Puk
    uploadDatum: 21-07-2019
  - rowHeader: 2
    linkHref: omgevingsplan
    documentNaam: Omgevingsplan.pdf
    eigenaar: H.G. Griff
    uploadDatum: 22-07-2019
  - rowHeader: 3
    linkHref: bodemonderzoek
    documentNaam: Bodemonderzoek.pdf
    eigenaar: P.J. Puk
    uploadDatum: 23-07-2019
  - rowHeader: 4
    linkHref: maatregelen
    documentNaam: Maatregelen.pdf
    eigenaar: P.J. Puk
    uploadDatum: 23-07-2019
  - rowHeader: 5
    linkHref: omgevingsplan
    documentNaam: Plattegrond.pdf
    eigenaar: P.J. Puk
    uploadDatum: 28-07-2019

There are no notes for this item.