0

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

Nadhiful_A
  • 11
  • 5
  • Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. – Community Jul 27 '23 at 01:55

2 Answers2

0

Have you used the Ternary operator, Conditional (ternary) operator

Lokkesh
  • 92
  • 8
  • Yes i have, i attach my code in below https://codepen.io/vaiz777/pen/JjemrrX – Nadhiful_A Jul 26 '23 at 23:59
  • Just use {isApproved ? your (link/button) here.... : <>>} – Lokkesh Jul 27 '23 at 03:38
  • When i use it, it only give 'false', not 'true' even there is row contain 'Approve' status. i try to dig more deep into tanstack, i have check cell properties by console.log(cell.original.status) but it give 2 status and still cannot showing or hiding button – Nadhiful_A Jul 27 '23 at 05:29
  • Can I know where you are storing the status? or create a sandbox of your code – Lokkesh Jul 27 '23 at 05:36
  • sure here is https://codesandbox.io/s/frosty-rhodes-yj9p6y?file=/src/App.js Please ignore error about proptypes, i guess it because i am not install the dependecies – Nadhiful_A Jul 27 '23 at 07:49
  • You haven't passed the isApproved as dependency in your useMemo, kindly check it – Lokkesh Jul 27 '23 at 09:51
  • i have update it in her: https://codesandbox.io/p/sandbox/frosty-rhodes-yj9p6y?file=%2Fsrc%2FApp.tsx%3A119%2C16 Could you give more detail? – Nadhiful_A Jul 27 '23 at 12:24
  • I have solved it thank you – Nadhiful_A Jul 27 '23 at 13:17
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>
      ),
Bipin MV
  • 51
  • 3