fix(juniors): add tbody to table

Prevents SSR hydration errors
SwissTchoukball · Dec 20, 2021 · 2cd923a · 2cd923a
1 parent 0a600a1
commit 2cd923a
Showing 1 changed file with 34 additions and 32 deletions.
diff --git a/components/st-category-distribution-table.vue b/components/st-category-distribution-table.vue
@@ -1,42 +1,44 @@
 <template>
   <div class="c-category-distribution-table">
     <table class="l-table c-category-distribution-table__table">
-      <tr>
-        <th rowspan="2">{{ $t('categoryDistribution.birthYear') }}</th>
-        <th rowspan="2">{{ $t('categoryDistribution.ageIn', { year: seasonStartYear }) }}</th>
-        <th colspan="3">{{ $t('categoryDistribution.categories') }}</th>
-      </tr>
+      <tbody>
+        <tr>
+          <th rowspan="2">{{ $t('categoryDistribution.birthYear') }}</th>
+          <th rowspan="2">{{ $t('categoryDistribution.ageIn', { year: seasonStartYear }) }}</th>
+          <th colspan="3">{{ $t('categoryDistribution.categories') }}</th>
+        </tr>
 
-      <tr>
-        <th>{{ $t('categoryDistribution.competitions') }}</th>
-        <th>{{ $t('categoryDistribution.youthAndSport') }}</th>
-        <th>{{ $t('categoryDistribution.federation') }}</th>
-      </tr>
+        <tr>
+          <th>{{ $t('categoryDistribution.competitions') }}</th>
+          <th>{{ $t('categoryDistribution.youthAndSport') }}</th>
+          <th>{{ $t('categoryDistribution.federation') }}</th>
+        </tr>
 
-      <tr v-for="(age, index) in ages" :key="age">
-        <td>
-          <template v-if="index === 0">{{
-            $t('categoryDistribution.yearAndLess', { year: seasonStartYear - age })
-          }}</template>
-          <template v-else>{{ seasonStartYear - age }}</template>
-        </td>
+        <tr v-for="(age, index) in ages" :key="age">
+          <td>
+            <template v-if="index === 0">
+              {{ $t('categoryDistribution.yearAndLess', { year: seasonStartYear - age }) }}
+            </template>
+            <template v-else>{{ seasonStartYear - age }}</template>
+          </td>
 
-        <td>{{ age }}<span v-if="index === 0">+</span></td>
+          <td>{{ age }}<span v-if="index === 0">+</span></td>
 
-        <template v-if="age === 21">
-          <td rowspan="4">Adultes</td>
-          <td>-</td>
-          <td rowspan="2">Membres actifs</td>
-        </template>
-        <td v-else-if="age === 20" rowspan="10">Sport des jeunes</td>
-        <td v-else-if="age === 19" rowspan="15">Membres juniors</td>
-        <td v-else-if="age === 17" rowspan="3">M18</td>
-        <td v-else-if="age === 14" rowspan="3">M15</td>
-        <td v-else-if="age === 11" rowspan="2">M12</td>
-        <td v-else-if="age === 10" rowspan="6">Sport des enfants</td>
-        <td v-else-if="age === 9" rowspan="2">M10</td>
-        <td v-else-if="age === 7" rowspan="3">M8</td>
-      </tr>
+          <template v-if="age === 21">
+            <td rowspan="4">Adultes</td>
+            <td>-</td>
+            <td rowspan="2">Membres actifs</td>
+          </template>
+          <td v-else-if="age === 20" rowspan="10">Sport des jeunes</td>
+          <td v-else-if="age === 19" rowspan="15">Membres juniors</td>
+          <td v-else-if="age === 17" rowspan="3">M18</td>
+          <td v-else-if="age === 14" rowspan="3">M15</td>
+          <td v-else-if="age === 11" rowspan="2">M12</td>
+          <td v-else-if="age === 10" rowspan="6">Sport des enfants</td>
+          <td v-else-if="age === 9" rowspan="2">M10</td>
+          <td v-else-if="age === 7" rowspan="3">M8</td>
+        </tr>
+      </tbody>
     </table>
   </div>
 </template>