<div class="c-table-scroll">
<table class="c-table">
<thead>
<tr>
<th class="c-table__icon-cell"></th>
<th>Column A</th>
<th>Column B</th>
<th>Column C</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<i class="icon icon-contact"></i>
</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
</tr>
<tr>
<td>
<i class="icon icon-contact"></i>
</td>
<td class="c-table__cell--success u-center">Success cell</td>
<td class="c-table__cell--warning u-center">Warning cell</td>
<td class="c-table__cell--error u-center">Error cell</td>
</tr>
</tbody>
</table>
</div>
<div class="c-table-scroll">
<table class="c-table">
<thead>
<tr>
<th class="c-table__drag-cell"></th>
<th colspan="2">Column A</th>
<th>Column B</th>
<th>Column C</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<i class="icon icon-sort c-table__drag"></i>
</td>
<td colspan="2">Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
</tr>
<tr>
<td rowspan="3">
<i class="icon icon-sort c-table__drag"></i>
</td>
<td colspan="2">Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
</tr>
<tr>
<td>
<i class="icon icon-sort c-table__drag"></i>
</td>
<td>Subvalue 1</td>
<td>Subvalue 2</td>
<td>Subvalue 3</td>
</tr>
<tr>
<td>
<i class="icon icon-sort c-table__drag"></i>
</td>
<td>Subvalue 4</td>
<td>Subvalue 5</td>
<td>Subvalue 6</td>
</tr>
<tr>
<td>
<i class="icon icon-sort c-table__drag"></i>
</td>
<td colspan="2">Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
</tr>
</tbody>
</table>
</div>
<div class="c-table-scroll">
<table class="c-table c-table--selectable">
<thead>
<tr>
<th class="c-table__icon-cell"></th>
<th>Column A</th>
<th>Column B</th>
<th>Column C</th>
</tr>
</thead>
<tbody>
<tr class="c-table__row--selected">
<td>
<input type="checkbox" class="c-checkbox" checked />
</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
</tr>
<tr>
<td>
<input type="checkbox" class="c-checkbox" />
</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
</tr>
<tr class="c-table__row--disabled">
<td>
<input type="checkbox" class="c-checkbox" disabled />
</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
</tr>
</tbody>
</table>
</div>
<div class="c-table-scroll">
<table class="c-table c-table--selectable">
<thead>
<tr>
<th class="c-table__icon-cell"></th>
<th>Column A</th>
<th>Column B</th>
<th>Column C</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="c-avatar-checkbox">
<div class="c-avatar-checkbox__initial">
<div class="c-avatar">
<div class="c-avatar__initials">AB</div>
</div>
</div>
<div class="c-avatar-checkbox__hover">
<input type="checkbox" class="c-checkbox" />
</div>
</div>
</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
</tr>
<tr>
<td>
<div class="c-avatar-checkbox">
<div class="c-avatar-checkbox__initial">
<div class="c-avatar">
<div class="c-avatar__initials">CD</div>
</div>
</div>
<div class="c-avatar-checkbox__hover">
<input type="checkbox" class="c-checkbox" />
</div>
</div>
</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
</tr>
</tbody>
</table>
</div>
<div class="c-table-scroll">
<table class="c-table c-table--clickable">
<thead>
<tr>
<th>
<div class="c-table__label c-table__label--sortable">
Column A
<i class="c-table__sort c-table__sort--active icon icon-chevron-down"></i>
</div>
</th>
<th>
<div class="c-table__label c-table__label--sortable">
Column B
<i class="c-table__sort icon icon-expand"></i>
</div>
</th>
<th>
Column C
<i class="c-table__sort icon icon-expand"></i>
</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td class="c-table__chevron">
<i class="icon icon-chevron-right"></i>
</td>
</tr>
<tr>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td class="c-table__chevron">
<i class="icon icon-chevron-right"></i>
</td>
</tr>
</tbody>
</table>
</div>
<div class="c-table-scroll">
<table class="c-table">
<thead>
<tr>
<th class="c-table__icon-cell"></th>
<th>Column A</th>
<th>Column B</th>
<th>Column C</th>
<th class="c-table__icon-cell"></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<i class="icon icon-contact"></i>
</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>
<div class="c-button-group">
<button class="c-button c-button--default c-button--icon">
<i class="icon icon-edit c-button__icon"></i>
</button>
<button class="c-button c-button--default c-button--icon">
<i class="icon icon-trash c-button__icon"></i>
</button>
</div>
</td>
</tr>
<tr>
<td>
<i class="icon icon-contact"></i>
</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Value 6</td>
<td>
<div class="c-button-group">
<button class="c-button c-button--default c-button--icon">
<i class="icon icon-edit c-button__icon"></i>
</button>
<button class="c-button c-button--default c-button--icon">
<i class="icon icon-trash c-button__icon"></i>
</button>
</div>
</td>
</tr>
<tr id="addForm" style="display: none">
<td></td>
<td colspan="4">
<div class="c-input-group">
<div class="c-input c-input--flexible">
<div class="c-input__controls">
<div class="c-select-wrapper">
<select class="c-select">
<option>Option A</option>
<option>Option B</option>
<option>Option C</option>
</select>
<i class="c-select__caret icon icon-caret-down"></i>
</div>
</div>
</div>
<div class="c-input">
<div class="c-input__controls">
<button type="button" class="c-button c-button--default" onclick="hideAddForm()">
<i class="icon icon-check c-button__icon"></i>
<span class="c-button__label">Confirm</span>
</button>
</div>
</div>
</div>
</td>
</tr>
<tr id="addButton">
<td></td>
<td colspan="4">
<button type="button" class="c-button c-button--link" onclick="showAddForm()">
<div class="c-button__label">Add item</div>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<script>
const addForm = document.querySelector('#addForm')
const addButton = document.querySelector('#addButton')
const showAddForm = () => {
addForm.removeAttribute('style')
addButton.style.display = 'none'
}
const hideAddForm = () => {
addForm.style.display = 'none'
addButton.removeAttribute('style')
}
</script>