grid-js
Vertical headers
This isn't a bug report, just a general question, is there anyway to get a table with vertical headers like in the below image?
Grid.js doesn't support this feature yet but I'm happy to add it to the roadmap.
If your grid is simple, then you can add the formatting on the first column to emulate the grid.js column names by adding:
.gridjs-td:first-child { background-color: #f9fafb; } in the CSS
and you can use some jinja to define the columns of your grid as:
columns: [
{% for col in col_names %}
{% if col == 'Col 1' %}
{
id: '{{ col }}',
name: '',
formatter: (cell) => gridjs.html(`<b style="color:#6b7280;">${cell}</b>`)
},
{% else %}
{ id: '{{ col }}', name: '{{ col }}' },
{% endif %}
{% endfor %}
],
In the above example I set the name to be a blank string in the first column so there isn't text above the vertical headers. Then the data that you pass to the grid should be transposed to match. Note: The column names in the col_names variable are the column names of the transposed data. You will still have the column headers grid.js puts on there but they can be appropriately named (e.g. 'Sample 1', 'Sample 2').
