Le tableau suivant possède la classe u-tbl-adapt, par conséquent sous mobile tous les td possédant un u-tbl__cell--merge seront déplacés dans la cellule à l'index indiqué par l'attribut data-index-target
Enfin, la méthode dbmEdiTable._editCell(this, [index cible], [type de la cellule], [options]) permet de choisir la cellule à éditer et son type en plus des options à proposer dans le cas d'un select
Si vous souhaitez limiter l'affichage des lignes de vos tableaux : ajoutez la classe limited-rows--X, X représente le nombre de lignes affichées
.js requis :
| Titre | Description | Permissions | |
|---|---|---|---|
| Text line lorem ipsum | Lorem Ipsum | Administrateur | |
| Text line lorem ipsum | Lorem Ipsum | Administrateur |
<div class="o-tab u-tbl--adapt">
<table>
<thead>
<tr>
<th>Titre</th>
<th>Description</th>
<th>Permissions</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="u-text u-column">Text line lorem ipsum</td>
<td class="u-text--adapt u-tbl__cell--merge" data-index-target="0">Lorem Ipsum</td>
<td class="u-text--adapt editable">Administrateur</td>
<td class="u-text" onclick="dbmEdiTable._editCell(this, '.editable', 'select', ['Modérateur', 'Utilisateur'])"><i class="c-fonticon__icon-edit"></i></td>
</tr>
<tr>
<td class="u-text u-column">Text line lorem ipsum</td>
<td class="u-text--adapt u-tbl__cell--merge" data-index-target="0">Lorem Ipsum</td>
<td class="u-text--adapt">Administrateur</td>
<td class="u-text" onclick="dbmEdiTable._editCell(this, '.editable', 'select', ['Modérateur', 'Utilisateur'])"><i class="c-fonticon__icon-edit"></i></td>
</tr>
</tbody>
</table>
</div>
| Titre | Description | Permissions | |
|---|---|---|---|
| Text line lorem ipsum 0 | Lorem Ipsum | Administrateur | |
| Text line lorem ipsum 1 | Lorem Ipsum | Administrateur | |
| Text line lorem ipsum 2 | Lorem Ipsum | Administrateur | |
| Text line lorem ipsum 3 | Lorem Ipsum | Administrateur | |
| Text line lorem ipsum 4 | Lorem Ipsum | Administrateur |
| Titre | Description | Permissions | |
|---|---|---|---|
| Text line lorem ipsum 0 | Lorem Ipsum | Administrateur | |
| Text line lorem ipsum 1 | Lorem Ipsum | Administrateur | |
| Text line lorem ipsum 2 | Lorem Ipsum | Administrateur | |
| Text line lorem ipsum 3 | Lorem Ipsum | Administrateur | |
| Text line lorem ipsum 4 | Lorem Ipsum | Administrateur | |
| Text line lorem ipsum 5 | Lorem Ipsum | Administrateur | |
| Text line lorem ipsum 6 | Lorem Ipsum | Administrateur | |
| Text line lorem ipsum 7 | Lorem Ipsum | Administrateur | |
| Text line lorem ipsum 8 | Lorem Ipsum | Administrateur | |
| Text line lorem ipsum 9 | Lorem Ipsum | Administrateur |
| Titre | Description | Permissions | |
|---|---|---|---|
| Text line lorem ipsum 0 | Lorem Ipsum | Administrateur | |
| Text line lorem ipsum 1 | Lorem Ipsum | Administrateur | |
| Text line lorem ipsum 2 | Lorem Ipsum | Administrateur | |
| Text line lorem ipsum 3 | Lorem Ipsum | Administrateur | |
| Text line lorem ipsum 4 | Lorem Ipsum | Administrateur | |
| Text line lorem ipsum 5 | Lorem Ipsum | Administrateur | |
| Text line lorem ipsum 6 | Lorem Ipsum | Administrateur | |
| Text line lorem ipsum 7 | Lorem Ipsum | Administrateur | |
| Text line lorem ipsum 8 | Lorem Ipsum | Administrateur | |
| Text line lorem ipsum 9 | Lorem Ipsum | Administrateur | |
| Text line lorem ipsum 10 | Lorem Ipsum | Administrateur | |
| Text line lorem ipsum 11 | Lorem Ipsum | Administrateur | |
| Text line lorem ipsum 12 | Lorem Ipsum | Administrateur | |
| Text line lorem ipsum 13 | Lorem Ipsum | Administrateur | |
| Text line lorem ipsum 14 | Lorem Ipsum | Administrateur |
<div class="title--section">Table limited-rows--1</div>
<div class="o-tab u-tbl--adapt limited-rows--1">
<table>
<thead>
<tr>
<th>Titre</th>
<th>Description</th>
<th>Permissions</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="u-text">Text line lorem ipsum 0</td>
<td class="u-text--adapt u-tbl__cell--merge" data-index-target="0">Lorem Ipsum</td>
<td class="u-text--adapt editable">Administrateur</td>
<td class="u-text actions" onclick="dbmEdiTable._editCell(this, '.editable', 'select', ['Modérateur', 'Utilisateur'])"><i class="c-fonticon__icon-edit"></i></td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 1</td>
<td class="u-text--adapt u-tbl__cell--merge" data-index-target="0">Lorem Ipsum</td>
<td class="u-text--adapt editable">Administrateur</td>
<td class="u-text actions" onclick="dbmEdiTable._editCell(this, '.editable', 'select', ['Modérateur', 'Utilisateur'])"><i class="c-fonticon__icon-edit"></i></td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 2</td>
<td class="u-text--adapt u-tbl__cell--merge" data-index-target="0">Lorem Ipsum</td>
<td class="u-text--adapt editable">Administrateur</td>
<td class="u-text actions" onclick="dbmEdiTable._editCell(this, '.editable', 'select', ['Modérateur', 'Utilisateur'])"><i class="c-fonticon__icon-edit"></i></td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 3</td>
<td class="u-text--adapt u-tbl__cell--merge" data-index-target="0">Lorem Ipsum</td>
<td class="u-text--adapt editable">Administrateur</td>
<td class="u-text actions" onclick="dbmEdiTable._editCell(this, '.editable', 'select', ['Modérateur', 'Utilisateur'])"><i class="c-fonticon__icon-edit"></i></td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 4</td>
<td class="u-text--adapt u-tbl__cell--merge" data-index-target="0">Lorem Ipsum</td>
<td class="u-text--adapt editable">Administrateur</td>
<td class="u-text actions" onclick="dbmEdiTable._editCell(this, '.editable', 'select', ['Modérateur', 'Utilisateur'])"><i class="c-fonticon__icon-edit"></i></td>
</tr>
</tbody>
</table>
</div>
<div class="title--section">Table limited-rows--5</div>
<div class="o-tab u-tbl--adapt limited-rows--5">
<table>
<thead>
<tr>
<th>Titre</th>
<th>Description</th>
<th>Permissions</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="u-text">Text line lorem ipsum 0</td>
<td class="u-text--adapt u-tbl__cell--merge" data-index-target="0">Lorem Ipsum</td>
<td class="u-text--adapt editable">Administrateur</td>
<td class="u-text actions" onclick="dbmEdiTable._editCell(this, '.editable', 'select', ['Modérateur', 'Utilisateur'])"><i class="c-fonticon__icon-edit"></i></td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 1</td>
<td class="u-text--adapt u-tbl__cell--merge" data-index-target="0">Lorem Ipsum</td>
<td class="u-text--adapt editable">Administrateur</td>
<td class="u-text actions" onclick="dbmEdiTable._editCell(this, '.editable', 'select', ['Modérateur', 'Utilisateur'])"><i class="c-fonticon__icon-edit"></i></td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 2</td>
<td class="u-text--adapt u-tbl__cell--merge" data-index-target="0">Lorem Ipsum</td>
<td class="u-text--adapt editable">Administrateur</td>
<td class="u-text actions" onclick="dbmEdiTable._editCell(this, '.editable', 'select', ['Modérateur', 'Utilisateur'])"><i class="c-fonticon__icon-edit"></i></td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 3</td>
<td class="u-text--adapt u-tbl__cell--merge" data-index-target="0">Lorem Ipsum</td>
<td class="u-text--adapt editable">Administrateur</td>
<td class="u-text actions" onclick="dbmEdiTable._editCell(this, '.editable', 'select', ['Modérateur', 'Utilisateur'])"><i class="c-fonticon__icon-edit"></i></td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 4</td>
<td class="u-text--adapt u-tbl__cell--merge" data-index-target="0">Lorem Ipsum</td>
<td class="u-text--adapt editable">Administrateur</td>
<td class="u-text actions" onclick="dbmEdiTable._editCell(this, '.editable', 'select', ['Modérateur', 'Utilisateur'])"><i class="c-fonticon__icon-edit"></i></td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 5</td>
<td class="u-text--adapt u-tbl__cell--merge" data-index-target="0">Lorem Ipsum</td>
<td class="u-text--adapt editable">Administrateur</td>
<td class="u-text actions" onclick="dbmEdiTable._editCell(this, '.editable', 'select', ['Modérateur', 'Utilisateur'])"><i class="c-fonticon__icon-edit"></i></td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 6</td>
<td class="u-text--adapt u-tbl__cell--merge" data-index-target="0">Lorem Ipsum</td>
<td class="u-text--adapt editable">Administrateur</td>
<td class="u-text actions" onclick="dbmEdiTable._editCell(this, '.editable', 'select', ['Modérateur', 'Utilisateur'])"><i class="c-fonticon__icon-edit"></i></td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 7</td>
<td class="u-text--adapt u-tbl__cell--merge" data-index-target="0">Lorem Ipsum</td>
<td class="u-text--adapt editable">Administrateur</td>
<td class="u-text actions" onclick="dbmEdiTable._editCell(this, '.editable', 'select', ['Modérateur', 'Utilisateur'])"><i class="c-fonticon__icon-edit"></i></td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 8</td>
<td class="u-text--adapt u-tbl__cell--merge" data-index-target="0">Lorem Ipsum</td>
<td class="u-text--adapt editable">Administrateur</td>
<td class="u-text actions" onclick="dbmEdiTable._editCell(this, '.editable', 'select', ['Modérateur', 'Utilisateur'])"><i class="c-fonticon__icon-edit"></i></td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 9</td>
<td class="u-text--adapt u-tbl__cell--merge" data-index-target="0">Lorem Ipsum</td>
<td class="u-text--adapt editable">Administrateur</td>
<td class="u-text actions" onclick="dbmEdiTable._editCell(this, '.editable', 'select', ['Modérateur', 'Utilisateur'])"><i class="c-fonticon__icon-edit"></i></td>
</tr>
</tbody>
</table>
</div>
<div class="title--section">Table limited-rows--10</div>
<div class="o-tab u-tbl--adapt limited-rows--10">
<table>
<thead>
<tr>
<th>Titre</th>
<th>Description</th>
<th>Permissions</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="u-text">Text line lorem ipsum 0</td>
<td class="u-text--adapt u-tbl__cell--merge" data-index-target="0">Lorem Ipsum</td>
<td class="u-text--adapt editable">Administrateur</td>
<td class="u-text actions" onclick="dbmEdiTable._editCell(this, '.editable', 'select', ['Modérateur', 'Utilisateur'])"><i class="c-fonticon__icon-edit"></i></td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 1</td>
<td class="u-text--adapt u-tbl__cell--merge" data-index-target="0">Lorem Ipsum</td>
<td class="u-text--adapt editable">Administrateur</td>
<td class="u-text actions" onclick="dbmEdiTable._editCell(this, '.editable', 'select', ['Modérateur', 'Utilisateur'])"><i class="c-fonticon__icon-edit"></i></td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 2</td>
<td class="u-text--adapt u-tbl__cell--merge" data-index-target="0">Lorem Ipsum</td>
<td class="u-text--adapt editable">Administrateur</td>
<td class="u-text actions" onclick="dbmEdiTable._editCell(this, '.editable', 'select', ['Modérateur', 'Utilisateur'])"><i class="c-fonticon__icon-edit"></i></td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 3</td>
<td class="u-text--adapt u-tbl__cell--merge" data-index-target="0">Lorem Ipsum</td>
<td class="u-text--adapt editable">Administrateur</td>
<td class="u-text actions" onclick="dbmEdiTable._editCell(this, '.editable', 'select', ['Modérateur', 'Utilisateur'])"><i class="c-fonticon__icon-edit"></i></td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 4</td>
<td class="u-text--adapt u-tbl__cell--merge" data-index-target="0">Lorem Ipsum</td>
<td class="u-text--adapt editable">Administrateur</td>
<td class="u-text actions" onclick="dbmEdiTable._editCell(this, '.editable', 'select', ['Modérateur', 'Utilisateur'])"><i class="c-fonticon__icon-edit"></i></td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 5</td>
<td class="u-text--adapt u-tbl__cell--merge" data-index-target="0">Lorem Ipsum</td>
<td class="u-text--adapt editable">Administrateur</td>
<td class="u-text actions" onclick="dbmEdiTable._editCell(this, '.editable', 'select', ['Modérateur', 'Utilisateur'])"><i class="c-fonticon__icon-edit"></i></td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 6</td>
<td class="u-text--adapt u-tbl__cell--merge" data-index-target="0">Lorem Ipsum</td>
<td class="u-text--adapt editable">Administrateur</td>
<td class="u-text actions" onclick="dbmEdiTable._editCell(this, '.editable', 'select', ['Modérateur', 'Utilisateur'])"><i class="c-fonticon__icon-edit"></i></td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 7</td>
<td class="u-text--adapt u-tbl__cell--merge" data-index-target="0">Lorem Ipsum</td>
<td class="u-text--adapt editable">Administrateur</td>
<td class="u-text actions" onclick="dbmEdiTable._editCell(this, '.editable', 'select', ['Modérateur', 'Utilisateur'])"><i class="c-fonticon__icon-edit"></i></td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 8</td>
<td class="u-text--adapt u-tbl__cell--merge" data-index-target="0">Lorem Ipsum</td>
<td class="u-text--adapt editable">Administrateur</td>
<td class="u-text actions" onclick="dbmEdiTable._editCell(this, '.editable', 'select', ['Modérateur', 'Utilisateur'])"><i class="c-fonticon__icon-edit"></i></td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 9</td>
<td class="u-text--adapt u-tbl__cell--merge" data-index-target="0">Lorem Ipsum</td>
<td class="u-text--adapt editable">Administrateur</td>
<td class="u-text actions" onclick="dbmEdiTable._editCell(this, '.editable', 'select', ['Modérateur', 'Utilisateur'])"><i class="c-fonticon__icon-edit"></i></td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 10</td>
<td class="u-text--adapt u-tbl__cell--merge" data-index-target="0">Lorem Ipsum</td>
<td class="u-text--adapt editable">Administrateur</td>
<td class="u-text actions" onclick="dbmEdiTable._editCell(this, '.editable', 'select', ['Modérateur', 'Utilisateur'])"><i class="c-fonticon__icon-edit"></i></td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 11</td>
<td class="u-text--adapt u-tbl__cell--merge" data-index-target="0">Lorem Ipsum</td>
<td class="u-text--adapt editable">Administrateur</td>
<td class="u-text actions" onclick="dbmEdiTable._editCell(this, '.editable', 'select', ['Modérateur', 'Utilisateur'])"><i class="c-fonticon__icon-edit"></i></td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 12</td>
<td class="u-text--adapt u-tbl__cell--merge" data-index-target="0">Lorem Ipsum</td>
<td class="u-text--adapt editable">Administrateur</td>
<td class="u-text actions" onclick="dbmEdiTable._editCell(this, '.editable', 'select', ['Modérateur', 'Utilisateur'])"><i class="c-fonticon__icon-edit"></i></td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 13</td>
<td class="u-text--adapt u-tbl__cell--merge" data-index-target="0">Lorem Ipsum</td>
<td class="u-text--adapt editable">Administrateur</td>
<td class="u-text actions" onclick="dbmEdiTable._editCell(this, '.editable', 'select', ['Modérateur', 'Utilisateur'])"><i class="c-fonticon__icon-edit"></i></td>
</tr>
<tr>
<td class="u-text">Text line lorem ipsum 14</td>
<td class="u-text--adapt u-tbl__cell--merge" data-index-target="0">Lorem Ipsum</td>
<td class="u-text--adapt editable">Administrateur</td>
<td class="u-text actions" onclick="dbmEdiTable._editCell(this, '.editable', 'select', ['Modérateur', 'Utilisateur'])"><i class="c-fonticon__icon-edit"></i></td>
</tr>
</tbody>
</table>
</div>