Table

HTML

<table class="kx-table




 kx-table--hover



 kx-table--outer-border">
    <thead>
        <tr>
            <th>Node ID </th>
            <th>Logical Network <i class="kx-icon kx-icon--size-base">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#caret-down"></use>
        </svg>
    </i> </th>
            <th>Host name </th>
            <th>Type </th>
            <th>Description </th>
        </tr>
    </thead>
    <tbody>
        <tr class="">
            <td><a href="#">16385</a></td>
            <td>Floatel Test</td>
            <td>n16386-nndf-001</td>
            <td>Router</td>
            <td>Cisco809-Common</td>
        </tr>
        <tr class="">
            <td><a href="#">16385</a></td>
            <td>Noble Drilling</td>
            <td>n16386-nndf-001</td>
            <td>Router</td>
            <td>Cisco809-Common</td>
        </tr>
        <tr class="">
            <td><a href="#">16385</a></td>
            <td>Common</td>
            <td>n16386-nndf-001</td>
            <td>Router</td>
            <td>Cisco881</td>
        </tr>
    </tbody>
</table>

View

<table class="kx-table
{% if fit %} kx-table--fit-{{ fit }}{% endif %}
{% if fluid %} kx-table--fluid{% endif %}
{% if border %} kx-table--border{% endif %}
{% if highlight %} kx-table--highlight{% endif %}
{% if hover %} kx-table--hover{% endif %}
{% if rowBorder %} kx-table--rows{% endif %}
{% if colBorder %} kx-table--cols{% endif %}
{% if zebra %} kx-table--zebra{% endif %}
{% for class in classes %} {{ class }}{% endfor %}">
    {% if caption %}<caption>{{ caption }}</caption>{% endif -%}

    {% if thead -%}
    <thead{% if theme %} class="kx-theme--{{ theme }}"{% endif %}>
        <tr>
        {% for cell in thead -%}
            <th>{{ cell[0] }} {% if cell.length > 1 %} {% render '@icon', { type: 'icon', symbol: 'caret-down', size: 'base' } %} {% endif %}</th>
        {% endfor -%}
        </tr>
    </thead>
    {% endif -%}

    {% if tbody -%}
        <tbody>
            {% for row in tbody -%}
            <tr class = "{% if doubleHeight %}kx-table--doubleheight{% endif %}{% if compact %}kx-table--compact{% endif %}">
                {% for cell in row.cells -%}
                <td>{{ cell }}</td>
                {% endfor -%}
            </tr>
            {% endfor -%}
        </tbody>
    {% endif -%}
</table>