Tri et pagination

Définissez un tri initial utile. La barre d’outils permet de modifier le tri et la taille des pages ; votre action de liste applique ces choix avant de découper le résultat.

Exemple de configuration

Partez du démarrage React ou du démarrage Vue. Le fichier suivant complète leur catalogue de produits. Passez cette configuration via getTableConfig en React ou config en Vue.

import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";

export const sortingConfig = defineTableConfig({
  ...productConfig,
  columns: {
    ...productConfig.columns,
    sort: [
      { id: "stock", desc: true },
      { id: "name", desc: false },
    ],
  },
  table: {
    ...productConfig.table,
    enableSorting: true,
    enablePagination: true,
    defaultPageSize: 20,
    pageSizeOptions: [10, 20, 50],
  },
});

import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";

export const sortingConfig = defineTableConfig({
  ...productConfig,
  columns: {
    ...productConfig.columns,
    sort: [
      { id: "stock", desc: true },
      { id: "name", desc: false },
    ],
  },
  table: {
    ...productConfig.table,
    enableSorting: true,
    enablePagination: true,
    defaultPageSize: 20,
    pageSizeOptions: [10, 20, 50],
  },
});

Tri par défaut

Le tri de départ d’une table est, dans l’ordre :

1. le tri de l’URL (<tableId>-sort) ;

2. la vue enregistrée ouverte, ou la vue initiale ;

3. columns.sort.

Sans aucun des trois, aucun tri n’est envoyé et chaque mode garde l’ordre renvoyé par votre action list : la table n’ajoute aucun ordre implicite, ni par identifiant, ni par date, ni autrement. Seule la vue Fil définit son propre ordre quand rien n’est trié : sa colonne de date, du plus récent au plus ancien. Réinitialiser l’état de la table revient à columns.sort.

React et Vue suivent la même règle. Les versions précédentes de React ignoraient columns.sort au premier chargement et ne l’appliquaient qu’en choisissant de nouveau la vue par défaut : un hôte qui trie par identifiant quand aucun tri n’est envoyé affichait React par identifiant et Vue selon la colonne configurée. Mettez à jour pour obtenir le même premier écran dans les deux.

Appliquer la requête dans le bon ordre

Filtrez les données autorisées, appliquez chaque tri dans l’ordre, ajoutez un identifiant stable pour départager les égalités, puis paginez. Trier une page après sa récupération ne respecte pas l’ordre global. Renvoyez meta.totalCount pour toutes les lignes correspondantes et meta.pageCount pour la taille choisie.

Trier sur plusieurs colonnes

Les utilisateurs peuvent combiner plusieurs tris en React comme en Vue. Dans le menu de tri React, un clic ajoute la colonne après les tris existants, un deuxième clic inverse le sens et un troisième la retire ; des numéros indiquent la priorité dès que deux tris s’appliquent. Vue modifie la même liste ordonnée avec une règle par tri. Votre action de liste reçoit tous les tris dans l’ordre, dans sorting comme dans orderBy.

Ordre manuel par vue

Activez table.manualOrder: true et fournissez actions.reorder pour proposer Ordre manuel dans le menu de tri. C’est un tri comme les autres, enregistré avec la vue, mais chaque vue garde son propre ordre : déplacer un enregistrement dans une vue ne change pas les autres, et les enregistrements ne sont jamais modifiés. Une requête triée ainsi contient l’identifiant de tri __manual et un viewId (la vue enregistrée, ou null pour la vue par défaut) ; triez selon l’ordre enregistré pour cette vue et placez les enregistrements sans rang à la fin. Voir les actions serveur pour reorder.

Numéros de page

Le contrat de liste utilise page à partir de 1. La pagination de l’interface utilise pageIndex à partir de 0. React transmet couramment limit et orderBy ; Vue expose pageSize et sorting. Les helpers de compatibilité acceptent les deux formes. Le fichier list-records.ts du démarrage gère ces alias.

La page affichée

Une recherche, un filtre ou un tri modifié dans la table repart de la première page ; choisir à nouveau celui en cours garde la page. Un lien garde la page qu’il indique, à l’ouverture comme avec précédent et suivant. Une page au-delà de la dernière, venue d’un ancien lien ou après la suppression de lignes, passe à la dernière page dès que votre action list répond : répondez à une telle page avec meta.totalCount et meta.pageCount et aucune ligne, pas une erreur.

React et Vue se comportent de la même façon depuis v3.9.1. Avant, React gardait la page après une nouvelle recherche, un nouveau filtre ou un nouveau tri, si bien qu’une recherche depuis la deuxième page pouvait afficher une table vide, et affichait vide une page au-delà de la dernière ; Vue ouvrait un lien sur la première page, quelle que soit la page qu’il indiquait. Mettez à jour pour obtenir les mêmes pages dans les deux.

Taille automatique et sélection stable

La distribution actuelle peut adapter la page à la hauteur disponible du tableau. Le backend reçoit toujours une taille numérique. Bornez cette taille côté serveur, renvoyez les vrais totaux et gardez getRowId indépendant de l’index de page. Consultez la sélection multiple et les actions serveur.

Trier par stock puis par nom

Conservez un tri numérique du stock et utilisez le nom en cas d’égalité. Le tri s’applique à tous les résultats avant d’extraire la page demandée.

Copiez cette configuration complète à côté de product-config.ts. Utilisez () => exampleConfig pour getTableConfig en React, ou :config="exampleConfig" en Vue.

import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";

export const exampleConfig = defineTableConfig({
  ...productConfig,
  columns: {
    ...productConfig.columns,
    sort: [
      { id: "stock", desc: true },
      { id: "name", desc: false },
    ],
  },
  table: { ...productConfig.table, enableSorting: true },
});

import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";

export const exampleConfig = defineTableConfig({
  ...productConfig,
  columns: {
    ...productConfig.columns,
    sort: [
      { id: "stock", desc: true },
      { id: "name", desc: false },
    ],
  },
  table: { ...productConfig.table, enableSorting: true },
});

Faciliter le test de la pagination

Trois produits et deux lignes par page permettent de tester la seconde page. Renvoyez le nombre total de résultats, pas seulement celui des lignes affichées.

Copiez cette configuration complète à côté de product-config.ts. Utilisez () => exampleConfig pour getTableConfig en React, ou :config="exampleConfig" en Vue.

import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";

export const exampleConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    enablePagination: true,
    defaultPageSize: 2,
    pageSizeOptions: [2, 10, 20],
  },
});

import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";

export const exampleConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    enablePagination: true,
    defaultPageSize: 2,
    pageSizeOptions: [2, 10, 20],
  },
});