My code is working perfectly, except for the fact that when I click on a cell, I cannot retrieve the table header text. Retrieving the row text works fine based on the code. If I use Object.keys(data) inside the alert function to retrieve the data, it gives me all the header text instead of the corresponding cell. I am using semantic-ui-react table.
class NonProtectedFeatureBias extends Component {
constructor(props){
super(props);
this.state = {
staticPostData:{
dataset_id: 1
},
tableData:{},
};
}
renderKeys (data) {
return Object.keys(data).map(item => (<Table.HeaderCell>{item}</Table.HeaderCell>))
}
renderValues (data) {
const rows = {}
Object.values(data).forEach(col => {
for (let [key, value] of Object.entries(col)) {
rows[key] = rows[key] ? [...rows[key], value] : [value]
}
})
return Object.entries(rows).map(([item, values]) => (
<Table.Row>
<Table.Cell>{item}</Table.Cell>
{
values.map(val =>
<Table.Cell
className={ val === 'Low' ? ('green-color') : val === 'High' ? ('red-color') : ('orange-color') }
selectable
onClick={()=>{
alert(Object.keys(data) + " " + item);
}}
verticalAlign='middle'
> {val}
</Table.Cell> )
}
</Table.Row>
))
}
componentDidMount() {
this.fetchData();
}
fetchData(){
axios.post('http://localhost:5000/GetProxyTable', this.state.staticPostData)
.then((response) =>{
this.setState({tableData:response.data})
});
}
render(){
return (
<Container style={{height:"250px", backgroundColor:""}}>
<Table definition style={{marginTop:"5px"}} key="mytb">
<Table.Header>
<Table.Row className="cell-with-no-padding">
<Table.HeaderCell className="cell-width-single" />
{this.renderKeys(this.state.tableData)}
</Table.Row>
</Table.Header>
<Table.Body>
{this.renderValues(this.state.tableData)}
</Table.Body>
</Table>
</Container>
);
}
}
export default NonProtectedFeatureBias;
Here is the response I received from the API. https://i.sstatic.net/KwFH3.png
Any suggestions would be greatly appreciated.