Table: Simple 

<table class="kx-table kx-table--fit-tight kx-ui">
    <thead>
        <tr>
            <th>Node ID</th>
            <th>Logical Network</th>
            <th>Host name</th>
            <th>Type</th>
            <th>Description</th>
            <th>Created By</th>
            <th>Created</th>
            <th>Action</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-SupportRouter</td>
            <td>Ola Normann</td>
            <td>5 years ago</td>
            <td>Edit</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>
            <td>Ola Normann</td>
            <td>1 year ago</td>
            <td>Edit</td>
        </tr>
        <tr class="">
            <td><a href="#">16385</a></td>
            <td>Common</td>
            <td>n16386-nndf-001</td>
            <td>Router</td>
            <td>Cisco881</td>
            <td>Ola Normann</td>
            <td>3 years ago</td>
            <td>Edit</td>
        </tr>
    </tbody>
</table>
 
<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 }}</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>
 
{
  "fit": "tight",
  "fluid": null,
  "border": null,
  "highlight": null,
  "rowBorder": null,
  "colBorder": null,
  "zebra": null,
  "theme": null,
  "caption": null,
  "thead": [
    "Node ID",
    "Logical Network",
    "Host name",
    "Type",
    "Description",
    "Created By",
    "Created",
    "Action"
  ],
  "tbody": [
    {
      "cells": [
        "<a href=\"#\">16385</a>",
        "Floatel Test",
        "n16386-nndf-001",
        "Router",
        "Cisco809-SupportRouter",
        "Ola Normann",
        "5 years ago",
        "Edit"
      ]
    },
    {
      "cells": [
        "<a href=\"#\">16385</a>",
        "Noble Drilling",
        "n16386-nndf-001",
        "Router",
        "Cisco809-Common",
        "Ola Normann",
        "1 year ago",
        "Edit"
      ]
    },
    {
      "cells": [
        "<a href=\"#\">16385</a>",
        "Common",
        "n16386-nndf-001",
        "Router",
        "Cisco881",
        "Ola Normann",
        "3 years ago",
        "Edit"
      ]
    }
  ],
  "rows": null,
  "classes": [
    "kx-ui"
  ]
}
  • Content: 
    // ==========================================================================
// Component: table
// ==========================================================================

// Block (parent)
// ==========================================================================
.kx-table {
    @include table-base;
}

// Modifiers
// ==========================================================================

.kx-table--fit-tight {
    @include table-fit-tight;
}

.kx-table--fit-container {
    @include table-fit-container;
}

.kx-table--fit-loose {
    @include table-fit-loose;
}

.kx-table--border {
    @include table-border;
}

.kx-table--fluid {
    @include table-fluid;
}

.kx-table--rows {
    @include table-rows;
}

.kx-table--cols {
    @include table-cols;
}

.kx-table--zebra {
    @include table-zebra;
}

.kx-table--highlight {
    @include table-highlight;
}

.kx-table--hover {
    @include table-hover;
}

.kx-table--doubleheight {
    @include table-row-double-height;
}

.kx-table--compact {
    @include table-row-compact;
}

.kx-table--responsive {
    @include mq($until: tab-m) {
        @include table-responsive;
    }
}

.kx-table--theme-foam {
    thead {
        background-color: $color-theme-foam-bg;
        color: $color-gray-09;
    }
}

.kx-table--theme-teal {
    thead {
        background-color: $color-theme-teal-bg;
        color: $color-theme-teal-txt;
    }
}

.kx-table--theme-gray {
    thead {
        background-color: $color-theme-gray-bg;
        color: $color-theme-gray-txt;
    }
}
  • URL: /components/raw/table/_table.scss
  • Filesystem Path: src\components\01-table\_table.scss
  • Size: 1.6 KB

There are no notes for this item.