How to access the row index in the columns of a react-table component

Question

I have a column inside my columns array for my react-table Table component that needs to render a Dropdown button inside the cell to allow users to render that row of data into another modal component to edit.

I am using dropdownToggles, an array of booleans - that is set to the same length as the number of rows in the table - that keeps track of which dropdown in the rows should be set to isOpen.

Is there anyway I can access the row index of the data inside the columns so that I can pass the index to isOpen={dropdownToggles[i]} and toggle={() => setDropdownToggles(handleDropdownToggles(i))} ?

import React, { useState, useEffect, useMemo } from "react";

import { useSelector } from "react-redux";

import { Dropdown } from "reactstrap";

const Table = () => {
    const { tasks } = useSelector(state => state.data);
    const numTasks = tasks.data.length;

    const [dropdownToggles, setDropdownToggles] = useState([]);

    useEffect(() => {
        setDropdownToggles(new Array(numTasks).fill(false));
    }, [numTasks]);

    const data = useMemo(() => tasks.data, [tasks.data]);

    const columns = useMemo(() => {
        const handleDropdownToggles = (toggleThisOne) => (
            dropdownToggles.map((dropdownState, i) => i === toggleThisOne ? !dropdownState : dropdownState)
        );

        return [
            {
                Header: "",
                accessor: "_id",
                Cell: ({ _id }) => (
                    <Dropdown isOpen={dropdownToggles[i]} toggle={() => setDropdownToggles(handleDropdownToggles(i))}>
                        
                    </Dropdown>
                )
            }
        ];
    }, [dropdownToggles]);

    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        prepareRow,
        page,
        canPreviousPage,
        canNextPage,
        pageCount,
        gotoPage,
        nextPage,
        previousPage,
        state: { pageIndex }
    } = useTable({
        columns,
        data,
        initialState: { pageSize: 10 }
    }, usePagination);

    /* rendered component below */
};

Answer 1

Looks like Cell props has row in it which contains the index, so its just a matter of deconstructing it from the props:

Cell: ({ row }) => (
    <Dropdown isOpen={dropdownToggles[row.index]} toggle={() => setDropdownToggles(handleDropdownToggles(row.index))}>
                        
    </Dropdown>
)