| Date | Level
|
Group name
|
Old value
|
New value
|
|---|---|---|---|---|
| 02/08/2018 17:34 | Level 1 | Super long group title to represent column wrapping | Short group title | Super long group title to represent column wrapping |
| 02/08/2018 17:33 | Level 2 | Super long group title to represent column wrapping | Short group title | Super long group title to represent column wrapping |
| 23/08/2017 12:34 | Level 3 | Super long group title to represent column wrapping | Short group title | Super long group title to represent column wrapping |
| 23/08/2017 11:34 | Level 4 | Super long group title to represent column wrapping | Short group title | Super long group title to represent column wrapping |
<div class="brick brick--vertical">
<!-- START header-with-meta component -->
<div class="heading-with-meta">
<h1>Audit log – custom groups</h1>
<div class="heading-with-meta__meta">
<button class="button">Download CSV</button>
</div>
</div>
<!-- END header-with-meta component -->
<a href="">View as list</a>
</div>
<div class="brick brick--vertical">
<div class="brick__wrapper clearfix prose">
<div class="content-columns content-columns--four-columns content-columns--padding">
<div class="content-columns__column">
<!-- START form-item-select component -->
<div class="form-item">
<label for="select_element">Select cycle</label>
<select id="select_element">
<option value="1">2018 - 2019</option>
<option value="2">2017 - 2018</option>
<option value="3">2016 - 2017</option>
</select>
</div>
<!-- END form-item-select component -->
</div>
<div class="content-columns__column">
</div>
</div>
</div>
</div>
<div class="brick brick--vertical">
<div class="brick__wrapper clearfix">
<!-- START data table component -->
<div class="table-responsive table--fixed-column-width">
<table>
<thead>
<tr>
<th class="column-sortable" aria-sort="ascending">
<a href="#" class="column-sortable__link column-sortable__link--up">Date</a>
</th>
<th class="column-sortable"><a href="#" class="column-sortable__link">Level</a>
<!-- START form-item-text_field component -->
<div class="form-item">
<label for="text_field_01" class="hide-element">Search levels</label>
<input type="text" id="text_field_01">
</div>
<!-- END form-item-text_field component -->
</th>
<th class="column-sortable"><a href="#" class="column-sortable__link">Group name</a>
<!-- START form-item-text_field component -->
<div class="form-item">
<label for="text_field_02" class="hide-element">Search groups</label>
<input type="text" id="text_field_02">
</div>
<!-- END form-item-text_field component -->
</th>
<th class="column-sortable"><a href="#" class="column-sortable__link">Old value</a>
<!-- START form-item-text_field component -->
<div class="form-item">
<label for="text_field_05" class="hide-element">Search old values</label>
<input type="text" id="text_field_05">
</div>
<!-- END form-item-text_field component -->
</th>
<th class="column-sortable"><a href="#" class="column-sortable__link">New value</a>
<!-- START form-item-text_field component -->
<div class="form-item">
<label for="text_field_06" class="hide-element">Search new values</label>
<input type="text" id="text_field_06">
</div>
<!-- END form-item-text_field component -->
</th>
</tr>
</thead>
<tbody>
<tr>
<th>02/08/2018 17:34</th>
<td>Level 1</td>
<td>Super long group title to represent column wrapping</td>
<td>Short group title</td>
<td>Super long group title to represent column wrapping</td>
</tr>
<tr>
<th>02/08/2018 17:33</th>
<td>Level 2</td>
<td>Super long group title to represent column wrapping</td>
<td>Short group title</td>
<td>Super long group title to represent column wrapping</td>
</tr>
<tr>
<th>23/08/2017 12:34</th>
<td>Level 3</td>
<td>Super long group title to represent column wrapping</td>
<td>Short group title</td>
<td>Super long group title to represent column wrapping</td>
</tr>
<tr>
<th>23/08/2017 11:34</th>
<td>Level 4</td>
<td>Super long group title to represent column wrapping</td>
<td>Short group title</td>
<td>Super long group title to represent column wrapping</td>
</tr>
</tbody>
</table>
</div>
<!-- END data table component -->
</div>
</div>