CODEWITHSUNDEEP
javascriptreactjssetstatereact-table
joy08
joy08

Reputation: 9652

On click of a row get the data of that particular row

I am using react-table for data-grid purposes. I have extracted react-table as a separate component where-in I just pass necessary props to it and it renders the grid.

I am trying to get the info related to a particular row whenever I click on it. I am trying getTrProps but does not seem like working.

Sandbox: https://codesandbox.io/s/react-table-row-table-g3kd5

App Component

import * as React from "react";
import { render } from "react-dom";
import DataGrid from "./DataGrid";

interface IProps {}
interface IState {
  data: {}[];
  columns: {}[];
}

class App extends React.Component<IProps, IState> {
  constructor(props: any) {
    super(props);
    this.state = {
      data: [],
      columns: []
    };
  }

  componentDidMount() {
    this.getData();
  }

  getData = () => {
    let data = [
      { firstName: "Jack", status: "Submitted", age: "14" },
      { firstName: "Simon", status: "Pending", age: "15" },
      { firstName: "Pete", status: "Approved", age: "17" }
    ];
    this.setState({ data }, () => this.getColumns());
  };

  getColumns = () => {
    let columns = [
      {
        Header: "First Name",
        accessor: "firstName"
      },
      {
        Header: "Status",
        accessor: "status"
      },
      {
        Header: "Age",
        accessor: "age"
      }
    ];
    this.setState({ columns });
  };

  onClickRow = () => {
    console.log("test");
  };

  render() {
    return (
      <>
        <DataGrid
          data={this.state.data}
          columns={this.state.columns}
          rowClicked={this.onClickRow}
        />
      </>
    );
  }
}
render(<App />, document.getElementById("root"));

DataGrid Component

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

interface IProps {
  data: any;
  columns: any;
  rowClicked(): void;
}

interface IState {}

export default class DataGrid extends React.Component<IProps, IState> {
  onRowClick = (state: any, rowInfo: any, column: any, instance: any) => {
    this.props.rowClicked();
  };

  render() {
    return (
      <>
        <ReactTable
          data={this.props.data}
          columns={this.props.columns}
          getTdProps={this.onRowClick}
        />
      </>
    );
  }
}

Upvotes: 0

Views: 3656

Answers (2)

Ido
Ido

Reputation: 5748

Use this code to get info of a clicked row:

 getTdProps={(state, rowInfo, column, instance) => {
            return {
              onClick: (e, handleOriginal) => {
                console.log("row info:", rowInfo);

                if (handleOriginal) {
                  handleOriginal();
                }
              } 
          }}}

You can check this CodeSandbox example: https://codesandbox.io/s/react-table-row-table-shehb?fontsize=14

Upvotes: 1

Domino987
Domino987

Reputation: 8774

you have quite a few errors in your code but to pass the value back you have to put it into your callback:

onRowClick = (state: any, rowInfo: any, column: any, instance: any) => {
    this.props.rowClicked(rowInfo);
};

and read it out like this:

onClickRow = (rowInfo) => {
    console.log(rowInfo);
 };

Hope this helps.

Upvotes: 1

Related Questions