Javascript - Tanstack Table & React JS: How to Show/Hide Button depend on Status when using React JS and Tanstack Table

Nadhiful_A
July 28, 2023
266 views
1 vote
2 Answers

I have react js and implement tanstack table(react-table). I need help to make button/link show or hide depended on the status in each row.
Let say if there is row contain status ‘Approve’ the button will show, then if not it will hidden.

......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,
      },

I hope can show/hide button(‘Agenda’) depended status on each row

Answers

- Lokkesh
- July 26, 2023 at 1:03 pm
- 0 votes
0
Have you used the Ternary operator, Conditional (ternary) operator

Login or Signup to reply.

- BipinMV
- July 28, 2023 at 6:08 pm
- 0 votes
0
You can access the value of status from each row using cell.row.original.status and show the button based on the value instead of storing it in a state variable.
```
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>
      ),
```
Login or Signup to reply.