Tanstack Table 및 React JS: React JS 및 Tanstack Table을 사용할 때 상태에 따라 버튼을 표시하거나 숨기는 방법
<p>저는 반응 js를 가지고 있고 tanstack 테이블(react-table)을 구현했습니다. 각 행의 상태에 따라 버튼/링크를 표시하거나 숨기도록 만드는 데 도움이 필요합니다.
"승인" 상태가 포함된 행이 있으면 버튼이 표시되고 그렇지 않으면 숨겨질 것이라고 가정합니다. </p>
<pre class="brush:php;toolbar:false;">......일부 데이터 초기화
const [sorting, setSorting] = useState<SortingState>([]);
const [rowSelection, setRowSelection] = useState({});
const [isApproved, setIsApprove] = useState(false);
...호출 열
const columns = useMemo<ColumnDef<IEvent>[]>(
...열 목록
{
accessorKey: "상태",
헤더: () =>
상태,
셀: (셀: 임의) =>
let status = cell.getValue();
return cell.getValue();
},
활성화 정렬: true,
활성화열필터: 참,
},
{
accessorKey: "작업",
헤더: () =><span>Action</span>
셀: (셀: 임의) =>
console.log(isApproved);
반품 (
<div className="inline-flex gap-x-2">
<링크={`./${cell.row.id}/edit`}>수정</Link>
<EVSDeleteButton id={cell.row.id} 헤더="이벤트"
<링크={`./${cell.row.id}/agenda`}>의제</Link>
</div>
);
},
활성화 정렬: 거짓,
활성화열필터: 거짓,
},</pre>
<p>각 행의 상태에 따라 버튼('일정')을 표시하거나 숨길 수 있기를 원합니다</p>
