Table
Sources
PrestaShop UIKit
Original bootstrap component used in the PrestaShop UIKit:
1<table class="table">
2 <thead>
3 <tr>
4 <th scope="col">#</th>
5 <th scope="col">First</th>
6 <th scope="col">Last</th>
7 <th scope="col">Handle</th>
8 </tr>
9 </thead>
10 <tbody>
11 <tr>
12 <th scope="row">1</th>
13 <td>Mark</td>
14 <td>Otto</td>
15 <td>@mdo</td>
16 </tr>
17 <tr>
18 <th scope="row">2</th>
19 <td>Jacob</td>
20 <td>Thornton</td>
21 <td>@fat</td>
22 </tr>
23 <tr>
24 <th scope="row">3</th>
25 <td>Larry</td>
26 <td>the Bird</td>
27 <td>@twitter</td>
28 </tr>
29 </tbody>
30</table>PUIK
PUIK uses the Material Icons font, rounded. The icon list can be found here.
Basic Use
1<div class="puik-table__container">
2 <table class="puik-table">
3 <thead>
4 <tr>
5 <th>Nom</th>
6 <th>Prénom</th>
7 <th>Email</th>
8 </tr>
9 </thead>
10 <tbody>
11 <tr>
12 <td>Jaskolski</td>
13 <td>Devon</td>
14 <td>[email protected]</td>
15 </tr>
16 <tr>
17 <td>Grant</td>
18 <td>Mara</td>
19 <td>[email protected]</td>
20 </tr>
21 <tr>
22 <td>Satterfield</td>
23 <td>Gregg</td>
24 <td>[email protected]</td>
25 </tr>
26 </tbody>
27 </table>
28</div>Full width
By default, the table isn’t full width, the size of each col is determined by it’s content. You can set the table full width by adding the class puik-table--full-width to the table tag :
1<div class="puik-table__container">
2 <table class="puik-table puik-table--full-width">
3 <thead>
4 <tr>
5 <th>Nom</th>
6 <th>Prénom</th>
7 <th>Email</th>
8 </tr>
9 </thead>
10 <tbody>
11 <tr>
12 <td>Jaskolski</td>
13 <td>Devon</td>
14 <td>[email protected]</td>
15 </tr>
16 <tr>
17 <td>Grant</td>
18 <td>Mara</td>
19 <td>[email protected]</td>
20 </tr>
21 <tr>
22 <td>Satterfield</td>
23 <td>Gregg</td>
24 <td>[email protected]</td>
25 </tr>
26 </tbody>
27 </table>
28</div>Column
Width
You can choose column’s size among 3 standard sizes :
sm: 60px,md: 240px,lg: 480px,
You can apply the corresponding size by adding the class puik-table__head__row__item--${sizes} to the th tag of the column :
1<div class="puik-table__container">
2 <table class="puik-table">
3 <thead>
4 <tr>
5 <th class="puik-table__head__row__item--sm">Nom</th>
6 <th class="puik-table__head__row__item--md">Prénom</th>
7 <th class="puik-table__head__row__item--lg">Email</th>
8 </tr>
9 </thead>
10 <tbody>
11 <tr>
12 <td>Jaskolski</td>
13 <td>Devon</td>
14 <td>[email protected]</td>
15 </tr>
16 <tr>
17 <td>Grant</td>
18 <td>Mara</td>
19 <td>[email protected]</td>
20 </tr>
21 <tr>
22 <td>Satterfield</td>
23 <td>Gregg</td>
24 <td>[email protected]</td>
25 </tr>
26 </tbody>
27 </table>
28</div>Text align
You can specify the text align of each cell of the table among 3 possibilities :
left(default),center,right,
You can add the class puik-table__body__row__item--${aligns} to the concerned td tag :
1<div class="puik-table__container">
2 <table class="puik-table">
3 <thead>
4 <tr>
5 <th>Nom</th>
6 <th>Prénom</th>
7 <th>Email</th>
8 </tr>
9 </thead>
10 <tbody>
11 <tr>
12 <td class="puik-table__body__row__item--left">Jaskolski</td>
13 <td class="puik-table__body__row__item--center">Devon</td>
14 <td class="puik-table__body__row__item--right">[email protected]</td>
15 </tr>
16 <tr>
17 <td class="puik-table__body__row__item--left">Grant</td>
18 <td class="puik-table__body__row__item--center">Mara</td>
19 <td class="puik-table__body__row__item--right">[email protected]</td>
20 </tr>
21 <tr>
22 <td class="puik-table__body__row__item--left">Satterfield</td>
23 <td class="puik-table__body__row__item--center">Gregg</td>
24 <td class="puik-table__body__row__item--right">[email protected]</td>
25 </tr>
26 </tbody>
27 </table>
28</div>Selectable
You can add a first column with checkbox to select rows by using the following structure :
1<div class="puik-table__container">
2 <table class="puik-table">
3 <thead>
4 <tr>
5 <th class="puik-table__head__row__item--selection">
6 <div class="puik-checkbox">
7 <input id="puik-checkbox-head" class="puik-checkbox__input" type="checkbox">
8 <label for="puik-checkbox-head" class="puik-checkbox__label">Select all items</label>
9 </div>
10 </th>
11 <th>Nom</th>
12 <th>Prénom</th>
13 <th>Email</th>
14 </tr>
15 </thead>
16 <tbody>
17 <tr>
18 <td class="puik-table__body__row__item--selection">
19 <div class="puik-checkbox puik-table__body__row__item--selection__checkbox">
20 <input id="puik-checkbox-1" class="puik-checkbox__input" type="checkbox">
21 <label for="puik-checkbox-1" class="puik-checkbox__label">Select item</label>
22 </div>
23 </td>
24 <td>Jaskolski</td>
25 <td>Devon</td>
26 <td>[email protected]</td>
27 </tr>
28 <tr>
29 <td class="puik-table__body__row__item--selection">
30 <div class="puik-checkbox puik-table__body__row__item--selection__checkbox">
31 <input id="puik-checkbox-2" class="puik-checkbox__input" type="checkbox">
32 <label for="puik-checkbox-2" class="puik-checkbox__label">Select item</label>
33 </div>
34 </td>
35 <td>Grant</td>
36 <td>Mara</td>
37 <td>[email protected]</td>
38 </tr>
39 <tr>
40 <td class="puik-table__body__row__item--selection">
41 <div class="puik-checkbox puik-table__body__row__item--selection__checkbox">
42 <input id="puik-checkbox-3" class="puik-checkbox__input" type="checkbox">
43 <label for="puik-checkbox-3" class="puik-checkbox__label">Select item</label>
44 </div>
45 </td>
46 <td>Satterfield</td>
47 <td>Gregg</td>
48 <td>[email protected]</td>
49 </tr>
50 </tbody>
51 </table>
52</div>