Tanstack Table und React JS: So zeigen/verbergen Sie Schaltflächen basierend auf dem Status, wenn Sie React JS und Tanstack Table verwenden

Question

Ich habe React JS und die Tanstack-Tabelle (React-Table) implementiert. Ich benötige Hilfe beim Ein- oder Ausblenden von Schaltflächen/Links basierend auf dem Status jeder Zeile. Angenommen, wenn es eine Zeile mit dem Status gibt, wird die Schaltfläche „Genehmigen“ angezeigt, andernfalls wird sie ausgeblendet.

......einige Initialisierungsdaten

  const [sorting, setSorting] = useState<SortingState>([]);
  const [rowSelection, setRowSelection] = useState({});
  const [isApproved, setIsApprove] = useState(false);
...Aufrufspalte
const columns = useMemo<ColumnDef<IEvent>[]>(
...Liste der Spalten
{
        accessorKey: "status",
        Header: () => <span>Status</span>,
        Zelle: (Zelle: beliebig) =>
          let status = cell.getValue();
          return cell.getValue();
        },
        enableSorting: true,
        enableColumnFilter: true,
      },
      {
        accessorKey: "Aktionen",
        Header: () => <span>Action</span>,
        Zelle: (Zelle: beliebig) =>
          console.log(isApproved);
          zurückkehren (
            <div className="inline-flex gap-x-2">
              <Link to={`./${cell.row.id}/edit`}>Bearbeiten</Link>
              <EVSDeleteButton id={cell.row.id} header="event"
              <Link to={`./${cell.row.id}/agenda`}>Agenda</Link>
            </div>
          );
        },
        enableSorting: false,
        enableColumnFilter: false,
      },

Ich möchte die Schaltfläche („Agenda“) je nach Status jeder Zeile ein-/ausblenden können

Answer 1

您是否使用过三元运算符，条件 (三元）运算符

Answer 2

您可以使用 cell.row.original.status 访问每行的 status 值，并根据该值显示按钮，而不是将其存储在状态中变量。

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>
      ),