@datagouv/components-next 1.0.2-dev.231 → 1.0.2-dev.233

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 && canReset"
+        color="tertiary"
+        size="2xs"
+        :icon="RiCloseLine"
+        @click="reset"
+      >
+        {{ t('Tout réinitialiser') }}
+      </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, canReset, reset, 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>
@@ -25,31 +30,49 @@ import { useFetch } from '../../functions/api'
 import { useComponentsConfig } from '../../config'
 import { useTranslation } from '../../composables/useTranslation'
 import { injectTabularProfile } from '../../composables/useTabularProfile'
-import { hasFilterForColumn as _hasFilterForColumn, buildDateFilterParams, buildGlobalSearchConditions, useFormatTabular } from '../../functions/tabular'
+import { hasFilterForColumn as _hasFilterForColumn, buildDateFilterParams, buildGlobalSearchConditions, isSameSort, useFormatTabular } from '../../functions/tabular'
 import PreviewUnavailable from '../ResourceAccordion/PreviewUnavailable.vue'
 import TabularSkeleton from './TabularSkeleton.vue'
-import type { TabularDataResponse, TabularRow, SortConfig, ColumnFilters, DateFilter } from './types'
+import type { TabularDataResponse, TabularRow, SortConfig, ColumnFilters, DateFilter, TabularUrlAlias } from './types'
 import { provideTabularContext, type ActiveFilter } from './useTabularContext'
 import { useColumnMetadata } from './useColumnMetadata'
+import { useTabularUrlState } from './useTabularUrlState'
 
-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.
+  // Ignored with `syncUrl`: the filters come from the URL then.
   initialFilters?: Record<string, ColumnFilters>
   // Sort seeded on mount, e.g. { column: 'Séance', direction: 'desc' }.
   // Same ownership rule as `initialFilters`: the explorer owns it afterwards,
   // and the user can drop it from the active-sort chip.
+  // With `syncUrl`, it is the sort applied when the URL names none.
   initialSort?: SortConfig
