Données

x4js fournit deux façons de présenter des données en tableau. Elles ne s’appuient pas sur le même stockage.

	Gridview	Spreadsheet
Données	des enregistrements, dans un DataStore	des cellules, dans un Store
Colonnes	les champs d’un modèle	libres
Usage	listes d’objets : clients, commandes…	grilles de saisie, tableaux de type tableur
Édition en ligne	non	oui

Ces magasins servent aux données tabulaires. Ils ne remplacent pas l’état de l’application, décrit dans État et messages.

Des enregistrements : DataStore et Gridview

Un DataModel décrit les champs d’un enregistrement, à l’aide de décorateurs.

import { DataModel, DataStore, Gridview, data } from 'x4js';

class PersonModel extends DataModel {
  @data.id( )    id: number;
  @data.string( )  name: string;
  @data.int( )  age: number;
}

Un DataStore contient les enregistrements :

const people = new DataStore( {
  model: new PersonModel( ),
  data: [
    { id: 1, name: "Ada", age: 36 },
    { id: 2, name: "Linus", age: 28 },
  ]
});

Et un Gridview les affiche. Chaque colonne désigne un champ par son nom.

const grid = new Gridview( {
  flex: 1,
  store: people,
  columns: [
    { id: "name", title: "Name", width: 200 },
    { id: "age", title: "Age", width: 80, type: "number", align: "right" },
  ],
});

La grille suit les changements du magasin : un ajout, une modification ou une suppression dans le DataStore se voit aussitôt, sans rien rafraîchir à la main.

Pour filtrer ou trier sans toucher aux données, on crée une vue sur le magasin avec createView.

Des cellules : Store et Spreadsheet

Un Store range des valeurs par ligne et par colonne.

import { Spreadsheet, Store } from 'x4js';

const cells = new Store( );

cells.setMaxRowCount( 2 );
cells.setData( 0, 0, "Screws" );
cells.setData( 0, 1, 120 );

Le Spreadsheet affiche ce magasin. Une colonne marquée editable peut être modifiée directement dans la grille.

const sheet = new Spreadsheet( {
  flex: 1,
  store: cells,
  columns: [
    { id: 0, title: "Item", width: 200, editable: true },
    { id: 1, title: "Quantity", width: 100, type: "number", align: "right", editable: true },
  ],
  cellChange: ( ev ) => {
    // refuse une quantité négative
    if( ev.colId==1 && ev.value<0 ) {
      ev.preventDefault( );
    }
  },
});

L’édition en ligne

Action	Effet
F2, Entrée, double-clic, ou frappe directe	Ouvre l’éditeur de la cellule.
Entrée, Tab, clic ailleurs	Valide la saisie.
Échap	Annule.
Suppr	Vide la cellule.
Double-clic ou barre d’espace sur une case à cocher	Bascule sa valeur.

L’éditeur dépend du type de la colonne : texte, nombre, date. Une colonne peut fournir le sien par la propriété editor, par exemple une liste de choix.

Deux événements laissent la main à l’application :

• cellChange est émis avant qu’une valeur saisie soit écrite. On peut la refuser avec preventDefault( ), ou la remplacer.
• cellKey est émis pour chaque touche reçue par la grille, ce qui permet de donner un rôle aux touches de fonction.

Jeux de données volumineux

Les deux grilles ne construisent que les lignes visibles, et restent donc fluides avec beaucoup de lignes.

En revanche, charger un très gros jeu de données distant en entier dans un DataStore local n’est pas toujours raisonnable. Pour ces volumes, prévoyez un chargement par morceaux côté serveur.