Source Code HTML / SASS
Vous trouverez ici les démos et le code source statiques du composant.
On expose les différentes déclinaisons du composant au format HTML et SASS.
Le composant React a été conçu sur la base de cette structure en y ajoutant les interactions que vous trouverez dans notre storybook.
Classic Table
| Action | |||||||
|---|---|---|---|---|---|---|---|
| 25487696 | 1594458644 | 7359 | BellBoeuf | 01/03/2017 | Acceptation totale |
En cours
|
Consulter |
| 25487296 | 1594458044 | 7059 | Toulouse | 01/06/2007 | Acceptation partielle |
Transmis
|
Consulter |
| 22487296 | 1594428044 | 7052 | NA | 11/06/2000 | Refus |
Clos
|
Consulter |
| 25487696 | 1594458644 | 7359 | BellBoeuf | 01/03/2017 | Acceptation totale |
En cours
|
Consulter |
| 25487296 | 1594458044 | 7059 | Toulouse | 01/06/2007 | Acceptation partielle |
Transmis
|
Consulter |
| 22487296 | 1594428044 | 7052 | NA | 11/06/2000 | Refus |
Clos
|
Consulter |
| 25487696 | 1594458644 | 7359 | BellBoeuf | 01/03/2017 | Acceptation totale |
En cours
|
Consulter |
| 25487296 | 1594458044 | 7059 | Toulouse | 01/06/2007 | Acceptation partielle |
Transmis
|
Consulter |
| 22487296 | 1594428044 | 7052 | NA | 11/06/2000 | Refus |
Clos
|
Consulter |
| 25487296 | 1594458044 | 7059 | Toulouse | 01/06/2007 | Acceptation partielle |
Transmis
|
Consulter |
Copied
<table class="af-table">
<thead class="af-table__thead">
<tr class="af-table__tr">
<th class="af-table__th af-table__th--sortable"><span class="af-table__th-content">
<button class="af-btn af-btn--table-sorting af-btn--table-sorting--active" role="button">N° de contrat
<svg class="glyphicon glyphicon-arrow-xs-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M86.799 36.75h-73.299l36.654 35.636 36.645-35.636z"></path>
</svg>
</button></span></th>
<th class="af-table__th af-table__th--sortable"><span class="af-table__th-content">
<button class="af-btn af-btn--table-sorting" role="button">N° de dossier
<svg class="glyphicon glyphicon-sorting" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M87.477 42.738H12.523L50 5.262zM12.523 59.262h74.954L50 96.738z"></path>
</svg>
</button></span></th>
<th class="af-table__th af-table__th--sortable"><span class="af-table__th-content">
<button class="af-btn af-btn--table-sorting" role="button">N° de demande
<svg class="glyphicon glyphicon-sorting" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M87.477 42.738H12.523L50 5.262zM12.523 59.262h74.954L50 96.738z"></path>
</svg>
</button></span></th>
<th class="af-table__th af-table__th--sortable"><span class="af-table__th-content">
<button class="af-btn af-btn--table-sorting" role="button">Site
<svg class="glyphicon glyphicon-sorting" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M87.477 42.738H12.523L50 5.262zM12.523 59.262h74.954L50 96.738z"></path>
</svg>
</button></span></th>
<th class="af-table__th af-table__th--sortable"><span class="af-table__th-content">
<button class="af-btn af-btn--table-sorting" role="button">Date de mise à jour
<svg class="glyphicon glyphicon-sorting" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M87.477 42.738H12.523L50 5.262zM12.523 59.262h74.954L50 96.738z"></path>
</svg>
</button></span></th>
<th class="af-table__th af-table__th--sortable"><span class="af-table__th-content">
<button class="af-btn af-btn--table-sorting" role="button">Décision
<svg class="glyphicon glyphicon-sorting" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M87.477 42.738H12.523L50 5.262zM12.523 59.262h74.954L50 96.738z"></path>
</svg>
</button></span></th>
<th class="af-table__th af-table__th--sortable"><span class="af-table__th-content">
<button class="af-btn af-btn--table-sorting" role="button">Statut du dossier
<svg class="glyphicon glyphicon-sorting" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M87.477 42.738H12.523L50 5.262zM12.523 59.262h74.954L50 96.738z"></path>
</svg>
</button></span></th>
<th class="af-table__th"><span class="af-table__th-content">Action</span></th>
</tr>
</thead>
<tbody class="af-table__body">
<tr class="af-table__tr">
<td class="af-table__cell"><a class="af-link" href="">25487696</a></td>
<td class="af-table__cell"><a class="af-link" href="">1594458644</a></td>
<td class="af-table__cell">7359</td>
<td class="af-table__cell">BellBoeuf</td>
<td class="af-table__cell">01/03/2017</td>
<td class="af-table__cell">Acceptation totale</td>
<td class="af-table__cell">
<div class="af-status"><span class="glyphicon-ring glyphicon-ring--banque">
<svg class="glyphicon glyphicon-option-horizontal" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M14.152,36.557c3.705,0,6.869,1.314,9.501,3.939c2.633,2.633,3.945,5.796,3.941,9.505
c-0.002,3.702-1.315,6.873-3.941,9.499c-2.625,2.628-5.792,3.944-9.501,3.944c-3.708,0-6.876-1.316-9.502-3.944
c-2.626-2.626-3.938-5.797-3.941-9.499c-0.003-3.709,1.31-6.872,3.941-9.505C7.282,37.871,10.446,36.557,14.152,36.557z
M49.999,36.557c3.705,0,6.869,1.314,9.501,3.939c2.633,2.633,3.945,5.796,3.941,9.505c-0.002,3.702-1.316,6.873-3.941,9.499
c-2.625,2.628-5.793,3.944-9.501,3.944c-3.709,0-6.876-1.316-9.502-3.944c-2.625-2.626-3.938-5.797-3.941-9.499
c-0.004-3.709,1.31-6.872,3.941-9.505C43.129,37.871,46.293,36.557,49.999,36.557z M85.85,36.557c3.701,0,6.871,1.314,9.5,3.939
c2.629,2.633,3.941,5.796,3.941,9.505c0,3.702-1.316,6.873-3.941,9.499c-2.625,2.628-5.793,3.944-9.5,3.944
c-3.709,0-6.877-1.316-9.502-3.944c-2.627-2.626-3.943-5.797-3.943-9.499c0-3.709,1.314-6.872,3.943-9.505
C78.975,37.871,82.146,36.557,85.85,36.557z"></path>
</svg></span>En cours
</div>
</td>
<td class="af-table__cell"><a class="af-link af-link--hasIconLeft" href="#">
<svg class="glyphicon glyphicon-pencil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 100">
<path d="M3.718 98.426l26.043-8.759-17.44-17.44zM19.359 65.892l16.736 16.736 48.019-48.019-16.736-16.736zM74.104 11.148l16.736 16.736 7.742-7.195q1.017-1.017 1.017-2.542t-1.017-2.62l-11.966-11.966q-1.173-1.017-2.581-1.017t-2.581 1.017z"></path>
</svg><span class="af-link__text">Consulter</span></a></td>
</tr>
<tr class="af-table__tr">
<td class="af-table__cell"><a class="af-link" href="">25487296</a></td>
<td class="af-table__cell"><a class="af-link" href="">1594458044</a></td>
<td class="af-table__cell">7059</td>
<td class="af-table__cell">Toulouse</td>
<td class="af-table__cell">01/06/2007</td>
<td class="af-table__cell">Acceptation partielle</td>
<td class="af-table__cell">
<div class="af-status"><span class="glyphicon-ring glyphicon-ring--warning">
<svg class="glyphicon glyphicon-arrowthin-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M5.6,57.8l-0.2,0h66.9l-21,21.1c-1,1-1.6,2.4-1.6,3.9s0.6,2.8,1.6,3.9l3.3,3.3c1,1,2.4,1.6,3.9,1.6s2.8-0.6,3.9-1.6
l36.1-36.1c1-1,1.6-2.4,1.6-3.9c0-1.5-0.6-2.8-1.6-3.9L62.3,10.1c-1-1-2.4-1.6-3.9-1.6s-2.8,0.6-3.9,1.6l-3.3,3.3
c-1,1-1.6,2.4-1.6,3.9c0,1.5,0.6,2.8,1.6,3.8l21.3,21.2H5.5c-3,0-5.5,2.6-5.5,5.6l0,4.6C0,55.4,2.6,57.8,5.6,57.8z"></path>
</svg></span>Transmis
</div>
</td>
<td class="af-table__cell"><a class="af-link af-link--hasIconLeft" href="#">
<svg class="glyphicon glyphicon-pencil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 100">
<path d="M3.718 98.426l26.043-8.759-17.44-17.44zM19.359 65.892l16.736 16.736 48.019-48.019-16.736-16.736zM74.104 11.148l16.736 16.736 7.742-7.195q1.017-1.017 1.017-2.542t-1.017-2.62l-11.966-11.966q-1.173-1.017-2.581-1.017t-2.581 1.017z"></path>
</svg><span class="af-link__text">Consulter</span></a></td>
</tr>
<tr class="af-table__tr">
<td class="af-table__cell"><a class="af-link" href="">22487296</a></td>
<td class="af-table__cell"><a class="af-link" href="">1594428044</a></td>
<td class="af-table__cell">7052</td>
<td class="af-table__cell">NA</td>
<td class="af-table__cell">11/06/2000</td>
<td class="af-table__cell">Refus</td>
<td class="af-table__cell">
<div class="af-status"><span class="glyphicon-ring glyphicon-ring--success">
<svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
<path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
</svg></span>Clos
</div>
</td>
<td class="af-table__cell"><a class="af-link af-link--hasIconLeft" href="#">
<svg class="glyphicon glyphicon-pencil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 100">
<path d="M3.718 98.426l26.043-8.759-17.44-17.44zM19.359 65.892l16.736 16.736 48.019-48.019-16.736-16.736zM74.104 11.148l16.736 16.736 7.742-7.195q1.017-1.017 1.017-2.542t-1.017-2.62l-11.966-11.966q-1.173-1.017-2.581-1.017t-2.581 1.017z"></path>
</svg><span class="af-link__text">Consulter</span></a></td>
</tr>
<tr class="af-table__tr">
<td class="af-table__cell"><a class="af-link" href="">25487696</a></td>
<td class="af-table__cell"><a class="af-link" href="">1594458644</a></td>
<td class="af-table__cell">7359</td>
<td class="af-table__cell">BellBoeuf</td>
<td class="af-table__cell">01/03/2017</td>
<td class="af-table__cell">Acceptation totale</td>
<td class="af-table__cell">
<div class="af-status"><span class="glyphicon-ring glyphicon-ring--banque">
<svg class="glyphicon glyphicon-option-horizontal" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M14.152,36.557c3.705,0,6.869,1.314,9.501,3.939c2.633,2.633,3.945,5.796,3.941,9.505
c-0.002,3.702-1.315,6.873-3.941,9.499c-2.625,2.628-5.792,3.944-9.501,3.944c-3.708,0-6.876-1.316-9.502-3.944
c-2.626-2.626-3.938-5.797-3.941-9.499c-0.003-3.709,1.31-6.872,3.941-9.505C7.282,37.871,10.446,36.557,14.152,36.557z
M49.999,36.557c3.705,0,6.869,1.314,9.501,3.939c2.633,2.633,3.945,5.796,3.941,9.505c-0.002,3.702-1.316,6.873-3.941,9.499
c-2.625,2.628-5.793,3.944-9.501,3.944c-3.709,0-6.876-1.316-9.502-3.944c-2.625-2.626-3.938-5.797-3.941-9.499
c-0.004-3.709,1.31-6.872,3.941-9.505C43.129,37.871,46.293,36.557,49.999,36.557z M85.85,36.557c3.701,0,6.871,1.314,9.5,3.939
c2.629,2.633,3.941,5.796,3.941,9.505c0,3.702-1.316,6.873-3.941,9.499c-2.625,2.628-5.793,3.944-9.5,3.944
c-3.709,0-6.877-1.316-9.502-3.944c-2.627-2.626-3.943-5.797-3.943-9.499c0-3.709,1.314-6.872,3.943-9.505
C78.975,37.871,82.146,36.557,85.85,36.557z"></path>
</svg></span>En cours
</div>
</td>
<td class="af-table__cell"><a class="af-link af-link--hasIconLeft" href="#">
<svg class="glyphicon glyphicon-pencil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 100">
<path d="M3.718 98.426l26.043-8.759-17.44-17.44zM19.359 65.892l16.736 16.736 48.019-48.019-16.736-16.736zM74.104 11.148l16.736 16.736 7.742-7.195q1.017-1.017 1.017-2.542t-1.017-2.62l-11.966-11.966q-1.173-1.017-2.581-1.017t-2.581 1.017z"></path>
</svg><span class="af-link__text">Consulter</span></a></td>
</tr>
<tr class="af-table__tr">
<td class="af-table__cell"><a class="af-link" href="">25487296</a></td>
<td class="af-table__cell"><a class="af-link" href="">1594458044</a></td>
<td class="af-table__cell">7059</td>
<td class="af-table__cell">Toulouse</td>
<td class="af-table__cell">01/06/2007</td>
<td class="af-table__cell">Acceptation partielle</td>
<td class="af-table__cell">
<div class="af-status"><span class="glyphicon-ring glyphicon-ring--warning">
<svg class="glyphicon glyphicon-arrowthin-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M5.6,57.8l-0.2,0h66.9l-21,21.1c-1,1-1.6,2.4-1.6,3.9s0.6,2.8,1.6,3.9l3.3,3.3c1,1,2.4,1.6,3.9,1.6s2.8-0.6,3.9-1.6
l36.1-36.1c1-1,1.6-2.4,1.6-3.9c0-1.5-0.6-2.8-1.6-3.9L62.3,10.1c-1-1-2.4-1.6-3.9-1.6s-2.8,0.6-3.9,1.6l-3.3,3.3
c-1,1-1.6,2.4-1.6,3.9c0,1.5,0.6,2.8,1.6,3.8l21.3,21.2H5.5c-3,0-5.5,2.6-5.5,5.6l0,4.6C0,55.4,2.6,57.8,5.6,57.8z"></path>
</svg></span>Transmis
</div>
</td>
<td class="af-table__cell"><a class="af-link af-link--hasIconLeft" href="#">
<svg class="glyphicon glyphicon-pencil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 100">
<path d="M3.718 98.426l26.043-8.759-17.44-17.44zM19.359 65.892l16.736 16.736 48.019-48.019-16.736-16.736zM74.104 11.148l16.736 16.736 7.742-7.195q1.017-1.017 1.017-2.542t-1.017-2.62l-11.966-11.966q-1.173-1.017-2.581-1.017t-2.581 1.017z"></path>
</svg><span class="af-link__text">Consulter</span></a></td>
</tr>
<tr class="af-table__tr">
<td class="af-table__cell"><a class="af-link" href="">22487296</a></td>
<td class="af-table__cell"><a class="af-link" href="">1594428044</a></td>
<td class="af-table__cell">7052</td>
<td class="af-table__cell">NA</td>
<td class="af-table__cell">11/06/2000</td>
<td class="af-table__cell">Refus</td>
<td class="af-table__cell">
<div class="af-status"><span class="glyphicon-ring glyphicon-ring--success">
<svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
<path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
</svg></span>Clos
</div>
</td>
<td class="af-table__cell"><a class="af-link af-link--hasIconLeft" href="#">
<svg class="glyphicon glyphicon-pencil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 100">
<path d="M3.718 98.426l26.043-8.759-17.44-17.44zM19.359 65.892l16.736 16.736 48.019-48.019-16.736-16.736zM74.104 11.148l16.736 16.736 7.742-7.195q1.017-1.017 1.017-2.542t-1.017-2.62l-11.966-11.966q-1.173-1.017-2.581-1.017t-2.581 1.017z"></path>
</svg><span class="af-link__text">Consulter</span></a></td>
</tr>
<tr class="af-table__tr">
<td class="af-table__cell"><a class="af-link" href="">25487696</a></td>
<td class="af-table__cell"><a class="af-link" href="">1594458644</a></td>
<td class="af-table__cell">7359</td>
<td class="af-table__cell">BellBoeuf</td>
<td class="af-table__cell">01/03/2017</td>
<td class="af-table__cell">Acceptation totale</td>
<td class="af-table__cell">
<div class="af-status"><span class="glyphicon-ring glyphicon-ring--banque">
<svg class="glyphicon glyphicon-option-horizontal" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M14.152,36.557c3.705,0,6.869,1.314,9.501,3.939c2.633,2.633,3.945,5.796,3.941,9.505
c-0.002,3.702-1.315,6.873-3.941,9.499c-2.625,2.628-5.792,3.944-9.501,3.944c-3.708,0-6.876-1.316-9.502-3.944
c-2.626-2.626-3.938-5.797-3.941-9.499c-0.003-3.709,1.31-6.872,3.941-9.505C7.282,37.871,10.446,36.557,14.152,36.557z
M49.999,36.557c3.705,0,6.869,1.314,9.501,3.939c2.633,2.633,3.945,5.796,3.941,9.505c-0.002,3.702-1.316,6.873-3.941,9.499
c-2.625,2.628-5.793,3.944-9.501,3.944c-3.709,0-6.876-1.316-9.502-3.944c-2.625-2.626-3.938-5.797-3.941-9.499
c-0.004-3.709,1.31-6.872,3.941-9.505C43.129,37.871,46.293,36.557,49.999,36.557z M85.85,36.557c3.701,0,6.871,1.314,9.5,3.939
c2.629,2.633,3.941,5.796,3.941,9.505c0,3.702-1.316,6.873-3.941,9.499c-2.625,2.628-5.793,3.944-9.5,3.944
c-3.709,0-6.877-1.316-9.502-3.944c-2.627-2.626-3.943-5.797-3.943-9.499c0-3.709,1.314-6.872,3.943-9.505
C78.975,37.871,82.146,36.557,85.85,36.557z"></path>
</svg></span>En cours
</div>
</td>
<td class="af-table__cell"><a class="af-link af-link--hasIconLeft" href="#">
<svg class="glyphicon glyphicon-pencil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 100">
<path d="M3.718 98.426l26.043-8.759-17.44-17.44zM19.359 65.892l16.736 16.736 48.019-48.019-16.736-16.736zM74.104 11.148l16.736 16.736 7.742-7.195q1.017-1.017 1.017-2.542t-1.017-2.62l-11.966-11.966q-1.173-1.017-2.581-1.017t-2.581 1.017z"></path>
</svg><span class="af-link__text">Consulter</span></a></td>
</tr>
<tr class="af-table__tr">
<td class="af-table__cell"><a class="af-link" href="">25487296</a></td>
<td class="af-table__cell"><a class="af-link" href="">1594458044</a></td>
<td class="af-table__cell">7059</td>
<td class="af-table__cell">Toulouse</td>
<td class="af-table__cell">01/06/2007</td>
<td class="af-table__cell">Acceptation partielle</td>
<td class="af-table__cell">
<div class="af-status"><span class="glyphicon-ring glyphicon-ring--warning">
<svg class="glyphicon glyphicon-arrowthin-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M5.6,57.8l-0.2,0h66.9l-21,21.1c-1,1-1.6,2.4-1.6,3.9s0.6,2.8,1.6,3.9l3.3,3.3c1,1,2.4,1.6,3.9,1.6s2.8-0.6,3.9-1.6
l36.1-36.1c1-1,1.6-2.4,1.6-3.9c0-1.5-0.6-2.8-1.6-3.9L62.3,10.1c-1-1-2.4-1.6-3.9-1.6s-2.8,0.6-3.9,1.6l-3.3,3.3
c-1,1-1.6,2.4-1.6,3.9c0,1.5,0.6,2.8,1.6,3.8l21.3,21.2H5.5c-3,0-5.5,2.6-5.5,5.6l0,4.6C0,55.4,2.6,57.8,5.6,57.8z"></path>
</svg></span>Transmis
</div>
</td>
<td class="af-table__cell"><a class="af-link af-link--hasIconLeft" href="#">
<svg class="glyphicon glyphicon-pencil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 100">
<path d="M3.718 98.426l26.043-8.759-17.44-17.44zM19.359 65.892l16.736 16.736 48.019-48.019-16.736-16.736zM74.104 11.148l16.736 16.736 7.742-7.195q1.017-1.017 1.017-2.542t-1.017-2.62l-11.966-11.966q-1.173-1.017-2.581-1.017t-2.581 1.017z"></path>
</svg><span class="af-link__text">Consulter</span></a></td>
</tr>
<tr class="af-table__tr">
<td class="af-table__cell"><a class="af-link" href="">22487296</a></td>
<td class="af-table__cell"><a class="af-link" href="">1594428044</a></td>
<td class="af-table__cell">7052</td>
<td class="af-table__cell">NA</td>
<td class="af-table__cell">11/06/2000</td>
<td class="af-table__cell">Refus</td>
<td class="af-table__cell">
<div class="af-status"><span class="glyphicon-ring glyphicon-ring--success">
<svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
<path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
</svg></span>Clos
</div>
</td>
<td class="af-table__cell"><a class="af-link af-link--hasIconLeft" href="#">
<svg class="glyphicon glyphicon-pencil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 100">
<path d="M3.718 98.426l26.043-8.759-17.44-17.44zM19.359 65.892l16.736 16.736 48.019-48.019-16.736-16.736zM74.104 11.148l16.736 16.736 7.742-7.195q1.017-1.017 1.017-2.542t-1.017-2.62l-11.966-11.966q-1.173-1.017-2.581-1.017t-2.581 1.017z"></path>
</svg><span class="af-link__text">Consulter</span></a></td>
</tr>
<tr class="af-table__tr">
<td class="af-table__cell"><a class="af-link" href="">25487296</a></td>
<td class="af-table__cell"><a class="af-link" href="">1594458044</a></td>
<td class="af-table__cell">7059</td>
<td class="af-table__cell">Toulouse</td>
<td class="af-table__cell">01/06/2007</td>
<td class="af-table__cell">Acceptation partielle</td>
<td class="af-table__cell">
<div class="af-status"><span class="glyphicon-ring glyphicon-ring--warning">
<svg class="glyphicon glyphicon-arrowthin-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M5.6,57.8l-0.2,0h66.9l-21,21.1c-1,1-1.6,2.4-1.6,3.9s0.6,2.8,1.6,3.9l3.3,3.3c1,1,2.4,1.6,3.9,1.6s2.8-0.6,3.9-1.6
l36.1-36.1c1-1,1.6-2.4,1.6-3.9c0-1.5-0.6-2.8-1.6-3.9L62.3,10.1c-1-1-2.4-1.6-3.9-1.6s-2.8,0.6-3.9,1.6l-3.3,3.3
c-1,1-1.6,2.4-1.6,3.9c0,1.5,0.6,2.8,1.6,3.8l21.3,21.2H5.5c-3,0-5.5,2.6-5.5,5.6l0,4.6C0,55.4,2.6,57.8,5.6,57.8z"></path>
</svg></span>Transmis
</div>
</td>
<td class="af-table__cell"><a class="af-link af-link--hasIconLeft" href="#">
<svg class="glyphicon glyphicon-pencil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 100">
<path d="M3.718 98.426l26.043-8.759-17.44-17.44zM19.359 65.892l16.736 16.736 48.019-48.019-16.736-16.736zM74.104 11.148l16.736 16.736 7.742-7.195q1.017-1.017 1.017-2.542t-1.017-2.62l-11.966-11.966q-1.173-1.017-2.581-1.017t-2.581 1.017z"></path>
</svg><span class="af-link__text">Consulter</span></a></td>
</tr>
</tbody>
</table>Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';
/* Legacy old version */
.af-table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
margin-bottom: 2rem;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
background: $white;
&-th {
font-weight: $table-head-font-weight;
}
@include generate-universes() {
.af-table-thead {
background-color: $color;
color: $table-inverse-color;
}
}
&__th {
height: 100%;
color: $white;
background: $color-azur;
box-shadow: 0 0 1px 1px $white;
font-size: 1rem;
text-align: left;
position: relative;
padding: 1rem;
font-weight: $table-head-font-weight;
.af-link {
color: $white;
&:hover {
color: $white;
}
}
.glyphicon {
font-size: 0.7rem;
position: absolute;
top: 50%;
right: 1rem;
transform: translate(0, -50%);
}
&--sortable {
padding: 0;
}
}
&__tr {
height: 100%;
&:nth-child(2n + 1) {
.af-table {
&__cell {
background-color: $color-wild-sand;
}
}
}
}
&__cell {
padding: 0.5rem 1rem;
font-size: 0.9375rem;
border: 1px solid transparent;
border-right-color: $color-silver;
text-align: left;
&:nth-last-child(1) {
border-right: 0;
}
}
@include generate-universes() {
.af-table-thead {
.af-table__tr {
.af-table__th {
background-color: $color;
color: $table-inverse-color;
}
}
}
}
}React interactions
Vous trouverez ici les démos Storybook pour visualiser les interactions du composant.
Vous avez la possibilité de jouer avec les propriétés du composant React sur notre storybook.
Generales Guidelines
Les guidelines permettent de décrire l'ensemble des règles et des éléments graaphiques pour la conception des interfaces.
Elle sont destinées à être respectées par tous les intervenants d'un projet (UX, Développeurs, PO, etc ...), il s'agit donc d'un référentiel commun.
Le tableau est l’outil de présentation de données par excellence; accompagné de filtres et de tri il permet d’obtenir rapidement une recherche croisée.
1) Définition
Un tableau est un composant présentant un ensemble de données organisées en colonnes et lignes, pouvant être triées, filtrées, recherchées.
2) Use case
- Un tableau doit obligatoirement être titré.
- Un tableau doit représenter l’information nécessaire pour que l’utilisateur puisse avoir suffisamment d’informations sur une seule page, sans surabonder avec trop de colonnes ou lignes, dégradant la lecture.
- Les entêtes de colonnes représentent l’information la plus critique du tableau, ils doivent être rédigés de manière concise et claire dans le contexte du tableau, en plus d’être pertinent avec l’option de tri croissant/ décroissant si celle-ci est activée.
- Afin de rendre les tableaux plus efficaces, le nombre de colonnes maximum est limité à 12, chacune de la largeur d’une colonne de grille au minimum.
- Les colonnes doivent être au plus proche d’une largeur identique sur l’ensemble du tableau — au moins sur un ensemble de colonne dont le contenu est de la même largeur.
- La présentation du contenu se fera toujours avec une alternance de fond de couleur entre chaque ligne, nommée « pyjama ». Celle-ci permet de rendre plus aisée la lecture de longues lignes en donnant un repaire visuel à l’utilisateur.
- Si possible, les lignes affichent un maximum de 4 lignes de texte, tout en s’ajustant automatiquement au contenu pour éviter des zones vides. Éviter de présenter de la donnée texte sur des colonnes trop étroites pour afficher plus de colonnes de données.
- L’affichage pourra varier entre 10, 20 et 50 lignes avec un réglage par défaut de 10 lignes et la pagination affichée si le nombre de lignes à afficher dépasse le critère d’affichage.
- Les actions ligne par ligne doivent être représentées par des pictogrammes (label optionnel) dans la dernière colonne à droite du tableau.
- Une colonne de sélection de ligne sera titrée d’une checkbox « maître » agissant comme un « sélectionner tout ». Cette colonne sera toujours située le plus à gauche du tableau. Chaque ligne possèdera sa checkbox de sélection.
- Les seuls types de composants présentés dans le tableau sont : - Bouton CTA - Checkboxes - Lien - Select - Tag - Bouton radio
3) DO/DONT
- Aucune information dans une colonne ne devra être en dépassement (overflow).
- Utiliser un type de composant non autorisé (cf. section I./B./11.)
- Utiliser deux méthodes de filtres pour un même tableau.
- Présenter deux tableaux côte à côte.
- Utiliser le tableau pour mettre en page du contenu
4) Avancé
- Les lignes et colonnes s’ajustent automatiquement à la largeur maximum disponible pour le composant, affichant le contenu le plus lisiblement que possible.
- Le tri de colonne (croissant/décroissant) n’est pas obligatoire, il peut être désactivé par colonne.
5) Utilisation
a) Alignement
- Les données des colonnes devront être ferrés à droite pour les valeurs numériques, à gauche pour les valeurs textuelles, les composants seront centrés (tag, checkboxes, etc).
- Les entêtes de colonnes devront être ferrés à gauche, l’icône de tri actif ferré à gauche.
b) Contenu
Afin de faciliter la lecture des tableaux, on positionnera les valeurs textuelles à gauche du tableau, les valeurs numériques à droite du tableau.
c) Rédaction
- Les titres de colonne doivent indiquer la typologie de données représentées.
- Aucun texte contenu dans une ligne ne doit être en dépassement (overflow).
d) Filtres
- Un tableau peut avoir des filtres de type « dropdown » liés à une ou plusieurs colonnes pour chercher des informations spécifiques — un statut par exemple. Cette ligne de filtre se placera entre le titre de colonne et les lignes de données.
- Un champ de recherche peut s’appliquer sur l’ensemble du tableau. Celui-ci se placera au-dessus de l’ensemble des tris et du tableau.
- Des filtres horizontaux ou verticaux peuvent être joints au tableau afin de trier efficacement sur des cas spécifiques.
e) Paginations
- La pagination est activée quand le nombre de résultat dépasse l’option d’affichage.
- Le sélecteur d’affichage est ferré à gauche.
- La pagination est composée de liens << précédent et suivant >> aux extrémités, encadrent les valeurs de pages suivantes: active, suivante, …, dernière.
- La pagination est ferrée à droite.
f) Unité de mesure
- Elles doivent être indiquées pour toutes les données de valeurs (€, %, etc.)
- Si les unités sont identiques sur toutes les colonnes de données de valeurs du tableau, l’unité sera indiquée dans le titre. Par exemple: Résultat brut des agences en 2018 — en euros.
g) Action
- Des saisies de données peuvent être effectuées dans le tableau, avec les composants dédiés (boutons, toggle ou select).
- Dans la colonne d’action sont regroupées toutes les fonctions d’édition/suppression d’une ligne.
- La sélection n’est pas une action. Elle sera dans sa colonne dédiée, placée tout à gauche du tableau.
Style
Un style a été défini pour chaque composant, il possible d'importer uniquement le style du composant sur le projet fin optimiser le bundle.
On liste également les codes couleur utilisés, cliquez-ici pour voir l'ensemble des couleurs du Design System
Imports SASS
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';
@import '@axa-fr/react-toolkit-table/dist/table.scss';
Typography
Component text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized.
| Class | Font-size (px/rem) | Font-weight | Font-family |
|---|---|---|---|
| .af-table | 16 / 1 | 400 | Source Sans Pro Regular |
Colors
BLEU AXA#00008f$color-axa
BLEU Action#3032c1$color-azur
BLEU Action focus#aaabf9$color-azur-focused
Mercury#e5e5e5$color-mercury
Silver#cccccc $color-silver
Button Disabled#c9c9c9 $color-btn-disabled
Button success #1cc578 $color-btn-success
Button success dark #0d844e $color-btn-success-dark
Button success focuced #bdffe1 $color-btn-success-focused
Button danger #f02849 $color-btn-danger
Button danger dark #8f182c $color-btn-danger-dark
Button danger focuced #ffa0af $color-btn-danger-focused