diff --git a/components/GristTableViewer/GristTableViewer.vue b/components/GristTableViewer/GristTableViewer.vue
index a7007e9c3..e9c023fbc 100644
--- a/components/GristTableViewer/GristTableViewer.vue
+++ b/components/GristTableViewer/GristTableViewer.vue
@@ -97,7 +97,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted, watch, computed } from 'vue'
-import { AnimatedLoader } from '@datagouv/components-next'
+import { AnimatedLoader, useFormatTabular } from '@datagouv/components-next'
 
 interface GristRecord {
   id: number
@@ -136,18 +136,7 @@ const total = computed(() => {
   return sum
 })
 
-function formatNumber(value: string | number | boolean | null | undefined): string {
-  if (value === null || value === undefined) {
-    return '-'
-  }
-
-  const num = Number(value)
-  if (isNaN(num)) {
-    return String(value)
-  }
-
-  return num.toLocaleString('fr-FR')
-}
+const { formatNumber } = useFormatTabular()
 
 function getFieldValue(record: GristRecord, column: string): string {
   const value = record.fields[column]
diff --git a/datagouv-components/eslint.config.ts b/datagouv-components/eslint.config.ts
index 14663b2e0..61a87bb95 100644
--- a/datagouv-components/eslint.config.ts
+++ b/datagouv-components/eslint.config.ts
@@ -26,6 +26,7 @@ export default defineConfigWithVueTs(
       // which are required for proper typography (e.g., spaces before punctuation marks like ?, !, :)
       'no-irregular-whitespace': 'off',
       'vue/multi-word-component-names': 'off',
+      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
     },
   },
   skipFormatting,
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/ResourceAccordion/Preview.vue b/datagouv-components/src/components/ResourceAccordion/Preview.vue
index 71505774e..c8b3bae9b 100644
--- a/datagouv-components/src/components/ResourceAccordion/Preview.vue
+++ b/datagouv-components/src/components/ResourceAccordion/Preview.vue
@@ -48,7 +48,7 @@
               >
                 <BrandedButton
                   color="tertiary"
-                  :icon="isSortedBy(col) && sortConfig && sortConfig.type == 'asc' ? RiArrowUpLine : RiArrowDownLine"
+                  :icon="isSortedBy(col) && sortConfig && sortConfig.direction === 'asc' ? RiArrowUpLine : RiArrowDownLine"
                   icon-right
                   size="xs"
                   @click="sortByField(col)"
@@ -56,7 +56,7 @@
                   <!-- There is a weird bug with `sr-only`, I needed to add a relative parent to avoid full page x scrolling into the void…  -->
                   <span class="relative">
                     {{ col }}
-                    <span class="sr-only">{{ sortConfig && sortConfig.type == 'desc' ? t("Trier par ordre croissant") : t("Trier par ordre décroissant") }}</span>
+                    <span class="sr-only">{{ sortConfig && sortConfig.direction === 'desc' ? t("Trier par ordre croissant") : t("Trier par ordre décroissant") }}</span>
                   </span>
                 </BrandedButton>
               </th>
@@ -122,7 +122,7 @@ const rows = ref<Array<Record<string, unknown>>>([])
 const columns = ref<Array<string>>([])
 const loading = ref(true)
 const hasError = ref(false)
-const sortConfig = ref<SortConfig>(null)
+const sortConfig = ref<SortConfig | null>(null)
 const rowCount = ref(0)
 const config = useComponentsConfig()
 const pageSize = computed(() => config.tabularApiPageSize || 15)
@@ -138,7 +138,7 @@ function isSortedBy(col: string) {
 /**
  * Retrieve preview necessary infos
  */
-async function getTableInfos(page: number, sortConfig?: SortConfig) {
+async function getTableInfos(page: number, sortConfig?: SortConfig | null) {
   try {
     // Check that this function return wanted data
     const response = await getData(config, props.resource.id, page, sortConfig)
@@ -172,24 +172,24 @@ function changePage(page: number) {
  * Sort by a specific column
  */
 function sortByField(col: string) {
-  if (sortConfig.value && sortConfig.value.column == col) {
-    if (sortConfig.value.type == 'asc') {
-      sortConfig.value.type = 'desc'
+  if (sortConfig.value && sortConfig.value.column === col) {
+    if (sortConfig.value.direction === 'asc') {
+      sortConfig.value.direction = 'desc'
     }
     else {
-      sortConfig.value.type = 'asc'
+      sortConfig.value.direction = 'asc'
     }
   }
   else {
     if (!sortConfig.value) {
       sortConfig.value = {
         column: col,
-        type: 'asc',
+        direction: 'asc',
       }
     }
     else {
       sortConfig.value.column = col
-      sortConfig.value.type = 'asc'
+      sortConfig.value.direction = 'asc'
     }
   }
   currentPage.value = 1
diff --git a/datagouv-components/src/components/TabularExplorer/TabularCell.vue b/datagouv-components/src/components/TabularExplorer/TabularCell.vue
new file mode 100644
index 000000000..d69abbb88
--- /dev/null
+++ b/datagouv-components/src/components/TabularExplorer/TabularCell.vue
@@ -0,0 +1,51 @@
+<template>
+  <span
+    v-if="value == null || value === ''"
+    class="font-[Inconsolata,monospace] text-gray-low italic"
+    :class="compact ? 'text-xs' : 'text-sm'"
+  >null</span>
+  <span
+    v-else-if="columnType === 'boolean'"
+    class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs"
+    :class="isTruthy(value) ? 'bg-new-success-light text-new-success' : 'bg-new-warning-light text-new-error'"
+  >
+    <span
+      class="size-2 rounded-full"
+      :class="isTruthy(value) ? 'bg-new-success' : 'bg-new-error'"
+    />
+    {{ isTruthy(value) ? t('Vrai') : t('Faux') }}
+  </span>
+  <span
+    v-else-if="columnType === 'categorical'"
+    class="inline-block rounded font-medium px-2 py-0.5 text-xs max-w-full truncate"
+    :style="categoryBadgeStyle ? { backgroundColor: categoryBadgeStyle.backgroundColor, color: categoryBadgeStyle.color } : undefined"
+  >{{ value }}</span>
+  <span
+    v-else-if="columnType === 'number'"
+    :class="compact ? 'font-mono tabular-nums text-xs text-gray-title' : ''"
+  >{{ formatNumber(value) }}</span>
+  <span
+    v-else-if="columnType === 'date'"
+    :class="compact ? 'font-mono tabular-nums text-xs text-gray-title' : ''"
+  >{{ formatCellDate(value) }}</span>
+  <span
+    v-else
+    class="text-gray-title truncate block text-xs"
+  >{{ typeof value === 'object' ? JSON.stringify(value) : value }}</span>
+</template>
+
+<script setup lang="ts">
+import { useTranslation } from '../../composables/useTranslation'
+import { useFormatTabular, isTruthy } from '../../functions/tabular'
+import type { ColumnType, BadgeStyle } from './types'
+
+defineProps<{
+  value: unknown
+  columnType: ColumnType
+  categoryBadgeStyle?: BadgeStyle
+  compact?: boolean
+}>()
+
+const { t } = useTranslation()
+const { formatNumber, formatCellDate } = useFormatTabular()
+</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..73e1b391e
--- /dev/null
+++ b/datagouv-components/src/components/TabularExplorer/TabularCellPopover.vue
@@ -0,0 +1,170 @@
+<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-gray-default">
+          <p class="text-[10px] text-gray-plain mb-0">
+            {{ t('Valeur brute') }}
+          </p>
+          <p class="text-xs text-gray-title mb-0">
+            {{ displayValue }}
+          </p>
+        </div>
+
+        <!-- Type -->
+        <div class="flex items-center gap-2 px-3 py-2 border-b border-gray-default">
+          <span class="text-[10px] text-gray-plain">{{ t('Type') }}</span>
+          <span class="inline-flex items-center gap-1 bg-gray-some rounded px-1.5 py-0.5 text-xs text-gray-plain">
+            <component
+              :is="typeIcon"
+              class="size-3"
+              aria-hidden="true"
+            />
+            {{ typeLabel }}
+          </span>
+          <span class="text-[10px] text-gray-plain shrink-0">·</span>
+          <span class="text-[10px] text-gray-plain 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"
+          >
+            <RiCheckLine
+              v-if="copied"
+              class="size-4 text-green-500"
+              aria-hidden="true"
+            />
+            <RiFileCopyLine
+              v-else
+              class="size-4 text-gray-plain"
+              aria-hidden="true"
+            />
+            {{ copied ? t('Copié !') : t('Copier la valeur') }}
+          </button>
+        </div>
+      </div>
+    </Teleport>
+  </ClientOnly>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useTemplateRef, watch } from 'vue'
+import { flip, shift, autoUpdate, useFloating } from '@floating-ui/vue'
+import { onClickOutside } from '@vueuse/core'
+import {
+  RiFilter2Line,
+  RiFileCopyLine,
+  RiCheckLine,
+} from '@remixicon/vue'
+import { toast } from 'vue-sonner'
+import { useTranslation } from '../../composables/useTranslation'
+import { buildTypeConfig } from '../../functions/tabular'
+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 '–'
+  if (typeof v === 'object') return JSON.stringify(v)
+  return String(v)
+})
+
+const typeConfig = buildTypeConfig(t)
+
+const typeIcon = computed(() => cell.value ? typeConfig[cell.value.columnType].icon : typeConfig.text.icon)
+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' || cell.value.columnType === 'date') {
+    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 } }
+    }
+  }
+  else if (cell.value.columnType === 'boolean') {
+    filters.value = { ...filters.value, [col]: { ...existing, exact: val } }
+  }
+  close()
+}
+
+const copied = ref(false)
+
+async function copyValue() {
+  try {
+    await navigator.clipboard.writeText(displayValue.value)
+    copied.value = true
+    setTimeout(() => {
+      copied.value = false
+    }, 1500)
+  }
+  catch {
+    toast.error(t('Impossible de copier dans le presse-papier'))
+  }
+}
+
+onClickOutside(panelRef, (e) => {
+  if (!cell.value) return
+  const clickedCell = (e.target as HTMLElement).closest('[data-cell]')
+  if (clickedCell && clickedCell === cell.value.element) return
+  close()
+})
+</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..2d01d52b3
--- /dev/null
+++ b/datagouv-components/src/components/TabularExplorer/TabularExplorer.vue
@@ -0,0 +1,870 @@
+<template>
+  <div>
+    <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">
+      <!-- Toolbar -->
+      <div class="flex items-center py-3 gap-2">
+        <!-- Mobile: filter & sort button -->
+        <BrandedButton
+          class="md:hidden"
+          color="tertiary"
+          size="2xs"
+          :icon="RiFilter2Line"
+          keep-margins-even-without-borders
+          @click="mobileFilterOpen = true"
+        >
+          {{ t('Filtres & tri') }}
+        </BrandedButton>
+
+        <div class="flex-1" />
+
+        <!-- Right: Stats -->
+        <div class="flex items-center gap-4">
+          <!-- Columns (clickable, opens column popover) -->
+          <Popover
+            ref="columnAnchor"
+            v-slot="{ open }"
+            class="relative"
+          >
+            <PopoverButton class="flex items-center gap-1.5 text-xs text-gray-plain rounded px-2 py-1 hover:bg-gray-50 focus:outline-none">
+              <RiLayoutColumnLine
+                class="size-3"
+                aria-hidden="true"
+              />
+              <span class="font-bold hidden md:inline">{{ t('Colonnes') }}</span>
+              <span class="font-mono tabular-nums">{{ visibleColumns.size }}/{{ allColumns.length }}</span>
+              <RiArrowDownSLine
+                class="size-3 opacity-50"
+                aria-hidden="true"
+              />
+            </PopoverButton>
+
+            <ClientOnly>
+              <Teleport to="#tooltips">
+                <PopoverPanel
+                  v-show="open"
+                  ref="columnPanel"
+                  static
+                  class="bg-white border border-gray-default rounded shadow-lg w-72 absolute z-[800]"
+                  :style="columnFloatingStyles"
+                >
+                  <div class="flex items-center justify-between px-3 py-2 border-b border-gray-default">
+                    <span class="text-xs font-medium text-gray-title">
+                      {{ visibleColumns.size }} {{ t('sur') }} {{ allColumns.length }} {{ t('colonnes visibles') }}
+                    </span>
+                    <BrandedButton
+                      v-if="hiddenCount"
+                      color="tertiary"
+                      size="2xs"
+                      @click="showAllColumns"
+                    >
+                      {{ t('Tout afficher') }}
+                    </BrandedButton>
+                  </div>
+                  <div class="max-h-64 overflow-auto p-1">
+                    <label
+                      v-for="col in allColumns"
+                      :key="col"
+                      class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-gray-50 cursor-pointer text-xs"
+                    >
+                      <input
+                        type="checkbox"
+                        :checked="visibleColumns.has(col)"
+                        class="size-3.5 accent-new-primary"
+                        @change="toggleColumn(col)"
+                      >
+                      <span class="truncate">{{ col }}</span>
+                    </label>
+                  </div>
+                </PopoverPanel>
+              </Teleport>
+            </ClientOnly>
+          </Popover>
+
+          <!-- Rows -->
+          <span class="flex items-center gap-1.5 text-xs text-gray-plain">
+            <RiLayoutRowLine
+              class="size-3 text-mention-grey"
+              aria-hidden="true"
+            />
+            <span class="font-bold hidden md:inline">{{ t('Lignes') }}</span>
+            <span class="font-mono tabular-nums">{{ tableData.meta.total.toLocaleString() }}/{{ totalLines.toLocaleString() }}</span>
+          </span>
+        </div>
+      </div>
+
+      <!-- Active filters -->
+      <div
+        v-if="activeFilters.length > 0"
+        class="bg-gray-some border border-gray-default rounded-xl px-3 py-2.5 mb-3 space-y-2.5"
+      >
+        <!-- Header -->
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-2">
+            <RiFilter2Line
+              class="size-3.5"
+              aria-hidden="true"
+            />
+            <span class="text-xs text-gray-plain">{{ t('Filtres actifs') }}</span>
+            <span class="inline-flex items-center justify-center rounded-full bg-new-primary/10 text-new-primary text-xs tabular-nums min-w-5 h-5 px-1.5">
+              {{ activeFilters.length }}
+            </span>
+          </div>
+          <BrandedButton
+            color="tertiary"
+            size="2xs"
+            :icon="RiCloseLine"
+            @click="clearAllFilters"
+          >
+            {{ t('Tout effacer') }}
+          </BrandedButton>
+        </div>
+        <!-- Chips -->
+        <div class="flex flex-wrap gap-1.5">
+          <span
+            v-for="af in activeFilters"
+            :key="af.column"
+            class="inline-flex items-center gap-1.5 bg-white border border-gray-silver rounded-lg pl-2 pr-1 py-1 text-xs"
+          >
+            <component
+              :is="getTypeConfig(af.column).icon"
+              class="size-3 text-gray-title"
+              aria-hidden="true"
+            />
+            <span class="text-gray-title">{{ af.column }}</span>
+            <span class="text-gray-plain">{{ af.label }}</span>
+            <button
+              class="rounded p-0.5 text-gray-low hover:text-gray-plain hover:bg-gray-100"
+              @click="removeFilter(af.column)"
+            >
+              <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-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 -->
+                <span class="font-mono text-xs text-gray-plain -mt-0.5 inline-flex items-center gap-1">
+                  <component
+                    :is="getTypeConfig(col).icon"
+                    class="size-3"
+                    aria-hidden="true"
+                  />
+                  <span class="mt-px">{{ getTypeConfig(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 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(row, 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="getTypeConfig(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="getTypeConfig(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, onUnmounted, ref, watch, useTemplateRef } from 'vue'
+import { ofetch } from 'ofetch'
+import { flip, shift, autoUpdate, useFloating } from '@floating-ui/vue'
+import { Dialog, DialogPanel, DialogTitle, Popover, PopoverButton, PopoverPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'
+import {
+  RiLayoutColumnLine,
+  RiLayoutRowLine,
+  RiArrowDownSLine,
+  RiArrowUpLine,
+  RiArrowDownLine,
+  RiFilter2Line,
+  RiCloseLine,
+  RiSearchLine,
+} from '@remixicon/vue'
+import { useFetch } from '../../functions/api'
+import { useComponentsConfig } from '../../config'
+import { useTranslation } from '../../composables/useTranslation'
+import { buildTypeConfig, hasFilterForColumn as _hasFilterForColumn, isTruthy, isFalsy } from '../../functions/tabular'
+import 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, TabularProfileResponse, TabularRow, ColumnType, SortConfig, ColumnFilters, BadgeStyle } from './types'
+
+const props = defineProps<{
+  resourceId: string
+}>()
+
+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/`,
+)
+
+const profileUrl = computed(() =>
+  `${config.tabularApiUrl}/api/resources/${props.resourceId}/profile/`,
+)
+
+// Sort & filter state
+const sort = ref<SortConfig | null>(null)
+const filters = ref<Record<string, ColumnFilters>>({})
+
+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 })
+
+const { data: profileData } = 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 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)) {
+    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 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(row: TabularRow, 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 resolveColumnType(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'
+}
+
+const columnTypesMap = computed(() => {
+  const map: Record<string, ColumnType> = {}
+  for (const col of allColumns.value) {
+    map[col] = resolveColumnType(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)
+
+function getTypeConfig(col: string) {
+  return typeConfig[getColumnType(col)]
+}
+
+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>
diff --git a/datagouv-components/src/components/TabularExplorer/TabularFilterContent.vue b/datagouv-components/src/components/TabularExplorer/TabularFilterContent.vue
new file mode 100644
index 000000000..23a0ca2f3
--- /dev/null
+++ b/datagouv-components/src/components/TabularExplorer/TabularFilterContent.vue
@@ -0,0 +1,351 @@
+<template>
+  <div>
+    <!-- Sort -->
+    <div class="flex items-center gap-1 px-2 py-1.5 border-b border-black/10 text-xs">
+      <span class="text-gray-plain">{{ 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>
+
+    <!-- Null filter with progress bar -->
+    <div
+      v-if="columnProfile && columnProfile.nb_missing_values > 0"
+      class="flex items-center gap-2 px-3 py-2 border-b border-black/10"
+    >
+      <span class="text-xs text-gray-plain whitespace-nowrap">
+        <span class="font-mono tabular-nums">{{ columnProfile.nb_missing_values }}</span>
+        null
+        <span class="text-gray-low">({{ nullPercent }})</span>
+      </span>
+      <ProgressBar
+        :value="columnProfile.nb_missing_values"
+        :max="totalLines"
+        bar-class="bg-gray-low"
+        class="flex-1 !h-1.5 !min-w-0 !border-0 !bg-gray-default"
+      />
+      <div class="flex items-center gap-0.5">
+        <BrandedButton
+          :color="nullFilter === 'only' ? 'primary' : 'tertiary'"
+          size="2xs"
+          keep-margins-even-without-borders
+          @click="toggleNullFilter('only')"
+        >
+          {{ t('seul.') }}
+        </BrandedButton>
+        <BrandedButton
+          :color="nullFilter === 'exclude' ? 'primary' : 'tertiary'"
+          size="2xs"
+          keep-margins-even-without-borders
+          @click="toggleNullFilter('exclude')"
+        >
+          {{ t('exclure') }}
+        </BrandedButton>
+      </div>
+    </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-new-primary"
+          :placeholder="t('Rechercher...')"
+        >
+      </div>
+    </div>
+
+    <!-- Categorical values -->
+    <div
+      v-if="columnType === 'categorical' && columnProfile?.tops && filteredTops.length"
+      class="max-h-56 overflow-auto p-1"
+    >
+      <button
+        v-for="top in filteredTops"
+        :key="top.value"
+        class="flex w-full items-center gap-2 px-2 py-1.5 rounded-md hover:bg-gray-50 cursor-pointer text-xs select-none"
+        :class="isValueSelected(top.value) && 'bg-gray-50'"
+        @click="toggleValue(top.value)"
+      >
+        <span
+          class="flex size-4 shrink-0 items-center justify-center rounded border"
+          :class="isValueSelected(top.value) ? 'border-new-primary bg-new-primary text-white' : 'border-gray-low'"
+        >
+          <RiCheckLine
+            v-if="isValueSelected(top.value)"
+            class="size-3"
+            aria-hidden="true"
+          />
+        </span>
+        <span class="flex-1 truncate text-left text-xs">
+          <span
+            v-if="categoryBadgeStyles?.[top.value]"
+            class="inline-block rounded font-medium px-2 py-0.5 text-xs"
+            :style="{ backgroundColor: categoryBadgeStyles![top.value]!.backgroundColor, color: categoryBadgeStyles![top.value]!.color }"
+          >{{ top.value }}</span>
+          <template v-else>
+            {{ top.value ?? 'null' }}
+          </template>
+        </span>
+        <span class="font-mono text-xs text-gray-low tabular-nums shrink-0">{{ top.count }}</span>
+      </button>
+    </div>
+
+    <!-- Boolean filter -->
+    <div
+      v-if="columnType === 'boolean'"
+      class="px-3 py-3 space-y-1.5"
+    >
+      <button
+        class="flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-xs transition-colors"
+        :class="booleanFilter === true ? 'bg-new-primary text-white' : 'bg-gray-some text-gray-title hover:bg-gray-default'"
+        @click="toggleBooleanFilter(true)"
+      >
+        <span
+          class="size-2.5 rounded-full shrink-0"
+          :class="booleanFilter === true ? 'bg-new-success-light' : 'bg-new-success'"
+        />
+        <span class="flex-1 text-left">{{ t('Vrai') }}</span>
+        <span
+          v-if="booleanCounts"
+          class="font-mono tabular-nums text-xs"
+          :class="booleanFilter === true ? 'text-white/70' : 'text-gray-low'"
+        >{{ booleanCounts.trueCount }}</span>
+      </button>
+      <button
+        class="flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-xs transition-colors"
+        :class="booleanFilter === false ? 'bg-new-primary text-white' : 'bg-gray-some text-gray-title hover:bg-gray-default'"
+        @click="toggleBooleanFilter(false)"
+      >
+        <span
+          class="size-2.5 rounded-full shrink-0"
+          :class="booleanFilter === false ? 'bg-new-warning-light' : 'bg-new-error'"
+        />
+        <span class="flex-1 text-left">{{ t('Faux') }}</span>
+        <span
+          v-if="booleanCounts"
+          class="font-mono tabular-nums text-xs"
+          :class="booleanFilter === false ? 'text-white/70' : 'text-gray-low'"
+        >{{ booleanCounts.falseCount }}</span>
+      </button>
+    </div>
+
+    <!-- Number range -->
+    <form
+      v-if="columnType === 'number' && columnProfile"
+      class="px-3 py-2 border-b border-black/10 space-y-2"
+      @submit.prevent="applyRange"
+    >
+      <div class="flex items-center gap-2 text-xs text-gray-plain">
+        <span class="tabular-nums">{{ formatNumber(profileMin) }}</span>
+        <span class="text-gray-medium">—</span>
+        <span class="tabular-nums">{{ formatNumber(profileMax) }}</span>
+      </div>
+      <div class="flex items-center gap-2">
+        <input
+          v-model.number="rangeMin"
+          type="number"
+          step="any"
+          class="w-full h-7 text-xs border border-black/10 rounded px-2 bg-[#f3f3f5] focus:outline-none focus:border-new-primary tabular-nums"
+          :placeholder="String(profileMin)"
+          :min="profileMin"
+          :max="profileMax"
+        >
+        <span class="text-gray-medium text-xs">–</span>
+        <input
+          v-model.number="rangeMax"
+          type="number"
+          step="any"
+          class="w-full h-7 text-xs border border-black/10 rounded px-2 bg-[#f3f3f5] focus:outline-none focus:border-new-primary tabular-nums"
+          :placeholder="String(profileMax)"
+          :min="profileMin"
+          :max="profileMax"
+        >
+      </div>
+      <div class="flex items-center gap-2">
+        <BrandedButton
+          color="primary"
+          size="2xs"
+          type="submit"
+        >
+          {{ t('Appliquer') }}
+        </BrandedButton>
+        <BrandedButton
+          color="tertiary"
+          size="2xs"
+          type="button"
+          keep-margins-even-without-borders
+          @click="clearRange"
+        >
+          {{ t('Effacer') }}
+        </BrandedButton>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { watchDebounced } from '@vueuse/core'
+import {
+  RiArrowUpLine,
+  RiArrowDownLine,
+  RiSearchLine,
+  RiCheckLine,
+} from '@remixicon/vue'
+import { useTranslation } from '../../composables/useTranslation'
+import { useFormatTabular } from '../../functions/tabular'
+import BrandedButton from '../BrandedButton.vue'
+import ProgressBar from '../ProgressBar.vue'
+import type { TabularColumnProfile, ColumnType, ColumnFilters, SortConfig, SortDirection, BadgeStyle } from './types'
+
+const props = defineProps<{
+  column: string
+  columnType: ColumnType
+  columnProfile: TabularColumnProfile | null
+  nullPercent: string
+  totalLines: number
+  categoryBadgeStyles?: Record<string, BadgeStyle>
+  booleanCounts?: { trueCount: number, falseCount: number }
+}>()
+
+const sort = defineModel<SortConfig | null>('sort')
+const filters = defineModel<Record<string, ColumnFilters>>('filters', { default: () => ({}) })
+
+const { t } = useTranslation()
+const { formatNumber } = useFormatTabular()
+
+const search = ref('')
+
+watchDebounced(search, (q) => {
+  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 }
+  }
+}, { debounce: 300 })
+
+// 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 applyRange() {
+  const existing = filters.value[props.column] ?? {}
+  const next = { ...existing }
+  if (Number.isFinite(rangeMin.value)) {
+    next.min = rangeMin.value
+  }
+  else {
+    delete next.min
+  }
+  if (Number.isFinite(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 }
+  }
+}
+
+// Boolean filter helpers
+const booleanFilter = computed<boolean | null>(() => {
+  const f = filters.value[props.column]
+  if (!f || f.exact == null) return null
+  return f.exact === 'true'
+})
+
+function toggleBooleanFilter(value: boolean) {
+  const existing = filters.value[props.column] ?? {}
+  const strValue = String(value)
+  if (existing.exact === strValue) {
+    const { exact: _, ...rest } = existing
+    filters.value = { ...filters.value, [props.column]: rest }
+  }
+  else {
+    filters.value = { ...filters.value, [props.column]: { ...existing, exact: strValue } }
+  }
+}
+
+function toggleSort(direction: SortDirection) {
+  if (sort.value?.column === props.column && sort.value.direction === direction) {
+    sort.value = null
+  }
+  else {
+    sort.value = { column: props.column, direction }
+  }
+}
+</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..8a944f382
--- /dev/null
+++ b/datagouv-components/src/components/TabularExplorer/TabularFilterPopover.vue
@@ -0,0 +1,111 @@
+<template>
+  <div
+    ref="anchor"
+    class="relative shrink-0"
+  >
+    <button
+      class="p-0.5 rounded focus:outline-none"
+      :class="hasColumnFilter ? 'bg-primary 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="flex items-center justify-between px-3 py-2 border-b border-black/10">
+            <p class="text-sm font-medium mb-0">
+              {{ t('Filtrer') }} : {{ column }}
+            </p>
+            <BrandedButton
+              v-if="hasColumnFilter"
+              color="tertiary"
+              size="2xs"
+              :icon="RiCloseLine"
+              @click="clearColumnFilter"
+            >
+              {{ t('Effacer') }}
+            </BrandedButton>
+          </div>
+
+          <TabularFilterContent
+            v-model:sort="sort"
+            v-model:filters="filters"
+            :column="column"
+            :column-type="columnType"
+            :column-profile="columnProfile"
+            :null-percent="nullPercent"
+            :total-lines="totalLines"
+            :category-badge-styles="categoryBadgeStyles"
+            :boolean-counts="booleanCounts"
+          />
+        </div>
+      </Teleport>
+    </ClientOnly>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useTemplateRef } from 'vue'
+import { flip, shift, autoUpdate, useFloating } from '@floating-ui/vue'
+import { onClickOutside } from '@vueuse/core'
+import { RiFilter2Line, RiCloseLine } from '@remixicon/vue'
+import { useTranslation } from '../../composables/useTranslation'
+import { hasFilterForColumn as _hasFilterForColumn } from '../../functions/tabular'
+import BrandedButton from '../BrandedButton.vue'
+import ClientOnly from '../ClientOnly.vue'
+import TabularFilterContent from './TabularFilterContent.vue'
+import type { TabularColumnProfile, ColumnType, ColumnFilters, SortConfig, BadgeStyle } from './types'
+
+const props = defineProps<{
+  column: string
+  columnType: ColumnType
+  columnProfile: TabularColumnProfile | null
+  nullPercent: string
+  totalLines: number
+  categoryBadgeStyles?: Record<string, BadgeStyle>
+  booleanCounts?: { trueCount: number, falseCount: number }
+}>()
+
+const sort = defineModel<SortConfig | null>('sort')
+const filters = defineModel<Record<string, ColumnFilters>>('filters', { default: () => ({}) })
+
+const { t } = useTranslation()
+
+const isOpen = ref(false)
+
+function togglePopover() {
+  isOpen.value = !isOpen.value
+}
+
+const anchorRef = useTemplateRef<HTMLElement>('anchor')
+const panelRef = useTemplateRef<HTMLElement>('panel')
+
+onClickOutside(panelRef, () => {
+  isOpen.value = false
+}, { ignore: [anchorRef] })
+
+const hasColumnFilter = computed(() => _hasFilterForColumn(filters.value, props.column))
+
+function clearColumnFilter() {
+  const { [props.column]: _, ...rest } = filters.value
+  filters.value = rest
+}
+
+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..9c9fe0657
--- /dev/null
+++ b/datagouv-components/src/components/TabularExplorer/types.ts
@@ -0,0 +1,83 @@
+/** 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[]
+  exact?: string
+  min?: number
+  max?: number
+  contains?: string
+  null?: 'only' | 'exclude'
+}
+
+export type SortDirection = 'asc' | 'desc'
+
+export interface SortConfig {
+  column: string
+  direction: SortDirection
+}
+
+export interface BadgeStyle {
+  backgroundColor: string
+  color: string
+}
diff --git a/datagouv-components/src/functions/api.ts b/datagouv-components/src/functions/api.ts
index f27303cf6..51c878117 100644
--- a/datagouv-components/src/functions/api.ts
+++ b/datagouv-components/src/functions/api.ts
@@ -24,6 +24,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')
@@ -35,37 +36,39 @@ export async function useFetch<DataT, ErrorT = never>(
     const query = deepToValue(options?.query)
     status.value = 'pending'
     try {
-      data.value = await ofetch<DataT | null>(urlValue, {
-        baseURL: config.apiBase,
-        params: params ?? query,
-        onRequest(param) {
-          if (config.onRequest) {
-            if (Array.isArray(config.onRequest)) {
-              config.onRequest.forEach(r => r(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)
-          }
+      data.value = isRaw
+        ? await ofetch<DataT | null>(urlValue, { params: params ?? query })
+        : await ofetch<DataT | null>(urlValue, {
+            baseURL: config.apiBase,
+            params: params ?? query,
+            onRequest(param) {
+              if (config.onRequest) {
+                if (Array.isArray(config.onRequest)) {
+                  config.onRequest.forEach(r => r(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)
+              }
 
-          if (locale) {
-            if (!options.params) {
-              options.params = {}
-            }
-            options.params['lang'] = locale
-          }
-        },
-        onRequestError: config.onRequestError,
-        onResponse: config.onResponse,
-        onResponseError: config.onResponseError,
-      })
+              if (locale) {
+                if (!options.params) {
+                  options.params = {}
+                }
+                options.params['lang'] = locale
+              }
+            },
+            onRequestError: config.onRequestError,
+            onResponse: config.onResponse,
+            onResponseError: config.onResponseError,
+          })
       status.value = 'success'
     }
     catch (e) {
@@ -90,9 +93,7 @@ export async function useFetch<DataT, ErrorT = never>(
 
   return {
     data,
-    refresh: async () => {
-      execute()
-    },
+    refresh: () => execute(),
     execute,
     clear: () => {
       data.value = null
diff --git a/datagouv-components/src/functions/api.types.ts b/datagouv-components/src/functions/api.types.ts
index d38f2fff7..058e7c21e 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/functions/tabular.ts b/datagouv-components/src/functions/tabular.ts
new file mode 100644
index 000000000..2fb5233e3
--- /dev/null
+++ b/datagouv-components/src/functions/tabular.ts
@@ -0,0 +1,60 @@
+import type { Component } from 'vue'
+import {
+  RiHashtag,
+  RiPriceTag3Line,
+  RiText,
+  RiCalendarLine,
+  RiCheckboxLine,
+} from '@remixicon/vue'
+import { useTranslation } from '../composables/useTranslation'
+import type { ColumnFilters, ColumnType } from '../components/TabularExplorer/types'
+
+export function hasFilterForColumn(filters: Record<string, ColumnFilters>, column: string): boolean {
+  const f = filters[column]
+  if (!f) return false
+  return !!(f.in?.length || f.exact != null || f.contains || f.null || f.min != null || f.max != null)
+}
+
+export function buildTypeConfig(t: (s: string) => string): Record<ColumnType, { icon: Component, label: string }> {
+  return {
+    number: { icon: RiHashtag, label: t('Nombre') },
+    categorical: { icon: RiPriceTag3Line, label: t('Catégoriel') },
+    text: { icon: RiText, label: t('Texte') },
+    date: { icon: RiCalendarLine, label: t('Date') },
+    boolean: { icon: RiCheckboxLine, label: t('Booléen') },
+  }
+}
+
+export function useFormatTabular() {
+  const { locale } = useTranslation()
+
+  function formatNumber(value: unknown): string {
+    const num = Number(value)
+    if (Number.isNaN(num)) return String(value)
+    return num.toLocaleString(locale)
+  }
+
+  function formatCellDate(value: unknown): string {
+    if (value == null || value === '') return '–'
+    const d = new Date(String(value))
+    if (Number.isNaN(d.getTime())) return String(value)
+    return new Intl.DateTimeFormat(locale, { day: '2-digit', month: '2-digit', year: 'numeric' }).format(d)
+  }
+
+  return { formatNumber, formatCellDate }
+}
+
+const TRUTHY_VALUES = ['true', '1', 'oui', 'yes']
+const FALSY_VALUES = ['false', '0', 'non', 'no']
+
+export function isTruthy(value: unknown): boolean {
+  if (typeof value === 'boolean') return value
+  if (typeof value === 'string') return TRUTHY_VALUES.includes(value.toLowerCase())
+  return Boolean(value)
+}
+
+export function isFalsy(value: unknown): boolean {
+  if (typeof value === 'boolean') return !value
+  if (typeof value === 'string') return FALSY_VALUES.includes(value.toLowerCase())
+  return !value
+}
diff --git a/datagouv-components/src/functions/tabularApi.ts b/datagouv-components/src/functions/tabularApi.ts
index 1881cc341..379d803a1 100644
--- a/datagouv-components/src/functions/tabularApi.ts
+++ b/datagouv-components/src/functions/tabularApi.ts
@@ -1,18 +1,16 @@
 import { ofetch } from 'ofetch'
 import { useComponentsConfig, type PluginConfig } from '../config'
+import type { SortConfig } from '../components/TabularExplorer/types'
 
-export type SortConfig = {
-  column: string
-  type: string
-} | null
+export type { SortConfig }
 
 /**
  * Call Tabular-api to get table content
  */
-export async function getData(config: PluginConfig, id: string, page: number, sortConfig?: SortConfig) {
+export async function getData(config: PluginConfig, id: string, page: number, sortConfig?: SortConfig | null) {
   let url = `${config.tabularApiUrl}/api/resources/${id}/data/?page=${page}&page_size=${config.tabularApiPageSize || 15}`
   if (sortConfig) {
-    url = url + `&${sortConfig.column}__sort=${sortConfig.type}`
+    url = url + `&${sortConfig.column}__sort=${sortConfig.direction}`
   }
   return await ofetch(url)
 }
diff --git a/datagouv-components/src/main.ts b/datagouv-components/src/main.ts
index 47abe01a2..615e75c03 100644
--- a/datagouv-components/src/main.ts
+++ b/datagouv-components/src/main.ts
@@ -94,6 +94,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'
 
@@ -120,6 +122,7 @@ export * from './functions/pagination'
 export * from './functions/resources'
 export * from './functions/reuses'
 export * from './functions/schemas'
+export * from './functions/tabular'
 export * from './functions/users'
 export * from './types/access_types'
 
@@ -318,4 +321,6 @@ export {
   SearchInput,
   SearchableSelect,
   SelectGroup,
+  InfiniteLoader,
+  TabularExplorer,
 }
diff --git a/pages/explore.vue b/pages/explore.vue
new file mode 100644
index 000000000..dd95a8a08
--- /dev/null
+++ b/pages/explore.vue
@@ -0,0 +1,148 @@
+<template>
+  <div class="container py-8">
+    <h1 class="mb-6">
+      Explore
+    </h1>
+
+    <div
+      v-if="!resourceId"
+      class="space-y-6"
+    >
+      <div class="flex flex-wrap gap-2">
+        <button
+          class="fr-btn fr-btn--secondary fr-btn--sm"
+          @click="selectResource('eaa95292-072d-4353-a6b8-1be65be0ab0f')"
+        >
+          Petitions du Sénat
+        </button>
+      </div>
+
+      <form
+        class="fr-search-bar fr-search-bar--lg w-full"
+        @submit.prevent="search"
+      >
+        <label
+          for="search-input"
+          class="sr-only"
+        >Rechercher un jeu de données</label>
+        <input
+          id="search-input"
+          v-model="query"
+          type="search"
+          class="input max-h-12 m-0 rounded-tl shadow-input-blue"
+          placeholder="Rechercher un jeu de données..."
+        >
+        <button
+          class="fr-btn"
+          type="submit"
+        >
+          Rechercher
+        </button>
+      </form>
+
+      <p
+        v-show="status === 'pending'"
+        class="text-sm text-gray-500"
+      >
+        Chargement...
+      </p>
+
+      <div
+        v-if="results && results.data.length > 0"
+        class="space-y-4"
+      >
+        <p class="text-sm text-gray-500">
+          {{ results.total }} résultat{{ results.total > 1 ? 's' : '' }}
+        </p>
+        <div
+          v-for="dataset in results.data"
+          :key="dataset.id"
+          class="border rounded p-4 space-y-2"
+        >
+          <p class="font-bold">
+            {{ dataset.title }}
+          </p>
+          <p
+            v-if="dataset.organization"
+            class="text-sm text-gray-500"
+          >
+            {{ dataset.organization.name }}
+          </p>
+          <div
+            v-if="dataset.resources.length > 0"
+            class="space-y-1"
+          >
+            <button
+              v-for="resource in dataset.resources"
+              :key="resource.id"
+              class="flex items-center gap-2 text-sm px-3 py-2 rounded hover:bg-blue-50 w-full text-left transition-colors"
+              @click="selectResource(resource.id)"
+            >
+              <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800 uppercase">
+                {{ resource.format }}
+              </span>
+              <span>{{ resource.title }}</span>
+              <span
+                v-if="resource.filesize"
+                class="text-gray-400 text-xs ml-auto"
+              >
+                {{ filesize(resource.filesize) }}
+              </span>
+            </button>
+          </div>
+          <p
+            v-else
+            class="text-sm text-gray-400 italic"
+          >
+            Aucune ressource
+          </p>
+        </div>
+      </div>
+
+      <p
+        v-else-if="results && results.data.length === 0 && status === 'success'"
+        class="text-sm text-gray-500 italic"
+      >
+        Aucun résultat
+      </p>
+    </div>
+
+    <div v-else>
+      <button
+        class="fr-btn fr-btn--tertiary-no-outline fr-btn--sm mb-4"
+        @click="resourceId = ''"
+      >
+        &larr; Retour à la recherche
+      </button>
+      <TabularExplorer
+        :key="resourceId"
+        :resource-id="resourceId"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { TabularExplorer, filesize } from '@datagouv/components-next'
+import type { Dataset } from '@datagouv/components-next'
+import type { PaginatedArray } from '~/types/types'
+
+useSeoMeta({ robots: 'noindex' })
+
+const query = ref('')
+const resourceId = ref('')
+const searchQuery = ref('')
+
+const { data: results, status } = await useAPI<PaginatedArray<Dataset>>(
+  computed(() => searchQuery.value ? `/api/1/datasets/?q=${encodeURIComponent(searchQuery.value)}&page_size=10` : ''),
+  { lazy: true, server: false },
+)
+
+function search() {
+  searchQuery.value = query.value
+}
+
+function selectResource(id: string) {
+  resourceId.value = id
+}
+</script>
diff --git a/utils/api.ts b/utils/api.ts
index 8e0c8da25..84c3daaa6 100644
--- a/utils/api.ts
+++ b/utils/api.ts
@@ -6,7 +6,7 @@ import type { ApiFetch, PaginatedArray } from '~/types/types'
 */
 export async function useAPI<T, U = T>(
   url: MaybeRefOrGetter<string>,
-  options?: UseFetchOptions<T, U> & { redirectOn404?: boolean, redirectOnSlug?: string },
+  options?: UseFetchOptions<T, U> & { redirectOn404?: boolean, redirectOnSlug?: string, raw?: boolean },
 ) {
   const { setCurrentOrganization, setCurrentUser } = useCurrentOwned()
   const isAdmin = isMeAdmin()
@@ -18,29 +18,33 @@ export async function useAPI<T, U = T>(
 
   const redirectOn404 = options && 'redirectOn404' in options && options.redirectOn404
   const redirectOnSlug = options && 'redirectOnSlug' in options && options.redirectOnSlug
-  const response = await useFetch(url, {
-    ...options,
-    $fetch: redirectOn404 ? useNuxtApp().$apiWith404 : useNuxtApp().$api,
-  })
-
-  const data = toValue(response.data) || {}
+  const isRaw = options?.raw
+  const fetchOptions = { ...options }
+  if (!isRaw) {
+    fetchOptions.$fetch = redirectOn404 ? useNuxtApp().$apiWith404 : useNuxtApp().$api
+  }
+  const response = await useFetch(url, fetchOptions)
 
-  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 (!isRaw) {
+    const data = toValue(response.data) || {}
 
-    await nuxtApp.runWithContext(() => navigateTo({ name: route.name, params: newParams, query: route.query, hash: route.hash }, { redirectCode: 301 }))
-  }
+    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 (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)
+      }
     }
   }