Ordering data in a dynamic table using JavaScript

Question

Ordering data in a dynamic table using JavaScript

After receiving an array of objects in the form of a JSON file and using AJAX to display specific key-value pairs in a table, I am now faced with the task of sorting the rendered table. However, I am uncertain about the steps to take next.

<div id="data-table">
    <table id="html-data-table">
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </table>    
</div>

The JavaScript code responsible for generating the table is as follows:

newData.map(row => {
        let newRow = document.createElement("tr"); // new row is created
        Object.values(row).map((value) => {
            let cell = document.createElement("td"); // new data for the row is added
            cell.innerText = value;
            newRow.appendChild(cell);
        })
        mytable.appendChild(newRow);
    });

I am interested in sorting both columns individually. Can anyone suggest a method that can be used for this purpose?

javascript html jquery css ajax

Answer 1

Answer №1

Utilize the Array.sort() method to organize your dataset. In this scenario, I have included two buttons for sorting based on name and age:

const data = [
  { name: "dave", age: 22 },
  { name: "charlie", age: 32 },
  { name: "eve", age: 19 },
  { name: "alice", age: 27 },
  { name: "bob", age: 20 }
]

const tableBody = document.querySelector("#html-data-table tbody")
const sortByNameBtn = document.getElementById("sortName")
const sortByAgeBtn = document.getElementById("sortAge")

// DISPLAY UNORGANIZED TABLE
renderTable(data)

sortByNameBtn.addEventListener('click', (e) => {
  const sortedData = data.sort((a,b) => a.name.localeCompare(b.name))
  renderTable(sortedData)
})

sortByAgeBtn.addEventListener('click', (e) => {
  const sortedData = data.sort((a,b) => a.age - b.age)
  renderTable(sortedData)
})

function renderTable(tableData) {
  tableBody.innerHTML = ''
  
  tableData.map(row => {
    let newRow = document.createElement("tr"); 
   Object.values(row).map((value) => {
      let cell = document.createElement("td"); // new data for the row is added
      cell.innerText = value;
      newRow.appendChild(cell);
    })
    tableBody.appendChild(newRow);
  });
}

<div id="data-table">
  <table id="html-data-table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

<button id="sortName">Sort by Name</button>
<button id="sortAge">Sort by Age</button>

Answer 2

Utilize the Array.sort() method to organize your dataset. In this scenario, I have included two buttons for sorting based on name and age:

const data = [
  { name: "dave", age: 22 },
  { name: "charlie", age: 32 },
  { name: "eve", age: 19 },
  { name: "alice", age: 27 },
  { name: "bob", age: 20 }
]

const tableBody = document.querySelector("#html-data-table tbody")
const sortByNameBtn = document.getElementById("sortName")
const sortByAgeBtn = document.getElementById("sortAge")

// DISPLAY UNORGANIZED TABLE
renderTable(data)

sortByNameBtn.addEventListener('click', (e) => {
  const sortedData = data.sort((a,b) => a.name.localeCompare(b.name))
  renderTable(sortedData)
})

sortByAgeBtn.addEventListener('click', (e) => {
  const sortedData = data.sort((a,b) => a.age - b.age)
  renderTable(sortedData)
})

function renderTable(tableData) {
  tableBody.innerHTML = ''
  
  tableData.map(row => {
    let newRow = document.createElement("tr"); 
   Object.values(row).map((value) => {
      let cell = document.createElement("td"); // new data for the row is added
      cell.innerText = value;
      newRow.appendChild(cell);
    })
    tableBody.appendChild(newRow);
  });
}

<div id="data-table">
  <table id="html-data-table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

<button id="sortName">Sort by Name</button>
<button id="sortAge">Sort by Age</button>

Answer 3

Answer №2

Here is a unique approach to sorting a table directly, without relying on any external data structures. All you need is the sortmode array, which indicates whether a column should be sorted as text or numerically.

