Tanstack Table 和 React JS：使用 React JS 和 Tanstack Table 時如何根據狀態顯示/隱藏按鈕
P粉042455250
2023-09-02 23:04:17
<p>我有react js並實作了tanstack表（react-table）。我需要幫助來根據每行的狀態使按鈕/連結顯示或隱藏。
假設如果有行包含狀態「批准」按鈕將顯示，否則它將隱藏。 </p>
<pre class="brush:php;toolbar:false;">......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,
},</pre>
<p>我希望可以顯示/隱藏按鈕（「議程」）依賴每行的狀態</p>
您是否使用過三元運算符，條件 (三元）運算子
#您可以使用
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> ),