-}>()
+  // Keeps sort, filters and global search in the URL, so that going back to the
+  // page restores them. Only for an explorer that owns its page: the params are
+  // not namespaced.
+  syncUrl?: boolean
+  // With `syncUrl`, readable params for the simple filters of some columns,
+  // e.g. { administration: { column: 'Administration', operator: 'contains' } }.
+  // Any other filter goes into a JSON `filters` param.
+  urlAliases?: Record<string, TabularUrlAlias>
+}>(), {
+  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 globalSearchModel = defineModel<string>('globalSearch', { default: '' })
 
 const { t } = useTranslation()
 const config = useComponentsConfig()
@@ -79,14 +102,36 @@ const {
   getBooleanCounts,
 } = useColumnMetadata(profileData, allColumns, t)
 
-// Sort & filter state
-const sort = ref<SortConfig | null>(props.initialSort ? { ...props.initialSort } : null)
-const filters = ref<Record<string, ColumnFilters>>({ ...props.initialFilters })
+// Sort, filter & search state
+const urlState = props.syncUrl
+  ? useTabularUrlState(props.urlAliases ?? {}, props.initialSort ?? null, allColumns)
+  : null
+const { sort, filters, globalSearch } = urlState ?? {
+  sort: ref<SortConfig | null>(props.initialSort ? { ...props.initialSort } : null),
+  filters: ref<Record<string, ColumnFilters>>({ ...props.initialFilters }),
+  globalSearch: globalSearchModel,
+}
+
+// With `syncUrl` the search lives in the URL, and a bound `v-model` mirrors it.
+// A search the parent already holds at mount wins: it was typed while the
+// explorer was loading, after the URL was read.
+if (urlState) {
+  if (globalSearchModel.value) urlState.globalSearch.value = globalSearchModel.value
+  else globalSearchModel.value = urlState.globalSearch.value
+  watch(urlState.globalSearch, (value) => {
+    globalSearchModel.value = value
+  })
+  watch(globalSearchModel, (value) => {
+    urlState.globalSearch.value = value
+  })
+}
 
 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 +161,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 +197,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 +332,23 @@ function removeFilter(column: string) {
   filters.value = rest
 }
 
-function clearAllFilters() {
+// 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}`
+})
+
+// Resetting goes back to how the table opened: no filter nor search, but the
+// initial sort — it is the table's default order, not a criterion the user added.
+const canReset = computed(() => activeFilters.value.length > 0 || !!globalSearch.value || !isSameSort(sort.value, props.initialSort))
+
+function reset() {
   filters.value = {}
+  globalSearch.value = ''
+  sort.value = props.initialSort ? { ...props.initialSort } : null
 }
 
 function hasFilterForColumn(col: string): boolean {
@@ -299,7 +371,12 @@ provideTabularContext({
   filters,
   activeFilters,
   removeFilter,
-  clearAllFilters,
+  canReset,
+  reset,
+  globalSearch,
+  searchInput: computed(() => props.searchInput),
+  queryFailed,
+  filteredDownloadUrl,
   hasFilterForColumn,
   allColumns,
   visibleColumns,

package/src/components/TabularExplorer/TabularFilterContent.vue

@@ -250,7 +250,8 @@ watchDebounced(search, (q) => {
   const existing = filters.value[props.column] ?? {}
   const operator = isNumeric.value ? 'exact' : 'contains'
   if (q) {
-    filters.value = { ...filters.value, [props.column]: { ...existing, [operator]: q } }
+    // v-model on a `type="number"` input hands over a number, both criteria are strings
+    filters.value = { ...filters.value, [props.column]: { ...existing, [operator]: String(q) } }
   }
   else {
     const { [operator]: _, ...rest } = existing

package/src/components/TabularExplorer/TabularMobileFilters.vue

@@ -96,14 +96,14 @@
             </div>
             <!-- Reset all -->
             <div
-              v-if="activeFilters.length > 0 || sort"
+              v-if="canReset"
               class="border-t border-gray-default px-4 py-3"
             >
               <BrandedButton
                 color="secondary"
                 size="xs"
                 class="w-full"
-                @click="clearAllFilters(); sort = null; mobileFilterOpen = false"
+                @click="reset(); mobileFilterOpen = false"
               >
                 {{ t('Tout réinitialiser') }}
               </BrandedButton>
@@ -132,7 +132,8 @@ const {
   sort,
   filters,
   hasFilterForColumn,
-  clearAllFilters,
+  canReset,
+  reset,
   totalLines,
   getColumnDisplay,
   getColumnType,

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 réinitialiser"): 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>

package/src/components/TabularExplorer/types.ts

@@ -67,7 +67,8 @@ export type TabularTopValue = {
 
 export type ColumnType = 'number' | 'categorical' | 'text' | 'date' | 'boolean' | 'year'
 
-export type DateFilterOperator = 'is' | 'before' | 'after' | 'between'
+export const DATE_FILTER_OPERATORS = ['is', 'before', 'after', 'between'] as const
+export type DateFilterOperator = typeof DATE_FILTER_OPERATORS[number]
 
 export type DateFilter = {
   operator: DateFilterOperator
@@ -87,6 +88,13 @@ export type ColumnFilters = {
   date?: DateFilter
 }
 
+// A short URL param standing for a single-operator filter on one column, e.g.
+// `?administration=Mairie` for `{ Administration: { contains: 'Mairie' } }`.
+export type TabularUrlAlias = {
+  column: string
+  operator: 'contains' | 'exact'
+}
+
 export type SortDirection = 'asc' | 'desc'
 
 export type SortConfig = {

package/src/components/TabularExplorer/useTabularContext.ts

@@ -42,7 +42,18 @@ export type TabularContext = {
   filters: Ref<Record<string, ColumnFilters>>
   activeFilters: ComputedRef<ActiveFilter[]>
   removeFilter: (column: string) => void
-  clearAllFilters: () => void
+  // Back to how the table opened: no filter nor search, the initial sort
+  canReset: ComputedRef<boolean>
+  reset: () => void
+
+  // Global search across all columns, and whether the toolbar shows its field
+  globalSearch: Ref<string>
+  searchInput: ComputedRef<boolean>
+  // The last request was rejected after a first successful load: the controls stay,
+  // the rows are replaced by the error.
+  queryFailed: ComputedRef<boolean>
+  // CSV export of the rows matching the filters and search
+  filteredDownloadUrl: ComputedRef<string>
   hasFilterForColumn: (col: string) => boolean
 
   // Columns visibility