Arrange the table according to the option selected in the dropdown menu

Question

Arrange the table according to the option selected in the dropdown menu

Attempting to organize my table according to the sorting choice selected by the user from a drop-down menu. I encountered this discussion and also that one, both relying on jQuery. However, none of them seem to be effective for me since I require a pure Javascript solution.

Here is a snippet of my HTML:

<label>Sort order:</label>
<select>
  <option>Item asc</option>
  <option>Item desc</option>
  <option>Price asc</option>
  <option>Price desc</option>
  <option>Year asc</option>
  <option>Year desc</option>
</select>
<table>
<thead>
  <tr>
    <th>item</th>
    <th>price</th>
    <th>year</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Skoda Octavia</td>
    <td>7000</td>
    <td>2012</td>
  </tr>
  <tr>
    <td>Toyota Yaris</td>
    <td>3000</td>
    <td>2011</td>    
  </tr>
  <tr>
    <td>Ford Focus</td>
    <td>5000</td>
    <td>2009</td>
  </tr>
</tbody>
</table>

Being new at this, any guidance on how to tackle the issue would be highly appreciated.

javascript html-table

Answer 1

Answer №1

Your issue can essentially be broken down into three smaller tasks:

First, you need to convert the data in your HTML table into a JavaScript object that contains an array of objects. Each object should have attributes corresponding to the column headers and cell values so that you can easily sort the array based on these attribute values:

const jsonFromHtml = (tbody, thead) => {
    let tableJson = {rows:[]};
  [...tbody.children].forEach(tableRow => {
    let rowEntry = {};
    [...tableRow.children].forEach((cell, column) => rowEntry[thead.children[0].children[column].textContent] = cell.textContent);
    tableJson.rows.push(rowEntry);
  });
  return tableJson;
};

The next step is to sort the row-items in any order you'd like:

const customSort = (arr, key, order) => {
    let sortCompare = order == 'Desc' ? -1 : 1;
  return arr.sort((first, second) => first[key]>second[key] ?  sortCompare : first[key]<second[key] ?  -sortCompare : 0);
};

Lastly, you'll need to generate the inner HTML for your table body based on the sorted array of rows:

const arrayToTable = (arr, tbody, thead) => {
    let rows = [];
    arr.forEach((row, rowNum) => {
    row = [...thead.children[0].children].map(th => row[th.textContent] ? row[th.textContent] : '');
    row = row.map(td => `<td>${td}</td>`);
    row = `<tr>${row.join('')}</tr>`;
    rows.push(row);
  });
  tbody.innerHTML = rows.join('');
};

If you want to apply this functionality to your own table, make sure to update the IDs and content accordingly:

Answer 2

Your issue can essentially be broken down into three smaller tasks:

First, you need to convert the data in your HTML table into a JavaScript object that contains an array of objects. Each object should have attributes corresponding to the column headers and cell values so that you can easily sort the array based on these attribute values:

const jsonFromHtml = (tbody, thead) => {
    let tableJson = {rows:[]};
  [...tbody.children].forEach(tableRow => {
    let rowEntry = {};
    [...tableRow.children].forEach((cell, column) => rowEntry[thead.children[0].children[column].textContent] = cell.textContent);
    tableJson.rows.push(rowEntry);
  });
  return tableJson;
};

The next step is to sort the row-items in any order you'd like:

const customSort = (arr, key, order) => {
    let sortCompare = order == 'Desc' ? -1 : 1;
  return arr.sort((first, second) => first[key]>second[key] ?  sortCompare : first[key]<second[key] ?  -sortCompare : 0);
};

Lastly, you'll need to generate the inner HTML for your table body based on the sorted array of rows:

const arrayToTable = (arr, tbody, thead) => {
    let rows = [];
    arr.forEach((row, rowNum) => {
    row = [...thead.children[0].children].map(th => row[th.textContent] ? row[th.textContent] : '');
    row = row.map(td => `<td>${td}</td>`);
    row = `<tr>${row.join('')}</tr>`;
    rows.push(row);
  });
  tbody.innerHTML = rows.join('');
};

If you want to apply this functionality to your own table, make sure to update the IDs and content accordingly:

Answer 3

Answer №2

One approach to organizing and displaying data involves defining the information in variables before constructing the HTML.

// Storing data in variables rather than directly within the HTML structure:
const columns = ["item", "price", "year"];
const data = [
    { "item": "Skoda Octavia", "price": 7000, "year": 2012 }, 
    { "item": "Toyota Yaris",  "price": 3000, "year": 2011 }, 
    { "item": "Ford Focus",    "price": 5000, "year": 2009 }, 
]

