@datagouv/components-next 1.1.2 → 1.3.0

package/src/components/TabularExplorer/TabularExplorer.vue

@@ -1,164 +1,299 @@
 <template>
   <div>
-    <SimpleBanner
-      v-if="error"
-      type="warning"
-      class="mb-4"
+    <div
+      v-if="previewError"
+      class="max-w-3xl mx-auto"
     >
-      {{ t("L'aperçu de ce fichier n'a pas pu être chargé.") }}
-      <pre class="text-xs mt-2">{{ error }}</pre>
-    </SimpleBanner>
-
-    <template v-else-if="tableData">
-      <!-- Toolbar -->
-      <div class="flex items-center py-3 gap-2">
-        <!-- Mobile: filter & sort button -->
-        <BrandedButton
-          class="md:hidden"
-          color="tertiary"
-          size="2xs"
-          :icon="RiFilter2Line"
-          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="flex items-center justify-between px-3 py-2 border-b border-gray-default">
-                    <span class="text-xs font-medium text-gray-title">
-                      {{ visibleColumns.size }} {{ t('sur') }} {{ allColumns.length }} {{ t('colonnes visibles') }}
-                    </span>
-                    <BrandedButton
-                      v-if="hiddenCount"
-                      color="tertiary"
-                      size="2xs"
-                      @click="showAllColumns"
-                    >
-                      {{ t('Tout afficher') }}
-                    </BrandedButton>
-                  </div>
-                  <div class="max-h-64 overflow-auto p-1">
-                    <label
-                      v-for="col in allColumns"
-                      :key="col"
-                      class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-gray-50 cursor-pointer text-xs"
-                    >
-                      <input
-                        type="checkbox"
-                        :checked="visibleColumns.has(col)"
-                        class="size-3.5 accent-new-primary"
-                        @change="toggleColumn(col)"
-                      >
-                      <span class="truncate">{{ col }}</span>
-                    </label>
-                  </div>
-                </PopoverPanel>
-              </Teleport>
-            </ClientOnly>
-          </Popover>
-
-          <!-- Rows -->
-          <span class="flex items-center gap-1.5 text-xs text-gray-plain">
-            <RiLayoutRowLine
-              class="size-3 text-mention-grey"
-              aria-hidden="true"
-            />
-            <span class="font-bold hidden md:inline">{{ t('Lignes') }}</span>
-            <span class="font-mono tabular-nums">{{ tableData.meta.total.toLocaleString() }}/{{ totalLines.toLocaleString() }}</span>
-          </span>
+      <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>
-
-      <!-- Active filters -->
-      <div
-        v-if="activeFilters.length > 0"
-        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">
-            <RiFilter2Line
-              class="size-3.5"
-              aria-hidden="true"
-            />
-            <span class="text-xs text-gray-plain">{{ t('Filtres actifs') }}</span>
-            <span 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>
+      <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>
+
+    <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="RiCloseLine"
-            @click="clearAllFilters"
+            :icon="RiFilterLine"
+            keep-margins-even-without-borders
+            @click="mobileFilterOpen = true"
           >
