Tanstack Table 和 React JS：使用 React JS 和 Tanstack Table 時如何根據狀態顯示/隱藏按鈕

Question

我有react js並實作了tanstack表（react-table）。我需要幫助來根據每行的狀態使按鈕/連結顯示或隱藏。 假設如果有行包含狀態「批准」按鈕將顯示，否則它將隱藏。

......some initiliaze data

  const [sorting, setSorting] = useState<SortingState>([]);
  const [rowSelection, setRowSelection] = useState({});
  const [isApproved, setIsApprove] = useState(false);
......calling column
const columns = useMemo<ColumnDef<IEvent>[]>(
......list of column
{
        accessorKey: "status",
        header: () => <span>Status</span>,
        cell: (cell: any) => {
          let status = cell.getValue();
          return cell.getValue();
        },
        enableSorting: true,
        enableColumnFilter: true,
      },
      {
        accessorKey: "actions",
        header: () => <span>Action</span>,
        cell: (cell: any) => {
          console.log(isApproved);
          return (
            <div className="inline-flex gap-x-2">
              <Link to={`./${cell.row.id}/edit`}>Edit</Link>
              <EVSDeleteButton id={cell.row.id} header="event" />
              <Link to={`./${cell.row.id}/agenda`}>Agenda</Link>
            </div>
          );
        },
        enableSorting: false,
        enableColumnFilter: false,
      },

我希望可以顯示/隱藏按鈕（「議程」）依賴每行的狀態

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