Row level operations on react-table: React Js - reactjs

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.