@datagouv/components-next 1.0.2-dev.230 → 1.0.2-dev.232

package/src/components/ResourceListItem.vue

@@ -4,41 +4,82 @@
     v-bind="$attrs"
     :to
     :replace
-    :class="selected ? '[&&]:!bg-gray-200' : '[&&]:hover:!bg-gray-100'"
-    class="grid h-7 w-full grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-1 rounded px-1 py-1 text-left !bg-none !no-underline"
+    :class="[
+      selected ? '[&&]:!bg-gray-200' : '[&&]:hover:!bg-gray-100',
+      // Expanded, each row is its own grid: fixed tracks keep the extra columns
+      // aligned from one row to the next, where `auto` tracks would follow each
+      // row's content.
+      expanded ? 'grid-cols-[auto_minmax(0,1fr)_13rem_5rem_6rem_4rem_6.5rem]' : 'grid-cols-[auto_minmax(0,1fr)_auto_1.25rem]',
+    ]"
+    class="grid h-8 w-full items-center gap-1 rounded px-1 py-1 text-left !bg-none !no-underline"
     @pointerenter="openOnHover"
     @pointerleave="closeTooltip"
-    @focus="show = true"
+    @focus="show = !expanded"
     @blur="closeTooltip"
   >
-    <span
-      :class="[iconColor, '[&_svg]:fill-current']"
-      class="flex size-5 shrink-0 items-center justify-center rounded-[1px]"
-    >
-      <component
-        :is="iconComponent"
-        class="size-4"
-        aria-hidden="true"
-      />
-    </span>
+    <ResourceIconBadge :resource />
     <div class="flex min-w-0 items-baseline gap-0.5 whitespace-nowrap leading-4">
       <span
-        class="truncate text-[13px]"
+        class="truncate text-[14px]"
         :class="selected ? 'font-extrabold text-gray-title' : 'font-medium text-gray-medium'"
       >{{ resource.title || t('Fichier sans nom') }}</span>
-      <template v-if="humanFilesize">
-        <span class="shrink-0 text-[13px] text-gray-medium">·</span>
-        <span class="shrink-0 text-[12px] text-gray-medium">{{ humanFilesize }}</span>
+      <template v-if="humanFilesize && !expanded">
+        <span class="shrink-0 text-[14px] text-gray-medium">·</span>
+        <span class="shrink-0 text-[13px] text-gray-medium">{{ humanFilesize }}</span>
       </template>
     </div>
+    <template v-if="expanded">
+      <span class="truncate text-[13px] text-gray-medium">
+        <TranslationT keypath="Mis à jour le {date}">
+          <template #date>
+            <FormattedDate :date="resource.last_modified" />
+          </template>
+        </TranslationT>
+      </span>
+      <span class="text-right text-[13px] tabular-nums text-gray-medium">{{ humanFilesize }}</span>
+    </template>
     <!-- Capped and truncated: an `auto` grid track floors at its content width, so an
          unusually long format (`www:link-1.0-http--samples`) would otherwise squeeze
          the title track to nothing and overflow the fixed-height row. -->
     <span
       v-if="resource.format"
-      class="max-w-24 truncate rounded bg-gray-lower px-1.5 py-0.5 text-[12px] uppercase leading-4 text-gray-medium"
+      class="max-w-24 justify-self-start truncate rounded bg-gray-lower px-1.5 py-0.5 text-[13px] uppercase leading-4 text-gray-medium"
       :title="resource.format"
     >{{ resource.format }}</span>
