I wrote this some time ago, to be used with a user script helper (like Violentmonkey)
Code:
// ==UserScript==
// @name Gold:Coins ratio column
// @namespace Violentmonkey Scripts
// @match https://www.warmane.com/account/trade
// @grant none
// ==/UserScript==
"use strict";
(() => $(`<a href="#" style="float: right">Show gold ratio</a>`).insertBefore("#wmstore").click(() => {
const originalTable = $("#data-table")[0].outerHTML
const originalScript = $(".jspPane > script:not([src])").html()
const originalTableHTML = $.parseHTML(originalTable)
$(originalTableHTML).find("[data-index]").removeAttr("data-index")
$(originalTableHTML).find("thead th[aria-label^=Price]").after(`
<th align="center" class="sorting" tabindex="0" aria-controls="data-table" rowspan="1" colspan="1" style="width: 77px;">G:C</th>
`)
$(originalTableHTML).find("tbody tr[role=row]").each(function(idx) {
const gold = $(this).find("td.name .numeric").html()
const coins = $(this).find("td.costValues .numeric").html()
const ratio = gold / coins
const printable = Math.round(ratio * 100) / 100
$(this).find("td.costValues").after(`
<td align="center" data-order="` + ratio + `"><span class="numeric">` + printable + `</span></td>
`)
})
const wrapperParent = $("#data-table_wrapper").parent()
$("#data-table_wrapper").remove()
wrapperParent.prepend(originalTableHTML)
wrapperParent.prepend(`<script>` + originalScript + `</script>`)
}))()
This is what it looks like. The column header is clickable and can be used to sort the table: