title: I want to create a button inside a cell of react-table column
body: <p>I am trying to create this button that works well when I am using the map() function :</p>
  
  <pre><code>{bands.events.map((group, i) =&gt; (
                  &lt;tr key={i}&gt;
                    &lt;td&gt;{group.start}&lt;/td&gt;
                    &lt;td&gt;
                      {" "}
                      &lt;button value={group.name} onClick={props.handleClickGroup}&gt;
                        {group.name}
                      &lt;/button&gt;
                    &lt;/td&gt;
                  &lt;/tr&gt;
                ))}
  </code></pre>
  
  <p>However, now I want to use react-table to filter the dates in time order and enable other features, however I can't seem to find the way to add this button and print out the data of the local json inside the button element. This is my code:</p>
  
  <pre><code>import React from "react";
  import ReactTable from "react-table";
  import "react-table/react-table.css";
  
  var bands = require("../festivals/bands.json");
  
  const FestivalTable = props =&gt; {
    const columns = [
      {
        width: 200,
        Header: "Time",
        accessor: "start"
      },
      {
        width: 300,
        Header: "Artist Name",
        accessor: "name",
        Cell: cell =&gt; (
          &lt;button value={cell.accessor} onClick={props.handleClickGroup}&gt;
            {cell.accessor}
          &lt;/button&gt;
        )
      }
    ];
  
    return (
      &lt;ReactTable
        data={bands.events}
        columns={columns}
        minRows={0}
        showPagination={false}
        //getTdProps={bands.events}
      /&gt;
    );
  };
  
  export default FestivalTable;
  </code></pre>
  
  <p>Then in the parent component, I have put:</p>
  
  <pre><code>&lt;div className="table-wrap"&gt;
          &lt;FestivalTable handleClickGroup={props.handleClickGroup} /&gt;
        &lt;/div&gt;
  </code></pre>