@datagouv/components-next 1.0.2-dev.16 → 1.0.2-dev.160

package/src/components/TabularExplorer/TabularExplorer.vue

@@ -0,0 +1,1132 @@
+<template>
+  <div>
+    <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>
+
+    <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">
+              <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>
+
+        <!-- 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"
+            >
+              <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]"
+        :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]">
+            <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' }"
+                :style="columnWidths[col] ? { maxWidth: columnWidths[col] + 'px' } : { maxWidth: '300px' }"
+                @click="onCellClick(col, row[col], $event)"
+              >
+                <TabularCell
+                  :value="row[col]"
+                  :column-type="getColumnType(col)"
+                  :category-badge-style="getColumnType(col) === 'categorical' ? getCategoryBadgeStyle(col, String(row[col])) : undefined"
+                />
+              </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"
+      >
+        <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>
+            <div
+              data-cell
+              class="min-w-0 pl-4 cursor-pointer"
+              @click="onCellClick(col, row[col], $event)"
+            >
+              <TabularCell
+                :value="row[col]"
+                :column-type="getColumnType(col)"
+                :category-badge-style="getColumnType(col) === 'categorical' ? getCategoryBadgeStyle(col, String(row[col])) : undefined"
+                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>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onUnmounted, ref, watch, useTemplateRef } 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,
+} 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 } from '../../functions/tabular'
+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'
+
+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()
+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/`,
+)
+
+// Sort & filter state
+const sort = ref<SortConfig | null>(null)
+const filters = ref<Record<string, ColumnFilters>>({})
+
+const PAGE_SIZE = 50
+
+const dataQuery = computed(() => {
+  const q: Record<string, string | number> = { page: 1, page_size: PAGE_SIZE }
+  if (sort.value) {
+    q[`${sort.value.column}__sort`] = sort.value.direction
+  }
+  for (const [col, filter] of Object.entries(filters.value)) {
+    if (filter.in?.length) {
+      q[`${col}__in`] = filter.in.join(',')
+    }
+    if (filter.exact != null) {
+      q[`${col}__exact`] = filter.exact
+    }
+    if (Number.isFinite(filter.min)) {
+      q[`${col}__greater`] = filter.min!
+    }
+    if (Number.isFinite(filter.max)) {
+      q[`${col}__less`] = filter.max!
+    }
+    if (filter.contains) {
+      q[`${col}__contains`] = filter.contains
+    }
+    if (filter.null === 'only') {
+      q[`${col}__isnull`] = ''
+    }
+    else if (filter.null === 'exclude') {
+      q[`${col}__isnotnull`] = ''
+    }
+  }
+  return q
+})
+
+const { data: tableData, error } = await useFetch<TabularDataResponse>(dataUrl, { raw: true, query: dataQuery })
+
+// 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[]>([])
+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++
+  if (data) {
+    allRows.value = [...data.data]
+    currentPage.value = 1
+    hasMore.value = data.data.length < data.meta.total
+  }
+}, { immediate: true })
+
+async function loadNextPage() {
+  if (loadingMore.value || !hasMore.value || !tableData.value) return
+  loadingMore.value = true
+  const gen = generation.value
+  try {
+    const nextPage = currentPage.value + 1
+    const query = { ...dataQuery.value, page: nextPage }
+    const data = await ofetch<TabularDataResponse>(dataUrl.value, { params: query })
+    // Discard stale response if filters/sort changed during the fetch
+    if (gen !== generation.value) return
+    allRows.value = [...allRows.value, ...data.data]
+    currentPage.value = nextPage
+    hasMore.value = allRows.value.length < tableData.value.meta.total
+  }
+  finally {
+    loadingMore.value = false
+  }
+}
+
+const totalLines = computed(() => profileData.value?.profile?.total_lines ?? tableData.value?.meta.total ?? 0)
+
+const allColumns = computed(() => profileData.value?.profile?.header ?? [])
+
+const visibleColumns = ref(new Set(allColumns.value))
+
+watch(allColumns, (cols) => {
+  if (cols.length > 0 && visibleColumns.value.size === 0) {
+    visibleColumns.value = new Set(cols)
+  }
+})
+
+const displayedColumns = computed(() =>
+  allColumns.value.filter(col => visibleColumns.value.has(col)),
+)
+
+const hiddenCount = computed(() =>
+  allColumns.value.length - visibleColumns.value.size,
+)
+
+function toggleColumn(col: string) {
+  const next = new Set(visibleColumns.value)
+  if (next.has(col)) {
+    next.delete(col)
+  }
+  else {
+    next.add(col)
+  }
+  visibleColumns.value = next
+}
+
+function showAllColumns() {
+  visibleColumns.value = new Set(allColumns.value)
+}
+
+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)
+
+// 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) {
+  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)) {
+    const parts: string[] = []
+    if (filter.in?.length) {
+      parts.push(`= ${filter.in.join(', ')}`)
+    }
+    if (filter.exact != null) {
+      parts.push(`= ${filter.exact === 'true' ? t('Vrai') : t('Faux')}`)
+    }
+    if (filter.contains) {
+      parts.push(`${t('contient')} "${filter.contains}"`)
+    }
+    if (filter.null === 'only') {
+      parts.push(t('null uniquement'))
+    }
+    else if (filter.null === 'exclude') {
+      parts.push(t('sans null'))
+    }
+    if (filter.min != null && filter.max != null) {
+      parts.push(`${filter.min} – ${filter.max}`)
+    }
+    else if (filter.min != null) {
+      parts.push(`≥ ${filter.min}`)
+    }
+    else if (filter.max != null) {
+      parts.push(`≤ ${filter.max}`)
+    }
+    if (parts.length) {
+      result.push({ column: col, label: parts.join(', ') })
+    }
+  }
+  return result
+})
+
+function removeFilter(column: string) {
+  const { [column]: _, ...rest } = filters.value
+  filters.value = rest
+}
+
+function clearAllFilters() {
+  filters.value = {}
+}
+
+function hasFilterForColumn(col: string): boolean {
+  return _hasFilterForColumn(filters.value, col)
+}
+
+// Mobile state
+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
+}
+
+// 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'
+}
+
+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
+})
+
+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>