// Accessing DOM elements
const orderSelect = document.getElementById("orderSelect");
const dataTable = document.getElementById("dataTable");

// Dynamically generating select options based on column names
for (const column of columns) {
    for (const dir of [" asc", " desc"]) {
        const opt = document.createElement("option");
        opt.value = opt.text = column + dir;
        orderSelect.add(opt);
    }
}

function refreshTable() {
    const [sortBy, order] = orderSelect.value.split(" ");
    const sign = order === "asc" ? -1 : 1;
    data.sort((a, b) => a[sortBy] < b[sortBy] ? sign : a[sortBy] > b[sortBy] ? -sign : 0);
    // Clear existing table content
    dataTable.innerHTML = ""; 
    // Create header row
    const row = dataTable.insertRow(-1);
    for (const column of columns) {
        const th = document.createElement("th");
        th.textContent = column;
        row.appendChild(th);
    }
    // Generate data rows
    for (const record of data) {
        const row = dataTable.insertRow(-1);
        for (const column of columns) {
            const td = row.insertCell(-1);
            td.textContent = record[column];
        }
    }
}

// Fill data table with initial content
refreshTable();

// Event listener
orderSelect.addEventListener("change", refreshTable);

<label for="orderSelect">Sort order:</label>
<select id="orderSelect"></select>
<table id="dataTable"></table>

Answer 4

One approach to organizing and displaying data involves defining the information in variables before constructing the HTML.

// Storing data in variables rather than directly within the HTML structure:
const columns = ["item", "price", "year"];
const data = [
    { "item": "Skoda Octavia", "price": 7000, "year": 2012 }, 
    { "item": "Toyota Yaris",  "price": 3000, "year": 2011 }, 
    { "item": "Ford Focus",    "price": 5000, "year": 2009 }, 
]

// Accessing DOM elements
const orderSelect = document.getElementById("orderSelect");
const dataTable = document.getElementById("dataTable");

// Dynamically generating select options based on column names
for (const column of columns) {
    for (const dir of [" asc", " desc"]) {
        const opt = document.createElement("option");
        opt.value = opt.text = column + dir;
        orderSelect.add(opt);
    }
}

function refreshTable() {
    const [sortBy, order] = orderSelect.value.split(" ");
    const sign = order === "asc" ? -1 : 1;
    data.sort((a, b) => a[sortBy] < b[sortBy] ? sign : a[sortBy] > b[sortBy] ? -sign : 0);
    // Clear existing table content
    dataTable.innerHTML = ""; 
    // Create header row
    const row = dataTable.insertRow(-1);
    for (const column of columns) {
        const th = document.createElement("th");
        th.textContent = column;
        row.appendChild(th);
    }
    // Generate data rows
    for (const record of data) {
        const row = dataTable.insertRow(-1);
        for (const column of columns) {
            const td = row.insertCell(-1);
            td.textContent = record[column];
        }
    }
}

// Fill data table with initial content
refreshTable();

// Event listener
orderSelect.addEventListener("change", refreshTable);

<label for="orderSelect">Sort order:</label>
<select id="orderSelect"></select>
<table id="dataTable"></table>

Arrange the table according to the option selected in the dropdown menu

Answer №1

Answer №2

Similar questions

Do GPU-intensive animations get impacted by the CPU's load?

CSS magic: Text animation letter by letter

Combining and mapping arrays in Javascript to form a single object

Lagging speeds in client-side template rendering using Rivets.js

Develop the react application: Determine the script tag URL based on the environment

Execute a function upon pressing the enter key

The JSX function seems to be malfunctioning, as the function part is not displaying on the webpage as intended

Error message: "When namedPlaceHolder parameter is disabled, bind parameters must be in the form of an

The presence of a Bootstrap addon is resulting in horizontal scrolling on mobile devices within the webpage

The mongoose fails to establish a connection with the Mongo Db Atlas

Stop the form from submitting when the Enter key is pressed

Preventing touchstart default behavior in JavaScript on iOS without disrupting scrolling functionality

Execute a PHP function through an AJAX request to dynamically update a template variable in PHPBB

Exploring ways to customize the input color of Material UI TextField when it is disabled [Version: 5.0.8]

How to Retrieve Grandparent Component Attributes in Angular Using Grandchild Components

Components undergo a style transformation with Material UI

The function is not valid due to an angular-parse argument

Unable to add MySQL results to the array

Using three.js to add an image onto an already existing object

Aligning a table at the center of another table