Tâches du projet : exemple de données locales

Fonctionnement de cette page

Cette grille de tâches reçoit ses rangées d’un tableau JavaScript déjà présent dans le navigateur. vGrid effectue le tri, le filtrage et la pagination localement ; aucune requête API n’est envoyée.

La grille

Code source

Transmettez le tableau avec l’option data et définissez les champs à afficher dans columns.

const tasks = [
  { id: 1, task: "Pr\u00e9parer les notes de lancement", owner: 'Maya', status: "En cours" },
  { id: 2, task: "V\u00e9rifier l\u2019accessibilit\u00e9", owner: 'Owen', status: "\u00c0 faire" },
  { id: 3, task: "Publier la version", owner: 'Lina', status: "Termin\u00e9" },
  { id: 4, task: "Mettre \u00e0 jour les captures d\u2019\u00e9cran", owner: 'Maya', status: "En cours" },
  { id: 5, task: "V\u00e9rifier les statistiques", owner: 'Owen', status: "\u00c0 faire" },
  { id: 6, task: "Archiver les anciens brouillons", owner: 'Lina', status: "Termin\u00e9" },
  { id: 7, task: "Planifier le prochain sprint", owner: 'Maya', status: "\u00c0 faire" },
  { id: 8, task: "Tester la mise en page mobile", owner: 'Owen', status: "En cours" },
  { id: 9, task: "R\u00e9diger le r\u00e9sum\u00e9 de la version", owner: 'Lina', status: "\u00c0 faire" },
  { id: 10, task: "V\u00e9rifier les rapports d\u2019erreurs", owner: 'Maya', status: "Termin\u00e9" },
  { id: 11, task: "V\u00e9rifier les limites de l\u2019API", owner: 'Owen', status: "\u00c0 faire" },
  { id: 12, task: "Organiser les notes de recherche", owner: 'Lina', status: "En cours" },
  { id: 13, task: "Valider le texte final", owner: 'Maya', status: "\u00c0 faire" },
  { id: 14, task: "Pr\u00e9parer le compte de d\u00e9monstration", owner: 'Owen', status: "Termin\u00e9" },
  { id: 15, task: "Planifier les entretiens utilisateurs", owner: 'Lina', status: "En cours" },
  { id: 16, task: "Mettre \u00e0 jour le tableau des t\u00e2ches", owner: 'Maya', status: "Termin\u00e9" },
  { id: 17, task: "Partager l\u2019ordre du jour du sprint", owner: 'Owen', status: "\u00c0 faire" },
];

vGrid({
  el: '#local-grid',
  caption: "T\u00e2ches du projet",
  data: tasks,
  columns: [
    { name: 'task', label: "T\u00e2che" },
    { name: 'owner', label: "Responsable" },
    { name: 'status', label: "Statut", filterType: 'select', filterOptions: ":Tout;\u00c0 faire:\u00c0 faire;En cours:En cours;Termin\u00e9:Termin\u00e9" },
  ],
  actions: {
    clear: { active: true, symbol: '\u2715', title: "Effacer les filtres" },
    download: { active: true, symbol: '\u2913', title: "T\u00e9l\u00e9charger" },
    print: { active: true, symbol: '\u2912', title: "Imprimer" },
    refresh: { active: true, symbol: '\u21BB', title: "Actualiser" },
    settings: { active: true, html: '\u2699\uFE0E', title: "Param\u00e8tres" },
  },
  rowsPerPage: 3,
});