Skip to content

Tables

We use tables as main element for displaying content information.

Basic tables

Basic table

System URL
URL Language
/places-tastes English (United Kingdom)
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<div class="ez-table-header">
    <div class="ez-table-header__headline">System URL</div>
</div>
<table class="table">
    <thead>
        <tr>
            <th>URL</th>
            <th>Language</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>/places-tastes</td>
            <td>English (United Kingdom)</td>
        </tr>
    </tbody>
</table>

Basic table with no content

Reverse relations (content items using News)

This content item has no reverse relations

1
2
3
4
<div class="ez-table-header">
    <div class="ez-table-header__headline">Reverse relations (content items using News)</div>
</div>
<p class="ez-table-no-content">This content item has no reverse relations</p>

Basic table and actions buttons in Header

Translation manager
Language name Language code
English (United Kingdom) eng-GB
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div class="ez-table-header">
    <div class="ez-table-header__headline">Translation manager</div>
    <div>
        <button type="button" class="btn btn-primary">
            <svg class="ez-icon ez-icon--medium ez-icon--light ez-icon-create">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../ez-icons.svg#create"></use>
            </svg> 
        </button>
        <button type="button" class="btn btn-danger" disabled="disabled">
            <svg class="ez-icon ez-icon--medium ez-icon--light ez-icon-trash">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../ez-icons.svg#trash"></use>
            </svg> 
        </button>
    </div>
</div>
<table class="table">
    <thead>
        <tr>
            <th></th>
            <th>Language name</th>
            <th>Language code</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="ez-checkbox-cell">
                <input type="checkbox">
            </td>
            <td>English (United Kingdom)</td>
            <td>eng-GB</td>
        </tr>
    </tbody>
</table>

Basic table and action buttons in header and within rows

Archived versions
Version Modified language Contributor
1 English (United Kingdom) Administrator User
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<div class="ez-table-header">
    <div class="ez-table-header__headline">Archived versions</div>
    <div>
        <button type="button" class="btn btn-danger" disabled="disabled">
            <svg class="ez-icon ez-icon--medium ez-icon--light ez-icon-trash">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../ez-icons.svg#trash"></use>
            </svg> 
        </button>
    </div>
</div>
<table class="table">
    <thead>
        <tr>
            <th></th>
            <th>Version</th>
            <th>Modified language</th>
            <th>Contributor</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="ez-checkbox-cell">
                <input type="checkbox">
            </td>
            <td>1</td>
            <td>English (United Kingdom)</td>
            <td>Administrator User</td>
            <td>
                <button type="button" class="btn btn-icon">
                    <svg class="ez-icon ez-icon-edit">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../ez-icons.svg#archive-restore"></use>
                    </svg>
                </button>
            </td>
        </tr>
    </tbody>
</table>

Secondary table

Location Content Swap
Swap the content item at this location with another
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<div class="ez-table-header ground-base">
    <div class="ez-table-header__headline">Location Content Swap</div>
</div>
<table class="table ez-table--no-border">
    <tbody>
        <tr>
            <td>Swap the content item at this location with another
                <button type="button" class="btn btn-outline-secondary ml-5">Select content item</button>
            </td>
        </tr>
    </tbody>
</table>

Notifications table

Type Description Date
Content review request

From: Administrator user

Can you check this? Thxs!

Read more »
September 13, 2018 14:58
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<table class="table n-table--notifications">
    <thead>
        <tr>
            <th>Type</th>
            <th>Description</th>
            <th>Date</th>
        </tr>
    </thead>
    <tbody class="n-table__body">
        <tr class="n-notifications-modal__item fw-notification">
            <td class="n-notifications-modal__type">
                <span class="type__icon">
                    <svg class="ez-icon ez-icon--review">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../ez-icons.svg#review"></use>
                    </svg>
                </span>
                <span class="type__text">
                    Content review request
                </span>
            </td>
            <td class="n-notifications-modal__description">
                <p class="description__title">
                    From:
                    <span class="description__title__item">Administrator user</span>
                </p>
                <p class="description__text">Can you check this? Thxs!</p>
                <span class="description__read-more">Read more &raquo;</span>
            </td>
            <td class="n-notifications-modal__time">
                September 13, 2018 14:58
            </td>
        </tr>
    </tbody>
</table>

Note

This table is displayed within .n-notifications-modal modal. Styling relies on this class.

List table

Composer
Minimum stability stable
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<table class="table ez-table ez-table--list">
    <thead>
        <tr>
            <th colspan="2">
                Composer
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Minimum stability</td>
            <td>stable</td>
        </tr>
    </tbody>
</table>
Read the Docs