Switchless TEST


Tables


  • Keywords:#pattern
  • author: #alex

This document describes the most common table patterns that we use. This is over and on top of formantic ui tables

Non stackable

By default semantic offers responsive tables. That however does not make much sense. Typically we want the table to look like a table on mobile as well.

This one is non stackable but if the view port is small, then the right side of the table might not be visible

<table class="ui celled unstackable collapsing table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Type</th>
            <th>Site</th>
            <th>Device id</th>
        </tr>
    </thead>
    <tbody>
        <tr data-id=''>
            <td>name</td>
            <td>type</td>
            <td>site</td>
            <td>Device id</td>
        </tr>
    </tbody>
</table>

Non stackable with horizonal scroll

Add this to table element - style="display: block;overflow-x:scroll;"

<table class="ui celled unstackable collapsing table" style="display: block;overflow-x:scroll;">
    <thead>
        <tr>
            <th>Name</th>
            <th>Type</th>
            <th>Site</th>
            <th>Device id</th>
        </tr>
    </thead>
    <tbody>
        <tr data-id=''>
            <td>name</td>
            <td>type</td>
            <td>site</td>
            <td>Device id</td>
        </tr>
    </tbody>
</table>

Structured

This is where are creating structured table.

Add class structured