Discussion :

[DiverSIG]

Bonjour,

Je crée un composant React avec une table Material React, et des filtre de type select sur certaines colonnes.



L'icône + en haut à gauche ouvre un formulaire pour ajouter une ligne, les boutons action sur chaque ligne permettent de modifier ou supprimer l'élément

Le code du composant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
function MonComposant() {
 
  const [data, setData] = useState([]);
  const [statut, setStatut] = useState([]);
  const [assign, setAssign] = useState([]);
  const [dataLoaded, setDataLoaded] = useState(false);
 
  ...
  useEffect(() => {
    Promise.all([
      fetch(`${config.SERVER_URL}/data/get`).then(resp => resp.json()).then(result => {setData(result)}),         
      fetch(`${config.SERVER_URL}/statut/get`).then(resp => resp.json()).then(result => {setStatut(result)}),    // récupère la liste des statuts
      fetch(`${config.SERVER_URL}/assign/get`).then(resp => resp.json()).then(result => setAssign(result)),       // récupère la liste des utilisateurs 
    ]).then(setDataLoaded(true))
  }, []);
 
  ...
  const columns = useMemo(
    () => [
      {
        accessorKey: "nom",
        header: "Nom",
      },
      {
        accessorKey: "statut_nom",
        header: "Statut",
        filterVariant: 'select',
        filterSelectOptions: statut.map(s => s.nom),
      },
      {
        accessorKey: "assign_nom",
        header: "Assigné à",
        filterVariant: 'select',
        filterSelectOptions: assign.map(u => u.login),
      },
    ],
    [dataLoaded]
  );
 
  const table = useMaterialReactTable({
    columns,
    data, 
    enableEditing: true,
    enableRowSelection: true,
    ...
  });
 
  ...
 
  return (
    <MaterialReactTable table={table} />
 
  );
 
}

Le problème, c'est que quand j'arrive sur la page, si je déroule un filtre pour filtrer une colonne, je n'ai rien dans la liste de choix :



Si je fais une action sur la table (ajouter ou modifier un élément), ensuite, quand je veux filtrer une colonne, j'ai bien mes valeurs dans la liste de choix :



Qu'est ce qu'il manque à l'initialisation de la table pour avoir la liste des valeurs dans les filtres ?

Merci,
Nico