@datagouv/components-next 1.0.2-dev.173 → 1.0.2-dev.174

package/src/components/TabularExplorer/TabularExplorer.vue

@@ -1,680 +1,39 @@
 <template>
-  <div>
-    <!-- Outside the branches below: this slot holds the query controls (search
-         input…), so it has to stay reachable when the query itself failed. -->
-    <slot name="toolbar-top" />
-
-    <div
-      v-if="previewError"
-      class="max-w-3xl mx-auto"
-    >
-      <SimpleBanner
-        type="warning"
-        class="mb-4"
-      >
-        {{ t("L'aperçu de ce fichier n'a pas pu être chargé.") }}
-        <pre class="text-xs mt-2 whitespace-pre-wrap break-words">{{ previewError }}</pre>
-      </SimpleBanner>
-    </div>
-
-    <div
-      v-else-if="previewLoading"
-      class="animate-pulse-placeholder"
-      :aria-label="t('Chargement de l\'aperçu…')"
-      role="status"
-    >
-      <div>
-        <div class="flex items-center justify-end gap-4 py-3">
-          <div class="h-4 w-20 bg-gray-200" />
-          <div class="h-4 w-20 bg-gray-200" />
-        </div>
-      </div>
-      <div class="overflow-hidden">
-        <table class="w-full text-sm border-collapse">
-          <thead class="shadow-[inset_0_-1px_0_0_#E5E5E5]">
-            <tr>
-              <th
-                v-for="i in 6"
-                :key="i"
-                class="px-3 py-2 text-left"
-              >
-                <div class="h-4 w-24 bg-gray-200" />
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              v-for="row in 8"
-              :key="row"
-              class="border-b border-gray-100"
-            >
-              <td
-                v-for="col in 6"
-                :key="col"
-                class="px-3 py-2.5"
-              >
-                <div class="h-3 bg-gray-200" />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-
+  <div class="flex min-h-0 flex-1 flex-col">
+    <PreviewUnavailable v-if="previewError">
+      {{ t("L'aperçu de ce fichier n'a pas pu être chargé.") }}
+      <br>
+      <span class="text-xs break-words">{{ previewError }}</span>
+    </PreviewUnavailable>
+
+    <!-- Same skeleton as the Suspense fallback above us: in both cases the slot isn't
+         rendered yet, so its toolbar is a placeholder too. -->
+    <TabularSkeleton v-else-if="previewLoading" />
+
+    <!-- Loaded: the consumer composes the parts (toolbar, table, mobile sheet) from
+         the provided context, so it controls the framing and layout. -->
     <template v-else-if="tableData && profileData">
