1
votes

Comment styliser conditionnellement la cellule de table de matériaux ReactJs en fonction des valeurs de cellule?

J'ai une colonne dans material-table avec des valeurs telles que succès, échec, etc. Sur la base de ces valeurs, je dois appliquer une couleur sur la cellule. Comment y parvenir à l'aide de material-table .

material-ui material-table

0 commentaires

3 Réponses :

0
votes

Tout d'abord, vous avez besoin de classes dont chacune a le style que vous désirez, puis vous pouvez trouver des

  <TableCell align="right">
      <span className={row.value === "success" ? "text-success" : "text-warning"}>{row.value}</span>
  </TableCell>

dans votre code Ui matrial, puis vous devez créer un intervalle dans lequel il y aura valeurs de table par exemple:

  <TableCell align="right">
       <span>{row.value}</span>
  </TableCell>

alors vous devez vérifier quelle est votre valeur, par exemple si elle est réussie renvoyer la classe vous voulez et si c'est quelque chose, donnez une autre classe

  <TableCell align="right">{row.calories}</TableCell>
  <TableCell align="right">{row.fat}</TableCell>
  <TableCell align="right">{row.carbs}</TableCell>
  <TableCell align="right">{row.protein}</TableCell>

J'espère que cela vous aidera

2 commentaires

ce n'est pas lié à la question d'OP, c'est un simple style de table, il parle de Material-Table, c'est un package séparé.

@HadiPawar Bien, cette question a 2 hashtags Material-UI et Material-Table, je pense que ce n'est pas une mauvaise idée de garder cette réponse pour ceux qui recherchent une réponse à la table Material-Ui, cela pourrait aider quelqu'un à l'avenir, merci pour votre commentaire

5
votes

Cette réponse est spécifique pour réagir material-table

Dans la section des colonnes, nous devons ont quelque chose comme mentionné ci-dessous, donc lorsque les données sont rendues dans le tableau, elles appliqueront conditionnellement un style basé sur les valeurs des cellules.

    {
    title: 'Status', field: 'status',
        render: rowData => {
            return
            rowData.status == "Pending" ? <p style={{ color: "#E87722", fontWeight: "bold" }}>{rowData.status}</p> :
                rowData.status == "SUCCESS" ? <p style={{ color: "#008240", fontWeight: "bold" }}>{rowData.status}</p> :
                    <p style={{ color: "#B0B700", fontWeight: "bold" }}>{rowData.status}</p>
        }
}

2 commentaires

est de toute façon là pour mettre le débogueur à l'intérieur de rendu? Je veux vérifier la valeur rowData?

Je suis surpris de savoir que ce n'est pas quelque part visible dans la documentation, j'ai passé des heures à essayer d'obtenir ce travail et j'étais sur le point d'utiliser autre chose. Merci !

2
votes

J'ai ajouté le style dans la déclaration des colonnes.

const columns = [
    { title: "ID", field: "_id" },
    { title: "Email", field: "email" },
    {
      title: "First Login",
      field: "first_login",
      cellStyle: (e, rowData) => {
        if (!rowData.first_login) {
          return { color: "red" };
        }
      },
    },
  ];

0 commentaires