我有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,
},
我希望可以显示/隐藏按钮(“议程”)依赖于每行的状态
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
您是否使用过三元运算符,条件 (三元)运算符
您可以使用
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> ),