I am fetching My User data from the backend. I am using Bootstrap Table to show the data. see the image

I want to show all the Records under the one Table in Row Formatting

This is my code

 <div>
  <table className="table table border shadow table-striped table-md table-hover" style={{ marginLeft: '4%', marginTop: '13%', width: '173%' }}>
    <thead className="table-light">
      <tr style={{ color: 'blue', "fontSize": "18px" }}>
        <th scope="col">#</th>
        <th scope="col">Name</th>
        <th scope="col">Email id</th>
        <th scope="col">Role</th>
        <th scope="col">Action</th>
      </tr>
    </thead>
    <tbody>
          <tr>
            <th scope="row">{ 1}</th>
            <td>{user.name}</td>
            <td>{user.email}</td>
            <td>{user.role}</td>
            <td>
              <button type="submit" onClick={()=>{updateUser(user)}} className="btn btn-warning mx-1">{<FaUserEdit />} Edite</button> 
              <button type="submit" onClick={() => { deleteUser(user._id) }} className="btn btn-outline-warning mx-1">{<MdDelete />} delete</button>
            </td>
          </tr>
        
    </tbody>
  </table>
</div>