Datagrid
Datagrid controls
Most datagrid controls have specified position. On the left its filtering first, starting with general search, if present. On the right side (from the right) it’s action buttons (if present, but most likely not), items per page settings (again, if present) and then items count. This structure is mandatory in order for responsivitiy and correct margins:
<div class="grid-controls">
<!-- One or two of these - first is left side, second is right side -->
<div class="controls-block">
<!-- One of these for each controls group - filter, buttons, etc.. -->
<div class="controls-group">
<!-- Control markup -->
</div>
</div>
</div>
Complete example
1 - 3 / 3
| Name | User | Some number | ||
|---|---|---|---|---|
| Dummy user 1 | duser1 | 45 454 | duser1@example.com | |
| Dummy user 2 | duser2 | 45 454 | duser2@example.com | |
| Dummy user 3 | duser3 | 45 454 | duser3@example.com |
<div class="grid-controls">
<div class="controls-block">
<form class="controls-group horizontal-form">
<div class="input-group w150x">
<label for="datagrid-search">Search</label>
<input type="text" placeholder="search..." id="datagrid-search" class="clearable" />
</div>
<div class="input-group w150x">
<label for="datagrid-type">Type</label>
<select id="datagrid-type">
<option><don't filter></option>
<option>Option one</option>
<option>Option two</option>
<option>Option three</option>
</select>
</div>
<div class="input-group w150x">
<label>
<input type="checkbox" />
Checkbox example
</label>
</div>
</form>
</div>
<div class="controls-block">
<div class="controls-group grid-results-count">
1 - 3 / 3
</div>
<form class="controls-group horizontal-form">
<div class="input-group w160x">
<label for="datagrid-rows-per-page">Rows per page</label>
<select id="datagrid-rows-per-page">
<option>10</option>
<option>20</option>
<option>30</option>
</select>
</div>
</form>
<div class="controls-group buttons-row">
<a class="button confirm">
<svg class="icon icon-refresh" aria-hidden="true"><use xlink:href="/docs/assets/style-guide/icons.svg#refresh"></use></svg>
<span>Some action</span>
</a>
</div>
</div>
</div>
<table class="datagrid fixed">
<thead>
<tr>
<th class="w20p">
<a href="#" class="datagrid-sort" title="Sort desc">
Name
<i class="sort-icon target-asc current-desc"></i>
</a>
</th>
<th class="w15p">
<a href="#" class="datagrid-sort" title="Sort desc">
User
<i class="sort-icon target-desc"></i>
</a>
</th>
<th class="w15p right">
<a href="#" class="datagrid-sort" title="Sort desc">
Some number
<i class="sort-icon target-desc"></i>
</a>
</th>
<th class="w30p center">
E-mail
</th>
<th class="w10p actions">
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Dummy user 1
</td>
<td>
duser1
</td>
<td class="right">
45 454
</td>
<td class="center">
duser1@example.com
</td>
<td class="actions">
<a class="icon">
<svg class="icon icon-user"><use xlink:href="/docs/assets/style-guide/icons.svg#user"></use></svg>
</a>
<a class="icon">
<svg class="icon icon-email"><use xlink:href="/docs/assets/style-guide/icons.svg#email"></use></svg>
</a>
</td>
</tr>
<tr>
<td>
Dummy user 2
</td>
<td>
duser2
</td>
<td class="right">
45 454
</td>
<td class="center">
duser2@example.com
</td>
<td class="actions">
<a class="icon">
<svg class="icon icon-user"><use xlink:href="/docs/assets/style-guide/icons.svg#user"></use></svg>
</a>
<a class="icon">
<svg class="icon icon-email"><use xlink:href="/docs/assets/style-guide/icons.svg#email"></use></svg>
</a>
</td>
</tr>
<tr>
<td>
Dummy user 3
</td>
<td>
duser3
</td>
<td class="right">
45 454
</td>
<td class="center">
duser3@example.com
</td>
<td class="actions">
<a class="icon">
<svg class="icon icon-user"><use xlink:href="/docs/assets/style-guide/icons.svg#user"></use></svg>
</a>
<a class="icon">
<svg class="icon icon-email"><use xlink:href="/docs/assets/style-guide/icons.svg#email"></use></svg>
</a>
</td>
</tr>
</tbody>
</table>