Row level operations on react-table: React Js

Question

I am trying to implement a feature where in on click of each row, I need to get the info of the row that is been clicked and corresponding row color should be changed to something else. And when I select multiple rows using Ctrl+mouse-click the corresponding rows color should also get changed, and need to get the info of corresponding rows in the form of array. I need to have a common getTrProps function that should implement both of this . Can someone help me out with this

Codesandbox: https://codesandbox.io/s/react-table-row-table-0bbyi

App

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

interface IProps {}

interface IState {
  data: IUser[];
  columns: Column<IUser>[];
}
export interface IUser {
  firstName: string;
  status: "Submitted" | "Pending" | "Approved";
  age: string;
}
export interface IColum {
  Header: string;
  accessor: string;
}
class App extends React.Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    this.state = {
      data: [],
      columns: []
    };
  }

  componentDidMount() {
    this.getData();
    this.getColumns();
  }

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

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

  onClickRow = (rowInfo: IUser) => {
    console.log("You clicked: " + JSON.stringify(rowInfo));
  };

  render() {
    return (
      <>
        <DataGrid
          data={this.state.data}
          columns={this.state.columns}
          rowClicked={this.onClickRow}
        />
        <DataGrid data={this.state.data} columns={this.state.columns} />
      </>
    );
  }
}

---

DataGrid

import * as React from "react";
import ReactTable, {
  RowInfo,
  Column,
  ComponentPropsGetterR
} from "react-table";
import "react-table/react-table.css";
import { IUser, IColum } from ".";

interface IProps {
  data: IUser[];
  columns: Column<IUser>[];
  // The ? makes it optional
  rowClicked?: (user: IUser) => void;
}

export default class DataGrid extends React.Component<IProps> {
  rowClick: ComponentPropsGetterR = (state: any, rowInfo: RowInfo) => {
    const rowClicked = this.props.rowClicked;
    return rowClicked
      ? {
          onClick: () => rowClicked(rowInfo.original as IUser)
        }
      : {};
  };
  render() {
    return (
      <ReactTable
        data={this.props.data}
        columns={this.props.columns}
        getTrProps={this.rowClick}
      />
    );
  }
}

Answer 1

Here is Your Final Answer : https://codesandbox.io/s/react-table-row-table-3xwxi

you can now hold Ctrl Key and Select as many row as you want and you can toggle between. and if you don't hold the key you can select one

you can see each time you choose a row color of the row Changes.

and you have all the data in this.state.allData.

and all of this in typescript as you want from your sandbox.