react-table row onClick

[sonalk215]

I am using react-table latest version. I want to call a function on click of a row, and the function should be passed the data of the row clicked. Any pointers would really help

[deadcoder0904]

You can use onClick on tr. Here's an example (search for onClick):

import * as React from "react";
import { useTable } from "react-table";

type Data = {
  actor: string;
  movie: string;
}

const borderStyle = {
  border: "1px dashed navy"
};

export default function App() {
  const origData = [
    {
      actor: "Johnny Depp",
      movies: [
        {
          name: "Pirates of the Carribean 1"
        },
        {
          name: "Pirates of the Carribean 2"
        },
        {
          name: "Pirates of the Carribean 3"
        },
        {
          name: "Pirates of the Carribean 4"
        }
      ]
    }
  ];
  const newData: Array<Data> = [];
  origData.forEach(actorObj => {
    actorObj.movies.forEach(movie => {
      newData.push({
        actor: actorObj.actor,
        movie: movie.name
      });
    });
  });
  const data = React.useMemo(() => newData, []);
  const columns = React.useMemo(
    () => [
      {
        Header: "Actor",
        accessor: "actor"
      },
      {
        Header: "Movies",
        accessor: "movie"
      }
    ],
    []
  );
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = useTable({ columns, data });
  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()} style={borderStyle}>
                {column.render("Header")}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row, i) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()} onClick={() => console.log(row.original)}>
              {row.cells.map((cell, j) => {
                return (
                  <td
                    rowSpan={cell.rowSpan}
                    {...cell.getCellProps()}
                    style={borderStyle}
                  >
                    {cell.render("Cell")}
                  </td>
                );
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

You can alternatively paste this in Codesandbox & try clicking the rows to see it work :)

[SethuSS]

thank you man it works

[abdulsamadayoade]

thanks man, it works

[sultanov2103]

а что напишим на store. Вы с помощью useSelector что то взяли там

[Nik-Ark]

Will it be accessible to people with visual impairments ?

[adarshSrivastava01]

what if I have a generic component and when I call this component, I want to pass the action as <App onRowClick={() => console.log(row.id)} />, is it possible at all

[jaseeyas]

Thanks a lot for the reply. Also one more thing, how to highlight the selected row on click? I need to style the row as per click. Pls help out.

…

Sent from my iPhone

On 20 May 2020, at 6:07 AM, sonalk215 ***@***.***> wrote:  You can call a function(defined in another component) and pass that function as a prop onClick={()=>props.testRowClick(row) Hope that answers your question — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[sonalk215]

You can set a class to each row

    <tr
        {...row.getRowProps()}
        className={classes['table-body-row']}
        onClick={()=>props.testRowClick(row)}
    >

and in css

    .table-body-row:hover {
        background-color: #e6e6ff;
    }

where :hover is a css pseudoclass

Hope this helps

[vikrant-gembrill]

what will happen if I directly call the method defined in the parent component? also i am construction the columns in the parent component, and passing the columns and data as props to child component which renders the react-table. i tried this and this is working but i am not getting the state properly? is this causing some kind of closure issues?

[jaseeyas]

but i cant get it on click..only on hovering its effects comes :( Thanks and Very best regards Yasirali Abudhabi Autonomous Systems Investments United Arab Emirates Mobile: +971 (50) 9721325 E-mail: [email protected] <[email protected]> http://www.adasi.ae/ <http://www.etihad.ae/> P.O. Box 109667, Abu Dhabi,

…

On Thu, May 21, 2020 at 3:49 AM sonalk215 ***@***.***> wrote: You can set a class to each row <tr {...row.getRowProps()} className={classes['table-body-row']} onClick={()=>props.testRowClick(row)} > and in css .table-body-row:hover { background-color: #e6e6ff; } where :hover is a css pseudoclass Hope this helps — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2295 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/APUT3IFSGQWXNZ662FAPC7LRSRT7VANCNFSM4M5Q3RFA> .

[deadcoder0904]

then add a class on click & style it with css

[jaseeyas]

As i am new, could you please provide a sample code. I didnt get how to add a class on click. Any help appreciated :) Thanks and Very best regards Yasirali Abudhabi Autonomous Systems Investments United Arab Emirates Mobile: +971 (50) 9721325 E-mail: [email protected] <[email protected]> http://www.adasi.ae/ <http://www.etihad.ae/> P.O. Box 109667, Abu Dhabi,

…

On Thu, May 21, 2020 at 2:02 PM Akshay Kadam (A2K) ***@***.***> wrote: then add a class on click & style it with css — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2295 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/APUT3IF5H4GZ2VISU4YPTMLRST32PANCNFSM4M5Q3RFA> .

[jaseeyas]

reminder pls Thanks and Very best regards Yasirali Abudhabi Autonomous Systems Investments United Arab Emirates Mobile: +971 (50) 9721325 E-mail: [email protected] <[email protected]> http://www.adasi.ae/ <http://www.etihad.ae/> P.O. Box 109667, Abu Dhabi,

…

On Thu, May 21, 2020 at 2:19 PM yasir kv ***@***.***> wrote: As i am new, could you please provide a sample code. I didnt get how to add a class on click. Any help appreciated :) Thanks and Very best regards Yasirali Abudhabi Autonomous Systems Investments United Arab Emirates Mobile: +971 (50) 9721325 E-mail: ***@***.*** ***@***.***> http://www.adasi.ae/ <http://www.etihad.ae/> P.O. Box 109667, Abu Dhabi, On Thu, May 21, 2020 at 2:02 PM Akshay Kadam (A2K) < ***@***.***> wrote: > then add a class on click & style it with css > > — > You are receiving this because you commented. > Reply to this email directly, view it on GitHub > <#2295 (reply in thread)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/APUT3IF5H4GZ2VISU4YPTMLRST32PANCNFSM4M5Q3RFA> > . >

[sonalk215]

Hi

try something like below

https://stackoverflow.com/questions/42630473/react-toggle-class-onclick

hope this helps...

[isomorpheric]

Does anyone know how to have that same onClick() but only on a button in the last column of the row. I don't want users to click the entire row, just the "Edit" button for the row. If the 'row' is only accessed by 'getRowProps', how can that specificil cell access the row data?

[davewasthere]

For that you'd want to define a Cell in your columns definition.

e.g.

Cell: ({value, column, row}) => { return( <div onClick={ () => doSomethingWithRow(row.original) }>{value}</div> ) }

[isomorpheric]

Appreciate it, thanks!

[nani1008]

Hello @ecam900, How can I get the props from the Cell and display it on the jsx? Any help! Im stuck with this! Thank you!

[mohammedameen028]

I want to add a new row(at the end) with the click of the "Add Row" button in react table created. Can someone please me?

[MichaelGreco]

When you click an add row button that you make, have it open a Modal that collects the info that is needed for that row. Add it to the useState variable that you are using for the table rows and it should automatically update

[merski007]

Anyone else notice a delay when using the toggleRowSelected function inside the onClick event? For example, the state of selectedFlatRows does not update until after the onClick event is complete. On first click, the isSelected prop is false, even though selectedFlatRows will display data outside of the event. And then on second click, the prop is true, even though selectedFlatRows is empty.
Code:

Results: