MDC Templates

Responsive Data Tables

Alerts should be helpful and concise. Remember, not every user will be tech savy. Use layman terms when guiding our visitors through their journey. This is especially helpful for tips, warnings and error messages. Also, if the problem a user if facing can not be easily solved by simply stating the issue, provide an example to help clarify.

TableSaw - Stack Table

For instance if a user wants to perform a specific search class search but the system produces an error, provide an example search term that will yield results. In addition, add a brief description on the type of search pattern the system is expecting.

Copy

<table class="tablesaw tablesaw-stack" data-tablesaw-mode="stack" id="tablesaw-4541">
    <thead>
        <tr>
            <th scope="col" data-tablesaw-sortable-col="" data-tablesaw-priority="persist">Movie Title</th>
            <th scope="col" data-tablesaw-sortable-col="" data-tablesaw-sortable-default-col="" data-tablesaw-priority="3">Rank</th>
            <th scope="col" data-tablesaw-sortable-col="" data-tablesaw-priority="2">Year</th>
            <th scope="col" data-tablesaw-sortable-col="" data-tablesaw-priority="1">
                <abbr title="Rotten Tomato Rating">Rating</abbr>
            </th>
            <th scope="col" data-tablesaw-sortable-col="" data-tablesaw-priority="4">Gross</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="title"><strong class="tablesaw-cell-label">Movie Title</strong><span class="tablesaw-cell-content"><a href="http://en.wikipedia.org/wiki/Avatar_(2009_film)">Avatar</a></span></td>
            <td><strong class="tablesaw-cell-label">Rank</strong><span class="tablesaw-cell-content">1</span></td>
            <td><strong class="tablesaw-cell-label">Year</strong><span class="tablesaw-cell-content">2009</span></td>
            <td><strong class="tablesaw-cell-label"><abbr title="Rotten Tomato Rating">Rating</abbr></strong><span class="tablesaw-cell-content">83%</span></td>
            <td><strong class="tablesaw-cell-label">Gross</strong><span class="tablesaw-cell-content">$2.7B</span></td>
        </tr>
        <tr>
            <td class="title"><strong class="tablesaw-cell-label">Movie Title</strong><span class="tablesaw-cell-content"><a href="http://en.wikipedia.org/wiki/Titanic_(1997_film)">Titanic</a></span></td>
            <td><strong class="tablesaw-cell-label">Rank</strong><span class="tablesaw-cell-content">2</span></td>
            <td><strong class="tablesaw-cell-label">Year</strong><span class="tablesaw-cell-content">1997</span></td>
            <td><strong class="tablesaw-cell-label"><abbr title="Rotten Tomato Rating">Rating</abbr></strong><span class="tablesaw-cell-content">88%</span></td>
            <td><strong class="tablesaw-cell-label">Gross</strong><span class="tablesaw-cell-content">$2.1B</span></td>
        </tr>
        <tr>
            <td class="title"><strong class="tablesaw-cell-label">Movie Title</strong><span class="tablesaw-cell-content"><a href="http://en.wikipedia.org/wiki/The_Avengers_(2012_film)">The Avengers</a></span></td>
            <td><strong class="tablesaw-cell-label">Rank</strong><span class="tablesaw-cell-content">3</span></td>
            <td><strong class="tablesaw-cell-label">Year</strong><span class="tablesaw-cell-content">2012</span></td>
            <td><strong class="tablesaw-cell-label"><abbr title="Rotten Tomato Rating">Rating</abbr></strong><span class="tablesaw-cell-content">92%</span></td>
            <td><strong class="tablesaw-cell-label">Gross</strong><span class="tablesaw-cell-content">$1.5B</span></td>
        </tr>
    </tbody>
</table>

TableSaw - Swipe Table with Mini Map

These types of alerts allow the user to close the message after they have read them. Although any alert can be made dissmissible, we should restrict them to warnings and tips. Since error message stops the user from moving forward, we should keep that message present so users can utilize the description hint to solve their problem.

Copy

<table class="tablesaw" data-tablesaw-mode="swipe" data-tablesaw-minimap>
    <thead>
        <tr>
            <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist">Movie Title</th>
            <th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="3">Rank</th>
            <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Year</th>
            <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="1">
                <abbr title="Rotten Tomato Rating">Rating</abbr>
            </th>
            <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Gross</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="title"><a href="http://en.wikipedia.org/wiki/Avatar_(2009_film)">Avatar</a></td>
            <td>1</td>
            <td>2009</td>
            <td>83%</td>
            <td>$2.7B</td>
        </tr>
        <tr>
            <td class="title"><a href="http://en.wikipedia.org/wiki/Titanic_(1997_film)">Titanic</a></td>
            <td>2</td>
            <td>1997</td>
            <td>88%</td>
            <td>$2.1B</td>
        </tr>
        <tr>
            <td class="title"><a href="http://en.wikipedia.org/wiki/The_Avengers_(2012_film)">The Avengers</a></td>
            <td>3</td>
            <td>2012</td>
            <td>92%</td>
            <td>$1.5B</td>
        </tr>
        <tr>
    </tbody>
</table>