Tanstack Table と React JS: React JS と Tanstack Table を使用するときに状態に基づいてボタンを表示/非表示にする方法

Question

私はreact jsとtanstackテーブル(react-table)を実装しました。各行の状態に基づいてボタン/リンクを表示または非表示にするのに助けが必要です。 ステータスを含む行がある場合は「承認」ボタンが表示され、そうでない場合は非表示になるとします。

......一部のデータを初期化します

  const [sorting, setSorting] = useState<SortingState>([]);
  const [rowSelection, setRowSelection] = useState({});
  const [isApproved, setIsApprove] = useState(false);
...呼び出し列
const columns = useMemo<ColumnDef<IEvent>[]>(
...列のリスト
{
        accessorKey: "ステータス"、
        ヘッダー: () => <span>ステータス</span>,
        セル: (セル: 任意) => {
          let status = cell.getValue();
          戻り cell.getValue();
        }、
        イネーブルソート: true、
        EnableColumnFilter: true、
      }、
      {
        accessorKey: "アクション"、
        ヘッダー: () => <span>アクション</span>,
        セル: (セル: 任意) => {
          console.log(承認済み);
          戻る （
            <div className="インラインフレックス ギャップ-x-2">
              <リンク先={`./${cell.row.id}/edit`}>編集</Link>
              <EVSDeleteButton id={cell.row.id} header="event" />
              <リンク先={`./${cell.row.id}/agenda`}>議題</Link>
            </div>
          );
        }、
        イネーブルソート: false、
        EnableColumnFilter: false、
      },

各行の状態に応じてボタン（「議題」）を表示/非表示にできるようにしたいです

Answer 1

三項演算子 条件付き (三項) 演算子

を使用したことがありますか?

Answer 2

cell.row.original.status を使用すると、各行の status 値にアクセスし、ステータス変数に値を保存する代わりに、その値に基づいてボタンを表示できます。 リーリー