Transpose a table

Hello! I was asked to provide a large table view with details on planned and actual costs for several years. In my object, each cost-item is a field and each year represents on record. It is important that everything is displayed in only one table. But: For better reading, my boss wants the table to be transposed so that the first column is showing the cost-items and the column-headers the years.

Is there any way to do this with some JAVA/CSS-Magic?
Thanks so much for your help and ideas!

Hello Sofie,

Yes, we can do everything like this using javascript. Maybe you can try the PIVOT table as well.

Sunny Singla

I tried with pivot but did not get the result I wanted. Could you provide a sample for a javascript code that could do this?

Can you share your table(object) screenshot?

Sure! This is how the object looks like. We are producing scientific journals. Each record shows how a certain journal performes in a certain year. The fields/columns represent the different KPIs.

At the moment, the view that displays this data looks like this:

As I wrote - I split the table in different views, but my boss wants it to be one big table in which you don’t have to scroll to the right.

Hello Sofie,

Try the below code, for further help you can mail me as well.

$(document).on(“knack-view-render.view_abc”, function (event, view, data) { // Login Page to Redirect

var Headerhtml = "<tr>";
var RowsHtml = "";

var tr = $("#view_abc table").find("tr");

var colLendths = $(tr[0]).find("th");

for (var x = 0; x < colLendths.length; x++) {

    RowsHtml += "<tr>";
    for (var y = 0; y < tr.length; y++) {
        var ctds;
        if (y == 0)
            ctds = $(tr[y]).find("th");
            ctds = $(tr[y]).find("td");
        RowsHtml += "<td>" + $(ctds[x]).text() + "</td>";

    RowsHtml += "</tr>";


$("#view_xyx").html(" Transpose table<br><table class='kn-table is-striped is-bordered'>" + RowsHtml + "</table>");


Sunny Singla


Thank you so much!

1 Like