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>

score 21 · Answer 1 · answered Jun 19 '20 at 14:41

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

Juan Velasquez · Answer 2 · 2019-06-27T12:08:47.837

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;

Didn't work for me, I got "TypeError: Cannot read property 'name' of undefined". — artworkjpm, Jun 26 '19 at 16:29
https://stackoverflow.com/questions/45968791/react-table-custom-cell-component-that-references-several-row-properties, try with "original", I will update the answer — Juan Velasquez, Jun 27 '19 at 12:07

score 0 · Answer 3 · answered Apr 16 '21 at 07:57

react-bootstrap-table-next v4.0.3

AddButtonToCell = (cell) =>{
            return(<button value={cell} onClick={props.handleClickGroup}>
              {cell}
            </button>)
}    

const columns = [
        {
          width: 300,
          Header: "Artist Name",
          accessor: "name",
          formatter: this.AddButtonToCell,
        }

(not tested for your case ) Try this code. Adds buttons in every cell of the specific column

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

3 Answers3