-      <!-- Toolbar & active filters inherit the host's 1rem horizontal padding
-           (px-4 on ResourceExplorerViewer's TabPanel, .container on
-           ExploreResourceView), so they line up with the resource title /
-           download button above. Only the table itself goes edge-to-edge
-           (via -mx-4 below). -->
-      <div>
-        <div class="flex items-center py-3 gap-2">
-          <!-- Mobile: filter & sort button -->
-          <BrandedButton
-            class="md:hidden"
-            color="tertiary"
-            size="2xs"
-            :icon="RiFilterLine"
-            keep-margins-even-without-borders
-            @click="mobileFilterOpen = true"
-          >
-            {{ t('Filtres & tri') }}
-          </BrandedButton>
-
-          <div class="flex-1" />
-
-          <!-- Right: Stats -->
-          <div class="flex items-center gap-4">
-            <!-- Columns (clickable, opens column popover) -->
-            <Popover
-              ref="columnAnchor"
-              v-slot="{ open }"
-              class="relative"
-            >
-              <PopoverButton class="flex items-center gap-1.5 text-xs text-gray-plain rounded px-2 py-1 hover:bg-gray-50 focus:outline-none">
-                <RiLayoutColumnLine
-                  class="size-3"
-                  aria-hidden="true"
-                />
-                <span class="font-bold hidden md:inline">{{ t('Colonnes') }}</span>
-                <span class="font-mono tabular-nums">{{ visibleColumns.size }}/{{ allColumns.length }}</span>
-                <RiArrowDownSLine
-                  class="size-3 opacity-50"
-                  aria-hidden="true"
-                />
-              </PopoverButton>
-
-              <ClientOnly>
-                <Teleport to="#tooltips">
-                  <PopoverPanel
-                    v-show="open"
-                    ref="columnPanel"
-                    static
-                    class="bg-white border border-gray-default rounded shadow-lg w-72 absolute z-[800]"
-                    :style="columnFloatingStyles"
-                  >
-                    <div class="px-3 py-2 border-b border-gray-default space-y-1.5">
-                      <span class="block text-xs font-medium text-gray-title">
-                        {{ visibleColumns.size }} {{ t('sur') }} {{ allColumns.length }} {{ t('colonnes visibles') }}
-                      </span>
-                      <div class="flex items-center gap-1">
-                        <BrandedButton
-                          v-if="hiddenCount"
-                          color="tertiary"
-                          size="2xs"
-                          @click="showAllColumns"
-                        >
-                          {{ t('Tout afficher') }}
-                        </BrandedButton>
-                        <BrandedButton
-                          v-if="visibleColumns.size > 0"
-                          color="tertiary"
-                          size="2xs"
-                          @click="hideAllColumns"
-                        >
-                          {{ t('Tout masquer') }}
-                        </BrandedButton>
-                      </div>
-                    </div>
-                    <div class="max-h-64 overflow-auto p-1">
-                      <div
-                        v-for="col in allColumns"
-                        :key="col"
-                        class="group/col flex items-center gap-2 px-2 py-1.5 rounded hover:bg-gray-50 text-xs"
-                      >
-                        <label class="flex items-center gap-2 flex-1 min-w-0 cursor-pointer">
-                          <input
-                            type="checkbox"
-                            :checked="visibleColumns.has(col)"
-                            class="size-3.5 accent-new-primary"
-                            @change="toggleColumn(col)"
-                          >
-                          <span class="truncate">{{ col }}</span>
-                        </label>
-                        <button
-                          class="shrink-0 px-1 text-new-primary hover:underline hidden group-hover/col:block group-focus-within/col:block"
-                          @click="selectOnlyColumn(col)"
-                        >
-                          {{ t('Uniquement') }}
-                        </button>
-                      </div>
-                    </div>
-                  </PopoverPanel>
-                </Teleport>
-              </ClientOnly>
-            </Popover>
-
-            <!-- Rows -->
-            <span class="flex items-center gap-1.5 text-xs text-gray-plain">
-              <RiLoader5Line
-                v-if="isRefreshing"
-                class="size-3 text-new-primary animate-spin"
-                aria-hidden="true"
-              />
-              <RiLayoutRowLine
-                v-else
-                class="size-3 text-mention-grey"
-                aria-hidden="true"
-              />
-              <span class="font-bold hidden md:inline">{{ t('Lignes') }}</span>
-              <!-- The count stays in place while refreshing: the spinner already
-                   says it is stale, and swapping it for a word of another width
-                   would shift the whole toolbar on every search. -->
-              <span
-                data-testid="row-count"
-                class="font-mono tabular-nums"
-              >{{ tableData.meta.total.toLocaleString() }}/{{ totalLines.toLocaleString() }}</span>
-            </span>
-          </div>
-        </div>
-
-        <!-- Active filters & sort -->
-        <div
-          v-if="activeFilters.length > 0 || sort"
-          class="bg-gray-some border border-gray-default rounded-xl px-3 py-2.5 mb-3 space-y-2.5"
-        >
-          <!-- Header -->
-          <div class="flex items-center justify-between">
-            <div class="flex items-center gap-2">
-              <RiFilterLine
-                class="size-3.5"
-                aria-hidden="true"
-              />
-              <span class="text-xs text-gray-plain">{{ activeFilters.length > 0 ? t('Filtres actifs') : t('Tri actif') }}</span>
-              <span
-                v-if="activeFilters.length > 0"
-                class="inline-flex items-center justify-center rounded-full bg-new-primary/10 text-new-primary text-xs tabular-nums min-w-5 h-5 px-1.5"
-              >
-                {{ activeFilters.length }}
-              </span>
-            </div>
-            <BrandedButton
-              color="tertiary"
-              size="2xs"
-              :icon="RiCloseLine"
-              @click="clearAllFilters(); sort = null"
-            >
-              {{ t('Tout effacer') }}
-            </BrandedButton>
-          </div>
-          <!-- Chips -->
-          <div class="flex flex-wrap gap-1.5">
-            <!-- Sort chip -->
-            <span
-              v-if="sort"
-              class="inline-flex items-center gap-1.5 bg-white border border-gray-silver rounded-lg pl-2 pr-1 py-1 text-xs"
-            >
-              <component
-                :is="sort.direction === 'asc' ? RiArrowUpLine : RiArrowDownLine"
-                class="size-3 text-new-primary"
-                aria-hidden="true"
-              />
-              <span class="text-gray-plain">{{ t('Tri') }}</span>
-              <span class="text-gray-title">{{ sort.column }}</span>
-              <span class="text-gray-plain">{{ sort.direction === 'asc' ? t('croissant') : t('décroissant') }}</span>
-              <button
-                class="rounded p-0.5 text-gray-low hover:text-gray-plain hover:bg-gray-100"
-                @click="sort = null"
-              >
-                <RiCloseLine
-                  class="size-3"
-                  aria-hidden="true"
-                />
-                <span class="sr-only">{{ t('Supprimer le tri') }}</span>
-              </button>
-            </span>
-            <!-- Filter chips -->
-            <span
-              v-for="af in activeFilters"
-              :key="af.column"
-              :data-testid="`active-filter-${af.column}`"
-              class="inline-flex items-center gap-1.5 bg-white border border-gray-silver rounded-lg pl-2 pr-1 py-1 text-xs"
-            >
-              <component
-                :is="getColumnDisplay(af.column).icon"
-                class="size-3 text-gray-title"
-                aria-hidden="true"
-              />
-              <span class="text-gray-title">{{ af.column }}</span>
-              <span class="text-gray-plain">{{ af.label }}</span>
-              <button
-                class="rounded p-0.5 text-gray-low hover:text-gray-plain hover:bg-gray-100"
-                @click="removeFilter(af.column)"
-              >
-                <RiCloseLine
-                  class="size-3"
-                  aria-hidden="true"
-                />
-                <span class="sr-only">{{ t('Supprimer ce filtre') }}</span>
-              </button>
-            </span>
-          </div>
-        </div>
-      </div>
-      <!-- /toolbar & active filters -->
-
-      <!-- No column selected -->
-      <div
-        v-if="displayedColumns.length === 0"
-        class="flex flex-col items-center py-12"
-      >
-        <img
-          :src="noColumnsSrc"
-          class="h-32"
-          alt=""
-        >
-        <p class="font-bold text-gray-title my-3">
-          {{ t('Aucune colonne sélectionnée') }}
-        </p>
-        <BrandedButton
-          color="secondary"
-          size="xs"
-          @click="showAllColumns"
-        >
-          {{ t('Afficher toutes les colonnes') }}
-        </BrandedButton>
-      </div>
-
-      <!-- Desktop: scrollable table -->
-      <!-- The table goes edge-to-edge while the toolbar / active-filter rows
-           above keep the host's horizontal padding:
-           - default: `-mx-4` cancels the host's 1rem padding (px-4 on
-             ResourceExplorerViewer's TabPanel), so the table reaches the
-             host box edge.
-           - `fullBleed`: the table breaks out of the (max-width) container to
-             span almost the whole viewport (explore page), keeping a 2rem
-             gutter on each side so it doesn't touch the screen edges. Centered
-             on the viewport via the classic `left-1/2` + `-translate-x-1/2`
-             trick (works because the container is itself centered). -->
-      <div
-        v-if="displayedColumns.length > 0"
-        ref="scrollContainer"
-        class="hidden md:block overflow-auto max-h-[70vh] transition-opacity"
-        :class="[
-          fullBleed ? 'relative left-1/2 w-[calc(100vw_-_4rem)] -translate-x-1/2' : '-mx-4',
-          { 'opacity-40': isRefreshing },
-        ]"
-        :aria-busy="isRefreshing"
-      >
-        <table class="text-sm border-collapse">
-          <thead class="sticky top-0 bg-white z-10 shadow-[inset_0_-1px_0_0_#E5E5E5]">
-            <tr class="border-b border-gray-default">
-              <th
-                v-for="col in displayedColumns"
-                :key="col"
-                class="group/th relative h-14 px-2 last:pr-5 text-left align-middle whitespace-nowrap border-r border-gray-default last:border-r-0"
-                :style="columnWidths[col] ? { width: columnWidths[col] + 'px', minWidth: columnWidths[col] + 'px', maxWidth: columnWidths[col] + 'px' } : { maxWidth: '300px' }"
-              >
-                <div class="flex items-center gap-0.5 min-w-0">
-                  <span
-                    class="font-extrabold text-sm truncate"
-                    :title="col"
-                  >{{ col }}</span>
-                  <RiArrowUpLine
-                    v-if="sort?.column === col && sort.direction === 'asc'"
-                    class="size-3.5 shrink-0 text-new-primary"
-                    aria-hidden="true"
-                  />
-                  <RiArrowDownLine
-                    v-else-if="sort?.column === col && sort.direction === 'desc'"
-                    class="size-3.5 shrink-0 text-new-primary"
-                    aria-hidden="true"
-                  />
-                  <TabularFilterPopover
-                    v-model:sort="sort"
-                    v-model:filters="filters"
-                    class="mt-1"
-                    :column="col"
-                    :column-type="getColumnType(col)"
-                    :column-profile="getColumnProfile(col)"
-                    :null-percent="getNullPercent(col)"
-                    :total-lines="totalLines"
-                    :category-badge-styles="getColumnType(col) === 'categorical' ? getCategoryBadgeStylesForColumn(col) : undefined"
-                    :boolean-counts="getColumnType(col) === 'boolean' ? getBooleanCounts(col) : undefined"
-                  />
-                </div>
-                <!-- Column type (semantic format when available) -->
-                <span class="font-mono text-xs text-gray-plain -mt-0.5 inline-flex items-center gap-1 max-w-full">
-                  <component
-                    :is="getColumnDisplay(col).icon"
-                    class="size-3 shrink-0"
-                    aria-hidden="true"
-                  />
-                  <span class="mt-px truncate">{{ getColumnDisplay(col).label }}</span>
-                </span>
-                <!-- Resize handle: wide hit zone, thin visible bar -->
-                <div
-                  class="absolute top-0 bottom-0 w-3 z-20 cursor-col-resize group/resize"
-                  :class="col === displayedColumns[displayedColumns.length - 1] ? 'right-3' : '-right-1.5'"
-                  @mousedown.prevent="startResize(col, $event)"
-                >
-                  <div
-                    class="absolute inset-y-0 left-1/2 w-1 -translate-x-1/2 rounded-full bg-primary/40 opacity-0 group-hover/resize:opacity-100"
-                    :class="{ '!opacity-100': resizing?.column === col }"
-                  />
-                </div>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-if="allRows.length === 0">
-              <td
-                :colspan="displayedColumns.length"
-                class="py-16 text-center"
-              >
-                <div class="flex flex-col items-center gap-2">
-                  <RiSearchLine
-                    class="size-8 text-gray-low"
-                    aria-hidden="true"
-                  />
-                  <span class="text-sm text-gray-low">{{ t('Aucun résultat trouvé.') }}</span>
-                </div>
-              </td>
-            </tr>
-            <tr
-              v-for="(row, i) in allRows"
-              :key="row.__id ?? i"
-              class="border-b border-gray-default even:bg-gray-lowest-2 hover:bg-gray-100"
-            >
-              <td
-                v-for="col in displayedColumns"
-                :key="col"
-                data-cell
-                class="p-2 align-middle whitespace-nowrap border-r border-gray-default last:border-r-0 overflow-hidden cursor-pointer hover:bg-gray-200/50"
-                :class="{ 'text-right font-mono tabular-nums text-sm': getColumnType(col) === 'number' || getColumnType(col) === 'date' || getColumnType(col) === 'year' }"
-                :style="columnWidths[col] ? { maxWidth: columnWidths[col] + 'px' } : { maxWidth: '300px' }"
-                @click="onCellClick(col, row[col], $event)"
-              >
-                <AppLink
-                  v-if="isLinkColumn(col)"
-                  :to="getRowHref(row)"
-                  class="link"
-                >
-                  <TabularCell v-bind="cellProps(col, row)" />
-                </AppLink>
-                <TabularCell
-                  v-else
-                  v-bind="cellProps(col, row)"
-                />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        <InfiniteLoader
-          v-if="hasMore"
-          :root="scrollContainerRef"
-          @intersect="loadNextPage"
-        />
-      </div>
-
-      <!-- Cell popover -->
-      <TabularCellPopover
-        v-model:cell="activeCell"
-        v-model:filters="filters"
-      />
-
-      <!-- Mobile: card layout -->
-      <div
-        v-if="displayedColumns.length > 0"
-        class="md:hidden space-y-2 px-1 transition-opacity"
-        :class="{ 'opacity-40': isRefreshing }"
-        :aria-busy="isRefreshing"
-      >
-        <div
-          v-if="allRows.length === 0"
-          class="py-16 text-center"
-        >
-          <div class="flex flex-col items-center gap-2">
-            <RiSearchLine
-              class="size-8 text-gray-low"
-              aria-hidden="true"
-            />
-            <span class="text-sm text-gray-low">{{ t('Aucun résultat trouvé.') }}</span>
-          </div>
-        </div>
-        <div
-          v-for="(row, i) in allRows"
-          :key="row.__id ?? i"
-          class="border border-gray-default rounded-lg p-3 space-y-2"
-          :class="i % 2 === 1 ? 'bg-gray-lowest-2' : 'bg-white'"
-        >
-          <div
-            v-for="col in mobileVisibleFields(i)"
-            :key="col"
-            class="flex flex-col gap-0.5 min-w-0"
-          >
-            <div class="flex items-center gap-1 min-w-0">
-              <component
-                :is="getColumnDisplay(col).icon"
-                class="size-3 text-gray-low shrink-0"
-                aria-hidden="true"
-              />
-              <span
-                class="text-xs text-gray-plain truncate"
-                :title="col"
-              >{{ col }}</span>
-            </div>
-            <!-- Numbers and dates take their colour from here rather than from
-                 the cell, so a link wrapping one (see `rowHref`) keeps its own. -->
-            <div
-              data-cell
-              class="min-w-0 pl-4 cursor-pointer text-gray-title"
-              @click="onCellClick(col, row[col], $event)"
-            >
-              <AppLink
-                v-if="isLinkColumn(col)"
-                :to="getRowHref(row)"
-                class="link"
-              >
-                <TabularCell
-                  v-bind="cellProps(col, row)"
-                  compact
-                />
-              </AppLink>
-              <TabularCell
-                v-else
-                v-bind="cellProps(col, row)"
-                compact
-              />
-            </div>
-          </div>
-          <button
-            v-if="displayedColumns.length > 4"
-            class="text-xs text-gray-title hover:underline pt-1 flex items-center gap-1"
-            @click="toggleMobileExpand(i)"
-          >
-            <RiArrowDownSLine
-              class="size-3 transition-transform"
-              :class="{ 'rotate-180': mobileExpandedRows.has(i) }"
-              aria-hidden="true"
-            />
-            {{ mobileExpandedRows.has(i) ? t('Moins') : `+${displayedColumns.length - 4} ${t('champs')}` }}
-          </button>
-        </div>
-      </div>
-
-      <!-- Mobile: filter bottom sheet -->
-      <TransitionRoot
-        :show="mobileFilterOpen"
-        as="template"
-      >
-        <Dialog
-          class="relative z-[900]"
-          @close="mobileFilterOpen = false"
-        >
-          <!-- Backdrop -->
-          <TransitionChild
-            as="template"
-            enter="ease-out duration-300"
-            enter-from="opacity-0"
-            enter-to="opacity-100"
-            leave="ease-in duration-200"
-            leave-from="opacity-100"
-            leave-to="opacity-0"
-          >
-            <div class="fixed inset-0 bg-black/30" />
-          </TransitionChild>
-          <!-- Panel -->
-          <TransitionChild
-            as="template"
-            enter="ease-out duration-300"
-            enter-from="translate-y-full"
-            enter-to="translate-y-0"
-            leave="ease-in duration-200"
-            leave-from="translate-y-0"
-            leave-to="translate-y-full"
-          >
-            <div class="fixed inset-x-0 bottom-0 max-h-[80vh] flex flex-col bg-white rounded-t-2xl shadow-xl">
-              <!-- Header -->
-              <DialogPanel class="flex flex-col max-h-[80vh]">
-                <div class="px-4 pt-4 pb-2 border-b border-gray-default">
-                  <DialogTitle class="text-sm font-bold">
-                    {{ t('Filtres & tri par colonne') }}
-                  </DialogTitle>
-                  <p class="text-xs text-gray-low">
-                    {{ allColumns.length }} {{ t('colonnes') }} · {{ activeFilters.length }} {{ t('filtre') }}{{ activeFilters.length !== 1 ? 's' : '' }}
-                  </p>
-                </div>
-                <!-- Column list -->
-                <div class="flex-1 overflow-y-auto">
-                  <div
-                    v-for="col in allColumns"
-                    :key="col"
-                    class="border-b border-gray-default last:border-b-0"
-                  >
-                    <button
-                      class="flex items-center gap-2 w-full px-3 py-2.5 text-left"
-                      :class="hasFilterForColumn(col) ? 'bg-new-primary/5' : ''"
-                      @click="toggleMobileFilterColumn(col)"
-                    >
-                      <component
-                        :is="getColumnDisplay(col).icon"
-                        class="size-3.5 text-gray-low shrink-0"
-                        aria-hidden="true"
-                      />
-                      <span class="flex-1 text-sm text-gray-title truncate">{{ col }}</span>
-                      <RiArrowUpLine
-                        v-if="sort?.column === col && sort.direction === 'asc'"
-                        class="size-3 text-new-primary shrink-0"
-                        aria-hidden="true"
-                      />
-                      <RiArrowDownLine
-                        v-if="sort?.column === col && sort.direction === 'desc'"
-                        class="size-3 text-new-primary shrink-0"
-                        aria-hidden="true"
-                      />
-                      <span
-                        v-if="hasFilterForColumn(col)"
-                        class="size-2 rounded-full bg-new-primary shrink-0"
-                      />
-                      <RiArrowDownSLine
-                        class="size-3.5 text-gray-low shrink-0 transition-transform"
-                        :class="{ 'rotate-180': mobileFilterExpandedCol === col }"
-                        aria-hidden="true"
-                      />
-                    </button>
-                    <div
-                      v-if="mobileFilterExpandedCol === col"
-                      class="pb-1"
-                    >
-                      <TabularFilterContent
-                        v-model:sort="sort"
-                        v-model:filters="filters"
-                        :column="col"
-                        :column-type="getColumnType(col)"
-                        :column-profile="getColumnProfile(col)"
-                        :null-percent="getNullPercent(col)"
-                        :total-lines="totalLines"
-                        :category-badge-styles="getColumnType(col) === 'categorical' ? getCategoryBadgeStylesForColumn(col) : undefined"
-                        :boolean-counts="getColumnType(col) === 'boolean' ? getBooleanCounts(col) : undefined"
-                      />
-                    </div>
-                  </div>
-                </div>
-                <!-- Reset all -->
-                <div
-                  v-if="activeFilters.length > 0 || sort"
-                  class="border-t border-gray-default px-4 py-3"
-                >
-                  <BrandedButton
-                    color="secondary"
-                    size="xs"
-                    class="w-full"
-                    @click="clearAllFilters(); sort = null; mobileFilterOpen = false"
-                  >
-                    {{ t('Tout réinitialiser') }}
-                  </BrandedButton>
-                </div>
-              </DialogPanel>
-            </div>
-          </TransitionChild>
-        </Dialog>
-      </TransitionRoot>
+      <slot />
     </template>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onUnmounted, ref, watch, useTemplateRef } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { ofetch } from 'ofetch'
