Selecting row from a bootstrap react Table

Question

i have to display the Data coming from Async Function. and that works very well. (see the Image) the Table is am starting Empty. but the Data will be displed after the Await.

So the Problem i cant find any Propertie to get the selected row from the Table. is there a method how to do that ??

thank youu

enter image description here

my code :

import React from 'react';
import {Button,Table,Tab, Tabs} from 'react-bootstrap'
import ReactDOM from "react-dom";

import './index.css'

import App from "./App";
import { createElement } from 'react';


export default class SettingsView extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
          List: [],
          MasterChecked: true,
          SelectedList: [],
        };
      }

   // Select/ UnSelect Table rows
  onMasterCheck(e) {
    let tempList = this.state.List;
    // Check/ UnCheck All Items
    tempList.map((user) => (user.selected = e.target.checked));

    //Update State
    this.setState({
      MasterChecked: e.target.checked,
      List: tempList,
      SelectedList: this.state.List.filter((e) => e.selected),
    });
  }
  
  btnClicked = async () => {
        // Use IPC API to query Electron's main thread and run this method
        const result = await window.api.getNetworkInterfaces()
        console.log(result)
    
        var table = document.createElement('tbody');
       // var checkbox = document.createElement("input");

        var rowNumber = 0;
        for (const [key, value] of Object.entries(result)) {
            var entryNumber = 0;
            value.forEach(entry => {
                var row = table.insertRow();
                var cell_rowNumber = row.insertCell(0);
                cell_rowNumber.innerHTML = rowNumber++
                var cell_adapterName = row.insertCell(1);
                cell_adapterName.innerHTML = key;
                var cell_family = row.insertCell(2);
                cell_family.innerHTML = entry.family;
                var cell_address = row.insertCell(3);
                cell_address.innerHTML = entry.address;
                  
            })
        }
    
        var tbody = document.getElementById("networkInterfacesTable").getElementsByTagName("tbody")[0];
        
        tbody.parentNode.replaceChild(table, tbody);
    
        this.setState({
            networkInterfaces: 'updated'
        })
        
    }
    onItemCheck(e) {
        console.log(e);
      }

  

    render(){
        return (
           
            <div>
                <h5 className='h1_style'>General Settings</h5>
                <Tabs defaultActiveKey="profile" id="uncontrolled-tab-example" className="mb-3">
                <Tab eventKey="online" title="General">
                <div className='settingInhalt' >
                   <h5 className='h5style' >Language Selection</h5>
                   <div>
                       <div  style={{marginTop:'3%'}}><label style={{marginLeft:'1%',marginBottom:'2%'}}>Language</label><select style={{marginLeft:'20%', width:'30%'}} name='Select Language'  > <option value="">English</option></select>                  
                       </div>   
                   </div>               
                </div>
                </Tab>
                <Tab  eventKey="offline" title="Network Adapter">
                <div className='settingInhalt' >
                <Button onClick={this.btnClicked}> Scan Network</Button>
                <Table id="networkInterfacesTable" responsive striped bordered hover>
                        <thead>
                            <tr>  
                                <th></th>
                                <th>Adapter Name</th>
                                <th>Description</th>
                                <th>IP Address</th>     
                            </tr>  
                        </thead>
                        <tbody>
                           
                        </tbody>
                    </Table>
                   
                </div>
                </Tab>
                <Tab eventKey="compare" title="GSDML">
             
                </Tab>
                </Tabs>


            </div>
            
        );
    }
    
}

Answer 1

Problem resolved. if any one have the same probleme, he can simply use Datagrid from @MUI react.

It will be necessary to implement the useState from react, to refresh the Datagrid view.

the Solution is :

import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';
import { render } from 'react-dom';


const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  {
    field: 'firstName',
    headerName: 'First name',
    width: 150,
    editable: true,
  },
  {
    field: 'lastName',
    headerName: 'Last name',
    width: 150,
    editable: true,
  },
  {
    field: 'age',
    headerName: 'Age',
    type: 'number',
    width: 110,
    editable: true,
  },
  {
    field: 'fullName',
    headerName: 'Full name',
    description: 'This column has a value getter and is not sortable.',
    sortable: false,
    width: 160,
    valueGetter: (params) =>
      `${params.row.firstName || ''} ${params.row.lastName || ''}`,
  },
];

const rows = [
  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
 
];

const rowsss = [
  { id: 6, lastName: 'gggg', firstName: 'gggg', age: 40 },
 
];

class DataGridDemo extends  React.Component{


  constructor() {
    super();
  
    this.state = {
        list:rows
    };
  
}

change = async () => {
  // Use IPC API to query Electron's main thread and run this method
  const result = await window.api.getNetworkInterfaces()
  var rowNumber = [];
  for (const [key, value] of Object.entries(result)) {
      var entryNumber = 0;
      value.forEach(entry => {
          rowNumber=[{ id: entry.address, lastName: entry.address, firstName: entry.address, age: entry.address},];
            
      })
  }

  this.setState({
      list:rowNumber
  })
  
}

render(){
   return (
  <div style={{ height: 400, width: '100%' }}>
    <button onClick={this.change} >my button</button>
    <DataGrid
      rows={this.state.list}
      columns={columns}
      pageSize={5}
      rowsPerPageOptions={[5]}
      checkboxSelection
      disableSelectionOnClick
    />
  </div>
);

}
 
}
export default DataGridDemo;