const data=[{name:"Harry",age:32,height:183},{name:"Hermione",age:30,height:175},{name:"Ron",age:31,height:187},{name:"Hagrid",age:53,height:180},{name:"Ginny",age:27,height:170},{name:"Dumbledore",age:273,height:185}],
  sortmode=[0,1,1]; // 0: text, 1: numeric
  mytable=document.querySelector("#data-table tbody");

// Code for filling the table
data.map(row => {
 let newRow = document.createElement("tr");
 Object.values(row).map((value) => {
  
  let cell = document.createElement("td");
  cell.innerText = value;
  newRow.appendChild(cell);
 })
 mytable.appendChild(newRow);
});

// Sorting logic
document.querySelector("#data-table thead").onclick=ev=>{
 let col=[...ev.target.parentNode.children].indexOf(ev.target);
 [...mytable.children]
  .sort((a,b)=>
    sortmode[col]
     ? a.children[col].textContent - b.children[col].textContent
     : a.children[col].textContent.localeCompare(b.children[col].textContent)
   )
  .forEach(tr=>mytable.append(tr))

}

td:nth-child(n+2) {text-align:right}

<div id="data-table">
Simply click on the column headers to instantly sort the table:
<table id="html-data-table>">
   <thead>
    <tr><th>Name</th><th>Age</th><th>Height</th></tr>
   </thead><tbody></tbody>
</table>    
</div>

Answer 4

Here is a unique approach to sorting a table directly, without relying on any external data structures. All you need is the sortmode array, which indicates whether a column should be sorted as text or numerically.

const data=[{name:"Harry",age:32,height:183},{name:"Hermione",age:30,height:175},{name:"Ron",age:31,height:187},{name:"Hagrid",age:53,height:180},{name:"Ginny",age:27,height:170},{name:"Dumbledore",age:273,height:185}],
  sortmode=[0,1,1]; // 0: text, 1: numeric
  mytable=document.querySelector("#data-table tbody");

// Code for filling the table
data.map(row => {
 let newRow = document.createElement("tr");
 Object.values(row).map((value) => {
  
  let cell = document.createElement("td");
  cell.innerText = value;
  newRow.appendChild(cell);
 })
 mytable.appendChild(newRow);
});

// Sorting logic
document.querySelector("#data-table thead").onclick=ev=>{
 let col=[...ev.target.parentNode.children].indexOf(ev.target);
 [...mytable.children]
  .sort((a,b)=>
    sortmode[col]
     ? a.children[col].textContent - b.children[col].textContent
     : a.children[col].textContent.localeCompare(b.children[col].textContent)
   )
  .forEach(tr=>mytable.append(tr))

}

td:nth-child(n+2) {text-align:right}

<div id="data-table">
Simply click on the column headers to instantly sort the table:
<table id="html-data-table>">
   <thead>
    <tr><th>Name</th><th>Age</th><th>Height</th></tr>
   </thead><tbody></tbody>
</table>    
</div>

Ordering data in a dynamic table using JavaScript

Answer №1

Answer №2

Similar questions

Finding the second through eighth elements in a protractor using a CSS locator

JSON.parse has thrown an unexpected token error with 'e'

Getting an image file to an API server using Node.js

"Encountering problems with location search function on Instagram API for retrieving posts

Tips for integrating Google WebKit with AngularJS

Assigning a value to a select2 option based on data retrieved from a database

Adding hidden elements with jQuery: A comprehensive guide

Limit the 'contenteditable' attribute in table data to accept only integers

Press the Enter key to submit

Challenges encountered while using JQuery Validation for a form submission for the second time (JQuery Steps)

Issues with d3.js transition removal functionality not functioning as expected

Incorporating Angular into the script code of the extension content

Utilize the $slots property when working with v-slot in your Vue application

Combining multiple objects in an array to create a single object with the aggregated sum value can be achieved using JavaScript

How to choose a javascript drop down using selenium?

Issue with array filter not functioning correctly upon page refresh when utilizing vue-router

The video on mobile is not loading properly, as the play button appears crossed out

What is the best approach for manipulating live data in localStorage using ReactJS?

Stopping a jQuery function from executing multiple times while it is already active - is it possible?

Disable checkboxes upon page initialization