@datagouv/components-next 1.0.2-dev.17 → 1.0.2-dev.170

package/src/functions/datasets.ts

@@ -1,6 +1,4 @@
 import { useComponentsConfig } from '../config'
-import type { Dataset, DatasetV2 } from '../types/datasets'
-import type { CommunityResource, Resource } from '../types/resources'
 
 function constructUrl(baseUrl: string, path: string): string {
   const url = new URL(baseUrl)
@@ -14,18 +12,3 @@ export function getDatasetOEmbedHtml(type: string, id: string): string {
   const staticUrl = constructUrl(config.baseUrl, 'oembed.js')
   return `<div data-udata-${type}="${id}"></div><script data-udata="${config.baseUrl}" src="${staticUrl}" async defer></script>`
 }
-
-export function isCommunityResource(resource: Resource | CommunityResource): boolean {
-  return 'organization' in resource || 'owner' in resource
-}
-
-export function getResourceExternalUrl(dataset: Dataset | DatasetV2 | Omit<Dataset, 'resources' | 'community_resources'>, resource: Resource | CommunityResource): string {
-  return `${dataset.page}${isCommunityResource(resource) ? '/community-resources' : ''}?resource_id=${resource.id}`
-}
-
-export function getResourceFilesize(resource: Resource): null | number {
-  if (resource.filesize) return resource.filesize
-  if ('analysis:content-length' in resource.extras) return resource.extras['analysis:content-length'] as number
-
-  return null
-}

package/src/functions/dates.ts

@@ -77,8 +77,9 @@ export function useFormatDate() {
     dateWithoutTime.setHours(0)
     dateWithoutTime.setMinutes(0)
     dateWithoutTime.setSeconds(0)
-    const diff = Math.abs(dateWithoutTime.getTime() - today.getTime())
-    if (Math.round(diff / (SECONDS_IN_A_DAY * 30)) >= 1) {
+    // `getTime()` returns milliseconds, `SECONDS_IN_A_DAY` is in seconds
+    const diffInSeconds = Math.abs(dateWithoutTime.getTime() - today.getTime()) / 1000
+    if (diffInSeconds >= SECONDS_IN_A_DAY * 30) {
       return t('le {date}', { date: formatDate(date, options) })
     }
     return formatFromNow(date)

package/src/functions/metrics.ts

@@ -1,5 +1,5 @@
 import { escapeCsvValue } from './helpers'
-import { ofetch } from 'ofetch'
+import { ofetch, type $Fetch } from 'ofetch'
 import type { DatasetV2 } from '../types/datasets'
 import type { PaginatedArray } from '../types/api'
 
@@ -119,14 +119,16 @@ export async function getDatasetMetrics(datasetId: string, metricsApi: string):
   }
 }
 
-export async function createDatasetsForOrganizationMetricsUrl(organizationId: string, metricsApi: string, apiBase: string) {
+export async function createDatasetsForOrganizationMetricsUrl(organizationId: string, metricsApi: string, apiBase: string, apiFetch: $Fetch) {
   let data = 'dataset_title,dataset_id,month,monthly_visit,monthly_download_resource\n'
 
-  // fetch datasets info from organization datasets
+  // fetch datasets info from organization datasets through the configured fetch, so it carries the
+  // consumer's auth (cookie for cdata via `$api`, Bearer for verticals) instead of a hardcoded
+  // `credentials: 'include'`, which breaks CORS cross-origin on the verticals.
   const datasets: Record<string, Record<string, string>> = {}
   let datasetsUrl: string | null = `/api/2/datasets/?organization=${organizationId}&page_size=200`
   while (datasetsUrl) {
-    const body: PaginatedArray<DatasetV2> = await ofetch(datasetsUrl, { baseURL: apiBase, credentials: 'include' })
+    const body: PaginatedArray<DatasetV2> = await apiFetch(datasetsUrl, { baseURL: apiBase })
     datasetsUrl = body.next_page
     for (const row of body.data) {
       datasets[row.id] = { title: row.title }

package/src/functions/resources.ts

@@ -1,13 +1,15 @@
 import { readonly, type Component } from 'vue'
 
 import { RiEarthLine, RiMap2Line } from '@remixicon/vue'
+import { useComponentsConfig } from '../config'
 import Archive from '../components/Icons/Archive.vue'
 import Code from '../components/Icons/Code.vue'
+import type { Dataset, DatasetV2 } from '../types/datasets'
 import Documentation from '../components/Icons/Documentation.vue'
 import Image from '../components/Icons/Image.vue'
 import Link from '../components/Icons/Link.vue'
 import Table from '../components/Icons/Table.vue'
-import type { Resource } from '../types/resources'
+import type { CommunityResource, Resource } from '../types/resources'
 import { useTranslation } from '../composables/useTranslation'
 
 export function getResourceFormatIcon(format: string): Component | null {
@@ -89,6 +91,11 @@ export function getResourceTitleId(resource: Resource) {
 export const RESOURCE_TYPE = readonly(['main', 'documentation', 'update', 'api', 'code', 'other'] as const)
 export type ResourceType = typeof RESOURCE_TYPE[number]
 
+// Page size used by ResourceExplorer for its per-type resource fetches.
+// Exported so consumers (e.g. the dataset page's `main` prefetch) can build a
+// byte-for-byte identical cache key and let Nuxt dedupe the request.
+export const RESOURCE_EXPLORER_PAGE_SIZE = 10
+
 export const getResourceLabel = (type: ResourceType, count?: number) => {
   const { t } = useTranslation()
   switch (type) {
@@ -98,14 +105,29 @@ export const getResourceLabel = (type: ResourceType, count?: number) => {
       }
       return t('Fichiers principaux')
     case 'documentation':
+      if (typeof count === 'number') {
+        return t('Aucun fichier de documentation | 1 fichier de documentation | {n} fichiers de documentation', count)
+      }
       return t('Documentation')
     case 'update':
+      if (typeof count === 'number') {
+        return t('Aucune mise à jour | 1 mise à jour | {n} mises à jour', count)
+      }
       return t('Mise à jour')
     case 'api':
+      if (typeof count === 'number') {
+        return t('Aucune API | 1 API | {n} API', count)
+      }
       return t('API')
     case 'code':
+      if (typeof count === 'number') {
+        return t('Aucun fichier de code source | 1 fichier de code source | {n} fichiers de code source', count)
+      }
       return t('Code source')
     case 'other':
+      if (typeof count === 'number') {
+        return t('Aucun autre fichier | 1 autre fichier | {n} autres fichiers', count)
+      }
       return t('Autre')
   }
 }
@@ -129,3 +151,97 @@ export const detectOgcService = (resource: Resource) => {
   }
   return false
 }
+
+export function isCommunityResource(resource: Resource | CommunityResource): boolean {
+  return 'organization' in resource || 'owner' in resource
+}
+
+export function getResourceExternalUrl(dataset: Dataset | DatasetV2 | Omit<Dataset, 'resources' | 'community_resources'>, resource: Resource | CommunityResource): string {
+  return `${dataset.page}${isCommunityResource(resource) ? '/community-resources' : ''}?resource_id=${resource.id}`
+}
+
+export function getResourceFilesize(resource: Resource): null | number {
+  if (resource.filesize) return resource.filesize
+  if ('analysis:content-length' in resource.extras) return resource.extras['analysis:content-length'] as number
+
+  return null
+}
+
+const IMAGE_PREVIEW_FORMATS = ['png', 'jpg', 'jpeg', 'jpe', 'gif', 'webp'] as const
+
+export function isImagePreviewFormat(format: string | undefined | null): boolean {
+  if (!format) return false
+  return IMAGE_PREVIEW_FORMATS.includes(format.toLowerCase() as typeof IMAGE_PREVIEW_FORMATS[number])
+}
+
+// Parsing errors are stored as `<step>:<message>`, where `<step>` names the
+// analysis step that failed (e.g. `pmtiles_export`, `geojson_export`).
+
+/** The analysis step that failed, or null when there is no parsing error. */
+export function getParsingErrorStep(resource: Resource): string | null {
+  const error = resource.extras['analysis:parsing:error']
+  if (typeof error !== 'string' || !error) return null
+  const [step] = error.split(':', 1)
+  return step ?? null
+}
+
+/** The parsing error message without its `<step>:` prefix, or null when there is none. */
+export function getParsingErrorMessage(resource: Resource): string | null {
+  const error = resource.extras['analysis:parsing:error']
+  if (typeof error !== 'string' || !error) return null
+  const colon = error.indexOf(':')
+  return colon === -1 ? error : error.slice(colon + 1)
+}
+
+// Geo/format export steps run *after* the tabular table has been built, so a
+// failure here (e.g. a huge geometry timing out the pmtiles export) leaves the
+// tabular data fully usable and must not disable the tabular explorer.
+const NON_TABULAR_PARSING_ERROR_STEPS = ['pmtiles_export', 'geojson_export']
+
+/**
+ * Whether the resource's parsing error prevents reading its tabular data.
+ * Only errors from the tabular parsing itself are fatal; downstream geo/format
+ * export failures are not.
+ */
+export function hasTabularParsingError(resource: Resource): boolean {
+  const step = getParsingErrorStep(resource)
+  return step !== null && !NON_TABULAR_PARSING_ERROR_STEPS.includes(step)
+}
+
+type CorsStatus = 'allowed' | 'blocked' | 'unknown'
+
+export const getResourceCorsStatus = (resource: Resource): CorsStatus => {
+  const extras = resource.extras
+  if (!extras || !('check:cors:allow-origin' in extras)) {
+    return 'unknown'
+  }
+
+  const allowOrigin = extras['check:cors:allow-origin'] as string | undefined
+  const rawMethods = extras['check:cors:allow-methods'] as string | undefined
+
+  // Check if allow-origin is '*' or contains one of our trusted domains
+  const config = useComponentsConfig()
+  const trustedDomains = config.trustedDomains ?? []
+  const hasPublicCors = allowOrigin === '*'
+  const hasSpecificCors = allowOrigin
+    ? trustedDomains.some((domain) => {
+        try {
+          const hostname = new URL(allowOrigin).hostname
+          return hostname === domain || hostname.endsWith(`.${domain}`)
+        }
+        catch {
+          return false
+        }
+      })
+    : false
+
+  const isOriginAllowed = hasPublicCors || hasSpecificCors
+
+  // Ensure GET method is allowed
+  const allowedMethods = rawMethods
+    ? rawMethods.split(',').map(m => m.trim().toUpperCase())
+    : []
+  const supportsGet = allowedMethods.length === 0 || allowedMethods.includes('GET')
+
+  return isOriginAllowed && supportsGet ? 'allowed' : 'blocked'
+}

package/src/functions/tabular.ts

@@ -0,0 +1,214 @@
+import type { Component } from 'vue'
+import {
+  RiHashtag,
+  RiPriceTag3Line,
+  RiText,
+  RiCalendarLine,
+  RiCalendarEventLine,
+  RiTimeLine,
+  RiCheckboxLine,
+  RiMapPin2Line,
+  RiGlobalLine,
+  RiFocus3Line,
+  RiFingerprintLine,
+  RiMailLine,
+  RiLinksLine,
+  RiPhoneLine,
+  RiUserLine,
+  RiMoneyEuroCircleLine,
+  RiPercentLine,
+  RiBracesLine,
+  RiCodeLine,
+} from '@remixicon/vue'
+import { useTranslation } from '../composables/useTranslation'
+import type { TranslationFunction } 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 type TypeDisplay = {
+  icon: Component
+  label: string
+}
+
+export function buildTypeConfig(t: TranslationFunction): Record<ColumnType, TypeDisplay> {
+  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') },
+    year: { icon: RiCalendarLine, label: t('Année') },
+  }
+}
+
+export function resolveColumnType(colInfo: { python_type: string, format?: string }, isCategorical: boolean): ColumnType {
+  if (colInfo.format === 'year') return 'year'
+  if (['int', 'float'].includes(colInfo.python_type)) return 'number'
+  if (['date', 'datetime'].includes(colInfo.python_type)) return 'date'
+  if (colInfo.python_type === 'bool') return 'boolean'
+  if (isCategorical) return 'categorical'
+  return 'text'
+}
+
+// csv-detective formats that carry no semantic meaning beyond the generic
+// display type already resolved by `ColumnType` — these fall back to
+// `buildTypeConfig` (Texte / Nombre / Date / Booléen) in the header.
+export const GENERIC_FORMATS = new Set(['string', 'int', 'float', 'date', 'bool', 'booleen'])
+
+// Semantic types detected by csv-detective (see ../../../csv-detective/csv_detective/formats).
+// The list is intentionally exhaustive, but unknown formats are tolerated:
+// `getColumnDisplay` humanizes any format missing from this map.
+export function buildFormatConfig(t: TranslationFunction): Record<string, TypeDisplay> {
+  return {
+    // Geo — territories & addresses
+    adresse: { icon: RiMapPin2Line, label: t('Adresse') },
+    commune: { icon: RiMapPin2Line, label: t('Commune') },
+    code_commune: { icon: RiMapPin2Line, label: t('Code INSEE commune') },
+    code_commune_insee: { icon: RiMapPin2Line, label: t('Code INSEE commune') },
+    departement: { icon: RiMapPin2Line, label: t('Département') },
+    code_departement: { icon: RiMapPin2Line, label: t('Code département') },
+    region: { icon: RiMapPin2Line, label: t('Région') },
+    code_region: { icon: RiMapPin2Line, label: t('Code région') },
+    code_epci: { icon: RiMapPin2Line, label: t('Code EPCI') },
+    code_postal: { icon: RiMapPin2Line, label: t('Code postal') },
+    insee_canton: { icon: RiMapPin2Line, label: t('Canton') },
+    code_fantoir: { icon: RiMapPin2Line, label: t('Code FANTOIR') },
+    id_rnb: { icon: RiMapPin2Line, label: t('Identifiant RNB') },
+    // Geo — countries
+    pays: { icon: RiGlobalLine, label: t('Pays') },
+    iso_country_code_alpha2: { icon: RiGlobalLine, label: t('Code pays (ISO α-2)') },
+    iso_country_code_alpha3: { icon: RiGlobalLine, label: t('Code pays (ISO α-3)') },
+    iso_country_code_numeric: { icon: RiGlobalLine, label: t('Code pays (ISO num.)') },
+    // Geo — coordinates
+    latitude_wgs: { icon: RiFocus3Line, label: t('Latitude') },
+    latitude_wgs_fr_metropole: { icon: RiFocus3Line, label: t('Latitude') },
+    longitude_wgs: { icon: RiFocus3Line, label: t('Longitude') },
+    longitude_wgs_fr_metropole: { icon: RiFocus3Line, label: t('Longitude') },
+    latitude_l93: { icon: RiFocus3Line, label: t('Latitude (Lambert 93)') },
+    longitude_l93: { icon: RiFocus3Line, label: t('Longitude (Lambert 93)') },
+    latlon_wgs: { icon: RiFocus3Line, label: t('Latitude / longitude') },
+    lonlat_wgs: { icon: RiFocus3Line, label: t('Longitude / latitude') },
+    // Identifiers
+    siren: { icon: RiFingerprintLine, label: t('SIREN') },
+    siret: { icon: RiFingerprintLine, label: t('SIRET') },
+    code_rna: { icon: RiFingerprintLine, label: t('Identifiant RNA') },
+    code_waldec: { icon: RiFingerprintLine, label: t('Identifiant WALDEC') },
+    code_import: { icon: RiFingerprintLine, label: t('Code Import') },
+    uai: { icon: RiFingerprintLine, label: t('UAI') },
+    insee_ape700: { icon: RiFingerprintLine, label: t('Code APE') },
+    code_csp_insee: { icon: RiFingerprintLine, label: t('Code CSP') },
+    uuid: { icon: RiFingerprintLine, label: t('UUID') },
+    mongo_object_id: { icon: RiFingerprintLine, label: t('Identifiant Mongo') },
+    // Contact
+    email: { icon: RiMailLine, label: t('Email') },
+    url: { icon: RiLinksLine, label: t('URL') },
+    tel_fr: { icon: RiPhoneLine, label: t('Téléphone') },
+    username: { icon: RiUserLine, label: t('Nom d\'utilisateur') },
+    // People
+    sexe: { icon: RiUserLine, label: t('Sexe') },
+    csp_insee: { icon: RiUserLine, label: t('Catégorie socio-pro.') },
+    // Quantities
+    money: { icon: RiMoneyEuroCircleLine, label: t('Montant') },
+    percent: { icon: RiPercentLine, label: t('Pourcentage') },
+    // Temporal
+    year: { icon: RiCalendarLine, label: t('Année') },
+    date_fr: { icon: RiCalendarLine, label: t('Date') },
+    jour_de_la_semaine: { icon: RiCalendarEventLine, label: t('Jour de la semaine') },
+    mois_de_lannee: { icon: RiCalendarEventLine, label: t('Mois de l\'année') },
+    datetime_naive: { icon: RiTimeLine, label: t('Date et heure') },
+    datetime_aware: { icon: RiTimeLine, label: t('Date et heure') },
+    datetime_rfc822: { icon: RiTimeLine, label: t('Date et heure') },
+    // Structured
+    json: { icon: RiBracesLine, label: t('JSON') },
+    geojson: { icon: RiBracesLine, label: t('GeoJSON') },
+    binary: { icon: RiCodeLine, label: t('Binaire') },
+  }
+}
+
+// Tolerant fallback for a semantic format we don't explicitly know about:
+// "code_truc_machin" -> "Code truc machin".
+export function humanizeFormat(format: string): string {
+  const spaced = format.replace(/_/g, ' ').trim()
+  return spaced.charAt(0).toUpperCase() + spaced.slice(1)
+}
+
+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']
+
+// `encodeURIComponent` leaves `.`, `(` and `)` as-is, but they are the operator
+// separator and the delimiters of the API's `or(...)` grammar: a search value
+// containing one makes the parser reject the whole query with a 400. Wrapping
+// the value in double quotes (as the API README suggests) does not work here —
+// the API keeps them as part of the searched string and returns no result. It
+// does percent-decode the value after parsing, so encoding them is enough.
+function encodeConditionValue(value: string): string {
+  return encodeURIComponent(value)
+    .replace(/\./g, '%2E')
+    .replace(/\(/g, '%28')
+    .replace(/\)/g, '%29')
+}
+
+// A decimal literal, not `Number()`: the API compares against a number column,
+// and it answers an error for the whole `or(...)` when it is handed something it
+// cannot parse as one — which `Number()` happily accepts (`0x10`, `1e5`, ` `).
+const NUMBER_LITERAL_RE = /^-?\d+(\.\d+)?$/
+
+/**
+ * Builds the OR conditions for global search across all columns.
+ * Text and categorical columns get a `__contains` filter; number columns
+ * get a `__exact` filter only when the search value is numeric.
+ * Year, date and boolean columns are excluded.
+ */
+export function buildGlobalSearchConditions(
+  allColumns: string[],
+  getColumnType: (col: string) => ColumnType,
+  searchValue: string,
+): string[] {
+  const conditions: string[] = []
+  for (const col of allColumns) {
+    const type = getColumnType(col)
+    if (type === 'text' || type === 'categorical') {
+      conditions.push(col + '__contains.' + encodeConditionValue(searchValue))
+    }
+    else if (type === 'number' && NUMBER_LITERAL_RE.test(searchValue)) {
+      conditions.push(col + '__exact.' + encodeConditionValue(searchValue))
+    }
+  }
+  return conditions
+}
+
+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
+}

package/src/functions/tabularApi.ts

@@ -1,20 +1,105 @@
 import { ofetch } from 'ofetch'
 import { useComponentsConfig, type PluginConfig } from '../config'
+import type { GenericFilter } from '../types/visualizations'
+import type { SortConfig, TabularProfileResponse } from '../components/TabularExplorer/types'
 
-export type SortConfig = {
-  column: string
-  type: string
-} | null
+export type { SortConfig }
+
+export type TabularDataResponse = {
+  data: Array<Record<string, unknown>>
+  links: {
+    profile: string
+    swagger: string
+    next: string
+  }
+  meta: { total: number }
+}
+
+export type TabularAggregateType = 'avg' | 'sum' | 'count' | 'min' | 'max'
+
+export type FetchTabularDataOptions = {
+  resourceId: string
+  page?: number
+  pageSize?: number
+  columns?: Array<string> | undefined
+  sort?: SortConfig
+  groupBy?: string | undefined
+  aggregation?: {
+    column: string
+    type: TabularAggregateType
+  } | undefined
+  filters?: GenericFilter | undefined
+}
 
 /**
- * Call Tabular-api to get table content
+ * Call Tabular-api to get table content with options object
  */
-export async function getData(config: PluginConfig, id: string, page: number, sortConfig?: SortConfig) {
-  let url = `${config.tabularApiUrl}/api/resources/${id}/data/?page=${page}&page_size=${config.tabularApiPageSize || 15}`
-  if (sortConfig) {
-    url = url + `&${sortConfig.column}__sort=${sortConfig.type}`
+export async function fetchTabularData(config: PluginConfig, options: FetchTabularDataOptions): Promise<TabularDataResponse> {
+  const page = options.page ?? 1
+  const pageSize = options.pageSize ?? config.tabularApiPageSize ?? 15
+  let url = `${config.tabularApiUrl}/api/resources/${options.resourceId}/data/?page=${page}&page_size=${pageSize}`
+  if (options.columns) {
+    url += `&columns=${options.columns.map(col => encodeURIComponent(col)).join(',')}`
+  }
+  if (options.sort) {
+    url += `&${encodeURIComponent(options.sort.column)}__sort=${encodeURIComponent(options.sort.direction)}`
+  }
+  if (options.groupBy && options.aggregation?.type) {
+    url += `&${encodeURIComponent(options.groupBy)}__groupby&${encodeURIComponent(options.aggregation.column)}__${encodeURIComponent(options.aggregation.type)}`
+  }
+  if (options.filters) {
+    const filterQuery = buildFilterQuery(options.filters)
+    if (filterQuery) {
+      url += `&${filterQuery}`
+    }
   }
-  return await ofetch(url)
+  return await ofetch<TabularDataResponse>(url)
+}
+
+function buildFilterQuery(filters: GenericFilter): string {
+  const params: Array<string> = []
+  if ('filters' in filters) {
+    for (const filter of filters.filters) {
+      if ('filters' in filter) {
+        params.push(buildFilterQuery(filter))
+      }
+      else {
+        if (filter.condition === 'is_null') {
+          params.push(`${encodeURIComponent(filter.column)}__isnull`)
+        }
+        else if (filter.condition === 'is_not_null') {
+          params.push(`${encodeURIComponent(filter.column)}__isnotnull`)
+        }
+        else if (filter.value !== null && filter.value !== undefined && filter.value !== '') {
+          params.push(`${encodeURIComponent(filter.column)}__${encodeURIComponent(filter.condition)}=${encodeURIComponent(filter.value)}`)
+        }
+      }
+    }
+  }
+  else {
+    const filter = filters
+    if (filter.condition === 'is_null') {
+      params.push(`${encodeURIComponent(filter.column)}__isnull`)
+    }
+    else if (filter.condition === 'is_not_null') {
+      params.push(`${encodeURIComponent(filter.column)}__isnotnull`)
+    }
+    else if (filter.value !== null && filter.value !== undefined && filter.value !== '') {
+      params.push(`${encodeURIComponent(filter.column)}__${encodeURIComponent(filter.condition)}=${encodeURIComponent(filter.value)}`)
+    }
+  }
+  return params.join('&')
+}
+
+/**
+ * Call Tabular-api to get table content
+ */
+export async function getData(config: PluginConfig, id: string, page: number, sortConfig?: SortConfig | null): Promise<TabularDataResponse> {
+  return fetchTabularData(config, {
+    resourceId: id,
+    page,
+    sort: sortConfig ?? undefined,
+  })
 }
 
 /**
@@ -22,5 +107,5 @@ export async function getData(config: PluginConfig, id: string, page: number, so
  */
 export function useGetProfile() {
   const config = useComponentsConfig()
-  return (id: string) => ofetch(`${config.tabularApiUrl}/api/resources/${id}/profile/`)
+  return (id: string) => ofetch<TabularProfileResponse>(`${config.tabularApiUrl}/api/resources/${id}/profile/`)
 }