title: How to access the row index in the columns of a react-table component
body: <p>I have a column inside my <code>columns</code> array for my <code>react-table</code> 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.</p>
  <p>I am using <code>dropdownToggles</code>, 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 <code>isOpen</code>.</p>
  <p>Is there anyway I can access the row index of the data inside the <code>columns</code> so that I can pass the index to <code>isOpen={dropdownToggles[i]}</code> and <code>toggle={() =&gt; setDropdownToggles(handleDropdownToggles(i))}</code>
  ?</p>
  <pre><code>import React, { useState, useEffect, useMemo } from &quot;react&quot;;
  
  import { useSelector } from &quot;react-redux&quot;;
  
  import { Dropdown } from &quot;reactstrap&quot;;
  
  const Table = () =&gt; {
      const { tasks } = useSelector(state =&gt; state.data);
      const numTasks = tasks.data.length;
  
      const [dropdownToggles, setDropdownToggles] = useState([]);
  
      useEffect(() =&gt; {
          setDropdownToggles(new Array(numTasks).fill(false));
      }, [numTasks]);
  
      const data = useMemo(() =&gt; tasks.data, [tasks.data]);
  
      const columns = useMemo(() =&gt; {
          const handleDropdownToggles = (toggleThisOne) =&gt; (
              dropdownToggles.map((dropdownState, i) =&gt; i === toggleThisOne ? !dropdownState : dropdownState)
          );
  
          return [
              {
                  Header: &quot;&quot;,
                  accessor: &quot;_id&quot;,
                  Cell: ({ _id }) =&gt; (
                      &lt;Dropdown isOpen={dropdownToggles[i]} toggle={() =&gt; setDropdownToggles(handleDropdownToggles(i))}&gt;
                          
                      &lt;/Dropdown&gt;
                  )
              }
          ];
      }, [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 */
  };
  
  </code></pre>