+    <!-- Holds the format track so the next columns stay in place. -->
+    <span v-else />
+    <span
+      v-if="expanded"
+      class="inline-flex items-center justify-end gap-1 text-[13px] tabular-nums text-gray-medium"
+    >
+      <RiDownloadLine
+        class="size-3"
+        aria-hidden="true"
+      />
+      {{ summarize(resource.metrics.views) }}
+    </span>
+    <!-- Compact, the eye is labelled in the hover card; expanded, the row has room
+         for the label and no hover card. -->
+    <span
+      v-if="expanded && hasPreview"
+      class="flex w-fit items-center gap-0.5 justify-self-end rounded bg-gray-lower px-1.5 py-0.5 text-[13px] leading-4 text-gray-medium"
+    >
+      <RiEyeLine
+        class="size-3.5"
+        aria-hidden="true"
+      />
+      {{ t('Explorable') }}
+    </span>
+    <span
+      v-else
+      class="flex items-center justify-center"
+    >
+      <RiEyeLine
+        v-if="hasPreview"
+        class="size-4 text-gray-medium"
+        aria-hidden="true"
+      />
+    </span>
   </AppLink>
 
   <!-- Hover card: the row truncates the title, so surface the full name plus the
@@ -84,6 +125,16 @@
             {{ summarize(resource.metrics.views) }}
           </span>
         </div>
+        <span
+          v-if="hasPreview"
+          class="mt-1.5 flex w-fit items-center gap-0.5 rounded bg-gray-lower px-1.5 py-0.5 text-[12px] leading-4 text-gray-medium"
+        >
+          <RiEyeLine
+            class="size-3"
+            aria-hidden="true"
+          />
+          {{ t('Explorable') }}
+        </span>
       </div>
     </Teleport>
   </ClientOnly>
