Skip to content

Commit

Permalink
fix(tables): Adopted new table design
Browse files Browse the repository at this point in the history
  • Loading branch information
@fragsalat
fragsalat committed Aug 25, 2017
1 parent 4002700 commit 208316f
Show file tree
Hide file tree
Showing 3 changed files with 266 additions and 110 deletions.
159 changes: 152 additions & 7 deletions doc/molecules/tables.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,26 @@
Default table provides an alternating row background color to increase usability for wide tables.
Rows also have a hover effect to indicate click interactions.
Limit the number of rows to 10 and use pagination to view further data.
Except it is nessecary to have an overview about a larger amounts of data,
then it’s allowed to use a fixed table header with scrollable body.
Except it is necessary to have an overview about a larger amounts of data,
then it's allowed to use a fixed table header with scrollable body.

<table>
<thead>
<tr>
<th>
<label>Name</label>
<label class="mod-xxlarge">Name</label>
</th>
<th>
<label>Type</label>
<label class="mod-xxlarge">Type</label>
</th>
<th>
<label>Owner</label>
<label class="mod-xxlarge">Owner</label>
</th>
<th>
<label>Team</label>
<label class="mod-xxlarge">Team</label>
</th>
<th>
<label>Price</label>
<label class="mod-xxlarge">Price</label>
</th>
</tr>
</thead>
Expand Down Expand Up @@ -171,3 +171,148 @@ then it’s allowed to use a fixed table header with scrollable body.
</table>
```

## Filter and sorting
Since a table can have very much items in the backend we give the users the possibility to
filter special columns and sort them. Here we show you how the markup should look like.
Important is the wrapper span with the class `text` which ensure that the icons have space
to be displayed when the label text is long.

<table>
<thead>
<tr>
<th>
<label class="mod-xxlarge">Name</label>
</th>
<th>
<label class="mod-xxlarge is-clickable" click.delegate="sortDirection = ({undefined: 'asc', 'asc': 'desc', 'desc': undefined})[sortDirection]">
<span class="text">Type</span>
<ws-dropdown class="filter" type="icon" icon="icon-filter" items.bind="['Type 1','Type 2']"></ws-dropdown>
<span class="sort ${sortDirection}"><span class="sort-arrow icon-sort-down"></span></span>
</label>
</th>
<th>
<label class="mod-xxlarge">Owner</label>
</th>
<th>
<label class="mod-xxlarge">Team</label>
</th>
<th>
<label class="mod-xxlarge">Price</label>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Topic name 10</td>
<td>Bug</td>
<td>Selina Kyle</td>
<td>Tooling</td>
<td>4.500,00</td>
</tr>
<tr>
<td>Topic name 9</td>
<td>Refactoring</td>
<td>Pamela Isley</td>
<td>Tooling</td>
<td>3.239,00</td>
</tr>
<tr>
<td>Topic name 8</td>
<td>Work package</td>
<td>Solomon Grundy</td>
<td>Tooling</td>
<td>46,80</td>
</tr>
<tr>
<td>Topic name 7</td>
<td>Improvement</td>
<td>Betty Kane</td>
<td>Tooling</td>
<td>123,00</td>
</tr>
<tr>
<td>Topic name 6</td>
<td>Project</td>
<td>Bruce Banner</td>
<td>Tooling</td>
<td>10.899,00</td>
</tr>
<tr>
<td>Topic name 5</td>
<td>Big feature</td>
<td>Ra’s Al Ghul</td>
<td>Tooling</td>
<td>567,00</td>
</tr>
<tr>
<td>Topic name 4</td>
<td>Milestone</td>
<td>Bruce Wayne</td>
<td>Tooling</td>
<td>23,50</td>
</tr>
<tr>
<td>Topic name 3</td>
<td>A/B Test</td>
<td>Steven Rogers</td>
<td>Tooling</td>
<td>890,00</td>
</tr>
<tr>
<td>Topic name 2</td>
<td>Feature</td>
<td>Curtis Newton</td>
<td>Tooling</td>
<td>99,00</td>
</tr>
<tr>
<td>Topic name 1</td>
<td>Improvement</td>
<td>Edward Nygma</td>
<td>Tooling</td>
<td>12.500,00</td>
</tr>
<tr class="pagination-row">
<td colspan="5">
<div class="pagination">
<span class="current">1-10</span>
<span class="separator">of</span>
<span class="total">23</span>
<a href="#">
<span class="icon-left icon16"></span>
</a>
<a href="#">
<span class="icon-right icon16"></span>
</a>
</div>
</td>
</tr>
</tbody>
</table>

```html
<thead>
<tr>
<th>
<label class="mod-xxlarge">Name</label>
</th>
<th>
<label class="mod-xxlarge is-clickable">
<span class="text">Type</span>
<ws-dropdown class="filter" type="icon" icon="icon-filter" items="['Type 1','Type 2']"></ws-dropdown>
<span class="sort asc"><span class="sort-arrow icon-sort-down"></span></span>
</label>
</th>
<th>
<label class="mod-xxlarge">Owner</label>
</th>
<th>
<label class="mod-xxlarge">Team</label>
</th>
<th>
<label class="mod-xxlarge">Price</label>
</th>
</tr>
</thead>
```

Loading

0 comments on commit 208316f

Please sign in to comment.