-            {{ t('Tout effacer') }}
+            {{ 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">
+              <RiLayoutRowLine
+                class="size-3 text-mention-grey"
+                aria-hidden="true"
+              />
+              <span class="font-bold hidden md:inline">{{ t('Lignes') }}</span>
+              <span class="font-mono tabular-nums">{{ tableData.meta.total.toLocaleString() }}/{{ totalLines.toLocaleString() }}</span>
+            </span>
+          </div>
         </div>
-        <!-- Chips -->
-        <div class="flex flex-wrap gap-1.5">
-          <span
-            v-for="af in activeFilters"
-            :key="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="getTypeConfig(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)"
+
+        <!-- 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"
+              class="inline-flex items-center gap-1.5 bg-white border border-gray-silver rounded-lg pl-2 pr-1 py-1 text-xs"
             >
-              <RiCloseLine
-                class="size-3"
+              <component
+                :is="getColumnDisplay(af.column).icon"
+                class="size-3 text-gray-title"
                 aria-hidden="true"
               />
-              <span class="sr-only">{{ t('Supprimer ce filtre') }}</span>
-            </button>
-          </span>
+              <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]"
+        :class="fullBleed ? 'relative left-1/2 w-[calc(100vw_-_4rem)] -translate-x-1/2' : '-mx-4'"
       >
         <table class="text-sm border-collapse">
           <thead class="sticky top-0 bg-white z-10 shadow-[inset_0_-1px_0_0_#E5E5E5]">
@@ -197,14 +332,14 @@
                     :boolean-counts="getColumnType(col) === 'boolean' ? getBooleanCounts(col) : undefined"
                   />
                 </div>
-                <!-- Column type -->
-                <span class="font-mono text-xs text-gray-plain -mt-0.5 inline-flex items-center gap-1">
+                <!-- 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="getTypeConfig(col).icon"
-                    class="size-3"
+                    :is="getColumnDisplay(col).icon"
+                    class="size-3 shrink-0"
                     aria-hidden="true"
                   />
-                  <span class="mt-px">{{ getTypeConfig(col).label }}</span>
+                  <span class="mt-px truncate">{{ getColumnDisplay(col).label }}</span>
                 </span>
                 <!-- Resize handle: wide hit zone, thin visible bar -->
                 <div
@@ -272,7 +407,10 @@
       />
 
       <!-- Mobile: card layout -->
-      <div class="md:hidden space-y-2 px-1">
+      <div
+        v-if="displayedColumns.length > 0"
+        class="md:hidden space-y-2 px-1"
+      >
         <div
           v-if="allRows.length === 0"
           class="py-16 text-center"
@@ -298,7 +436,7 @@
           >
             <div class="flex items-center gap-1 min-w-0">
               <component
-                :is="getTypeConfig(col).icon"
+                :is="getColumnDisplay(col).icon"
                 class="size-3 text-gray-low shrink-0"
                 aria-hidden="true"
               />
@@ -390,7 +528,7 @@
                       @click="toggleMobileFilterColumn(col)"
                     >
                       <component
-                        :is="getTypeConfig(col).icon"
+                        :is="getColumnDisplay(col).icon"
                         class="size-3.5 text-gray-low shrink-0"
                         aria-hidden="true"
                       />
@@ -457,7 +595,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onUnmounted, ref, watch, useTemplateRef } from 'vue'
+import { computed, nextTick, onUnmounted, ref, watch, useTemplateRef } from 'vue'
 import { ofetch } from 'ofetch'
 import { flip, shift, autoUpdate, useFloating } from '@floating-ui/vue'
 import { Dialog, DialogPanel, DialogTitle, Popover, PopoverButton, PopoverPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'
@@ -467,14 +605,15 @@ import {
   RiArrowDownSLine,
   RiArrowUpLine,
   RiArrowDownLine,
-  RiFilter2Line,
+  RiFilterLine,
   RiCloseLine,
   RiSearchLine,
 } from '@remixicon/vue'
 import { useFetch } from '../../functions/api'
 import { useComponentsConfig } from '../../config'
 import { useTranslation } from '../../composables/useTranslation'
-import { buildTypeConfig, hasFilterForColumn as _hasFilterForColumn, isTruthy, isFalsy } from '../../functions/tabular'
+import { injectTabularProfile } from '../../composables/useTabularProfile'
+import { buildTypeConfig, buildFormatConfig, humanizeFormat, GENERIC_FORMATS, hasFilterForColumn as _hasFilterForColumn, isTruthy, isFalsy } from '../../functions/tabular'
 import ClientOnly from '../ClientOnly.vue'
 import SimpleBanner from '../SimpleBanner.vue'
 import BrandedButton from '../BrandedButton.vue'
@@ -484,10 +623,15 @@ import TabularCellPopover from './TabularCellPopover.vue'
 import type { CellInfo } from './TabularCellPopover.vue'
 import TabularFilterContent from './TabularFilterContent.vue'
 import TabularFilterPopover from './TabularFilterPopover.vue'
-import type { TabularDataResponse, TabularProfileResponse, TabularRow, ColumnType, SortConfig, ColumnFilters, BadgeStyle } from './types'
+import type { TabularDataResponse, TabularRow, ColumnType, SortConfig, ColumnFilters, BadgeStyle } from './types'
+import noColumnsSrc from '../../../assets/illustrations/_table.svg?url'
 
 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
 }>()
 
 const { t } = useTranslation()
@@ -509,10 +653,6 @@ const dataUrl = computed(() =>
   `${config.tabularApiUrl}/api/resources/${props.resourceId}/data/`,
 )
 
-const profileUrl = computed(() =>
-  `${config.tabularApiUrl}/api/resources/${props.resourceId}/profile/`,
-)
-
 // Sort & filter state
 const sort = ref<SortConfig | null>(null)
 const filters = ref<Record<string, ColumnFilters>>({})
@@ -552,7 +692,17 @@ const dataQuery = computed(() => {
 
 const { data: tableData, error } = await useFetch<TabularDataResponse>(dataUrl, { raw: true, query: dataQuery })
 
-const { data: profileData } = await useFetch<TabularProfileResponse>(profileUrl, { raw: true })
+// Profile is shared with sibling components (e.g. DataStructure) via
+// `provideTabularProfile` in the parent. Falls back to a local fetch
+// when no parent provides it (standalone usage).
+const { data: profileData, error: profileError, status: profileStatus } = await injectTabularProfile(() => props.resourceId)
+
+// The component renders nothing useful until the profile is available
+// (allColumns is derived from it). Surface a clear loading / error state
+// so we don't end up with an empty table + a spinner running forever.
+const profileLoading = computed(() => !profileData.value && (profileStatus.value === 'idle' || profileStatus.value === 'pending'))
+const previewError = computed(() => error.value || profileError.value)
+const previewLoading = computed(() => !previewError.value && (!tableData.value || profileLoading.value))
 
 // Infinite scroll state
 const allRows = ref<TabularRow[]>([])
@@ -613,7 +763,7 @@ const hiddenCount = computed(() =>
 function toggleColumn(col: string) {
   const next = new Set(visibleColumns.value)
   if (next.has(col)) {
-    if (next.size > 1) next.delete(col)
+    next.delete(col)
   }
   else {
     next.add(col)
@@ -625,23 +775,95 @@ function showAllColumns() {
   visibleColumns.value = new Set(allColumns.value)
 }
 
-// Column resize
+function hideAllColumns() {
+  visibleColumns.value = new Set()
+}
+
+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)
 
-function initColumnWidths() {
-  const ths = scrollContainerRef.value?.querySelectorAll('th')
-  if (!ths) return
+// 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 once both data and profile are ready (so the <thead> is rendered with
+// content-driven natural widths), then distribute.
+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()
+    measureNaturalWidths()
+    redistributeColumnWidths()
+  },
+  { immediate: true },
+)
+
+// 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) {
-  if (!Object.keys(columnWidths.value).length) initColumnWidths()
+  // 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'
@@ -669,6 +891,13 @@ function onResize(e: MouseEvent) {
 
 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)
@@ -811,11 +1040,23 @@ function getNullPercent(col: string) {
 }
 
 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