How is there no transposed (i.e. vertical) table!?

💬 Feature Requests
,
1

Tables are so amazing - in how they allow you to both display and edit whatever data your resource query spits out.

If transposed...you get an editable Key-Value like component...which is so useful for so many internal tools that need to display a single record and allow the user to edit its fields.

All the features required already exist within the current Table component. It's a purely visual transposition!

Either I'm going crazy and it doesn't exist - or the universe is. Lol. :frowning: :cry:

2 Likes
2

Hi @Arjun! Are you looking for a pivot table option? We have a request for this internally. I'll post here when we're able to ship a solution :slightly_smiling_face:

You may be able to code up a solution in a custom component in the meantime

3

There's a discussion about pivot tables here that may be of interest

4

A pivot table is much harder to implement than just allowing a different styling of a normal table. So no - not that!

5

@Arjun I agree, in theory if you could click a checkbox which transposed the table, so that the columns ran down the left, and the values along the top, it would be great.....however on reflection I think the coding would actually be quite heavyweight (from my limited software dev experience). Also, the difference between just transposing, and aggregating - pivot tables can be used to transpose but they are really designed for aggregating, and only really designed for numerical data.

That said, it took me a year to work out how to implement a pivot table custom component, I've now implemented it in a module and I just drop it in to whichever app I need a table in. I'll try and paste the updated code, it is a bit of effort but it's really 'do once'.

hth
dominic

2 Likes
6

Thanks for this, @domjammoo and thanks for confirming @Arjun

We've got feature requests for both a pivot table & a transpose table option. I'll update this thread if we're able to ship either feature!

7

Hi @Tess, any news about pivot table & a transpose table?

8

Hi @mondob Thanks for checking in! Unfortunately, I don't see this on our immediate roadmap :disappointed: but we are still tracking interest for this feature -- I'll add your +1 to the internal request

9

plus one for me too please.

10

Plus 1.

A transposed table, with the heading/key names running down the leftmost column and "rows" running down subsequent columns, so the table builds up from left to right (instead of top to bottom) would be very useful.

It's the kind of table preferred, and common, in booking systems where you have resources listed in the left column and allocation/availability (often date-wise) running left to right.

11

Thanks for the +1s!

Our team is still tracking feedback on this, but, unfortunately, we haven't been able to prioritize this feature request yet.

12

I've seen some differing ideas about what a transposed table is, and often confusion with talk about pivotal tables. So I made a simple example.

The original table...

1_original_table

...and the transposed table (according to what I mean)..

2_transposed_table
2_transposed_table708×135 14.8 KB

Below also is a javascript (thanks mainly to ChatGPT ) which can be used as a transformer on the result of a normal query to show a transposed version in a regular table.

The original headings, which should be transposed to the first column, likely show up in the wrong place initially, so will need to be re-positioned to the first column position.
Also it's not practical for tables which get updated often with new rows because then you have to manually tell the table to regenerate columns. But it's interesting as an example and could be useful for displaying some relatively static information.
(Since I had dates in the table I played safe and converted them to strings. So other tweaks could be necessary depending on data types in use).

let arr = formatDataAsArray(data);

if (arr.length === 0) return [];

 const firstKey = Object.keys(arr[0])[0]; // Get the first key (e.g., "a")
 const keys = Object.keys(arr[0]); // Get all keys from the first object
 const newKeys = [firstKey, ...arr.map(obj => obj[firstKey])]; // Extract new keys

 const transposed = [];

 for (let i = 1; i < keys.length; i++) { // Skip the first key
     let newRow = { [firstKey]: keys[i] }; // First key holds the column identifier

     for (let j = 0; j < arr.length; j++) {
         let value = arr[j][keys[i]];

         // Convert Date objects to YYYY-MM-DD format
         if (value instanceof Date) {
             value = value.toISOString().split("T")[0];
         }

         newRow[newKeys[j + 1]] = value; // Assign value using the correct key
     }
     transposed.push(newRow);
  }

return transposed;
1 Like