Parcourir les enregistrements en lignes compactes, avec un titre et quelques propriétés.

La liste affiche une ligne par enregistrement : la case de sélection, un titre, les propriétés choisies et les actions de ligne. Elle utilise les mêmes enregistrements, la même requête, la même sélection et les mêmes actions que le tableau, et ouvrir une ligne équivaut à cliquer sur une ligne du tableau.

Essayer la liste

Choisissez React ou Vue : chaque onglet exécute son framework. Chaque ligne affiche le nom du projet, puis son statut, sa catégorie, son budget et sa date de début. Ouvrez Paramètres de la vue › Réglages des cartes pour changer le titre et les propriétés, afficher les libellés ou renvoyer les titres à la ligne, ou passez le Mode d’affichage sur Table pour comparer. Sous 768 px, mobileMaxProperties garde deux propriétés. L’aperçu utilise les projets d’ouverture de magasins communs à tous les guides de vues ; voir les données des exemples pour project-config.ts et l’hôte en mémoire.

Agrandir ↗

Données de démonstration. Les modifications restent dans cet aperçu.

list-view.ts

import { defineTableConfig } from "@/components/ui/yayaw-table";
import { projectConfig } from "./project-config";

export const exampleConfig = defineTableConfig({
  ...projectConfig,
  table: {
    ...projectConfig.table,
    displayModes: ["list", "table"],
    defaultDisplayMode: "list",
    list: {
      titleColumn: "name",
      cardColumnIds: ["status", "category", "budget", "start"],
      showCardLabels: false,
      mobileMaxProperties: 2,
    },
  },
});

Agrandir ↗

Données de démonstration. Les modifications restent dans cet aperçu.

list-view.ts

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

export const exampleConfig = defineTableConfig({
  ...projectConfig,
  table: {
    ...projectConfig.table,
    displayModes: ["list", "table"],
    defaultDisplayMode: "list",
    list: {
      titleColumn: "name",
      cardColumnIds: ["status", "category", "budget", "start"],
      showCardLabels: false,
      mobileMaxProperties: 2,
    },
  },
});

Configuration

Ajoutez "list" à displayModes et décrivez la ligne avec table.list. La configuration est identique en React et en Vue.

list-config.ts

export const listConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    displayModes: ["table", "list", "kanban"],
    list: {
      titleColumn: "name",
      cardColumnIds: ["status", "price"],
      showCardLabels: false,
    },
  },
});

Option	Par défaut	Description
`titleColumn`	Première colonne de données	Colonne affichée comme titre de la ligne.
`cardColumnIds`	Toutes les autres colonnes de données	Propriétés affichées après le titre, dans cet ordre.
`showCardLabels`	`false`	Affiche le nom de la colonne avant chaque valeur.
`wrap`	`false`	Le titre passe à la ligne au lieu d’être tronqué.
`showActions`	`true`	Affiche le menu des actions de ligne en fin de ligne.
`propertyAlign`	`"end"`	`"start"` place les propriétés juste après le titre.
`maxProperties`	Toutes	Nombre maximal de propriétés affichées.
`mobileMaxProperties`	Toutes	Nombre maximal sous 768 px ; la limite la plus basse l’emporte.

Réglages des lignes

Ouvrez Vue → Réglages des cartes pour choisir le titre et les propriétés visibles, afficher les libellés, laisser le titre passer à la ligne, placer les propriétés, les limiter (y compris séparément sur mobile) ou masquer les actions de ligne. Les choix sont enregistrés avec les vues et dans la clé d’URL <tableId>-list ; Réinitialiser revient à table.list.

Regroupement

La liste suit le premier niveau de regroupement du tableau. Chaque section est intitulée « Colonne : valeur » avec son nombre d’enregistrements, les enregistrements sans valeur apparaissent sous « No value », et la colonne regroupée est retirée des propriétés. Comme la galerie et le Kanban, la liste affiche la page courante.

Réordonner les lignes

Quand la vue est triée par Ordre manuel (voir le tri), faites glisser une ligne par sa poignée ⋮⋮ à la souris, au doigt ou au stylet, ou sélectionnez-la au clavier et appuyez sur Alt+↑ / Alt+↓. Les lignes se déplacent à l’intérieur de leur groupe. La nouvelle position s’affiche aussitôt et est enregistrée via actions.reorder ; en cas d’échec, l’erreur s’affiche et l’ordre du serveur revient.

Densité

La liste suit la densité du tableau (Vue → Densité, de XS à 2XL) : les lignes reprennent les hauteurs et marges des lignes du tableau, et le choix est enregistré avec la vue.

Liste