diff --git a/datagouv-components/src/components/InfiniteLoader.vue b/datagouv-components/src/components/InfiniteLoader.vue
new file mode 100644
index 000000000..67244faed
--- /dev/null
+++ b/datagouv-components/src/components/InfiniteLoader.vue
@@ -0,0 +1,53 @@
+<template>
+  <div ref="sentinel">
+    <slot>
+      <div class="flex items-center justify-center p-4">
+        <span class="inline-flex items-center gap-2 text-xs text-gray-medium">
+          <RiLoader4Line
+            class="size-4 animate-spin"
+            aria-hidden="true"
+          />
+          {{ t('Chargement…') }}
+        </span>
+      </div>
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, useTemplateRef, watch } from 'vue'
+import { RiLoader4Line } from '@remixicon/vue'
+import { useTranslation } from '../composables/useTranslation'
+
+const props = defineProps<{
+  root?: HTMLElement | null
+}>()
+
+const emit = defineEmits<{
+  intersect: []
+}>()
+
+const { t } = useTranslation()
+
+const sentinelRef = useTemplateRef<HTMLElement>('sentinel')
+let observer: IntersectionObserver | null = null
+
+function setupObserver() {
+  observer?.disconnect()
+  const el = sentinelRef.value
+  if (!el) return
+  observer = new IntersectionObserver(
+    (entries) => {
+      if (entries[0]?.isIntersecting) {
+        emit('intersect')
+      }
+    },
+    { root: props.root ?? null, rootMargin: '200px' },
+  )
+  observer.observe(el)
+}
+
+onMounted(setupObserver)
+watch([sentinelRef, () => props.root], setupObserver)
+onUnmounted(() => observer?.disconnect())
+</script>
diff --git a/datagouv-components/src/components/TabularExplorer/TabularCellPopover.vue b/datagouv-components/src/components/TabularExplorer/TabularCellPopover.vue
new file mode 100644
index 000000000..55e1c1fde
--- /dev/null
+++ b/datagouv-components/src/components/TabularExplorer/TabularCellPopover.vue
@@ -0,0 +1,172 @@
+<template>
+  <ClientOnly>
+    <Teleport to="#tooltips">
+      <div
+        v-if="cell"
+        ref="panel"
+        class="bg-white border border-black/10 rounded-lg shadow-md w-80 absolute z-[800]"
+        :style="floatingStyles"
+      >
+        <!-- Value -->
+        <div class="px-3 pt-3 pb-2 border-b border-[#E5E5E5]">
+          <p class="text-[10px] text-[#3A3A3A] mb-0">
+            {{ t('Valeur brute') }}
+          </p>
+          <p class="text-xs text-[#161616] mb-0">
+            {{ displayValue }}
+          </p>
+        </div>
+
+        <!-- Type -->
+        <div class="flex items-center gap-2 px-3 py-2 border-b border-[#E5E5E5]">
+          <span class="text-[10px] text-[#3A3A3A]">{{ t('Type') }}</span>
+          <span class="inline-flex items-center gap-1 bg-[#f6f6f6] rounded px-1.5 py-0.5 text-xs text-[#3A3A3A]">
+            <component
+              :is="typeIcon"
+              class="size-3"
+              aria-hidden="true"
+            />
+            {{ typeLabel }}
+          </span>
+          <span class="text-[10px] text-[#3A3A3A] shrink-0">·</span>
+          <span class="text-[10px] text-[#3A3A3A] truncate min-w-0">{{ cell.column }}</span>
+        </div>
+
+        <!-- Actions -->
+        <div class="p-1">
+          <button
+            class="flex items-center gap-2.5 w-full px-3 py-2 rounded-md text-xs font-medium hover:bg-gray-50"
+            @click="filterByValue"
+          >
+            <RiFilter2Line
+              class="size-4"
+              aria-hidden="true"
+            />
+            {{ t('Filtrer par cette valeur') }}
+          </button>
+          <button
+            class="flex items-center gap-2.5 w-full px-3 py-2 rounded-md text-xs font-medium hover:bg-gray-50"
+            @click="copyValue"
+          >
+            <RiFileCopyLine
+              class="size-4 text-[#3A3A3A]"
+              aria-hidden="true"
+            />
+            {{ t('Copier la valeur') }}
+          </button>
+        </div>
+      </div>
+    </Teleport>
+  </ClientOnly>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, useTemplateRef, watch, type Component as VueComponent } from 'vue'
+import { flip, shift, autoUpdate, useFloating } from '@floating-ui/vue'
+import {
+  RiFilter2Line,
+  RiFileCopyLine,
+  RiHashtag,
+  RiPriceTag3Line,
+  RiText,
+  RiCalendarLine,
+  RiCheckboxLine,
+} from '@remixicon/vue'
+import { useTranslation } from '../../composables/useTranslation'
+import ClientOnly from '../ClientOnly.vue'
+import type { ColumnType, ColumnFilters } from './types'
+
+export interface CellInfo {
+  column: string
+  columnType: ColumnType
+  value: unknown
+  element: HTMLElement
+}
+
+const cell = defineModel<CellInfo | null>('cell', { default: null })
+const filters = defineModel<Record<string, ColumnFilters>>('filters', { default: () => ({}) })
+
+const { t } = useTranslation()
+
+const panelRef = useTemplateRef<HTMLElement>('panel')
+const anchorRef = ref<HTMLElement | null>(null)
+
+watch(cell, (c) => {
+  anchorRef.value = c?.element ?? null
+})
+
+const { floatingStyles } = useFloating(anchorRef, panelRef, {
+  placement: 'bottom-start',
+  middleware: [flip(), shift()],
+  whileElementsMounted: autoUpdate,
+})
+
+const displayValue = computed(() => {
+  if (!cell.value) return ''
+  const v = cell.value.value
+  if (v == null || v === '') return '–'
+  return String(v)
+})
+
+const typeConfig: Record<ColumnType, { icon: VueComponent, label: string }> = {
+  number: { icon: RiHashtag, label: 'Number' },
+  categorical: { icon: RiPriceTag3Line, label: 'Categorical' },
+  text: { icon: RiText, label: 'Text' },
+  date: { icon: RiCalendarLine, label: 'Date' },
+  boolean: { icon: RiCheckboxLine, label: 'Boolean' },
+}
+
+const typeIcon = computed(() => cell.value ? typeConfig[cell.value.columnType].icon : RiText)
+const typeLabel = computed(() => cell.value ? typeConfig[cell.value.columnType].label : '')
+
+function close() {
+  cell.value = null
+}
+
+function filterByValue() {
+  if (!cell.value) return
+  const val = String(cell.value.value ?? '')
+  const col = cell.value.column
+  const existing = filters.value[col] ?? {}
+  if (cell.value.columnType === 'categorical' || cell.value.columnType === 'text') {
+    const current = existing.in ?? []
+    if (!current.includes(val)) {
+      filters.value = { ...filters.value, [col]: { ...existing, in: [...current, val] } }
+    }
+  }
+  else if (cell.value.columnType === 'number') {
+    const num = Number(cell.value.value)
+    if (Number.isFinite(num)) {
+      filters.value = { ...filters.value, [col]: { ...existing, min: num, max: num } }
+    }
+  }
+  close()
+}
+
+async function copyValue() {
+  try {
+    await navigator.clipboard.writeText(displayValue.value)
+  }
+  catch {
+    // Fallback silencieux
+  }
+  close()
+}
+
+function onClickOutside(e: MouseEvent) {
+  if (!cell.value) return
+  const panel = panelRef.value
+  if (panel && panel.contains(e.target as Node)) return
+  // Don't close if clicking on the active cell's td (let the parent handle toggle)
+  const clickedTd = (e.target as HTMLElement).closest('td')
+  if (clickedTd && clickedTd === cell.value.element) return
+  close()
+}
+
+onMounted(() => {
+  document.addEventListener('mousedown', onClickOutside)
+})
+onUnmounted(() => {
+  document.removeEventListener('mousedown', onClickOutside)
+})
+</script>
diff --git a/datagouv-components/src/components/TabularExplorer/TabularExplorer.vue b/datagouv-components/src/components/TabularExplorer/TabularExplorer.vue
new file mode 100644
index 000000000..84389cf5e
--- /dev/null
+++ b/datagouv-components/src/components/TabularExplorer/TabularExplorer.vue
@@ -0,0 +1,677 @@
+<template>
+  <div class="tabular-explorer">
+    <SimpleBanner
+      v-if="error"
+      type="warning"
+      class="mb-4"
+    >
+      {{ 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 && tableData.data.length">
+      <!-- Toolbar -->
+      <div class="flex items-center py-3">
+        <div class="flex-1" />
+
+        <!-- Right: Stats -->
+        <div class="flex items-center gap-4">
+          <!-- Colonnes (clickable, opens column popover) -->
+          <Popover
+            v-slot="{ open }"
+            ref="columnPopover"
+            class="relative"
+          >
+            <PopoverButton class="flex items-center gap-1.5 text-xs text-[#3A3A3A] rounded px-2 py-1 hover:bg-gray-50 focus:outline-none">
+              <RiLayoutColumnLine
+                class="size-3"
+                aria-hidden="true"
+              />
+              <span class="font-bold">{{ 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"
+                  class="bg-white border border-gray-default rounded shadow-lg w-72 absolute z-[800]"
+                  :style="columnFloatingStyles"
+                  static
+                >
+                  <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>
+                    <button
+                      v-if="hiddenCount"
+                      class="text-xs text-blue-main hover:underline"
+                      @click="showAllColumns"
+                    >
+                      {{ t('Tout afficher') }}
+                    </button>
+                  </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-blue-main"
+                        @change="toggleColumn(col)"
+                      >
+                      <span class="truncate">{{ col }}</span>
+                    </label>
+                  </div>
+                </PopoverPanel>
+              </Teleport>
+            </ClientOnly>
+          </Popover>
+
+          <!-- Lignes -->
+          <span class="flex items-center gap-1.5 text-xs text-[#3A3A3A]">
+            <RiLayoutRowLine
+              class="size-3 text-[#666]"
+              aria-hidden="true"
+            />
+            <span class="font-bold">{{ t('Lignes') }}</span>
+            <span class="font-mono tabular-nums">{{ tableData.meta.total.toLocaleString() }}/{{ totalLines.toLocaleString() }}</span>
+          </span>
+        </div>
+      </div>
+
+      <!-- Active filters -->
+      <div
+        v-if="hasActiveFilters"
+        class="bg-[#f6f6f6] border border-[#E5E5E5] rounded-[10px] 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-[11px] text-[#3A3A3A]">{{ t('Filtres actifs') }}</span>
+            <span class="size-5 rounded-full bg-black/10 flex items-center justify-center text-[10px] text-[#030213]">
+              {{ activeFilters.length }}
+            </span>
+          </div>
+          <button
+            class="flex items-center gap-1 text-[10px] font-medium text-[#3A3A3A] hover:text-[#161616]"
+            @click="clearAllFilters"
+          >
+            <RiCloseLine
+              class="size-3"
+              aria-hidden="true"
+            />
+            {{ t('Tout effacer') }}
+          </button>
+        </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-[#CCC] rounded-lg pl-2 pr-1 py-1 text-[11px]"
+          >
+            <component
+              :is="columnTypeIcon(af.column)"
+              class="size-3 text-[#030213]"
+              aria-hidden="true"
+            />
+            <span class="text-[#161616]">{{ af.column }}</span>
+            <span class="text-[#3A3A3A]">{{ af.label }}</span>
+            <button
+              class="rounded p-0.5 text-[#929292] hover:text-[#3A3A3A] 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>
+
+      <!-- Desktop: scrollable table -->
+      <div
+        ref="scrollContainer"
+        class="hidden md:block overflow-auto max-h-[70vh]"
+      >
+        <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-[#E5E5E5]">
+              <th
+                v-for="col in displayedColumns"
+                :key="col"
+                class="group/th relative h-14 px-2 text-left align-middle whitespace-nowrap border-r border-[#E5E5E5] last:border-r-0"
+                :style="columnWidths[col] ? { width: columnWidths[col] + 'px', minWidth: columnWidths[col] + 'px', maxWidth: columnWidths[col] + 'px' } : undefined"
+              >
+                <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-blue-main"
+                    aria-hidden="true"
+                  />
+                  <RiArrowDownLine
+                    v-else-if="sort?.column === col && sort.direction === 'desc'"
+                    class="size-3.5 shrink-0 text-blue-main"
+                    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)"
+                  />
+                </div>
+                <!-- Column type -->
+                <span class="font-mono text-[11px] text-[#3A3A3A] -mt-0.5 inline-flex items-center gap-1">
+                  <component
+                    :is="columnTypeIcon(col)"
+                    class="size-3"
+                    aria-hidden="true"
+                  />
+                  <span class="mt-px">{{ columnTypeLabel(col) }}</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-[#3558A2]/40 opacity-0 group-hover/resize:opacity-100"
+                    :class="{ '!opacity-100': resizing?.column === col }"
+                  />
+                </div>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="(row, i) in allRows"
+              :key="row.__id ?? i"
+              class="border-b border-[#E5E5E5] even:bg-[#FCFCFC] hover:bg-gray-100"
+            >
+              <td
+                v-for="col in displayedColumns"
+                :key="col"
+                class="p-2 align-middle whitespace-nowrap border-r border-[#E5E5E5] 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' } : undefined"
+                @click="onCellClick(col, row[col], $event)"
+              >
+                <span
+                  v-if="row[col] == null || row[col] === ''"
+                  class="font-[Inconsolata,monospace] text-[#929292] italic text-sm"
+                >null</span>
+                <span v-else-if="getColumnType(col) === 'number'">{{ formatNumber(row[col]) }}</span>
+                <span v-else-if="getColumnType(col) === 'date'">{{ formatDate(row[col]) }}</span>
+                <span
+                  v-else-if="getColumnType(col) === 'boolean'"
+                  class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-[12px]"
+                  :class="isTruthy(row[col]) ? 'bg-[#B8FEC9] text-[#18753C]' : 'bg-[#FFE9E6] text-[#CE0500]'"
+                >
+                  <span
+                    class="size-2 rounded-full"
+                    :class="isTruthy(row[col]) ? 'bg-[#18753C]' : 'bg-[#CE0500]'"
+                  />
+                  {{ isTruthy(row[col]) ? t('Vrai') : t('Faux') }}
+                </span>
+                <span
+                  v-else-if="getColumnType(col) === 'categorical'"
+                  class="inline-block rounded-[4px] font-medium px-2 py-0.5 text-xs max-w-full truncate"
+                  :style="getCategoryBadgeStyle(col, String(row[col]))"
+                >{{ row[col] }}</span>
+                <span
+                  v-else
+                  class="text-[#161616] truncate block text-xs"
+                >{{ row[col] }}</span>
+              </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 class="md:hidden space-y-3">
+        <div
+          v-for="(row, i) in allRows"
+          :key="row.__id ?? i"
+          class="border border-gray-default rounded p-3 space-y-1"
+        >
+          <div
+            v-for="col in displayedColumns"
+            :key="col"
+            class="flex justify-between gap-2 text-xs"
+          >
+            <span class="font-medium text-gray-title shrink-0">{{ col }}</span>
+            <span
+              v-if="row[col] == null || row[col] === ''"
+              class="text-gray-medium italic text-right"
+            >–</span>
+            <span
+              v-else
+              class="text-right truncate"
+            >{{ row[col] }}</span>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <!-- Debug: Profile -->
+    <details class="mt-8 border border-gray-default rounded p-4">
+      <summary class="cursor-pointer font-medium text-sm mb-2">
+        Debug: Profile API response
+      </summary>
+      <pre
+        v-if="profileData"
+        class="text-xs overflow-auto max-h-[600px] bg-gray-50 p-3 rounded"
+      >{{ JSON.stringify(profileData, null, 2) }}</pre>
+      <div
+        v-else
+        class="text-sm text-gray-medium"
+      >
+        {{ profileError ? 'Erreur lors du chargement du profil.' : 'Chargement…' }}
+      </div>
+    </details>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onUnmounted, ref, watch, useTemplateRef, type Component } from 'vue'
+import { ofetch } from 'ofetch'
+import { flip, shift, autoUpdate, useFloating } from '@floating-ui/vue'
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
+import {
+  RiLayoutColumnLine,
+  RiLayoutRowLine,
+  RiArrowDownSLine,
+  RiArrowUpLine,
+  RiArrowDownLine,
+  RiPriceTag3Line,
+  RiText,
+  RiCalendarLine,
+  RiCheckboxLine,
+  RiHashtag,
+  RiFilter2Line,
+  RiCloseLine,
+} from '@remixicon/vue'
+import { useFetch } from '../../functions/api'
+import { useTranslation } from '../../composables/useTranslation'
+import ClientOnly from '../ClientOnly.vue'
+import SimpleBanner from '../SimpleBanner.vue'
+import InfiniteLoader from '../InfiniteLoader.vue'
+import TabularCellPopover from './TabularCellPopover.vue'
+import type { CellInfo } from './TabularCellPopover.vue'
+import TabularFilterPopover from './TabularFilterPopover.vue'
+import type { TabularDataResponse, TabularProfileResponse, TabularRow, ColumnType, SortConfig, ColumnFilters } from './types'
+
+const props = defineProps<{
+  resourceId: string
+}>()
+
+const { t } = useTranslation()
+
+// Column selector popover positioning
+const columnPopoverRef = useTemplateRef<InstanceType<typeof Popover>>('columnPopover')
+const columnPanelRef = useTemplateRef<InstanceType<typeof PopoverPanel>>('columnPanel')
+
+const { floatingStyles: columnFloatingStyles } = useFloating(columnPopoverRef, columnPanelRef, {
+  placement: 'bottom-start',
+  middleware: [flip(), shift()],
+  whileElementsMounted: autoUpdate,
+})
+
+const dataUrl = computed(() =>
+  `/tabular/resources/${props.resourceId}/data`,
+)
+
+const profileUrl = computed(() =>
+  `/tabular/resources/${props.resourceId}/profile`,
+)
+
+// 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 (typeof filter.min === 'number' && Number.isFinite(filter.min)) {
+      q[`${col}__greater`] = filter.min
+    }
+    if (typeof filter.max === 'number' && 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 })
+
+const { data: profileData, error: profileError } = await useFetch<TabularProfileResponse>(profileUrl, { raw: true })
+
+// Infinite scroll state
+const allRows = ref<TabularRow[]>([])
+const currentPage = ref(1)
+const hasMore = ref(false)
+const loadingMore = ref(false)
+const scrollContainerRef = useTemplateRef<HTMLElement>('scrollContainer')
+
+watch(() => tableData.value, (data) => {
+  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
+  try {
+    const nextPage = currentPage.value + 1
+    const query = { ...dataQuery.value, page: nextPage }
+    const data = await ofetch<TabularDataResponse>(dataUrl.value, { params: query })
+    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(() => {
+  if (!tableData.value?.data?.length) return []
+  return Object.keys(tableData.value.data[0]).filter(key => key !== '__id')
+})
+
+const visibleColumns = ref(new Set(allColumns.value))
+
+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)) {
+    if (next.size > 1) next.delete(col)
+  }
+  else {
+    next.add(col)
+  }
+  visibleColumns.value = next
+}
+
+function showAllColumns() {
+  visibleColumns.value = new Set(allColumns.value)
+}
+
+// Column resize
+const columnWidths = 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
+  const widths: Record<string, number> = {}
+  ths.forEach((th, i) => {
+    const col = displayedColumns.value[i]
+    if (col) widths[col] = th.offsetWidth
+  })
+  columnWidths.value = widths
+}
+
+function startResize(col: string, e: MouseEvent) {
+  if (!Object.keys(columnWidths.value).length) initColumnWidths()
+  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 = ''
+  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 td = (event.target as HTMLElement).closest('td') as HTMLElement | null
+  if (!td) return
+  if (activeCell.value && activeCell.value.element === td) {
+    activeCell.value = null
+    return
+  }
+  activeCell.value = { column: col, columnType: getColumnType(col), value, element: td }
+}
+
+// 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.contains) {
+      parts.push(`contient "${filter.contains}"`)
+    }
+    if (filter.null === 'only') {
+      parts.push('null uniquement')
+    }
+    else if (filter.null === 'exclude') {
+      parts.push('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
+})
+
+const hasActiveFilters = computed(() => activeFilters.value.length > 0)
+
+function removeFilter(column: string) {
+  const { [column]: _, ...rest } = filters.value
+  filters.value = rest
+}
+
+function clearAllFilters() {
+  filters.value = {}
+}
+
+// Column type helpers
+function getColumnType(col: string): ColumnType {
+  const profile = profileData.value?.profile
+  if (!profile) return 'text'
+  const colInfo = profile.columns[col]
+  if (!colInfo) return 'text'
+  if (['int', 'float'].includes(colInfo.python_type)) return 'number'
+  if (colInfo.format === 'year') return 'date'
+  if (['date', 'datetime'].includes(colInfo.python_type)) return 'date'
+  if (colInfo.python_type === 'bool') return 'boolean'
+  if (profile.categorical.includes(col)) return 'categorical'
+  return '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: Record<ColumnType, { icon: Component, label: string }> = {
+  number: { icon: RiHashtag, label: 'Nombre' },
+  categorical: { icon: RiPriceTag3Line, label: 'Catégoriel' },
+  text: { icon: RiText, label: 'Texte' },
+  date: { icon: RiCalendarLine, label: 'Date' },
+  boolean: { icon: RiCheckboxLine, label: 'Booléen' },
+}
+
+function columnTypeIcon(col: string): Component {
+  return typeConfig[getColumnType(col)].icon
+}
+
+function columnTypeLabel(col: string): string {
+  return typeConfig[getColumnType(col)].label
+}
+
+// Cell rendering helpers
+function formatNumber(value: unknown): string {
+  const num = Number(value)
+  if (Number.isNaN(num)) return String(value)
+  return num.toLocaleString('fr-FR')
+}
+
+function formatDate(value: unknown): string {
+  if (value == null || value === '') return '–'
+  const d = new Date(String(value))
+  if (Number.isNaN(d.getTime())) return String(value)
+  return d.toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric' })
+}
+
+function isTruthy(value: unknown): boolean {
+  if (typeof value === 'boolean') return value
+  if (typeof value === 'string') return value.toLowerCase() === 'true'
+  return Boolean(value)
+}
+
+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): { backgroundColor: string, color: string } {
+  const colors = badgeColorMap.value.get(`${col}::${value}`) ?? BADGE_FALLBACK
+  return { backgroundColor: colors.bg, color: colors.text }
+}
+</script>
diff --git a/datagouv-components/src/components/TabularExplorer/TabularFilterPopover.vue b/datagouv-components/src/components/TabularExplorer/TabularFilterPopover.vue
new file mode 100644
index 000000000..41a5d236b
--- /dev/null
+++ b/datagouv-components/src/components/TabularExplorer/TabularFilterPopover.vue
@@ -0,0 +1,341 @@
+<template>
+  <div
+    ref="anchor"
+    class="relative shrink-0"
+  >
+    <button
+      class="p-0.5 rounded focus:outline-none"
+      :class="hasColumnFilter ? 'bg-[#3558A2] text-white' : 'hover:bg-gray-100'"
+      @click.stop="togglePopover"
+    >
+      <RiFilter2Line
+        class="size-3.5"
+        aria-hidden="true"
+      />
+      <span class="sr-only">{{ t('Filtrer') }} {{ column }}</span>
+    </button>
+
+    <ClientOnly>
+      <Teleport to="#tooltips">
+        <div
+          v-show="isOpen"
+          ref="panel"
+          class="bg-white border border-black/10 rounded-lg shadow-md w-64 absolute z-[800]"
+          :style="floatingStyles"
+        >
+          <!-- Title -->
+          <div class="px-3 py-2 border-b border-black/10">
+            <p class="text-sm font-medium mb-0">
+              {{ t('Filtrer') }} : {{ column }}
+            </p>
+          </div>
+
+          <!-- Sort -->
+          <div class="flex items-center gap-1 px-2 py-1.5 border-b border-black/10 text-xs">
+            <span class="text-[#3A3A3A]">{{ t('Trier') }}</span>
+            <BrandedButton
+              :color="sort?.column === column && sort?.direction === 'asc' ? 'primary' : 'tertiary'"
+              size="2xs"
+              :icon="RiArrowUpLine"
+              keep-margins-even-without-borders
+              @click="toggleSort('asc')"
+            >
+              {{ t('Croissant') }}
+            </BrandedButton>
+            <BrandedButton
+              :color="sort?.column === column && sort?.direction === 'desc' ? 'primary' : 'tertiary'"
+              size="2xs"
+              :icon="RiArrowDownLine"
+              keep-margins-even-without-borders
+              @click="toggleSort('desc')"
+            >
+              {{ t('Décroissant') }}
+            </BrandedButton>
+          </div>
+
+          <!-- Search (contains) -->
+          <div class="px-3 py-2 border-b border-black/10">
+            <div class="relative">
+              <RiSearchLine
+                class="absolute left-2 top-1/2 -translate-y-1/2 size-3.5 text-gray-medium"
+                aria-hidden="true"
+              />
+              <input
+                v-model="search"
+                type="text"
+                class="w-full h-8 text-sm border border-transparent rounded-lg py-1 pl-8 pr-3 bg-[#f3f3f5] focus:outline-none focus:border-blue-main"
+                :placeholder="t('Rechercher...')"
+              >
+            </div>
+          </div>
+
+          <!-- Categorical values -->
+          <div
+            v-if="columnType === 'categorical' && columnProfile?.tops && filteredTops.length"
+            class="max-h-56 overflow-auto p-1"
+          >
+            <label
+              v-for="top in filteredTops"
+              :key="top.value"
+              class="flex items-center gap-2 px-2 py-1.5 rounded-md hover:bg-gray-50 cursor-pointer text-xs"
+            >
+              <input
+                type="checkbox"
+                class="size-4 rounded shrink-0 accent-blue-main"
+                :checked="isValueSelected(top.value)"
+                @change="toggleValue(top.value)"
+              >
+              <span class="truncate font-medium">{{ top.value ?? 'null' }}</span>
+              <span class="ml-auto text-[#717182] font-medium shrink-0">{{ top.count }}</span>
+            </label>
+          </div>
+
+          <!-- Null filter -->
+          <div
+            v-if="columnProfile && columnProfile.nb_missing_values > 0"
+            class="px-3 py-2 border-b border-black/10 space-y-1.5"
+          >
+            <p class="text-[11px] text-gray-medium mb-0">
+              {{ columnProfile.nb_missing_values }} null ({{ nullPercent }})
+            </p>
+            <div class="flex items-center gap-1">
+              <BrandedButton
+                :color="nullFilter === 'only' ? 'primary' : 'tertiary'"
+                size="2xs"
+                keep-margins-even-without-borders
+                @click="toggleNullFilter('only')"
+              >
+                {{ t('Null uniquement') }}
+              </BrandedButton>
+              <BrandedButton
+                :color="nullFilter === 'exclude' ? 'primary' : 'tertiary'"
+                size="2xs"
+                keep-margins-even-without-borders
+                @click="toggleNullFilter('exclude')"
+              >
+                {{ t('Exclure null') }}
+              </BrandedButton>
+            </div>
+          </div>
+
+          <!-- Number range -->
+          <template v-if="columnType === 'number' && columnProfile">
+            <div class="px-3 py-2 border-b border-black/10 space-y-2">
+              <div class="flex items-center gap-2 text-xs text-[#3A3A3A]">
+                <span class="tabular-nums">{{ profileMin.toLocaleString('fr-FR') }}</span>
+                <span class="text-gray-medium">—</span>
+                <span class="tabular-nums">{{ profileMax.toLocaleString('fr-FR') }}</span>
+              </div>
+              <div class="flex items-center gap-2">
+                <input
+                  v-model.number="rangeMin"
+                  type="number"
+                  class="w-full h-7 text-xs border border-black/10 rounded px-2 bg-[#f3f3f5] focus:outline-none focus:border-blue-main tabular-nums"
+                  :placeholder="String(profileMin)"
+                  :min="profileMin"
+                  :max="profileMax"
+                >
+                <span class="text-gray-medium text-xs">–</span>
+                <input
+                  v-model.number="rangeMax"
+                  type="number"
+                  class="w-full h-7 text-xs border border-black/10 rounded px-2 bg-[#f3f3f5] focus:outline-none focus:border-blue-main tabular-nums"
+                  :placeholder="String(profileMax)"
+                  :min="profileMin"
+                  :max="profileMax"
+                >
+              </div>
+              <div class="flex items-center gap-2">
+                <BrandedButton
+                  color="primary"
+                  size="2xs"
+                  @click="applyRange"
+                >
+                  {{ t('Appliquer') }}
+                </BrandedButton>
+                <BrandedButton
+                  color="tertiary"
+                  size="2xs"
+                  keep-margins-even-without-borders
+                  @click="clearRange"
+                >
+                  {{ t('Effacer') }}
+                </BrandedButton>
+              </div>
+            </div>
+          </template>
+        </div>
+      </Teleport>
+    </ClientOnly>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue'
+import { flip, shift, autoUpdate, useFloating } from '@floating-ui/vue'
+import {
+  RiFilter2Line,
+  RiArrowUpLine,
+  RiArrowDownLine,
+  RiSearchLine,
+} from '@remixicon/vue'
+import { useTranslation } from '../../composables/useTranslation'
+import BrandedButton from '../BrandedButton.vue'
+import ClientOnly from '../ClientOnly.vue'
+import type { TabularColumnProfile, ColumnType, ColumnFilters, SortConfig, SortDirection } from './types'
+
+const props = defineProps<{
+  column: string
+  columnType: ColumnType
+  columnProfile: TabularColumnProfile | null
+  nullPercent: string
+}>()
+
+const sort = defineModel<SortConfig | null>('sort')
+const filters = defineModel<Record<string, ColumnFilters>>('filters', { default: () => ({}) })
+
+const isOpen = ref(false)
+
+function togglePopover() {
+  isOpen.value = !isOpen.value
+}
+
+// Click outside
+const anchorRef = useTemplateRef<HTMLElement>('anchor')
+const panelRef = useTemplateRef<HTMLElement>('panel')
+
+function onClickOutside(e: MouseEvent) {
+  if (!isOpen.value) return
+  const anchor = anchorRef.value
+  const panel = panelRef.value
+  if (anchor && anchor.contains(e.target as Node)) return
+  if (panel && panel.contains(e.target as Node)) return
+  isOpen.value = false
+}
+
+onMounted(() => {
+  document.addEventListener('mousedown', onClickOutside)
+})
+onUnmounted(() => {
+  document.removeEventListener('mousedown', onClickOutside)
+})
+
+const search = ref('')
+
+// Sync search text → contains filter on the column
+let debounceTimeout: ReturnType<typeof setTimeout> | null = null
+
+watch(search, (q) => {
+  if (debounceTimeout) clearTimeout(debounceTimeout)
+  debounceTimeout = setTimeout(() => {
+    const existing = filters.value[props.column] ?? {}
+    if (q) {
+      filters.value = { ...filters.value, [props.column]: { ...existing, contains: q } }
+    }
+    else {
+      const { contains: _, ...rest } = existing
+      filters.value = { ...filters.value, [props.column]: rest }
+    }
+  }, 300)
+})
+
+const hasColumnFilter = computed(() => {
+  const f = filters.value[props.column]
+  if (!f) return false
+  return !!(f.in?.length || f.contains || f.null || f.min != null || f.max != null)
+})
+
+// Null filter helpers
+const nullFilter = computed(() => filters.value[props.column]?.null ?? null)
+
+function toggleNullFilter(mode: 'only' | 'exclude') {
+  const existing = filters.value[props.column] ?? {}
+  if (existing.null === mode) {
+    const { null: _, ...rest } = existing
+    filters.value = { ...filters.value, [props.column]: rest }
+  }
+  else {
+    filters.value = { ...filters.value, [props.column]: { ...existing, null: mode } }
+  }
+}
+
+// Categorical filter helpers
+const selectedValues = computed(() => filters.value[props.column]?.in ?? [])
+
+const filteredTops = computed(() => {
+  if (!props.columnProfile?.tops) return []
+  if (!search.value) return props.columnProfile.tops
+  const q = search.value.toLowerCase()
+  return props.columnProfile.tops.filter(top =>
+    (top.value ?? '').toLowerCase().includes(q),
+  )
+})
+
+function isValueSelected(value: string) {
+  return selectedValues.value.includes(value)
+}
+
+function toggleValue(value: string) {
+  const current = selectedValues.value
+  const next = current.includes(value)
+    ? current.filter(v => v !== value)
+    : [...current, value]
+  const existing = filters.value[props.column] ?? {}
+  filters.value = { ...filters.value, [props.column]: { ...existing, in: next } }
+}
+
+// Number range filter helpers
+const profileMin = computed(() => props.columnProfile?.min ?? 0)
+const profileMax = computed(() => props.columnProfile?.max ?? 100)
+const rangeMin = ref<number | undefined>(undefined)
+const rangeMax = ref<number | undefined>(undefined)
+
+function isValidNumber(v: unknown): v is number {
+  return typeof v === 'number' && Number.isFinite(v)
+}
+
+function applyRange() {
+  const existing = filters.value[props.column] ?? {}
+  const next = { ...existing }
+  if (isValidNumber(rangeMin.value)) {
+    next.min = rangeMin.value
+  }
+  else {
+    delete next.min
+  }
+  if (isValidNumber(rangeMax.value)) {
+    next.max = rangeMax.value
+  }
+  else {
+    delete next.max
+  }
+  filters.value = { ...filters.value, [props.column]: next }
+}
+
+function clearRange() {
+  rangeMin.value = undefined
+  rangeMax.value = undefined
+  const existing = filters.value[props.column]
+  if (existing) {
+    const { min: _min, max: _max, ...rest } = existing
+    filters.value = { ...filters.value, [props.column]: rest }
+  }
+}
+
+function toggleSort(direction: SortDirection) {
+  if (sort.value?.column === props.column && sort.value.direction === direction) {
+    sort.value = null
+  }
+  else {
+    sort.value = { column: props.column, direction }
+  }
+}
+
+const { t } = useTranslation()
+
+const { floatingStyles } = useFloating(anchorRef, panelRef, {
+  placement: 'bottom-start',
+  middleware: [flip(), shift()],
+  whileElementsMounted: autoUpdate,
+})
+</script>
diff --git a/datagouv-components/src/components/TabularExplorer/types.ts b/datagouv-components/src/components/TabularExplorer/types.ts
new file mode 100644
index 000000000..739083dcd
--- /dev/null
+++ b/datagouv-components/src/components/TabularExplorer/types.ts
@@ -0,0 +1,77 @@
+/** Response from /api/resources/{rid}/data/ */
+export interface TabularDataResponse {
+  data: TabularRow[]
+  meta: {
+    page: number
+    page_size: number
+    total: number
+  }
+  links: {
+    profile: string
+    swagger: string
+    next: string | null
+    prev: string | null
+  }
+}
+
+export type TabularRow = Record<string, unknown> & { __id: number }
+
+/** Response from /api/resources/{rid}/profile/ */
+export interface TabularProfileResponse {
+  profile: TabularProfile
+}
+
+export interface TabularProfile {
+  header: string[]
+  columns: Record<string, TabularColumnInfo>
+  formats: Record<string, string[]>
+  profile: Record<string, TabularColumnProfile>
+  encoding: string
+  separator: string
+  categorical: string[]
+  total_lines: number
+  nb_duplicates: number
+  columns_fields: unknown
+  columns_labels: unknown
+  header_row_idx: number
+  heading_columns: number
+  trailing_columns: number
+}
+
+export interface TabularColumnInfo {
+  score: number
+  format: string
+  python_type: string
+}
+
+export interface TabularColumnProfile {
+  tops: TabularTopValue[]
+  nb_distinct: number
+  nb_missing_values: number
+  min?: number
+  max?: number
+  std?: number
+  mean?: number
+}
+
+export interface TabularTopValue {
+  value: string
+  count: number
+}
+
+export type ColumnType = 'number' | 'categorical' | 'text' | 'date' | 'boolean'
+
+export interface ColumnFilters {
+  in?: string[]
+  min?: number
+  max?: number
+  contains?: string
+  null?: 'only' | 'exclude'
+}
+
+export type SortDirection = 'asc' | 'desc'
+
+export interface SortConfig {
+  column: string
+  direction: SortDirection
+}
diff --git a/datagouv-components/src/functions/api.ts b/datagouv-components/src/functions/api.ts
index dc037e6d4..c70485f1e 100644
--- a/datagouv-components/src/functions/api.ts
+++ b/datagouv-components/src/functions/api.ts
@@ -16,6 +16,7 @@ export async function useFetch<DataT, ErrorT = never>(
     return await config.customUseFetch(url, options)
   }
 