@@ -94,15 +145,17 @@ import { computed, ref, useTemplateRef } from 'vue'
 import { autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/vue'
 import { useEventListener } from '@vueuse/core'
 import type { RouteLocationRaw } from 'vue-router'
-import { RiDownloadLine } from '@remixicon/vue'
+import { RiDownloadLine, RiEyeLine } from '@remixicon/vue'
 import AppLink from './AppLink.vue'
 import ClientOnly from './ClientOnly.vue'
-import File from './Icons/File.vue'
 import FormattedDate from './FormattedDate.vue'
+import ResourceIconBadge from './ResourceIconBadge.vue'
 import TranslationT from './TranslationT.vue'
-import { getResourceFormatIcon, getResourceIconColor, getResourceFilesize } from '../functions/resources'
+import { getResourceFilesize } from '../functions/resources'
 import { filesize, summarize } from '../functions/helpers'
+import { useResourceCapabilities } from '../composables/useResourceCapabilities'
 import { useTranslation } from '../composables/useTranslation'
+import type { Dataset, DatasetV2 } from '../types/datasets'
 import type { Resource } from '../types/resources'
 
 // The hover card below is a second root node, so Vue drops fallthrough attributes
@@ -115,20 +168,22 @@ defineOptions({ inheritAttrs: false })
 // truth for the selection.
 const props = withDefaults(defineProps<{
   resource: Resource
+  // Some previews (Data Fair, OpenAPI) depend on the dataset's organization.
+  dataset: Dataset | DatasetV2
   to: RouteLocationRaw
   selected?: boolean
   replace?: boolean
+  // Full-width list: the row also shows the update date, size and downloads.
+  expanded?: boolean
 }>(), {
   selected: false,
   replace: false,
+  expanded: false,
 })
 
 const { t } = useTranslation()
 
-// Render the icon directly (not via ResourceIcon which forces a gray color) so the
-// colored badge can tint it through currentColor + [&_svg]:fill-current.
-const iconComponent = computed(() => (props.resource.format ? getResourceFormatIcon(props.resource.format) : null) ?? File)
-const iconColor = computed(() => getResourceIconColor(props.resource.format))
+const { hasPreview } = useResourceCapabilities(() => props.resource, () => props.dataset)
 
 const humanFilesize = computed(() => {
   const size = getResourceFilesize(props.resource)
@@ -151,9 +206,10 @@ const { floatingStyles } = useFloating(rowEl, card, {
 
 // A tap fires a pointer enter too, so the card would flash on every touch selection
 // in the mobile resource picker. Only a real pointer opens it — keyboard focus still
-// does, through @focus.
+// does, through @focus. The expanded row already shows everything the card holds,
+// so it never opens there.
 function openOnHover(event: PointerEvent) {
-  if (event.pointerType === 'mouse') show.value = true
+  if (event.pointerType === 'mouse' && !props.expanded) show.value = true
 }
 
 function closeTooltip() {

package/src/components/TabularExplorer/TabularActiveFilters.vue

@@ -1,79 +1,119 @@
 <template>
   <div
-    v-if="activeFilters.length > 0 || sort"
-    class="flex flex-wrap items-center gap-1.5"
+    v-if="activeFilters.length > 0 || sort || globalSearch"
+    class="flex items-center justify-between gap-2"
   >
-    <!-- Sort chip -->
-    <span
-      v-if="sort"
-      class="inline-flex h-6 items-center gap-1 rounded border border-new-primary/20 bg-new-primary/10 pl-1.5 pr-0.5 text-[12px] leading-4 text-new-primary"
-    >
-      <component
-        :is="sort.direction === 'asc' ? RiArrowUpLine : RiArrowDownLine"
-        class="size-3.5"
-        aria-hidden="true"
-      />
-      <span class="font-medium">{{ sort.column }}</span>
-      <span>{{ sort.direction === 'asc' ? t('croissant') : t('décroissant') }}</span>
-      <button
-        :aria-label="t('Supprimer le tri')"
-        class="flex size-5 items-center justify-center rounded hover:bg-new-primary/15"
-        @click="sort = null"
+    <div class="flex min-w-0 flex-wrap items-center gap-1.5">
+      <!-- Sort chip -->
+      <span
+        v-if="sort"
+        class="inline-flex h-6 items-center gap-1 rounded border border-new-primary/20 bg-new-primary/10 pl-1.5 pr-0.5 text-[12px] leading-4 text-new-primary"
       >
-        <RiCloseLine
+        <component
+          :is="sort.direction === 'asc' ? RiArrowUpLine : RiArrowDownLine"
           class="size-3.5"
           aria-hidden="true"
         />
-      </button>
-    </span>
+        <span class="font-medium">{{ sort.column }}</span>
+        <span>{{ sort.direction === 'asc' ? t('croissant') : t('décroissant') }}</span>
+        <button
+          :aria-label="t('Supprimer le tri')"
+          class="flex size-5 items-center justify-center rounded hover:bg-new-primary/15"
+          @click="sort = null"
+        >
+          <RiCloseLine
+            class="size-3.5"
+            aria-hidden="true"
+          />
+        </button>
+      </span>
 
-    <!-- Filter chips -->
-    <span
-      v-for="af in activeFilters"
-      :key="af.column"
-      :data-testid="`active-filter-${af.column}`"
-      class="inline-flex h-6 items-center gap-1 rounded border border-new-primary/20 bg-new-primary/10 pl-1.5 pr-0.5 text-[12px] leading-4 text-new-primary"
-    >
-      <component
-        :is="getColumnDisplay(af.column).icon"
-        class="size-3.5"
-        aria-hidden="true"
-      />
-      <span class="font-medium">{{ af.column }}</span>
-      <span>{{ af.label }}</span>
-      <button
-        :aria-label="t('Supprimer ce filtre')"
-        class="flex size-5 items-center justify-center rounded hover:bg-new-primary/15"
-        @click="removeFilter(af.column)"
+      <!-- Global search chip -->
+      <span
+        v-if="globalSearch"
+        class="inline-flex h-6 items-center gap-1 rounded border border-new-primary/20 bg-new-primary/10 pl-1.5 pr-0.5 text-[12px] leading-4 text-new-primary"
       >
-        <RiCloseLine
+        <RiSearchLine
           class="size-3.5"
           aria-hidden="true"
         />
-      </button>
-    </span>
+        <span class="font-medium">{{ t('Toutes les colonnes') }}</span>
+        <span>{{ t('contient') }} "{{ globalSearch }}"</span>
+        <button
+          :aria-label="t('Supprimer la recherche')"
+          class="flex size-5 items-center justify-center rounded hover:bg-new-primary/15"
+          @click="globalSearch = ''"
+        >
+          <RiCloseLine
+            class="size-3.5"
+            aria-hidden="true"
+          />
+        </button>
+      </span>
 
-    <!-- Clear all -->
-    <BrandedButton
-      v-if="withClear"
-      color="tertiary"
-      size="2xs"
-      :icon="RiCloseLine"
-      @click="clearAllFilters(); sort = null"
-    >
-      {{ t('Tout effacer') }}
-    </BrandedButton>
+      <!-- Filter chips -->
+      <span
+        v-for="af in activeFilters"
+        :key="af.column"
+        :data-testid="`active-filter-${af.column}`"
+        class="inline-flex h-6 items-center gap-1 rounded border border-new-primary/20 bg-new-primary/10 pl-1.5 pr-0.5 text-[12px] leading-4 text-new-primary"
+      >
+        <component
+          :is="getColumnDisplay(af.column).icon"
+          class="size-3.5"
+          aria-hidden="true"
+        />
+        <span class="font-medium">{{ af.column }}</span>
+        <span>{{ af.label }}</span>
+        <button
+          :aria-label="t('Supprimer ce filtre')"
+          class="flex size-5 items-center justify-center rounded hover:bg-new-primary/15"
+          @click="removeFilter(af.column)"
+        >
+          <RiCloseLine
+            class="size-3.5"
+            aria-hidden="true"
+          />
+        </button>
+      </span>
+    </div>
+
+    <div class="flex shrink-0 items-center gap-1">
+      <!-- A sort alone narrows nothing: the file would be the whole resource, which
+           the resource's own download already gives. And with no matching row, the
+           API answers an empty file, without even the header. -->
+      <BrandedButton
+        v-if="(activeFilters.length > 0 || globalSearch) && tableData?.meta.total"
+        color="tertiary"
+        size="2xs"
+        :icon="RiDownloadLine"
+        :href="filteredDownloadUrl"
+      >
+        {{ t('Télécharger les données filtrées') }}
+      </BrandedButton>
+      <!-- Clear all -->
+      <BrandedButton
+        v-if="withClear"
+        color="tertiary"
+        size="2xs"
+        :icon="RiCloseLine"
+        @click="clearAllFilters(); sort = null"
+      >
+        {{ t('Tout effacer') }}
+      </BrandedButton>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { RiArrowDownLine, RiArrowUpLine, RiCloseLine } from '@remixicon/vue'
+import { RiArrowDownLine, RiArrowUpLine, RiCloseLine, RiDownloadLine, RiSearchLine } from '@remixicon/vue'
 import BrandedButton from '../BrandedButton.vue'
 import { useTranslation } from '../../composables/useTranslation'
 import { useTabularContext } from './useTabularContext'
 
+// Framing (borders, padding) belongs to the call site, like the toolbar's.
 defineProps<{ withClear?: boolean }>()
 
 const { t } = useTranslation()
-const { activeFilters, sort, removeFilter, clearAllFilters, getColumnDisplay } = useTabularContext()
+const { tableData, activeFilters, sort, globalSearch, removeFilter, clearAllFilters, getColumnDisplay, filteredDownloadUrl } = useTabularContext()
 </script>

package/src/components/TabularExplorer/TabularExplorer.vue

@@ -8,11 +8,16 @@
 
     <!-- Same skeleton as the Suspense fallback above us: in both cases the slot isn't
          rendered yet, so its toolbar is a placeholder too. -->
-    <TabularSkeleton v-else-if="previewLoading" />
+    <TabularSkeleton
+      v-else-if="previewLoading"
+      :search-input
+    />
 
     <!-- Loaded: the consumer composes the parts (toolbar, table, mobile sheet) from
-         the provided context, so it controls the framing and layout. -->
-    <template v-else-if="tableData && profileData">
+         the provided context, so it controls the framing and layout. Once loaded, it
+         stays: a failed search or filter only empties the rows, so the controls that
+         caused it remain there to undo it. -->
+    <template v-else-if="(tableData || loadedOnce) && profileData">
       <slot />
     </template>
   </div>
@@ -32,15 +37,11 @@ import type { TabularDataResponse, TabularRow, SortConfig, ColumnFilters, DateFi
 import { provideTabularContext, type ActiveFilter } from './useTabularContext'
 import { useColumnMetadata } from './useColumnMetadata'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   resourceId: string
-  // 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
+  // Whether the toolbar shows its search field. A page with a search of its own
+  // hides it and drives the search through `v-model:global-search` instead.
+  searchInput?: boolean
   // Filters seeded on mount, e.g. { 'Administration': { contains: 'Ministère' } }.
   // The explorer owns them afterwards: later changes to this prop are ignored,
   // so pass a fresh instance (or remount) to reset them.
@@ -49,7 +50,18 @@ const props = defineProps<{
   // Same ownership rule as `initialFilters`: the explorer owns it afterwards,
   // and the user can drop it from the active-sort chip.
   initialSort?: SortConfig
-}>()
+}>(), {
+  searchInput: true,
+})
+
+// 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.
+// Combined via AND with any column-specific `contains` filter, so it acts as an
+// additional narrowing constraint, not a replacement.
+// Owned here like the filters; a parent binds it to drive or keep it.
+const globalSearch = defineModel<string>('globalSearch', { default: '' })
 
 const { t } = useTranslation()
 const config = useComponentsConfig()
@@ -85,8 +97,10 @@ const filters = ref<Record<string, ColumnFilters>>({ ...props.initialFilters })
 
 const PAGE_SIZE = 50
 
-const dataQuery = computed(() => {
-  const q: Record<string, string | number> = { page: 1, page_size: PAGE_SIZE }
+// What the table shows (sort, filters, search), apart from its pagination: the
+// filtered download sends the very same params, so the file can't drift from the table.
+const tableQuery = computed(() => {
+  const q: Record<string, string | number> = {}
   if (sort.value) {
     q[`${sort.value.column}__sort`] = sort.value.direction
   }
@@ -116,21 +130,28 @@ const dataQuery = computed(() => {
       Object.assign(q, buildDateFilterParams(col, filter.date))
     }
   }
-  if (props.globalSearch && profileData.value?.profile) {
-    const conditions = buildGlobalSearchConditions(allColumns.value, getColumnType, props.globalSearch)
+  if (globalSearch.value && profileData.value?.profile) {
+    const conditions = buildGlobalSearchConditions(allColumns.value, getColumnType, globalSearch.value)
     q.or = '(' + conditions.join(',') + ')'
   }
   return q
 })
 
+const dataQuery = computed(() => ({ page: 1, page_size: PAGE_SIZE, ...tableQuery.value }))
+
 const { data: tableData, error, status: dataStatus } = await useFetch<TabularDataResponse>(dataUrl, { raw: true, query: dataQuery })
 
+// A failed request clears `tableData`: telling a resource that can't be previewed
+// from a search or filter the API rejects needs to know whether it ever loaded.
+const loadedOnce = ref(!!tableData.value)
+
 // The component renders nothing useful until the profile is available
 // (allColumns is derived from it). Surface a clear loading / error state
 // so we don't end up with an empty table + a spinner running forever.
 const profileLoading = computed(() => !profileData.value && (profileStatus.value === 'idle' || profileStatus.value === 'pending'))
-const previewError = computed(() => error.value || profileError.value)
-const previewLoading = computed(() => !previewError.value && (!tableData.value || profileLoading.value))
+const previewError = computed(() => profileError.value || (!loadedOnce.value && error.value))
+const queryFailed = computed(() => loadedOnce.value && !!error.value)
+const previewLoading = computed(() => !previewError.value && (profileLoading.value || (!tableData.value && !loadedOnce.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)
@@ -145,10 +166,15 @@ const generation = ref(0)
 watch(() => tableData.value, (data) => {
   generation.value++
   if (data) {
+    loadedOnce.value = true
     allRows.value = [...data.data]
     currentPage.value = 1
     hasMore.value = data.data.length < data.meta.total
   }
+  else if (queryFailed.value) {
+    allRows.value = []
+    hasMore.value = false
+  }
 }, { immediate: true })
 
 async function loadNextPage() {
@@ -275,8 +301,18 @@ function removeFilter(column: string) {
   filters.value = rest
 }
 
+// The Tabular API's CSV export takes the params of the data endpoint and ignores the
+// pagination: the file holds every filtered row, not just the pages loaded on screen.
+// All the columns, not only the displayed ones: the API splits `columns` on every
+// comma, so a column whose name holds one can't be requested by name.
+const filteredDownloadUrl = computed(() => {
+  const params = new URLSearchParams(Object.entries(tableQuery.value).map(([key, value]) => [key, String(value)]))
+  return `${config.tabularApiUrl}/api/resources/${props.resourceId}/data/csv/?${params}`
+})
+
 function clearAllFilters() {
   filters.value = {}
+  globalSearch.value = ''
 }
 
 function hasFilterForColumn(col: string): boolean {
@@ -300,6 +336,10 @@ provideTabularContext({
   activeFilters,
   removeFilter,
   clearAllFilters,
+  globalSearch,
+  searchInput: computed(() => props.searchInput),
+  queryFailed,
+  filteredDownloadUrl,
   hasFilterForColumn,
   allColumns,
   visibleColumns,

package/src/components/TabularExplorer/TabularSearchInput.vue

@@ -0,0 +1,40 @@
+<template>
+  <label class="flex h-8 w-[clamp(160px,22vw,220px)] min-w-0 shrink-0 items-center gap-1 rounded border border-gray-default bg-gray-some px-2">
+    <RiSearchLine
+      class="size-3.5 shrink-0 text-gray-medium"
+      aria-hidden="true"
+    />
+    <input
+      v-model="text"
+      type="search"
+      class="min-w-0 flex-1 bg-transparent text-[13px] outline-none placeholder:text-gray-medium [&::-webkit-search-cancel-button]:appearance-none"
+      :aria-label="t('Rechercher une valeur')"
+      :placeholder="t('Rechercher une valeur')"
+    >
+  </label>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { RiSearchLine } from '@remixicon/vue'
+import { useComponentsConfig } from '../../config'
+import { useDebouncedRef } from '../../composables/useDebouncedRef'
+import { useTranslation } from '../../composables/useTranslation'
+import { useTabularContext } from './useTabularContext'
+
+const { t } = useTranslation()
+const config = useComponentsConfig()
+const { globalSearch } = useTabularContext()
+
+// Only typing is debounced: each settled value is a request to the Tabular API.
+const text = ref(globalSearch.value)
+const { debounced } = useDebouncedRef(text, config.searchDebounce ?? 300)
+watch(debounced, (value) => {
+  globalSearch.value = value.trim()
+})
+
+// Cleared from elsewhere (its chip, "Tout effacer"): the field follows.
+watch(globalSearch, (value) => {
+  if (value !== text.value.trim()) text.value = value
+})
+</script>

package/src/components/TabularExplorer/TabularSkeleton.vue

@@ -1,9 +1,13 @@
 <template>
-  <!-- Toolbar row — mirrors TabularToolbar: the mobile filter button on the left (it
-       only shows below md), and the columns menu (h-6 button, which drives the row
-       height) plus the rows info on the right. The active-filters area stays empty
-       until the user filters, so nothing stands in for it. -->
+  <!-- Toolbar row — mirrors TabularToolbar: the search field and the mobile filter
+       button (it only shows below md) on the left, the columns menu plus the rows info
+       on the right. The active-filters line stays empty until the user filters, so
+       nothing stands in for it. -->
   <div class="animate-pulse-placeholder flex shrink-0 items-center gap-2 border-b border-gray-default p-2">
+    <div
+      v-if="searchInput"
+      class="h-8 w-[clamp(160px,22vw,220px)] shrink-0 rounded bg-gray-200"
+    />
     <div class="h-6 w-24 rounded bg-gray-200 md:hidden" />
     <div class="flex flex-1 items-center justify-end gap-4">
       <div class="h-6 w-24 rounded bg-gray-200" />
@@ -83,10 +87,14 @@
 <script setup lang="ts">
 import { useTranslation } from '../../composables/useTranslation'
 
-defineProps<{
+withDefaults(defineProps<{
   // Fill the available height (fullscreen) instead of the default capped height.
   fill?: boolean
-}>()
+  // Same as the explorer's: whether the toolbar has its search field.
+  searchInput?: boolean
+}>(), {
+  searchInput: true,
+})
 
 const { t } = useTranslation()
 </script>

package/src/components/TabularExplorer/TabularTable.vue

@@ -113,11 +113,12 @@
               class="py-16 text-center"
             >
               <div class="flex flex-col items-center gap-2">
-                <RiSearchLine
+                <component
+                  :is="queryFailed ? RiErrorWarningLine : RiSearchLine"
                   class="size-8 text-gray-low"
                   aria-hidden="true"
                 />
-                <span class="text-sm text-gray-low">{{ t('Aucun résultat trouvé.') }}</span>
+                <span class="text-sm text-gray-low">{{ emptyMessage }}</span>
               </div>
             </td>
           </tr>
@@ -175,11 +176,12 @@
         class="py-16 text-center"
       >
         <div class="flex flex-col items-center gap-2">
-          <RiSearchLine
+          <component
+            :is="queryFailed ? RiErrorWarningLine : RiSearchLine"
             class="size-8 text-gray-low"
             aria-hidden="true"
           />
-          <span class="text-sm text-gray-low">{{ t('Aucun résultat trouvé.') }}</span>
+          <span class="text-sm text-gray-low">{{ emptyMessage }}</span>
         </div>
       </div>
       <div
@@ -256,7 +258,7 @@
 <script setup lang="ts">
 import { computed, nextTick, onUnmounted, ref, useTemplateRef, watch } from 'vue'
 import { useElementSize, useScroll } from '@vueuse/core'
-import { RiArrowDownLine, RiArrowDownSLine, RiArrowUpLine, RiSearchLine } from '@remixicon/vue'
+import { RiArrowDownLine, RiArrowDownSLine, RiArrowUpLine, RiErrorWarningLine, RiSearchLine } from '@remixicon/vue'
 import AppLink from '../AppLink.vue'
 import BrandedButton from '../BrandedButton.vue'
 import InfiniteLoader from '../InfiniteLoader.vue'
@@ -300,8 +302,13 @@ const {
   getColumnDisplay,
   getNullPercent,
   getBooleanCounts,
+  queryFailed,
 } = useTabularContext()
 
+const emptyMessage = computed(() => queryFailed.value
+  ? t('Les données n\'ont pas pu être chargées avec cette recherche ou ces filtres.')
+  : t('Aucun résultat trouvé.'))
+
 function getRowHref(row: TabularRow): string | undefined {
   return props.rowHref?.href(row)
 }

package/src/components/TabularExplorer/TabularToolbar.vue

@@ -1,10 +1,8 @@
 <template>
   <div class="flex items-center gap-2">
     <div class="flex min-w-0 flex-1 items-center gap-1.5">
+      <TabularSearchInput v-if="searchInput" />
       <TabularMobileFilterButton class="md:hidden" />
-      <div class="hidden md:block">
-        <TabularActiveFilters with-clear />
-      </div>
     </div>
     <div class="flex shrink-0 items-center gap-4">
       <TabularColumnsMenu />
@@ -14,12 +12,17 @@
 </template>
 
 <script setup lang="ts">
-import TabularActiveFilters from './TabularActiveFilters.vue'
 import TabularColumnsMenu from './TabularColumnsMenu.vue'
 import TabularMobileFilterButton from './TabularMobileFilterButton.vue'
 import TabularRowsInfo from './TabularRowsInfo.vue'
+import TabularSearchInput from './TabularSearchInput.vue'
+import { useTabularContext } from './useTabularContext'
 
 // Framing (borders, padding, spacing) belongs to the call site: this toolbar sits in a
 // bordered panel in the resource viewer and in the page flow on the standalone explore
 // pages. Single root element, so the caller's `class` merges onto it.
+// The active filters are not in here: they get a line of their own, placed by the
+// call site under the toolbar (<TabularActiveFilters>).
+
+const { searchInput } = useTabularContext()
 </script>