@datagouv/components-next 1.0.2-dev.163 → 1.0.2-dev.164

package/src/components/ResourceExplorer/ResourceExplorerViewer.vue

@@ -122,6 +122,11 @@
                 v-if="ogcWms"
                 :resource="resource"
               />
+              <PreviewUnavailable v-if="!hasPmtiles && !ogcWms && hasPmtilesError">
+                {{ t("La carte n'a pas pu être générée automatiquement pour ce fichier.") }}
+                <br>
+                <span class="text-gray-medium text-xs">{{ pmtilesError }}</span>
+              </PreviewUnavailable>
             </div>
             <div v-if="tab.key === 'data'">
               <JsonPreview
@@ -136,6 +141,10 @@
                 v-else-if="resource.format && resource.format.toLowerCase() === 'xml'"
                 :resource="resource"
               />
+              <ImagePreview
+                v-else-if="isImagePreviewFormat(resource.format)"
+                :resource="resource"
+              />
               <DatafairPreview
                 v-else-if="hasDatafairPreview"
                 :resource="resource"
@@ -229,7 +238,7 @@ import Metadata from '../ResourceAccordion/Metadata.vue'
 import SchemaBadge from '../ResourceAccordion/SchemaBadge.vue'
 import ResourceSelector from './ResourceSelector.vue'
 import { filesize, summarize } from '../../functions/helpers'
-import { getResourceFormatIcon, getResourceExternalUrl, getResourceFilesize } from '../../functions/resources'
+import { getResourceFormatIcon, getResourceExternalUrl, getResourceFilesize, isImagePreviewFormat } from '../../functions/resources'
 import { trackEvent } from '../../functions/matomo'
 import { useComponentsConfig } from '../../config'
 import { useFormatDate } from '../../functions/dates'
