Discussion :

[DiverSIG]

Bonjour,

Dans mon appli React, j'utilise une Material React Table (https://www.material-react-table.com/)
J'active le mode Edition pour chaque ligne, en mode 'fenêtre modale'

Le problème vient des boutons d'action de la fenêtre modale, de type MRT_EditActionButtons :
J'ai bien un bouton Cancel et un bouton Save, mais les actions sont inversées : si je clique sur Cancel, je vois les modifications se répercuter dans ma table, si je clique sur Save, la fenêtre se ferme et rien ne se passe dans la table.

Autre question : comment customiser ces 2 boutons (texte, couleur, ...)

pour info, ma version de la librairie : "material-react-table": "^3.2.1",

Ca vient de ma config, ou c'est un bug ?

Merci,

Nico

[DiverSIG]

En fait, quand je laisse le formulaire de modification par défaut comme dans l'exemple, ça fonctionne :

<DialogContent>
{internalEditComponents}
</DialogContent>

Ce que je veux, c'est customiser les champs du formulaire.

Sur chaque ligne de ma table, dans RowActions, j'ai un bouton qui affiche le formulaire :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
renderRowActions: ({ row, table }) => (
      <Box sx={{ display: 'flex', gap: '1rem' }}>
        <Tooltip title="Editer">
          <IconButton onClick={() => {
              table.setEditingRow(row)
            }}
          >
            <EditIcon />
          </IconButton>
        </Tooltip>
      ..........

Dans mon formulaire

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
renderEditRowDialogContent: ({ table, row, internalEditComponents }) => (
      <>
        <DialogTitle className={styles.form_title}>Titre</DialogTitle>
        <DialogContent>
          {/*internalEditComponents*/} {/* or render custom edit components here */}
          {<form onSubmit={(e) => e.preventDefault()}>
            <Grid container direction="row" justify="flex-start" alignItems="flex-start" spacing={2} className={styles.form_grid}>
              ..........
              <FormControl>
                <InputLabel>Priorité</InputLabel>
                <Select value={row.original.priorite} label="Priorité" name="priorite"
                        onChange={(e) => {
                          row.original.priorite = e.target.value
                        }}
                        className={styles.select}
                >
                  {
                    priorite.map(function(item, i){
                      return <MenuItem value={item.id}>{item.nom}</MenuItem>;
                    })
                  }
                </Select>
              </FormControl>
              ..........
         </Grid>
      </form>}
        </DialogContent>
        <DialogActions>
          <MRT_EditActionButtons variant="text" table={table} row={row} />          
        </DialogActions>
      </>

Et là, ça modifie la table quand je clique sur Cancel, et ça ne fait rien quand je clique sur Save.
Mais si je rouvre le formulaire une deuxième fois, il est initialisé avec les valeurs que j'ai modifié la première fois

Une idée de ce qui cloche?


Nico