Default styling
| Form Name | Platform | Created | Performance | Status | |
|---|---|---|---|---|---|
|
|
19 Sept 2018 | 221 Completed | Active |
.sb-table__tr--inactive
Disable hover highlight for table row.
| Form Name | Platform | Created | Performance | Status | |
|---|---|---|---|---|---|
|
|
19 Sept 2018 | 221 Completed | Active |
.sb-table__tr--disabled
Disable table row entirely.
| Form Name | Platform | Created | Performance | Status | |
|---|---|---|---|---|---|
|
|
19 Sept 2018 | 221 Completed | Active |
Markup
<div class="sb-table">
<table class="sb-table__table" role="grid">
<thead class="sb-table__thead">
<tr class="sb-table__tr">
<th class="sb-table__hh sb-table__action sb-text--center" scope="col">
<!-- empty cel for checkbox column, we don't have select all function yet -->
</th>
<th class="sb-table__hh" scope="col">
<span class="sb-table__sort sb-text--nowrap" tabindex="0" role="button" title="Sort">
Form Name<span class="sb-table__icon">
<svg class="sb-icon sb-icon--s" viewBox="0 0 9 11">
<path d="M4 8.8V1h1v7.8l2.8-3.2.6.8-3.9 4.3-4-4.3.7-.8L4 8.8z"/>
</svg>
</span>
</span>
</th>
<th class="sb-table__hh" scope="col">
<span class="sb-table__sort sb-text--nowrap" tabindex="0" role="button" title="Sort">
Platform<span class="sb-table__icon">
<svg class="sb-icon sb-icon--s" viewBox="0 0 9 11">
<path d="M4 8.8V1h1v7.8l2.8-3.2.6.8-3.9 4.3-4-4.3.7-.8L4 8.8z"/>
</svg>
</span>
</span>
</th>
<th class="sb-table__hh" scope="col" aria-sort="ascending">
<span class="sb-table__sort sb-text--nowrap" tabindex="0" role="button" title="">
Created<span class="sb-table__icon">
<svg class="sb-icon sb-icon--s" viewBox="0 0 9 11">
<path d="M4 8.8V1h1v7.8l2.8-3.2.6.8-3.9 4.3-4-4.3.7-.8L4 8.8z"/>
</svg>
</span>
</span>
</th>
<th class="sb-table__hh" scope="col" aria-sort="descending">
<span class="sb-table__sort sb-text--nowrap" tabindex="0" role="button" title="Sort">
Performance<span class="sb-table__icon">
<svg class="sb-icon sb-icon--s" viewBox="0 0 9 11">
<path d="M4 8.8V1h1v7.8l2.8-3.2.6.8-3.9 4.3-4-4.3.7-.8L4 8.8z"/>
</svg>
</span>
</span>
</th>
<th class="sb-table__hh" scope="col">
<span class="sb-table__sort sb-text--nowrap" tabindex="0" role="button" title="Sort">
Status<span class="sb-table__icon">
<svg class="sb-icon sb-icon--s" viewBox="0 0 9 11">
<path d="M4 8.8V1h1v7.8l2.8-3.2.6.8-3.9 4.3-4-4.3.7-.8L4 8.8z"/>
</svg>
</span>
</span>
</th>
</tr>
</thead>
<tbody class="sb-table__tbody sb-text--s">
<tr class="sb-table__tr [modifier class]">
<td class="sb-table__td sb-table__checkbox sb-text--center">
<div class="sb-checkbox-without-label">
<input type="checkbox" id="checkbox-table-row-1-[modifier class]" class="sb-checkbox-without-label__input">
<div class="sb-checkbox-without-label__checkmark-container">
<svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
<path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</div>
</td>
<td class="sb-table__td" scope="row">
<label class="sb-text" for="checkbox-table-1-[modifier class]">NPS campaign CS Nordics</label>
</td>
<td class="sb-table__td">
<svg class="sb-icon" viewBox="0 0 16 16">
<path d="M4.5 13.706L8 11.568l3.5 2.138-.952-3.99 3.114-2.667-4.087-.328L8 2.935 6.425 6.721l-4.087.328 3.114 2.668-.952 3.989zM8 12.61l-4.86 2.968 1.321-5.54L.136 6.335l5.677-.455L8 .62l2.187 5.259 5.677.455-4.325 3.705 1.321 5.54L8 12.608z"/>
</svg>
</td>
<td class="sb-table__td sb-text--nowrap">19 Sept 2018</td>
<td class="sb-table__td">221 Completed</td>
<td class="sb-table__td sb-text--nowrap">
<svg class="sb-icon sb-icon--success" viewBox="0 0 16 16">
<circle cx="5.5" cy="6.5" r="5.5"/>
</svg>
Active
</td>
</tr>
</tbody>
</table>
</div>
Source: components/_table.scss, line 288