Let' say we have the following table:
| Col1 | Col2 | Col3 | Col4 |
|---|---|---|---|
| Value 1 | Value 4 | Value 7 | 10.0 |
| Value 2 | Value 5 | Value 8 | 10.0 |
| Value 3 | Value 6 | Value 9 | 69.47 |
I would like to have something like this if the user selects Col4 (or any other column, this is just an example) from the select:
| Col1 | Col2 | Col3 |
|---|---|---|
| Col4: 10.00 | ||
| Value 1 | Value 4 | Value 7 |
| Value 2 | Value 5 | Value 8 |
| Col4: 69.47 | ||
| Value 3 | Value 6 | Value 9 |
I've been searching for hours and couldn't find anything neither in the official documentation, nor in the plugins, nor in the previous stack overflow questions.
Some people suggest you could rotate via css the datatable, but the thread it's a bit old and I haven't got it to work for my purpose.
With css only I am not sure whether this is possible entirely but with jquery, you can dynamically add rows to the data table example added here (this is just for ideation the code can be cleaned up further)
Also to add the rows in particular index is based upon the ordering conditions applied to the table. (Official documentation is here)
However there is a concept of row grouping in data table (example official link here)
So by getting selected column data dynamically(follow link 1) and then grouping as row headers (follow link 3), you can get your desired result.