Tanstack Table et React JS : Comment afficher/masquer les boutons en fonction de l'état lors de l'utilisation de React JS et Tanstack Table

Question

J'ai réagi js et implémenté une table tanstack (react-table). J'ai besoin d'aide pour afficher ou masquer les boutons/liens en fonction de l'état de chaque ligne. Supposons que s'il y a une ligne contenant le statut, le bouton "Approuver" sera affiché, sinon il sera masqué.

......certaines données d'initialisation

  const [tri, setSorting] = useState([]);
  const [rowSelection, setRowSelection] = useState({});
  const [isApproved, setIsApprove] = useState(false);
...colonne d'appel
const colonnes = useMemo[]>(
...liste des colonnes
{
        accessorKey : "statut",
        en-tête : () => Status,
        cellule : (cellule : n'importe laquelle) =>
          let status = cell.getValue();
          return cell.getValue();
        },
        activer le tri : vrai,
        activerColumnFilter : vrai,
      },
      {
        accessorKey : "actions",
        en-tête : () => Action,
        cellule : (cellule : n'importe laquelle) =>
          console.log(isApproved);
          retour (
            

              Modifier
              
              Agenda
            
          );
        },
        activer le tri : faux,
        activerColumnFilter : faux,
      },
Je souhaite pouvoir afficher/masquer le bouton ("Agenda") en fonction de l'état de chaque ligne
            

Answer 1

Avez-vous déjà utilisé l'opérateur ternaire, Opérateur conditionnel (ternaire)

Answer 2

Vous pouvez utiliser la valeur cell.row.original.status 访问每行的 status et afficher le bouton en fonction de cette valeur au lieu de le stocker dans une variable d'état.

cell: (cell: any) => (
        <div className="inline-flex gap-x-2">
          <Link to={`./${cell.row.original.id}/edit`}>Edit</Link>
          {cell.row.original.status === "Approved" && (
            <Link to={`./${cell.row.original.id}/agenda`}>Agenda</Link>
          )}
        </div>
      ),