SIA Web Design Library

Table

No notes defined.

<table class='c-table c-table--fields c-table__table'>
    <thead>
        <tr>
            <th scope='col' class='Field'>Field</th>
            <th scope='col' class='Value'>Value</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope='row'>Name</th>
            <td>Johnny Bee</td>
        </tr>
        <tr>
            <th scope='row'>Email</th>
            <td>mail@mail.com</td>
        </tr>
    </tbody>
</table>
 
<table class='{{ get_component_class( 'table', display ) }}'>
    {% if header %}
        <thead>
            <tr>
                {% for item in header %}
                    <th scope='col' class='{{ class( item ) }}'>{{ item }}</th>
                {% endfor %}
            </tr>
        </thead>
    {% endif %}
    {% if items %}
        <tbody>
            {% for item in items %}
                <tr>
                    {% for index, cell in item %}
                        {% if index == 'th' %}
                            <th scope='row'>{{ cell }}</th>
                        {% else %}
                            <td>{{ cell }}</td>
                        {% endif %}
                    {% endfor %}
                </tr>
            {% endfor %}
        </tbody>
    {% endif %}
</table>
 
{
  "display": {
    "component": "table",
    "modifiers": [
      "fields"
    ]
  },
  "header": [
    "Field",
    "Value"
  ],
  "items": [
    {
      "th": "Name",
      "td": "Johnny Bee"
    },
    {
      "th": "Email",
      "td": "mail@mail.com"
    }
  ]
}