this component react presents a table with its own row id, what I want to do is to have the possibility to select the row with the mouse-click at the user's click, how can I implement this within this react application? The table loads a series of values from the backend which then displays with reactstrap, how can I fix this?
React.js Code:
class Static extends React.Component {
constructor(props) {
super(props);
this.textInput = React.createRef();
this.state = {
tableStyles: [
],
};
this.checkAll = this.checkAll.bind(this);
}
parseDate(date) {
this.dateSet = date.toDateString().split(" ");
return `${date.toLocaleString("en-us", { month: "long" })} ${
this.dateSet[2]
}, ${this.dateSet[3]}`;
}
checkAll(ev, checkbox) {
const checkboxArr = new Array(this.state[checkbox].length).fill(
ev.target.checked
);
this.setState({
[checkbox]: checkboxArr,
});
}
//Function create user
async newuser(event){
let ragionesocialetext = event.target.value;
console.log("Ragione Sociale: "+ragionesocialetext);
}
//Function call con text change
async handleChange(event) {
let searchtext = event.target.value;
var result=await ricercaclienti(searchtext);
var results=[];
for(var i=0; i<result.length; i++){
var value={
id: result[i].IdCliente,
picture: require("../../../images/cliente.jpg"), // eslint-disable-line global-require
description: result[i].RagioneSociale,
info: {
citta: result[i].Citta,
provincia: result[i].Provincia,
},
DataInserimento: result[i].DataInserimento,
Cap: result[i].Cap,
progress: {
percent: 30,
colorClass: "warning",
}
};
results.push(value);
}
this.setState({tableStyles: results});
}
render() {
return (
<div className={s.root}>
<h2 className="page-title">
Clienti - <span className="fw-semi-bold"> Anagrafia</span>
</h2>
<Row>
<Col>
<Widget
settings
close
bodyClass={s.mainTableWidget}
>
<p></p>
<p></p>
<p></p>
<p></p>
<FormGroup >
<InputGroup className="input-group-no-border">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fa fa-search text-white" />
</InputGroupText>
</InputGroupAddon>
<Input
id="search-input"
className="input-transparent"
placeholder="Ricerca"
type='text'
name='ricerca'
onChange={this.handleChange.bind(this)}
/>
</InputGroup>
</FormGroup>
<Table striped>
<thead>
<tr className="fs-sm">
<th className="hidden-sm-down">#</th>
<th>Cliente</th>
<th>Ragione Sociale</th>
<th className="hidden-sm-down">Indirizzo</th>
<th className="hidden-sm-down">Data Inserimento</th>
<th className="hidden-sm-down">CAP</th>
<th className="hidden-sm-down">Stato</th>
</tr>
</thead>
<tbody>
{this.state.tableStyles.map((row) => (
<tr key={row.id}>
<td>{row.id}</td>
<td>
<img
className="img-rounded"
src={row.picture}
alt=""
height="50"
/>
</td>
<td>
{row.description}
{row.label && (
<div>
<Badge color={row.label.colorClass}>
{row.label.text}
</Badge>
</div>
)}
</td>
<td>
<p className="mb-0">
<small>
Città:
<span className="text-muted fw-semi-bold">
{row.info.citta}
</span>
</small>
</p>
<p>
<small>
Provincia:
<span className="text-muted fw-semi-bold">
{row.info.provincia}
</span>
</small>
</p>
</td>
<td className="text-muted">{row.DataInserimento}</td>
<td className="text-muted">{row.Cap}</td>
<td className="width-150">
<Progress
color={row.progress.colorClass}
value={row.progress.percent+row.i}
className="progress-sm mb-xs"
/>
</td>
</tr>
))}
</tbody>
</Table>
<div className="clearfix">
<div className="float-right">
<Button color="default" className="mr-2" size="sm">
Refresh...
</Button>
<UncontrolledButtonDropdown>
<DropdownToggle
color="inverse"
className="mr-xs"
size="sm"
caret
>
Nuovo Cliente
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Inserisci ragione sociale</DropdownItem>
<Input
id="search-input"
className="input-transparent"
placeholder="ragionesociale"
type='text'
name='ragionesociale'
onChange={this.newuser.bind(this)}
/>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<p></p>
</div>
</Widget>
</Col>
</Row>
</div>
);
}
}
<tr>and adddata-attributeson<tr>for getting the rowId user clicked on.