Nijmegen Component Library
You are viewing version 2 of the library, the latest version is

Normal Table 

<table class="responsive-table">
    <thead>
        <tr>
            <th>Voornaam</th>
            <th>Achternaam</th>
            <th>Beschrijving</th>
            <th>Lorem Ipsum</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>James</td>
            <td>Matman</td>
            <td>eget etiam</td>
            <td>pede nullam nascetur habitasse</td>
        </tr>
        <tr>
            <td>The</td>
            <td>Tick</td>
            <td>accumsan non</td>
            <td>sit viverra aenean bibendum</td>
        </tr>
        <tr>
            <td>Jokey</td>
            <td>Smurf</td>
            <td>maecenas pretium</td>
            <td>nascetur risus aliquet ipsum</td>
        </tr>
        <tr>
            <td>Cindy</td>
            <td>Beyler</td>
            <td>consectetur mi</td>
            <td>metus est dictum mollis elementum torquent. Ad ligula quis convallis per natoque</td>
        </tr>
        <tr>
            <td>Captain</td>
            <td>Cool</td>
            <td>porta non</td>
            <td>aenean lorem pulvinar eros</td>
        </tr>
    </tbody>
</table>

Responsive Table

A custom component created for Nijmegen, based on this CSS-Tricks demo.

Using

To start using this component and facilitate a correct layout on mobile devices, some JavaScript is needed to initialize it.
Underneath a jQuery example on how to achieve this and should be placed in the Additional component(s) script section as documented in How to use.

<script>
    $('.responsive-table').each(function() {
        var headings = $(this).find('thead th').map(function() {
            return this.textContent;
        }).toArray();

        if (headings.length > 0) {
            $(this).find('tbody td').each(function(tdIdx) {
                this.setAttribute('data-title', headings[tdIdx % headings.length]);
            });
        }
    });
</script>