+  const isRaw = options?.raw
   const data: Ref<DataT | null> = ref(null)
   const error: Ref<ErrorT | null> = ref(null)
   const status = ref<AsyncDataRequestStatus>('idle')
@@ -28,35 +29,37 @@ export async function useFetch<DataT, ErrorT = never>(
     status.value = 'pending'
     try {
       data.value = await ofetch<DataT | null>(urlValue, {
-        baseURL: config.apiBase,
+        ...(!isRaw && { baseURL: config.apiBase }),
         params: params ?? query,
-        onRequest(param) {
-          if (config.onRequest) {
-            if (Array.isArray(config.onRequest)) {
-              config.onRequest.forEach(r => r(param))
+        ...(!isRaw && {
+          onRequest(param) {
+            if (config.onRequest) {
+              if (Array.isArray(config.onRequest)) {
+                config.onRequest.forEach(r => r(param))
+              }
+              else {
+                config.onRequest(param)
+              }
             }
-            else {
-              config.onRequest(param)
+            const { options } = param
+            options.headers.set('Content-Type', 'application/json')
+            options.headers.set('Accept', 'application/json')
+            options.credentials = 'include'
+            if (config.devApiKey) {
+              options.headers.set('X-API-KEY', config.devApiKey)
             }
-          }
-          const { options } = param
-          options.headers.set('Content-Type', 'application/json')
-          options.headers.set('Accept', 'application/json')
-          options.credentials = 'include'
-          if (config.devApiKey) {
-            options.headers.set('X-API-KEY', config.devApiKey)
-          }
 
-          if (locale) {
-            if (!options.params) {
-              options.params = {}
+            if (locale) {
+              if (!options.params) {
+                options.params = {}
+              }
+              options.params['lang'] = locale
             }
-            options.params['lang'] = locale
-          }
-        },
-        onRequestError: config.onRequestError,
-        onResponse: config.onResponse,
-        onResponseError: config.onResponseError,
+          },
+          onRequestError: config.onRequestError,
+          onResponse: config.onResponse,
+          onResponseError: config.onResponseError,
+        }),
       })
       status.value = 'success'
     }
diff --git a/datagouv-components/src/functions/api.types.ts b/datagouv-components/src/functions/api.types.ts
index e72731e12..695b2caaa 100644
--- a/datagouv-components/src/functions/api.types.ts
+++ b/datagouv-components/src/functions/api.types.ts
@@ -20,6 +20,7 @@ export type UseFetchOptions<DataT> = {
   transform?: (input: DataT) => DataT | Promise<DataT>
   pick?: string[]
   watch?: WatchSource[] | false
+  raw?: boolean
 }
 
 export type AsyncData<DataT, ErrorT> = {
diff --git a/datagouv-components/src/main.ts b/datagouv-components/src/main.ts
index 6e8d7fd25..6800cd79d 100644
--- a/datagouv-components/src/main.ts
+++ b/datagouv-components/src/main.ts
@@ -93,6 +93,8 @@ import GlobalSearch from './components/Search/GlobalSearch.vue'
 import SearchInput from './components/Search/SearchInput.vue'
 import SearchableSelect from './components/Form/SearchableSelect.vue'
 import SelectGroup from './components/Form/SelectGroup.vue'
+import InfiniteLoader from './components/InfiniteLoader.vue'
+import TabularExplorer from './components/TabularExplorer/TabularExplorer.vue'
 import type { UseFetchFunction } from './functions/api.types'
 import { configKey, useComponentsConfig, type PluginConfig } from './config.js'
 
@@ -316,4 +318,6 @@ export {
   SearchInput,
   SearchableSelect,
   SelectGroup,
+  InfiniteLoader,
+  TabularExplorer,
 }
diff --git a/figma-prototype.png b/figma-prototype.png
new file mode 100644
index 000000000..a93556d3a
Binary files /dev/null and b/figma-prototype.png differ
diff --git a/filter-popup.png b/filter-popup.png
new file mode 100644
index 000000000..d0c68fe36
Binary files /dev/null and b/filter-popup.png differ
diff --git a/header-detail.png b/header-detail.png
new file mode 100644
index 000000000..71b115c71
Binary files /dev/null and b/header-detail.png differ
diff --git a/header-zoom.png b/header-zoom.png
new file mode 100644
index 000000000..523793c40
Binary files /dev/null and b/header-zoom.png differ
diff --git a/pages/design/tabular-explorer.vue b/pages/design/tabular-explorer.vue
new file mode 100644
index 000000000..ab128f9f3
--- /dev/null
+++ b/pages/design/tabular-explorer.vue
@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <Breadcrumb>
+      <BreadcrumbItem to="/design">
+        {{ $t('Système de design') }}
+      </BreadcrumbItem>
+      <BreadcrumbItem to="/design/tabular-explorer">
+        {{ $t('Tabular Explorer') }}
+      </BreadcrumbItem>
+    </Breadcrumb>
+
+    <h1 class="mb-3">
+      Tabular Explorer
+    </h1>
+
+    <div class="flex items-end gap-3 mb-6">
+      <form
+        class="flex-1"
+        @submit.prevent="key++"
+      >
+        <label
+          for="resource-id"
+          class="block text-sm font-medium mb-1"
+        >Resource ID</label>
+        <input
+          id="resource-id"
+          v-model="resourceId"
+          type="text"
+          class="fr-input w-full"
+          placeholder="Resource ID"
+        >
+        <button
+          type="button"
+          @click="resourceId = '79e2c14d-8278-4407-84b5-e8c279fc578c'"
+        >
+          indicateurs data.gouv
+        </button>
+        <button
+          type="button"
+          @click="resourceId = 'd0574a19-9005-4fff-92db-050b5fb2c72c'"
+        >
+          données véhicules
+        </button>
+      </form>
+    </div>
+
+    <TabularExplorer
+      :key
+      :resource-id="resourceId"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import BreadcrumbItem from '~/components/Breadcrumbs/BreadcrumbItem.vue'
+import { TabularExplorer } from '@datagouv/components-next'
+
+const key = ref(1)
+const resourceId = ref('79e2c14d-8278-4407-84b5-e8c279fc578c')
+</script>
diff --git a/server/routes/tabular/[...path].get.ts b/server/routes/tabular/[...path].get.ts
new file mode 100644
index 000000000..1011840b2
--- /dev/null
+++ b/server/routes/tabular/[...path].get.ts
@@ -0,0 +1,8 @@
+export default defineEventHandler(async (event) => {
+  const path = getRouterParam(event, 'path')
+  const query = getQuery(event)
+  const config = useRuntimeConfig()
+  const qs = new URLSearchParams(query as Record<string, string>).toString()
+  const url = `${config.public.tabularApiUrl}/api/${path}/${qs ? `?${qs}` : ''}`
+  return $fetch(url)
+})
diff --git a/utils/api.ts b/utils/api.ts
index 8e0c8da25..1b138d862 100644
--- a/utils/api.ts
+++ b/utils/api.ts
@@ -18,29 +18,32 @@ export async function useAPI<T, U = T>(
 
   const redirectOn404 = options && 'redirectOn404' in options && options.redirectOn404
   const redirectOnSlug = options && 'redirectOnSlug' in options && options.redirectOnSlug
+  const isRaw = options && 'raw' in options && options.raw
   const response = await useFetch(url, {
     ...options,
-    $fetch: redirectOn404 ? useNuxtApp().$apiWith404 : useNuxtApp().$api,
+    ...(!isRaw && { $fetch: redirectOn404 ? useNuxtApp().$apiWith404 : useNuxtApp().$api }),
   })
 
-  const data = toValue(response.data) || {}
+  if (!isRaw) {
+    const data = toValue(response.data) || {}
 
-  if (redirectOnSlug && redirectOnSlug in route.params && 'slug' in data && route.params[redirectOnSlug] !== data.slug) {
-    const newParams = { ...route.params }
-    newParams[redirectOnSlug] = data.slug as string
+    if (redirectOnSlug && redirectOnSlug in route.params && 'slug' in data && route.params[redirectOnSlug] !== data.slug) {
+      const newParams = { ...route.params }
+      newParams[redirectOnSlug] = data.slug as string
 
-    await nuxtApp.runWithContext(() => navigateTo({ name: route.name, params: newParams, query: route.query, hash: route.hash }, { redirectCode: 301 }))
-  }
-
-  if (isAdmin) {
-    // Check the response to see if an `organization` or an `owner` is present
-    // to add this organization/user to the menu.
-    if ('organization' in data && data.organization) {
-      setCurrentOrganization(data.organization as OrganizationReference)
+      await nuxtApp.runWithContext(() => navigateTo({ name: route.name, params: newParams, query: route.query, hash: route.hash }, { redirectCode: 301 }))
     }
 
-    if ('owner' in data && data.owner) {
-      setCurrentUser(data.owner as User)
+    if (isAdmin) {
+      // Check the response to see if an `organization` or an `owner` is present
+      // to add this organization/user to the menu.
+      if ('organization' in data && data.organization) {
+        setCurrentOrganization(data.organization as OrganizationReference)
+      }
+
+      if ('owner' in data && data.owner) {
+        setCurrentUser(data.owner as User)
+      }
     }
   }