@@ -248,6 +257,9 @@ const PdfPreview = defineAsyncComponent(() =>
 const XmlPreview = defineAsyncComponent(() =>
   import('../ResourceAccordion/XmlPreview.client.vue'),
 )
+const ImagePreview = defineAsyncComponent(() =>
+  import('../ResourceAccordion/ImagePreview.client.vue'),
+)
 const DatafairPreview = defineAsyncComponent(() =>
   import('../ResourceAccordion/Datafair.client.vue'),
 )
@@ -275,6 +287,8 @@ const { formatRelativeIfRecentDate } = useFormatDate()
 const {
   hasTabularData,
   hasPmtiles,
+  hasPmtilesError,
+  pmtilesError,
   hasDatafairPreview,
   hasOpenAPIPreview,
   ogcService,

package/src/components/ReuseCard.vue

@@ -68,7 +68,7 @@ import { RiLockLine, RiSubtractLine } from '@remixicon/vue'
 import { computed } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 import { useFormatDate } from '../functions/dates'
-import type { Reuse } from '../types/reuses'
+import type { Reuse, ReuseV2 } from '../types/reuses'
 import type { TitleTag } from '../types/ui'
 import { useTranslation } from '../composables/useTranslation'
 import AppLink from './AppLink.vue'
@@ -77,7 +77,7 @@ import ReuseDetails from './ReuseDetails.vue'
 import Placeholder from './Placeholder.vue'
 
 const props = withDefaults(defineProps<{
-  reuse: Reuse
+  reuse: Reuse | ReuseV2
 
   /**
   * The reuseUrl is a route location object to allow Vue Router to navigate to the details of a reuse.

package/src/components/ReuseDetails.vue

@@ -32,11 +32,11 @@
 import { RiEyeLine, RiStarLine, RiSubtractLine } from '@remixicon/vue'
 import { useReuseType } from '../composables/useReuseType'
 import { summarize } from '../functions/helpers'
-import type { Reuse } from '../types/reuses'
+import type { Reuse, ReuseV2 } from '../types/reuses'
 import { useTranslation } from '../composables/useTranslation'
 
 const props = defineProps<{
-  reuse: Reuse
+  reuse: Reuse | ReuseV2
 }>()
 
 const { t } = useTranslation()

package/src/components/ReuseHorizontalCard.vue

@@ -60,7 +60,7 @@
 <script setup lang="ts">
 import { RiArchiveLine, RiLineChartLine, RiLockLine } from '@remixicon/vue'
 import type { RouteLocationRaw } from 'vue-router'
-import type { Reuse } from '../types/reuses'
+import type { Reuse, ReuseV2 } from '../types/reuses'
 import { useTranslation } from '../composables/useTranslation'
 import ReuseDetails from './ReuseDetails.vue'
 import Placeholder from './Placeholder.vue'
@@ -71,7 +71,7 @@ import ObjectCardShortDescription from './ObjectCardShortDescription.vue'
 import ObjectCardBadge from './ObjectCardBadge.vue'
 
 defineProps<{
-  reuse: Reuse
+  reuse: Reuse | ReuseV2
   reuseUrl?: RouteLocationRaw
   organizationUrl?: RouteLocationRaw
 }>()

package/src/components/Search/GlobalSearch.vue

@@ -266,7 +266,7 @@
                       name="reuse"
                       :reuse="result"
                     >
-                      <ReuseHorizontalCard :reuse="(result as Reuse)" />
+                      <ReuseHorizontalCard :reuse="(result as ReuseV2)" />
                     </slot>
                   </template>
                   <template v-else-if="currentTypeConfig?.class === 'organizations'">
@@ -368,7 +368,7 @@ import type { AsyncDataRequestStatus } from '../../functions/api.types'
 import type { Dataset } from '../../types/datasets'
 import type { Dataservice } from '../../types/dataservices'
 import type { Organization } from '../../types/organizations'
-import type { Reuse } from '../../types/reuses'
+import type { ReuseV2 } from '../../types/reuses'
 import type { TopicV2 } from '../../types/topics'
 import type { GlobalSearchConfig, SearchResponseByClass, SearchType, SortOption, FacetItem } from '../../types/search'
 import { getDefaultGlobalSearchConfig } from '../../types/search'

package/src/components/TabularExplorer/TabularCell.vue

@@ -21,12 +21,12 @@
     :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>
+    v-else-if="columnType === 'number' || columnType === 'year'"
+    :class="compact ? 'font-mono tabular-nums text-xs' : ''"
+  >{{ columnType === 'year' || noNumberFormat ? value : formatNumber(value) }}</span>
   <span
     v-else-if="columnType === 'date'"
-    :class="compact ? 'font-mono tabular-nums text-xs text-gray-title' : ''"
+    :class="compact ? 'font-mono tabular-nums text-xs' : ''"
   >{{ formatCellDate(value) }}</span>
   <span
     v-else
@@ -44,6 +44,7 @@ defineProps<{
   columnType: ColumnType
   categoryBadgeStyle?: BadgeStyle
   compact?: boolean
+  noNumberFormat?: boolean
 }>()
 
 const { t } = useTranslation()

package/src/components/TabularExplorer/TabularCellPopover.vue

@@ -128,7 +128,7 @@ function filterByValue() {
   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') {
+  if (cell.value.columnType === 'categorical' || cell.value.columnType === 'text' || cell.value.columnType === 'date' || cell.value.columnType === 'year') {
     const current = existing.in ?? []
     if (!current.includes(val)) {
       filters.value = { ...filters.value, [col]: { ...existing, in: [...current, val] } }

package/src/components/TabularExplorer/TabularExplorer.vue

@@ -1,5 +1,9 @@
 <template>
   <div>
+    <!-- Outside the branches below: this slot holds the query controls (search
+         input…), so it has to stay reachable when the query itself failed. -->
+    <slot name="toolbar-top" />
+
     <div
       v-if="previewError"
       class="max-w-3xl mx-auto"
@@ -162,12 +166,24 @@
 
             <!-- Rows -->
             <span class="flex items-center gap-1.5 text-xs text-gray-plain">
+              <RiLoader5Line
+                v-if="isRefreshing"
+                class="size-3 text-new-primary animate-spin"
+                aria-hidden="true"
+              />
               <RiLayoutRowLine
+                v-else
                 class="size-3 text-mention-grey"
                 aria-hidden="true"
               />
               <span class="font-bold hidden md:inline">{{ t('Lignes') }}</span>
-              <span class="font-mono tabular-nums">{{ tableData.meta.total.toLocaleString() }}/{{ totalLines.toLocaleString() }}</span>
+              <!-- The count stays in place while refreshing: the spinner already
+                   says it is stale, and swapping it for a word of another width
+                   would shift the whole toolbar on every search. -->
+              <span
+                data-testid="row-count"
+                class="font-mono tabular-nums"
+              >{{ tableData.meta.total.toLocaleString() }}/{{ totalLines.toLocaleString() }}</span>
             </span>
           </div>
         </div>
@@ -231,6 +247,7 @@
             <span
               v-for="af in activeFilters"
               :key="af.column"
+              :data-testid="`active-filter-${af.column}`"
               class="inline-flex items-center gap-1.5 bg-white border border-gray-silver rounded-lg pl-2 pr-1 py-1 text-xs"
             >
               <component
@@ -292,8 +309,12 @@
       <div
         v-if="displayedColumns.length > 0"
         ref="scrollContainer"
-        class="hidden md:block overflow-auto max-h-[70vh]"
-        :class="fullBleed ? 'relative left-1/2 w-[calc(100vw_-_4rem)] -translate-x-1/2' : '-mx-4'"
+        class="hidden md:block overflow-auto max-h-[70vh] transition-opacity"
+        :class="[
+          fullBleed ? 'relative left-1/2 w-[calc(100vw_-_4rem)] -translate-x-1/2' : '-mx-4',
+          { 'opacity-40': isRefreshing },
+        ]"
+        :aria-busy="isRefreshing"
       >
         <table class="text-sm border-collapse">
           <thead class="sticky top-0 bg-white z-10 shadow-[inset_0_-1px_0_0_#E5E5E5]">
@@ -380,14 +401,20 @@
                 :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' }"
+                :class="{ 'text-right font-mono tabular-nums text-sm': getColumnType(col) === 'number' || getColumnType(col) === 'date' || getColumnType(col) === 'year' }"
                 :style="columnWidths[col] ? { maxWidth: columnWidths[col] + 'px' } : { maxWidth: '300px' }"
                 @click="onCellClick(col, row[col], $event)"
               >
+                <AppLink
+                  v-if="isLinkColumn(col)"
+                  :to="getRowHref(row)"
+                  class="link"
+                >
+                  <TabularCell v-bind="cellProps(col, row)" />
+                </AppLink>
                 <TabularCell
-                  :value="row[col]"
-                  :column-type="getColumnType(col)"
-                  :category-badge-style="getColumnType(col) === 'categorical' ? getCategoryBadgeStyle(col, String(row[col])) : undefined"
+                  v-else
+                  v-bind="cellProps(col, row)"
                 />
               </td>
             </tr>
@@ -409,7 +436,9 @@
       <!-- Mobile: card layout -->
       <div
         v-if="displayedColumns.length > 0"
-        class="md:hidden space-y-2 px-1"
+        class="md:hidden space-y-2 px-1 transition-opacity"
+        :class="{ 'opacity-40': isRefreshing }"
+        :aria-busy="isRefreshing"
       >
         <div
           v-if="allRows.length === 0"
@@ -445,15 +474,26 @@
                 :title="col"
               >{{ col }}</span>
             </div>
+            <!-- Numbers and dates take their colour from here rather than from
+                 the cell, so a link wrapping one (see `rowHref`) keeps its own. -->
             <div
               data-cell
-              class="min-w-0 pl-4 cursor-pointer"
+              class="min-w-0 pl-4 cursor-pointer text-gray-title"
               @click="onCellClick(col, row[col], $event)"
             >
+              <AppLink
+                v-if="isLinkColumn(col)"
+                :to="getRowHref(row)"
+                class="link"
+              >
+                <TabularCell
+                  v-bind="cellProps(col, row)"
+                  compact
+                />
+              </AppLink>
               <TabularCell
-                :value="row[col]"
-                :column-type="getColumnType(col)"
-                :category-badge-style="getColumnType(col) === 'categorical' ? getCategoryBadgeStyle(col, String(row[col])) : undefined"
+                v-else
+                v-bind="cellProps(col, row)"
                 compact
               />
             </div>
@@ -597,6 +637,7 @@
 <script setup lang="ts">
 import { computed, nextTick, onUnmounted, ref, watch, useTemplateRef } from 'vue'
 import { ofetch } from 'ofetch'
+import { useElementSize } from '@vueuse/core'
 import { flip, shift, autoUpdate, useFloating } from '@floating-ui/vue'
 import { Dialog, DialogPanel, DialogTitle, Popover, PopoverButton, PopoverPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'
 import {
@@ -608,12 +649,14 @@ import {
   RiFilterLine,
   RiCloseLine,
   RiSearchLine,
+  RiLoader5Line,
 } from '@remixicon/vue'
 import { useFetch } from '../../functions/api'
 import { useComponentsConfig } from '../../config'
 import { useTranslation } from '../../composables/useTranslation'
 import { injectTabularProfile } from '../../composables/useTabularProfile'
-import { buildTypeConfig, buildFormatConfig, humanizeFormat, GENERIC_FORMATS, hasFilterForColumn as _hasFilterForColumn, isTruthy, isFalsy, resolveColumnType } from '../../functions/tabular'
+import { buildTypeConfig, buildFormatConfig, humanizeFormat, GENERIC_FORMATS, hasFilterForColumn as _hasFilterForColumn, isTruthy, isFalsy, resolveColumnType, buildGlobalSearchConditions } from '../../functions/tabular'
+import AppLink from '../AppLink.vue'
 import ClientOnly from '../ClientOnly.vue'
 import SimpleBanner from '../SimpleBanner.vue'
 import BrandedButton from '../BrandedButton.vue'
@@ -632,8 +675,42 @@ const props = defineProps<{
   // the host's padding. Used on the standalone explore page where the table
   // should span the whole screen while the toolbar stays inside the container.
   fullBleed?: boolean
+  // When set, searches across multiple columns using the Tabular API's or(...)
+  // parameter. Text and categorical columns get a __contains filter; number
+  // columns get a __exact filter (since __contains is not supported for numbers
+  // by the API). Year, date and boolean columns are excluded.
+  // Note: combined via AND with any existing column-specific `contains` filters,
+  // so it acts as an additional narrowing constraint, not a replacement.
+  globalSearch?: string
+  // Initial filters applied on mount, e.g. { 'Administration': { contains: 'Ministère' } }.
+  // Used when navigating from the detail page badge with query params.
+  initialFilters?: Record<string, ColumnFilters>
+  // When set, renders <a> tags inside the specified column cells for native
+  // browser UX (hover URL, ctrl+click, middle-click).
+  rowHref?: { columns: string[], href: (row: TabularRow) => string }
+  // Columns listed here render their values raw (no number formatting).
+  // Useful for identifier columns.
+  noFormatColumns?: string[]
 }>()
 
+function getRowHref(row: TabularRow): string | undefined {
+  return props.rowHref?.href(row)
+}
+
+function isLinkColumn(col: string): boolean {
+  return props.rowHref?.columns.includes(col) ?? false
+}
+
+function cellProps(col: string, row: TabularRow) {
+  const columnType = getColumnType(col)
+  return {
+    value: row[col],
+    columnType,
+    categoryBadgeStyle: columnType === 'categorical' ? getCategoryBadgeStyle(col, String(row[col])) : undefined,
+    noNumberFormat: props.noFormatColumns?.includes(col),
+  }
+}
+
 const { t } = useTranslation()
 const config = useComponentsConfig()
 
@@ -653,9 +730,39 @@ const dataUrl = computed(() =>
   `${config.tabularApiUrl}/api/resources/${props.resourceId}/data/`,
 )
 
+// Profile is shared with sibling components (e.g. DataStructure) via
+// `provideTabularProfile` in the parent. Falls back to a local fetch
+// when no parent provides it (standalone usage).
+// Fetched before the rows: `dataQuery` reads the column types to build the
+// global search, so the profile has to be resolved by the time it is evaluated.
+const { data: profileData, error: profileError, status: profileStatus } = await injectTabularProfile(() => props.resourceId)
+
+const allColumns = computed(() => profileData.value?.profile?.header ?? [])
+
+// Column type helpers
+function getColumnTypeFromName(col: string): ColumnType {
+  const profile = profileData.value?.profile
+  if (!profile) return 'text'
+  const colInfo = profile.columns[col]
+  if (!colInfo) return 'text'
+  return resolveColumnType(colInfo, profile.categorical.includes(col))
+}
+
+const columnTypesMap = computed(() => {
+  const map: Record<string, ColumnType> = {}
+  for (const col of allColumns.value) {
+    map[col] = getColumnTypeFromName(col)
+  }
+  return map
+})
+
+function getColumnType(col: string): ColumnType {
+  return columnTypesMap.value[col] ?? 'text'
+}
+
 // Sort & filter state
 const sort = ref<SortConfig | null>(null)
-const filters = ref<Record<string, ColumnFilters>>({})
+const filters = ref<Record<string, ColumnFilters>>({ ...props.initialFilters })
 
 const PAGE_SIZE = 50
 
@@ -687,15 +794,14 @@ const dataQuery = computed(() => {
       q[`${col}__isnotnull`] = ''
     }
   }
+  if (props.globalSearch && profileData.value?.profile) {
+    const conditions = buildGlobalSearchConditions(allColumns.value, getColumnType, props.globalSearch)
+    q.or = '(' + conditions.join(',') + ')'
+  }
   return q
 })
 
-const { data: tableData, error } = await useFetch<TabularDataResponse>(dataUrl, { raw: true, query: dataQuery })
-
-// Profile is shared with sibling components (e.g. DataStructure) via
-// `provideTabularProfile` in the parent. Falls back to a local fetch
-// when no parent provides it (standalone usage).
-const { data: profileData, error: profileError, status: profileStatus } = await injectTabularProfile(() => props.resourceId)
+const { data: tableData, error, status: dataStatus } = await useFetch<TabularDataResponse>(dataUrl, { raw: true, query: dataQuery })
 
 // The component renders nothing useful until the profile is available
 // (allColumns is derived from it). Surface a clear loading / error state
@@ -703,6 +809,9 @@ const { data: profileData, error: profileError, status: profileStatus } = await
 const profileLoading = computed(() => !profileData.value && (profileStatus.value === 'idle' || profileStatus.value === 'pending'))
 const previewError = computed(() => error.value || profileError.value)
 const previewLoading = computed(() => !previewError.value && (!tableData.value || profileLoading.value))
+// A search / filter / sort change refetches while the previous rows stay on
+// screen: without a signal, the table looks unchanged for several seconds.
+const isRefreshing = computed(() => dataStatus.value === 'pending' && !previewLoading.value)
 
 // Infinite scroll state
 const allRows = ref<TabularRow[]>([])
@@ -742,8 +851,6 @@ async function loadNextPage() {
 
 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) => {
@@ -832,18 +939,43 @@ function redistributeColumnWidths() {
   columnWidths.value = widths
 }
 
-// Measure once both data and profile are ready (so the <thead> is rendered with
-// content-driven natural widths), then distribute.
+// Measure the natural widths once (the <th> must still be auto-sized) and
+// distribute them. No-op once measured or while no column is displayed.
+function ensureMeasured() {
+  if (Object.keys(naturalWidths.value).length > 0) return
+  if (displayedColumns.value.length === 0) return
+  measureNaturalWidths()
+  redistributeColumnWidths()
+}
+
+// Drive measurement and re-stretch off the container's reactive width
+// (`useElementSize` wraps a ResizeObserver and disconnects it on unmount). The
+// width goes 0 -> N once the table is laid out in the DOM, which is also when
+// the <thead> carries its content-driven natural widths: the first non-zero
+// width measures the stable base, later changes (window resize) only
+// redistribute it.
+const { width: containerWidth } = useElementSize(scrollContainerRef)
+
+watch(containerWidth, (width) => {
+  if (width === 0) return
+  if (Object.keys(naturalWidths.value).length === 0) {
+    ensureMeasured()
+  }
+  else {
+    redistributeColumnWidths()
+  }
+})
+
+// Fallback: re-run once columns appear if they weren't available when the
+// container was first sized (standalone usage where the profile resolves late).
 watch(
   () => [tableData.value !== null, displayedColumns.value.length] as const,
   async ([dataReady, colCount]) => {
     if (!dataReady || colCount === 0) return
     if (Object.keys(naturalWidths.value).length > 0) return
     await nextTick()
-    measureNaturalWidths()
-    redistributeColumnWidths()
+    ensureMeasured()
   },
-  { immediate: true },
 )
 
 // Re-stretch the remaining columns whenever the displayed set changes (columns
@@ -912,6 +1044,9 @@ onUnmounted(() => {
 const activeCell = ref<CellInfo | null>(null)
 
 function onCellClick(col: string, value: unknown, event: MouseEvent) {
+  // A link inside a cell (see `rowHref`) owns its clicks: navigate, don't open
+  // the popover on top of the page we're leaving.
+  if ((event.target as HTMLElement).closest('a')) return
   const el = (event.target as HTMLElement).closest('[data-cell]') as HTMLElement | null
   if (!el) return
   if (activeCell.value && activeCell.value.element === el) {
@@ -935,7 +1070,12 @@ const activeFilters = computed<ActiveFilter[]>(() => {
       parts.push(`= ${filter.in.join(', ')}`)
     }
     if (filter.exact != null) {
-      parts.push(`= ${filter.exact === 'true' ? t('Vrai') : t('Faux')}`)
+      if (getColumnType(col) === 'boolean') {
+        parts.push(`= ${filter.exact === 'true' ? t('Vrai') : t('Faux')}`)
+      }
+      else {
+        parts.push(`= ${filter.exact}`)
+      }
     }
     if (filter.contains) {
       parts.push(`${t('contient')} "${filter.contains}"`)
@@ -998,27 +1138,6 @@ function toggleMobileFilterColumn(col: string) {
   mobileFilterExpandedCol.value = mobileFilterExpandedCol.value === col ? null : col
 }
 
-// Column type helpers
-function getColumnTypeFromName(col: string): ColumnType {
-  const profile = profileData.value?.profile
-  if (!profile) return 'text'
-  const colInfo = profile.columns[col]
-  if (!colInfo) return 'text'
-  return resolveColumnType(colInfo, profile.categorical.includes(col))
-}
-
-const columnTypesMap = computed(() => {
-  const map: Record<string, ColumnType> = {}
-  for (const col of allColumns.value) {
-    map[col] = getColumnTypeFromName(col)
-  }
-  return map
-})
-
-function getColumnType(col: string): ColumnType {
-  return columnTypesMap.value[col] ?? 'text'
-}
-
 function getColumnProfile(col: string) {
   return profileData.value?.profile?.profile?.[col] ?? null
 }

package/src/components/TabularExplorer/TabularFilterContent.vue

@@ -61,18 +61,22 @@
       </div>
     </div>
 
-    <!-- Search (contains) -->
-    <div class="px-3 py-2 border-b border-black/10">
+    <!-- Search (contains) or date filter -->
+    <div
+      v-if="columnType !== 'boolean'"
+      class="px-3 py-2 border-b border-black/10"
+    >
       <div class="relative">
-        <RiSearchLine
+        <component
+          :is="searchField.icon"
           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"
+          :type="searchField.type"
           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...')"
+          :placeholder="searchField.placeholder"
         >
       </div>
     </div>
@@ -154,14 +158,14 @@
 
     <!-- Number range -->
     <form
-      v-if="columnType === 'number' && columnProfile"
+      v-if="(columnType === 'number' || columnType === 'year') && 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="tabular-nums">{{ columnType === 'year' ? profileMin : formatNumber(profileMin) }}</span>
         <span class="text-gray-medium">—</span>
-        <span class="tabular-nums">{{ formatNumber(profileMax) }}</span>
+        <span class="tabular-nums">{{ columnType === 'year' ? profileMax : formatNumber(profileMax) }}</span>
       </div>
       <div class="flex items-center gap-2">
         <input
@@ -213,6 +217,7 @@ import {
   RiArrowUpLine,
   RiArrowDownLine,
   RiSearchLine,
+  RiCalendarLine,
   RiCheckLine,
 } from '@remixicon/vue'
 import { useTranslation } from '../../composables/useTranslation'
@@ -239,13 +244,25 @@ const { formatNumber } = useFormatTabular()
 
 const search = ref('')
 
+// Numbers, years and dates are matched exactly (the API has no `contains` for
+// them), so the field offers the matching native picker instead of a text search.
+const searchField = computed(() => {
+  switch (props.columnType) {
+    case 'date': return { icon: RiCalendarLine, type: 'date', placeholder: '' }
+    case 'number':
+    case 'year': return { icon: RiSearchLine, type: 'number', placeholder: t('Rechercher...') }
+    default: return { icon: RiSearchLine, type: 'text', placeholder: t('Rechercher...') }
+  }
+})
+
 watchDebounced(search, (q) => {
   const existing = filters.value[props.column] ?? {}
+  const operator = props.columnType === 'number' || props.columnType === 'year' || props.columnType === 'date' ? 'exact' : 'contains'
   if (q) {
-    filters.value = { ...filters.value, [props.column]: { ...existing, contains: q } }
+    filters.value = { ...filters.value, [props.column]: { ...existing, [operator]: q } }
   }
   else {
-    const { contains: _, ...rest } = existing
+    const { [operator]: _, ...rest } = existing
     filters.value = { ...filters.value, [props.column]: rest }
   }
 }, { debounce: 300 })

package/src/components/TabularExplorer/TabularFilterPopover.vue

@@ -23,6 +23,7 @@
           static
           class="bg-white border border-black/10 rounded-lg shadow-md w-64 absolute z-[800]"
           :style="floatingStyles"
+          :data-testid="`column-filter-${column}`"
         >
           <!-- Title -->
           <div class="flex items-center justify-between px-3 py-2 border-b border-black/10">

package/src/components/TabularExplorer/types.ts

@@ -51,8 +51,8 @@ export type TabularColumnProfile = {
   tops: TabularTopValue[]
   nb_distinct: number
   nb_missing_values: number
-  min?: number
-  max?: number
+  min?: number | string
+  max?: number | string
   std?: number
   mean?: number
 }
@@ -62,7 +62,7 @@ export type TabularTopValue = {
   count: number
 }
 
-export type ColumnType = 'number' | 'categorical' | 'text' | 'date' | 'boolean'
+export type ColumnType = 'number' | 'categorical' | 'text' | 'date' | 'boolean' | 'year'
 
 export type ColumnFilters = {
   in?: string[]

package/src/composables/useHasTabularData.ts

@@ -1,4 +1,5 @@
 import { useComponentsConfig } from '../config'
+import { hasTabularParsingError } from '../functions/resources'
 import type { Resource } from '../types/resources'
 
 /**
@@ -20,7 +21,7 @@ export const useHasTabularData = () => {
     return (
       config.tabularApiUrl
       && resource.extras['analysis:parsing:parsing_table']
-      && !resource.extras['analysis:parsing:error']
+      && !hasTabularParsingError(resource)
       && !sourceUnreachable
       && (config.tabularAllowRemote || resource.filetype === 'file')
     )