Jadual Tanstack dan React JS: Bagaimana untuk menunjukkan/menyembunyikan butang berdasarkan keadaan apabila menggunakan React JS dan Jadual Tanstack

Question

Saya telah react js dan melaksanakan jadual tanstack (react-table). Saya memerlukan bantuan untuk membuat butang/pautan menunjukkan atau menyembunyikan berdasarkan keadaan setiap baris. Katakan jika terdapat baris yang mengandungi status butang "Luluskan" akan ditunjukkan sebaliknya ia akan disembunyikan.

......sesetengahnya memulakan data

  const [sorting, setSorting] = useState<SortingState>([]);
  const [rowSelection, setRowSelection] = useState({});
  const [isApproved, setIsApprove] = useState(false);
... ruangan panggilan
lajur const = useMemo<ColumnDef<IEvent>[]>(
...senarai lajur
{
        accessorKey: "status",
        pengepala: () => <span>Status</span>
        sel: (sel: mana-mana) =>
          biarkan status = cell.getValue();
          kembalikan cell.getValue();
        },
        enableIsihan: benar,
        enableColumnFilter: benar,
      },
      {
        accessorKey: "tindakan",
        pengepala: () => <span>Tindakan</span>,
        sel: (sel: mana-mana) =>
          console.log(isApproved);
          kembali (
            <div className="gap-x-2 inline-flex">
              <Pautan ke={`./${cell.row.id}/edit`}>Edit</Link>
              <EVSDeleteButton id={cell.row.id} header="acara"
              <Pautan ke={`./${cell.row.id}/agenda`}>Agenda</Link>
            </div>
          );
        },
        enableIsihan: palsu,
        enableColumnFilter: palsu,
      },

Saya mahu dapat menunjukkan/menyembunyikan butang ("Agenda") bergantung pada keadaan setiap baris

Answer 1

Pernahkah anda menggunakan operator ternary, Conditional (ternary) operator

Answer 2

Anda boleh menggunakan nilai cell.row.original.status 访问每行的 status dan memaparkan butang berdasarkan nilai tersebut dan bukannya menyimpannya dalam pembolehubah keadaan.

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