I want to create a button inside a cell of react-table column

Question

I am trying to create this button that works well when I am using the map() function :

{bands.events.map((group, i) => (
                <tr key={i}>
                  <td>{group.start}</td>
                  <td>
                    {" "}
                    <button value={group.name} onClick={props.handleClickGroup}>
                      {group.name}
                    </button>
                  </td>
                </tr>
              ))}

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:

import React from "react";
import ReactTable from "react-table";
import "react-table/react-table.css";

var bands = require("../festivals/bands.json");

const FestivalTable = props => {
  const columns = [
    {
      width: 200,
      Header: "Time",
      accessor: "start"
    },
    {
      width: 300,
      Header: "Artist Name",
      accessor: "name",
      Cell: cell => (
        <button value={cell.accessor} onClick={props.handleClickGroup}>
          {cell.accessor}
        </button>
      )
    }
  ];

  return (
    <ReactTable
      data={bands.events}
      columns={columns}
      minRows={0}
      showPagination={false}
      //getTdProps={bands.events}
    />
  );
};

export default FestivalTable;

Then in the parent component, I have put:

<div className="table-wrap">
        <FestivalTable handleClickGroup={props.handleClickGroup} />
      </div>

Solution 1

I realize this is a bit old, but I had the same problem and this is how I resolved it. I'm using the cell property to get the row, then the values object should have the accessor you are looking for (in your case name). Here is what it would look like in your example:

import React from "react";
import ReactTable from "react-table";
import "react-table/react-table.css";

var bands = require("../festivals/bands.json");

const FestivalTable = props => {
  const columns = [
    {
      width: 200,
      Header: "Time",
      accessor: "start"
    },
    {
      width: 300,
      Header: "Artist Name",
      accessor: "name",
      Cell: ({ cell }) => (
        <button value={cell.row.values.name} onClick={props.handleClickGroup}>
          {cell.row.values.name}
        </button>
      )
    }
  ];

  return (
    <ReactTable
      data={bands.events}
      columns={columns}
      minRows={0}
      showPagination={false}
      //getTdProps={bands.events}
    />
  );
};

export default FestivalTable;

Here is a link to the Cell Properties of the react-table api docs: https://github.com/tannerlinsley/react-table/blob/master/docs/api/useTable.md#cell-properties

Solution 2

If you use Cell, don't use accessor, When you pass "cell" is the original object so "accessor" is not an atribute of the original, change it to the name of that accessor in this case is "name" ... kind of tricky, the example is below

import React from "react";
import ReactTable from "react-table";
import "react-table/react-table.css";

var bands = require("../festivals/bands.json");

const FestivalTable = props => {
  const columns = [
    {
      width: 200,
      Header: "Time",
      accessor: "start"
    },
    {
      width: 300,
      Header: "Artist Name",
      Cell: ({ original }) => (
        <button value={original.name} onClick={props.handleClickGroup}>
          {original.name}
        </button>
      )
    }
  ];

  return (
    <ReactTable
      data={bands.events}
      columns={columns}
      minRows={0}
      showPagination={false}
      //getTdProps={bands.events}
    />
  );
};

export default FestivalTable;

Comments

[artworkjpm]

Didn't work for me, I got "TypeError: Cannot read property 'name' of undefined". <button value={cell.name} onClick={props.handleClickGroup}> | ^ 20 | {cell.name} 21 | </button>

[Juan Velasquez]

stackoverflow.com/questions/45968791/…, try with "original", I will update the answer