Inverter Handsontable

Tags: #<Tag:0x00007f0b02a42130> #<Tag:0x00007f0b02a41fc8>

Hi, I’m trying to see if it’s possible with handsontable to have an inverted table.

I explain myself a little better,

In many places I have seen how they swap the row x column data, converting it into column x row

https://jsfiddle.net/w2vst0yg/2/

but I am trying to make the table completely rotated, so that the headers (columns) are the rows and the data that I add or delete, which are normally the rows, become the columns.

Similar to the table in this program (to give you an idea), it is a table with a single column that can be edited and the rows can be changing (I can show and/or hide them), that is, the behavior and logic from the columns to the rows

Hi @cflorioluis

The CSS transform can create a similar effect but it your case it looks like a mirror reflection, so I am not sure if that would work. In Handsontable we do not have any similar deo to share. I can see a simple example here https://lenadesign.org/2021/06/01/css-mirror-reflection-text-effect/ for a mirror text but then you would need to use custom renderer for each cell and afterGetColHeader/afterGetRowHeader for each header to add the :before and :after logic to a value.

1 Like