Summary
- Table List-view. Tables are mainly to be found in the management area. For a certain group of users, such as managers, the tables provide the opportunity to edit, create, delete, etc. content. The list view, on the other hand, is used to display existing items for users, e.g. in the form of search results or app content.
- Structure. A .wui-bs-table is usually wrapped into a .wui-bs-panel with a .panel-heading and a .panel-footer
- Row height. A table row usually does not contain more than two lines of text.
- Table Head. Under certain circumstances there may be icons in the table head.
- Sorting. Clicking on .wui-th-sortable sorts the contents of the respective column in ascending () or descending order (). The first click triggers an ascending order for names and numbers (a-z, 1-9) and a descending order for dates (now - 2 days ago).
- Default setup. When you come to a page with an overview-table, the search field in the sticky-header is focused and the table is sorted. Whether it is sorted in ascending or descending order and which column is selected varies from case to case. Often it makes sense to sort according to the "last-updated-column" so that the user always sees a new item at the top of the table after creating it.
- Breakpoints. The content of tables as well as the number of TDs varies a lot from table to table. This makes it very tricky to set fixed breakpoints that make sense for every table. However, the following rules of thumb should be considered.
On screens all th-elements should be fully visible. To do this, the widths of the bootstrap cols can be used inside the respective TH.
On laptops If necessary, first columns can be hidden. In order to react flexibly to the large gap between .col-md and .col-lg, a further class can be added to the app CSS in form of "hidden-lg-xx", where xx stands for the needed screen size. (see table examples)
On mobile devices less important columns are hidden by the classes .hidden-md/ -sm /-xs
Checkboxes
The checkboxes can be used to select several columns within a table. Therefore the checkboxes always appear with the corresponding drop-down for bulk actions. If there is no need for bulk actions in the particular table, the content of the next column moves to the first column.
```html
```
Status |
|---|
| Label default |
| Label secondary |
| Label inactive |
Labels
Labels are used, among other things, to display the status. Different statuses have different colors. For a Boolean status, the colors are #078390 (active) and #999999 (inactive).
Note that labels are truncated after a length of 150px (resp. 120px for smaller screens). When labels are placed one below the other, they all have the same length according to the longest. (see: Labels)
```html
Label default
```
Numbers |
|---|
| 27 |
| 4 |
Numbers
Numbers - whether they are in a label or not - are centered by using the class .text--center
An exception are numbers where it makes sense to make a sum out of them (e.g. prices). In this case, the numbers are always aligned to the right. The contents of the table head is aligned according to the table cells.
```html
27
```
Numbers + text |
|---|
1 / 32 |
5 / 32 |
Numbers + text
Sometimes number labels come in combination with text. They will be wrapped by .text--no-wrap so that the table-cell is always wide enough to have label and text next to each other.
To set both elements inline we use the wui-inline-list. (see: Spacing)
```html
5
/ 32
```
Monetary amount |
|---|
| 2,652,700.00 EUR |
| 52,650.90 EUR |
| 305,058,184,501,650.00 PLN |
Monetary amount
In order to have a better overview of prices, these are wrapped in one line. They have a minimum width so that at least 8 digits are displayed. In addition, prices are always aligned to the right and they are most likely at the last column in the table. To display the currency we use the abbreviation of the international currency code (consisting of 3 letters) and we format according to the CLDR standard.
```html
52,650.90 EUR
```
Name |
|---|
| Single-line text gets truncated within this table-cell |
| See what happens with this text when reducing the size of the browser window Another single-line text that will be truncated ;) |
Single-line text
By default table cells are expanded by the containing texts. When using .wui-td--max-lines-1 and .wui-td__text, the text length is determined by the external width of the table-cell or the given width in the TH (e.g. by .col-lg-4).
It is also valid to have two single-line texts in one table cell.
```html
Text of table cell
See what happens with this text when reducing the size of the browser window
Another single-line text that will be truncated ;)
```
Two-line text
To prevent the table rows from becoming too high, the text within table cells is limited to two lines by the classes .wui-td--max-lines-2 and .wui-td__text.
There is one exception to this rule: an ID, for example, would not be truncated. First, because the completeness of this information is extremely important. And second, it could be that this kind of information is further processed, which means that it should be markable and copyable. In this case, the entire table row becomes as high as necessary. A suitable min- width should then be assigned to the respective table cell.
```html
Text of table cell
```
Last updated |
|---|
| 6 month ago Apr 27, 2020, 6:34:21 AM |
| 6 month ago Apr 27, 2020, 6:34:21 AM |
Two lined date
Just like the text, the date should not exceed two lines. In addition, the date should not be truncated. This is done using the class .text--no-wrap. If there are too many columns in an overview table, this column is one of those that should be hidden on smaller screens.
```html
```
Last updated by |
|---|
 James whose name is truncated Berry |
| Juliane Becker |
Users
The user appicon and the name of the user are always next to each other. The length of the name is relative to the width of the table cell. If the table cell becomes too narrow, the name is truncated by overflow-ellipsis. The column for "Last updated by" also belongs to the columns that are hidden for smaller devices.
```html
James whose name is truncated Berry
```
Buttons
If there are buttons in a table, they are always in the last column. For button texts of different lengths, the width of the shorter buttons is always adjusted to the width of the longest button, so that all buttons have the same length.
The table cell of buttons is never wider than the button itself, which is given by the class .wui-td--content-fit
Table with subrows | ||
|---|---|---|
| TD 1 | TD 2 | |
| TD 1 | TD 2 | |
| TD 1 | TD 2 | |
| TD 1 | TD 2 | |
Subrows
If a TR is dependent on another TR, this can be represented by a subrow. This occurs, for example, in the shopping cart for required articles. Since each TR can contain a subrow, it is important that the starting point contains the modifier .wui-subrow--first-element
```html
TD 1
TD 2
TD 1
TD 2
```
Bookmarks |
|---|
| Default text (no truncation) |
| This element can also be combined with ".wui-td--max-lines-1" |
Bookmarks
To highlight items within a table with different colors we use .wui-td__bookmark.
These styles can also be used in combination with.wui-td--max-lines-1 or .wui-td--max-lines-2.
```html
Default text (no truncation)
```