This will add the column 'Price per Badge' to Inventory Watchlist in Steam Card Exchange

SteamCardExchangeEnhancer.user.js

// ==UserScript==
// @name         Steam Card Exchange Enhancer
// @description  This will add the column 'Price per Badge' to Inventory Watchlist in Steam Card Exchange
// @version      2.0.4
// @author       gonza7aav
// @match        https://www.steamcardexchange.net/index.php?userlist
// @grant        none
// @run-at       context-menu
// @iconURL      https://www.steamcardexchange.net/include/design/img/favicon_blue_small.png
// ==/UserScript==

// function to sort the body of the table
const sortNewColumn = (table, order) => {
  const tableBody = table.children[1];

  const rows = [...tableBody.rows];

  while (tableBody.length > 0) {
    tableBody.deleteRow(0);
  }

  rows.sort((a, b) => {
    if (order == 'asc') {
      return (
        Number.parseInt(a.children[4].innerText) -
        Number.parseInt(b.children[4].innerText)
      );
    } else {
      return (
        Number.parseInt(b.children[4].innerText) -
        Number.parseInt(a.children[4].innerText)
      );
    }
  });

  for (let i = 0; i < rows.length; i++) {
    // i + 1 because the array start at 0
    if ((i + 1) % 2 == 0) {
      rows[i].className = 'even';
    } else {
      rows[i].className = 'odd';
    }

    tableBody.appendChild(rows[i]);
  }
};

const fillNewColumn = (table) => {
  const tableBody = table.children[1];

  // empty the content of the column
  [...document.querySelectorAll('#price_per_badge_cell')].forEach((x) =>
    x.remove()
  );

  // adding body entries to Price per Badge column
  for (const row of tableBody.rows) {
    // get cards info
    const cardPrice = Number.parseInt(row.cells[1].innerText);
    const cardsPerBadge = Number.parseInt(
      row.cells[3].innerText
        .slice(
          row.cells[3].innerText.indexOf('of') + 2,
          row.cells[3].innerText.indexOf('Cards')
        )
        .trim()
    );
    const pricePerBadge = cardPrice * cardsPerBadge;

    // create a cell and append it
    const newCell = document.createElement('td');
    newCell.innerText = pricePerBadge;
    newCell.id = 'price_per_badge_cell';
    row.appendChild(newCell);
  }
};

const addNewColumn = (table) => {
  const tableHeader = table.children[0];

  // adding the new column header
  const newColumnHeader = document.createElement('th');
  newColumnHeader.innerHTML = 'Price per Badge';
  newColumnHeader.id = 'price_per_badge_header';
  newColumnHeader.className = 'sorting';
  tableHeader.children[0].appendChild(newColumnHeader);

  // fixing style of name column
  tableHeader.children[0].children[0].style = 'width: 45%';

  const otherColumnHeaders = [
    ...document.querySelectorAll('.sorting'),
    ...document.querySelectorAll('.sorting_asc'),
    ...document.querySelectorAll('.sorting_desc'),
  ].filter((x) => x.id != 'price_per_badge_header');

  // add behavior to a click in the new header
  newColumnHeader.addEventListener('click', () => {
    // changing style and sorting
    if (newColumnHeader.className == 'sorting_asc') {
      newColumnHeader.className = 'sorting_desc';
      sortNewColumn(table, 'desc');
    } else {
      newColumnHeader.className = 'sorting_asc';
      sortNewColumn(table, 'asc');
    }

    // changing style in the others headers
    otherColumnHeaders.forEach((x) => {
      if (x.className.includes('name')) {
        x.className = 'name sorting';
      } else {
        x.className = 'sorting';
      }
    });
  });

  // sorting the others columns will make changes in the new column
  otherColumnHeaders.forEach((x) => {
    x.addEventListener('click', () => {
      // style
      newColumnHeader.className = 'sorting';

      // content
      fillNewColumn(table);
    });
  });
};

(function () {
  'use strict';

  const table = document.querySelector('#private_watchlist');

  addNewColumn(table);
  fillNewColumn(table);

  // refill when any switch state is changed
  const switches = [...document.querySelectorAll('[type=checkbox]')];
  switches.forEach((x) => {
    x.addEventListener('change', () => fillNewColumn(table));
  });

  // refill when the table length is changed
  const selector = document.querySelector('[name=private_watchlist_length]');
  selector.addEventListener('change', () => fillNewColumn(table));

  // refill when search something
  const searchBar = document.querySelector('[type=search]');
  searchBar.addEventListener('input', () => fillNewColumn(table));

  // refill when the page is changed
  const pagination = document.querySelector('#private_watchlist_paginate');
  pagination.addEventListener('click', (event) => {
    if (event.target.className?.includes('paginate_button'))
      fillNewColumn(table);
  });
})();