Source:  Twitter logo

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>

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

15 users liked answer #0dislike answer #015
Redbeard profile pic
Redbeard

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;
1 users liked answer #1dislike answer #11
Juan Velasquez profile pic
Juan Velasquez

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

0 users liked answer #2dislike answer #20
Hem M profile pic
Hem M

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).