Sélectionnez la ligne sur cliquez réagir table

Il y a un HOC inclus pour Réagir de Table qui permet la sélection, même lorsque le filtrage et la pagination de la table, la configuration est légèrement plus avancée que la table de base afin de lire les infos dans le lien ci-dessous.

Après l'importation du HOC, vous pouvez alors l'utiliser comme ça avec les méthodes nécessaires:

/**
* Toggle a single checkbox for select table
*/
toggleSelection(key: number, shift: string, row: string) {
//start off with the existing state
let selection = [...this.state.selection];
const keyIndex = selection.indexOf(key);
//check to see if the key exists
if (keyIndex >= 0) {
//it does exist so we will remove it using destructing
selection = [
...selection.slice(0, keyIndex),
...selection.slice(keyIndex + 1)
];
} else {
//it does not exist so add it
selection.push(key);
}
//update the state
this.setState({ selection });
}
/**
* Toggle all checkboxes for select table
*/
toggleAll() {
const selectAll = !this.state.selectAll;
const selection = [];
if (selectAll) {
//we need to get at the internals of ReactTable
const wrappedInstance = this.checkboxTable.getWrappedInstance();
//the 'sortedData' property contains the currently accessible records based on the filter and sort
const currentRecords = wrappedInstance.getResolvedState().sortedData;
//we just push all the IDs onto the selection array
currentRecords.forEach(item => {
selection.push(item._original._id);
});
}
this.setState({ selectAll, selection });
}
/**
* Whether or not a row is selected for select table
*/
isSelected(key: number) {
return this.state.selection.includes(key);
}
<CheckboxTable
ref={r => (this.checkboxTable = r)}
toggleSelection={this.toggleSelection}
selectAll={this.state.selectAll}
toggleAll={this.toggleAll}
selectType="checkbox"
isSelected={this.isSelected}
data={data}
columns={columns}
/>

Voir ici pour plus d'informations:

https://github.com/tannerlinsley/react-table/tree/v6#selecttable

Ici est un exemple:

https://react-table.js.org/#/story/select-table-hoc

OriginalL'auteur Alex

si tu veux avoir plusieurs choix sur sélectionner la ligne..

import React from 'react';
import ReactTable from 'react-table';
import 'react-table/react-table.css';
import { ReactTableDefaults } from 'react-table';
import matchSorter from 'match-sorter';
class ThreatReportTable extends React.Component{
constructor(props){
super(props);
this.state = {
selected: [],
row: []
}
}
render(){
const columns = this.props.label;
const data = this.props.data;
Object.assign(ReactTableDefaults, {
defaultPageSize: 10,
pageText: false,
previousText: '<',
nextText: '>',
showPageJump: false,
showPagination: true,
defaultSortMethod: (a, b, desc) => {
return b - a;
},
})
return(
<ReactTable className='threatReportTable'
data= {data}
columns={columns}
getTrProps={(state, rowInfo, column) => {
return {
onClick: (e) => {
var a = this.state.selected.indexOf(rowInfo.index);
if (a == -1) {
//this.setState({selected: array.concat(this.state.selected, [rowInfo.index])});
this.setState({selected: [...this.state.selected, rowInfo.index]});
//Pass props to the React component
}
var array = this.state.selected;
if(a != -1){
array.splice(a, 1);
this.setState({selected: array});
}
},
//#393740 - Lighter, selected row
//#302f36 - Darker, not selected row
style: {background: this.state.selected.indexOf(rowInfo.index) != -1 ? '#393740': '#302f36'},
}
}}
noDataText = "No available threats"
/>
)
}
}
export default ThreatReportTable;

OriginalL'auteur Jun Bin

La réponse que vous avez sélectionné est correct, cependant, si vous utilisez une table de tri, il tombe en panne depuis rowInfo est devenu indéfinis que vous recherchez, recommande l'utilisation de cette fonction au lieu

                getTrGroupProps={(state, rowInfo, column, instance) => {
if (rowInfo !== undefined) {
return {
onClick: (e, handleOriginal) => {
console.log('It was in this row:', rowInfo)
this.setState({
firstNameState: rowInfo.row.firstName,
lastNameState: rowInfo.row.lastName,
selectedIndex: rowInfo.original.id
})
},
style: {
cursor: 'pointer',
background: rowInfo.original.id === this.state.selectedIndex ? '#00afec' : 'white',
color: rowInfo.original.id === this.state.selectedIndex ? 'white' : 'black'
}
}
}}
}

OriginalL'auteur andres aguirre gonzalez