-import { useElementSize } from '@vueuse/core'
-import { flip, shift, autoUpdate, useFloating } from '@floating-ui/vue'
-import { Dialog, DialogPanel, DialogTitle, Popover, PopoverButton, PopoverPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'
-import {
-  RiLayoutColumnLine,
-  RiLayoutRowLine,
-  RiArrowDownSLine,
-  RiArrowUpLine,
-  RiArrowDownLine,
-  RiFilterLine,
-  RiCloseLine,
-  RiSearchLine,
-  RiLoader5Line,
-} from '@remixicon/vue'
 import { useFetch } from '../../functions/api'
 import { useComponentsConfig } from '../../config'
 import { useTranslation } from '../../composables/useTranslation'
 import { injectTabularProfile } from '../../composables/useTabularProfile'
-import { buildTypeConfig, buildFormatConfig, humanizeFormat, GENERIC_FORMATS, hasFilterForColumn as _hasFilterForColumn, isTruthy, isFalsy, resolveColumnType, buildGlobalSearchConditions } from '../../functions/tabular'
-import AppLink from '../AppLink.vue'
-import ClientOnly from '../ClientOnly.vue'
-import SimpleBanner from '../SimpleBanner.vue'
-import BrandedButton from '../BrandedButton.vue'
-import InfiniteLoader from '../InfiniteLoader.vue'
-import TabularCell from './TabularCell.vue'
-import TabularCellPopover from './TabularCellPopover.vue'
-import type { CellInfo } from './TabularCellPopover.vue'
-import TabularFilterContent from './TabularFilterContent.vue'
-import TabularFilterPopover from './TabularFilterPopover.vue'
-import type { TabularDataResponse, TabularRow, ColumnType, SortConfig, ColumnFilters, BadgeStyle } from './types'
-import noColumnsSrc from '../../../assets/illustrations/_table.svg?url'
+import { hasFilterForColumn as _hasFilterForColumn, buildGlobalSearchConditions } from '../../functions/tabular'
+import PreviewUnavailable from '../ResourceAccordion/PreviewUnavailable.vue'
+import TabularSkeleton from './TabularSkeleton.vue'
+import type { TabularDataResponse, TabularRow, SortConfig, ColumnFilters } from './types'
+import { provideTabularContext, type ActiveFilter } from './useTabularContext'
+import { useColumnMetadata } from './useColumnMetadata'
 
 const props = defineProps<{
   resourceId: string
-  // When true, the table breaks out to the full viewport width instead of just
-  // the host's padding. Used on the standalone explore page where the table
-  // should span the whole screen while the toolbar stays inside the container.
-  fullBleed?: boolean
   // When set, searches across multiple columns using the Tabular API's or(...)
   // parameter. Text and categorical columns get a __contains filter; number
   // columns get a __exact filter (since __contains is not supported for numbers
@@ -690,47 +49,11 @@ const props = defineProps<{
   // Same ownership rule as `initialFilters`: the explorer owns it afterwards,
   // and the user can drop it from the active-sort chip.
   initialSort?: SortConfig
-  // When set, renders <a> tags inside the specified column cells for native
-  // browser UX (hover URL, ctrl+click, middle-click).
-  rowHref?: { columns: string[], href: (row: TabularRow) => string }
-  // Columns listed here render their values raw (no number formatting).
-  // Useful for identifier columns.
-  noFormatColumns?: string[]
 }>()
 
-function getRowHref(row: TabularRow): string | undefined {
-  return props.rowHref?.href(row)
-}
-
-function isLinkColumn(col: string): boolean {
-  return props.rowHref?.columns.includes(col) ?? false
-}
-
-function cellProps(col: string, row: TabularRow) {
-  const columnType = getColumnType(col)
-  return {
-    value: row[col],
-    columnType,
-    categoryBadgeStyle: columnType === 'categorical' ? getCategoryBadgeStyle(col, String(row[col])) : undefined,
-    noNumberFormat: props.noFormatColumns?.includes(col),
-  }
-}
-
 const { t } = useTranslation()
 const config = useComponentsConfig()
 
-// Column selector popover positioning
-const columnAnchorComponent = useTemplateRef<InstanceType<typeof Popover>>('columnAnchor')
-const columnPanelComponent = useTemplateRef<InstanceType<typeof PopoverPanel>>('columnPanel')
-const columnAnchorEl = computed(() => columnAnchorComponent.value?.$el as HTMLElement | undefined)
-const columnPanelEl = computed(() => columnPanelComponent.value?.$el as HTMLElement | undefined)
-
-const { floatingStyles: columnFloatingStyles } = useFloating(columnAnchorEl, columnPanelEl, {
-  placement: 'bottom-start',
-  middleware: [flip(), shift()],
-  whileElementsMounted: autoUpdate,
-})
-
 const dataUrl = computed(() =>
   `${config.tabularApiUrl}/api/resources/${props.resourceId}/data/`,
 )
@@ -744,26 +67,17 @@ const { data: profileData, error: profileError, status: profileStatus } = await
 
 const allColumns = computed(() => profileData.value?.profile?.header ?? [])
 
-// Column type helpers
-function getColumnTypeFromName(col: string): ColumnType {
-  const profile = profileData.value?.profile
-  if (!profile) return 'text'
-  const colInfo = profile.columns[col]
-  if (!colInfo) return 'text'
-  return resolveColumnType(colInfo, profile.categorical.includes(col))
-}
-
-const columnTypesMap = computed(() => {
-  const map: Record<string, ColumnType> = {}
-  for (const col of allColumns.value) {
-    map[col] = getColumnTypeFromName(col)
-  }
-  return map
-})
-
-function getColumnType(col: string): ColumnType {
-  return columnTypesMap.value[col] ?? 'text'
-}
+// Column metadata (display type, label/icon, null ratio, boolean counts) — pure
+// derivations of the profile, extracted to keep this component focused on data
+// fetching, pagination and filter/column state.
+const {
+  columnTypesMap,
+  getColumnType,
+  getColumnProfile,
+  getColumnDisplay,
+  getNullPercent,
+  getBooleanCounts,
+} = useColumnMetadata(profileData, allColumns, t)
 
 // Sort & filter state
 const sort = ref<SortConfig | null>(props.initialSort ? { ...props.initialSort } : null)
@@ -824,7 +138,6 @@ const currentPage = ref(1)
 const hasMore = ref(false)
 const loadingMore = ref(false)
 const generation = ref(0)
-const scrollContainerRef = useTemplateRef<HTMLElement>('scrollContainer')
 
 watch(() => tableData.value, (data) => {
   generation.value++
@@ -895,178 +208,7 @@ function selectOnlyColumn(col: string) {
   visibleColumns.value = new Set([col])
 }
 
-// Column widths
-//
-// Strategy:
-// - `naturalWidths` holds each column's content-driven width, measured ONCE
-//   from the DOM while the <th> are still auto-sized. It's the stable base and
-//   never re-measured (re-measuring would require unlocking the widths first).
-// - `columnWidths` is the applied result: `naturalWidths` distributed to fill
-//   the container. It's recomputed from the base whenever the set of displayed
-//   columns changes (toggling, isolating or hiding columns via the menu), so
-//   reducing to a few columns re-stretches them instead of leaving blank space.
-//   Pagination / filtering / sorting don't change the column set, so they keep
-//   the locked widths and never trigger a layout shift.
-// - Manual resize writes directly to `columnWidths` during the drag, then stores
-//   the final width back into `naturalWidths` so it survives later redistribution.
-const columnWidths = ref<Record<string, number>>({})
-const naturalWidths = ref<Record<string, number>>({})
-const resizing = ref<{ column: string, startX: number, startWidth: number } | null>(null)
-
-// Measure content-driven widths once, while the <th> are still auto-sized.
-function measureNaturalWidths() {
-  const container = scrollContainerRef.value
-  if (!container) return
-  const ths = container.querySelectorAll('th')
-  if (!ths || ths.length === 0) return
-
-  const widths: Record<string, number> = {}
-  ths.forEach((th, i) => {
-    const col = displayedColumns.value[i]
-    if (col) widths[col] = th.offsetWidth
-  })
-  naturalWidths.value = widths
-}
-
-// Distribute the natural widths of the currently displayed columns to fill the
-// container (inflating proportionally when they don't naturally cover it).
-function redistributeColumnWidths() {
-  const container = scrollContainerRef.value
-  if (!container) return
-  const cols = displayedColumns.value
-  let naturalSum = 0
-  for (const col of cols) naturalSum += naturalWidths.value[col] ?? 0
-  if (naturalSum === 0) return
-
-  const ratio = naturalSum < container.clientWidth ? container.clientWidth / naturalSum : 1
-  const widths: Record<string, number> = {}
-  for (const col of cols) widths[col] = Math.floor((naturalWidths.value[col] ?? 0) * ratio)
-  columnWidths.value = widths
-}
-
-// Measure the natural widths once (the <th> must still be auto-sized) and
-// distribute them. No-op once measured or while no column is displayed.
-function ensureMeasured() {
-  if (Object.keys(naturalWidths.value).length > 0) return
-  if (displayedColumns.value.length === 0) return
-  measureNaturalWidths()
-  redistributeColumnWidths()
-}
-
-// Drive measurement and re-stretch off the container's reactive width
-// (`useElementSize` wraps a ResizeObserver and disconnects it on unmount). The
-// width goes 0 -> N once the table is laid out in the DOM, which is also when
-// the <thead> carries its content-driven natural widths: the first non-zero
-// width measures the stable base, later changes (window resize) only
-// redistribute it.
-const { width: containerWidth } = useElementSize(scrollContainerRef)
-
-watch(containerWidth, (width) => {
-  if (width === 0) return
-  if (Object.keys(naturalWidths.value).length === 0) {
-    ensureMeasured()
-  }
-  else {
-    redistributeColumnWidths()
-  }
-})
-
-// Fallback: re-run once columns appear if they weren't available when the
-// container was first sized (standalone usage where the profile resolves late).
-watch(
-  () => [tableData.value !== null, displayedColumns.value.length] as const,
-  async ([dataReady, colCount]) => {
-    if (!dataReady || colCount === 0) return
-    if (Object.keys(naturalWidths.value).length > 0) return
-    await nextTick()
-    ensureMeasured()
-  },
-)
-
-// Re-stretch the remaining columns whenever the displayed set changes (columns
-// toggled / hidden / isolated from the menu). No DOM measurement needed — we
-// redistribute the already-measured natural widths over the new container space.
-watch(displayedColumns, async () => {
-  if (Object.keys(naturalWidths.value).length === 0) return
-  // Wait for the table to (re)mount before reading the container: the desktop
-  // table is `v-if`-ed out when no column is displayed, so going from 0 → N
-  // columns means `scrollContainer` only exists after the next render.
-  await nextTick()
-  redistributeColumnWidths()
-})
-
-function startResize(col: string, e: MouseEvent) {
-  // Fallback in case the user grabs the handle before the initial measure ran.
-  if (!Object.keys(naturalWidths.value).length) {
-    measureNaturalWidths()
-    redistributeColumnWidths()
-  }
-  resizing.value = { column: col, startX: e.clientX, startWidth: columnWidths.value[col] ?? 100 }
-  // Disable smooth scroll during resize
-  if (scrollContainerRef.value) scrollContainerRef.value.style.scrollBehavior = 'auto'
-  document.addEventListener('mousemove', onResize)
-  document.addEventListener('mouseup', stopResize)
-}
-
-function onResize(e: MouseEvent) {
-  if (!resizing.value) return
-  const container = scrollContainerRef.value
-  // Auto-scroll when mouse approaches the right edge, and adjust startX to compensate
-  if (container) {
-    const rect = container.getBoundingClientRect()
-    const distFromRight = rect.right - e.clientX
-    if (distFromRight < 50) {
-      const oldScroll = container.scrollLeft
-      container.scrollLeft += Math.max(1, (50 - distFromRight) * 0.5)
-      resizing.value.startX -= container.scrollLeft - oldScroll
-    }
-  }
-  const delta = e.clientX - resizing.value.startX
-  const newWidth = Math.max(60, resizing.value.startWidth + delta)
-  columnWidths.value = { ...columnWidths.value, [resizing.value.column]: newWidth }
-}
-
-function stopResize() {
-  if (scrollContainerRef.value) scrollContainerRef.value.style.scrollBehavior = ''
-  // Persist the manual width as the column's new base so it survives later
-  // redistribution when other columns are toggled.
-  if (resizing.value) {
-    const col = resizing.value.column
-    const width = columnWidths.value[col]
-    if (width != null) naturalWidths.value = { ...naturalWidths.value, [col]: width }
-  }
-  resizing.value = null
-  document.removeEventListener('mousemove', onResize)
-  document.removeEventListener('mouseup', stopResize)
-}
-
-onUnmounted(() => {
-  document.removeEventListener('mousemove', onResize)
-  document.removeEventListener('mouseup', stopResize)
-})
-
-// Cell popover
-const activeCell = ref<CellInfo | null>(null)
-
-function onCellClick(col: string, value: unknown, event: MouseEvent) {
-  // A link inside a cell (see `rowHref`) owns its clicks: navigate, don't open
-  // the popover on top of the page we're leaving.
-  if ((event.target as HTMLElement).closest('a')) return
-  const el = (event.target as HTMLElement).closest('[data-cell]') as HTMLElement | null
-  if (!el) return
-  if (activeCell.value && activeCell.value.element === el) {
-    activeCell.value = null
-    return
-  }
-  activeCell.value = { column: col, columnType: columnTypesMap.value[col] ?? 'text', value, element: el }
-}
-
 // Active filters
-interface ActiveFilter {
-  column: string
-  label: string
-}
-
 const activeFilters = computed<ActiveFilter[]>(() => {
   const result: ActiveFilter[] = []
   for (const [col, filter] of Object.entries(filters.value)) {
@@ -1120,111 +262,38 @@ function hasFilterForColumn(col: string): boolean {
   return _hasFilterForColumn(filters.value, col)
 }
 
-// Mobile state
+// Whether the mobile filter sheet is open (button lives in the toolbar).
 const mobileFilterOpen = ref(false)
-const mobileExpandedRows = ref(new Set<number>())
-const mobileFilterExpandedCol = ref<string | null>(null)
 
-function mobileVisibleFields(index: number): string[] {
-  if (displayedColumns.value.length <= 4 || mobileExpandedRows.value.has(index)) {
-    return displayedColumns.value
-  }
-  return displayedColumns.value.slice(0, 4)
-}
-
-function toggleMobileExpand(index: number) {
-  const next = new Set(mobileExpandedRows.value)
-  if (next.has(index)) next.delete(index)
-  else next.add(index)
-  mobileExpandedRows.value = next
-}
-
-function toggleMobileFilterColumn(col: string) {
-  mobileFilterExpandedCol.value = mobileFilterExpandedCol.value === col ? null : col
-}
-
-function getColumnProfile(col: string) {
-  return profileData.value?.profile?.profile?.[col] ?? null
-}
-
-function getTopsEntries(col: string) {
-  return getColumnProfile(col)?.tops ?? []
-}
-
-function getNullPercent(col: string) {
-  const colProfile = getColumnProfile(col)
-  const total = profileData.value?.profile?.total_lines
-  if (!colProfile || !total) return '0%'
-  return `${((colProfile.nb_missing_values / total) * 100).toFixed(1)}%`
-}
-
-const typeConfig = buildTypeConfig(t)
-const formatConfig = buildFormatConfig(t)
-
-function getTypeConfig(col: string) {
-  return typeConfig[getColumnType(col)]
-}
-
-// Header display: prefer the rich semantic format detected by csv-detective
-// (code INSEE, UAI, département, SIREN, email…) over the generic display type.
-// Tolerant: generic formats fall back to the type config, and unknown semantic
-// formats are humanized rather than dropped.
-function getColumnDisplay(col: string) {
-  const format = profileData.value?.profile?.columns?.[col]?.format
-  const fallback = getTypeConfig(col)
-  if (!format || GENERIC_FORMATS.has(format)) return fallback
-  return formatConfig[format] ?? { icon: fallback.icon, label: humanizeFormat(format) }
-}
-
-const BADGE_PALETTE = [
-  { bg: '#E6EEFE', text: '#3558A2' }, // blue-cumulus
-  { bg: '#E8E3DB', text: '#6A6156' }, // beige-gris-galet
-  { bg: '#FEECC2', text: '#695240' }, // yellow-tournesol
-  { bg: '#C7F6FC', text: '#006A6F' }, // green-archipel
-  { bg: '#E9EDFE', text: '#2323FF' }, // blue-ecume
-  { bg: '#FFE0C7', text: '#885B40' }, // orange-terre-battue
-  { bg: '#F2E9DB', text: '#6B4C35' }, // brown-cafe-creme
-  { bg: '#BAFAEE', text: '#297254' }, // green-menthe
-  { bg: '#FEE0EB', text: '#8D5368' }, // pink-macaron
-  { bg: '#FCE164', text: '#695240' }, // yellow-moutarde
-] as const
-
-const BADGE_FALLBACK = { bg: '#F0E0CF', text: '#745B47' } // brown-opera
-
-const badgeColorMap = computed(() => {
-  const map = new Map<string, { bg: string, text: string }>()
-  const profile = profileData.value?.profile
-  if (!profile) return map
-  for (const col of profile.categorical) {
-    getTopsEntries(col).forEach((top, i) => {
-      map.set(`${col}::${top.value}`, BADGE_PALETTE[i % BADGE_PALETTE.length]!)
-    })
-  }
-  return map
+// Provide the shared state so child components (active filters, columns menu, rows
+// info, table…) can inject it instead of receiving a wall of props.
+provideTabularContext({
+  tableData,
+  totalLines,
+  allRows,
+  hasMore,
+  loadNextPage,
+  isRefreshing,
+  sort,
+  filters,
+  activeFilters,
+  removeFilter,
+  clearAllFilters,
+  hasFilterForColumn,
+  allColumns,
+  visibleColumns,
+  displayedColumns,
+  hiddenCount,
+  toggleColumn,
+  showAllColumns,
+  hideAllColumns,
+  selectOnlyColumn,
+  mobileFilterOpen,
+  columnTypesMap,
+  getColumnType,
+  getColumnProfile,
+  getColumnDisplay,
+  getNullPercent,
+  getBooleanCounts,
 })
-
-function getCategoryBadgeStyle(col: string, value: string): BadgeStyle {
-  const colors = badgeColorMap.value.get(`${col}::${value}`) ?? BADGE_FALLBACK
-  return { backgroundColor: colors.bg, color: colors.text }
-}
-
-function getCategoryBadgeStylesForColumn(col: string): Record<string, BadgeStyle> {
-  const styles: Record<string, BadgeStyle> = {}
-  for (const top of getTopsEntries(col)) {
-    styles[top.value] = getCategoryBadgeStyle(col, top.value)
-  }
-  return styles
-}
-
-function getBooleanCounts(col: string): { trueCount: number, falseCount: number } {
-  const profile = getColumnProfile(col)
-  if (!profile?.tops) return { trueCount: 0, falseCount: 0 }
-  let trueCount = 0
-  let falseCount = 0
-  for (const top of profile.tops) {
-    if (isTruthy(top.value ?? '')) trueCount += top.count
-    else if (isFalsy(top.value ?? '')) falseCount += top.count
-  }
-  return { trueCount, falseCount }
-}
 </script>