//HTML_code
<div class="container">
<div class="row justify-content-center">
<table class="table" id="veri_tablo">
 <thead class="thead-dark">
   <tr>
     <th onclick="sort_data('id')">ID</th>
     <th onclick="sort_data('name')">Name</th>
     <th onclick="sort_data('username')">Username</th>
     <th onclick="sort_data('email')">Email</th>
     <th onclick="sort_data('address')">Adres</th>
   </tr>
 </thead>
</table>
<div>
  </div>


//JS_code
let data =[];
function veriAl() 
{
  fetch('https://jsonplaceholder.typicode.com/users')
   .then(response =>{
   if(!response.ok)
     {
       throw Error("ERROR");
     }
   return response.json();//json fonksiyonunun promise döndürmeyi sağladığı ile ilgili birşey okudum
    //Biz bunu return yaptığımızda ikinci yazılan then e gelir
   })
    .then(veri => {
    /*data=veri;
    console.log(veri);
    const html=data.map(user => {
      return `<table class="user">
      <td> ${user.id}</td>
      <td>${user.name}</td>
      <td>${user.username}</td>
      <td>${user.email}</td>
    <td>${user.address.street}/${user.address.suite}/${user.address.city}</td>
      </table>
     `;
    }).join("");*/
    data=veri;
   veriEkle(data);
}).catch(error => {//promise reddedildiğinde bu callback çalışır
    console.log(error);
  });
}
const sort_data = (field) =>
{
  data.sort((a,b) => {
    let valueA=a[field];
    let valueB= b[field];
    if(valueA<valueB)
      {
        return -1;
      }
    else if(valueB>valueA)
      {
        return 1;
      }
    return 0;            
  })
  console.log("sıralandı"+field+"e göre",data);
  veriEkle(data);
  }
const veriEkle =(array)=>
{
  
  const html=array.map(user =>{
    return `<table class="user">
      <td> ${user.id}</td>
      <td>${user.name}</td>
      <td>${user.username}</td>
      <td>${user.email}</td>
    <td>${user.address.street}/${user.address.suite}/${user.address.city}</td>
      </table>
     `;
    
  }).join("");
   console.log(html); document.querySelector('#veri_tablo').insertAdjacentHTML("afterbegin",html);
}
veriAl();