Basic Table
Simple table. You just need to add the class table-basic
to your table.
If you want to make the header of the table sticky, you will need to add a container div class="table-module"
.
Check the example below to get the required CSS.
Dataset in use: population-millesimee-communes-2016
(See it on public domain)
Fields in use:
nom_de_la_commune | population_totale | code_commune | nom_de_la_region |
---|---|---|---|
Créon | 4711 | 140 | Nouvelle-Aquitaine |
Flachères | 525 | 167 | Auvergne-Rhône-Alpes |
Boissia | 128 | 061 | Bourgogne-Franche-Comté |
Labouheyre | 2779 | 134 | Nouvelle-Aquitaine |
<ods-dataset-context context="population"
population-domain="public"
population-dataset="population-millesimee-communes-2016">
<div class="table-module">
<table class="table-basic"
ods-results="regions"
ods-results-context="population"
ods-results-max="100">
<thead>
<tr>
<th>Commune</th>
<th>Population</th>
<th>Code Commune</th>
<th>Région</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="region in regions">
<th scope="row">
{{ region.fields.nom_de_la_commune | capitalize }}
</th>
<td>
{{ region.fields.population_totale }}
</td>
<td>
{{ region.fields.code_commune }}
</td>
<td>
{{ region.fields.nom_de_la_region }}
</td>
</tr>
</tbody>
</table>
</div>
</ods-dataset-context>
/* Table Module Basic
========================================================================== */
.table-module {
height: 400px;
overflow-y: auto;
}
.table-basic {
display: table;
border-collapse: collapse;
width: 100%;
white-space: nowrap;
background-color: #FFFFFF;
}
.table-basic thead th {
color: var(--titles);
background-color: #f6f8fb;
font-weight: 500;
padding: 13px 3px;
position: sticky;
top: 0;
z-index: 1;
}
.table-basic thead th:first-child,
.table-basic tbody th {
padding-left: 13px;
}
.table-basic tr td,
.table-basic tbody th {
font-weight: normal;
border-top: 1px solid #dee5ef;
}
.table-basic tr td {
padding: 13px 3px;
}