title: How to pass data as parameter in react-table?
body: <p>How to pass data values as a parameter in React Table version 7.</p>
  
  <p>I was trying to pass status and id in <code>butFunction</code> inside of react table so that i can create a function which create a button opposite of the status .</p>
  
  <p>here is code what i had tried to do so.</p>
  
  <p><a href="https://codesandbox.io/s/thirsty-jackson-gyryo?file=/src/App.js:0-1875" rel="nofollow noreferrer">Demo Link of the same code</a></p>
  
  <pre><code>
  const data = [
    { firstName: "Jane", lastName: "Doe", status: "OPEN" , id: "1" },
    { firstName: "John", lastName: "Smith", status: "CLOSE"  , id: "2" },
    { firstName: "John", lastName: "Walker", status: "OPEN" , id: "3" }
  ];
  
  const columns = [
        {
          Header: "First Name",
          accessor: "firstName"
        },
        {
          Header: "Last Name",
          accessor: "lastName"
        },
        {
          Header: "Status",
          accessor: "status"
        }
  ];
  
  const Table = ({ columns, data }) =&gt; {
    const {
      getTableProps,
      getTableBodyProps,
      headerGroups,
      rows,
      prepareRow
    } = useTable({
      columns,
      data
    });
  
      const butFunction = (level , id) =&gt; {
        console.log(level)
        console.log(id)
      if (level === "OPEN") {
        return &lt;button &gt; CLOSE &lt;/button&gt;;
      } else {
        return &lt;button &gt; OPEN &lt;/button&gt;;
      }
    };
  
    return (
      &lt;table {...getTableProps()}&gt;
        &lt;thead&gt;
          {headerGroups.map(headerGroup =&gt; (
            &lt;tr {...headerGroup.getHeaderGroupProps()}&gt;
              {headerGroup.headers.map(column =&gt; (
                &lt;th {...column.getHeaderProps()}&gt;{column.render("Header")}&lt;/th&gt;
              ))}
              &lt;th&gt;Action&lt;/th&gt;
            &lt;/tr&gt;
          ))}
        &lt;/thead&gt;
        &lt;tbody {...getTableBodyProps()}&gt;
          {rows.map((row, i) =&gt; {
            prepareRow(row);
            return (
              &lt;tr {...row.getRowProps()}&gt;
                {row.cells.map(cell =&gt; {
                  return &lt;td {...cell.getCellProps()}&gt;{cell.render("Cell")}&lt;/td&gt;;
                })}
                &lt;td&gt;{butFunction(data.status, data.id)}&lt;/td&gt;
              &lt;/tr&gt;
            );
          })}
        &lt;/tbody&gt;
      &lt;/table&gt;
    );
  };
  
  export default function App() {
    return (
      &lt;div className="App"&gt;
        &lt;Table columns={columns} data={data} /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>