CHange table view from horizontal to vertical

Dash Python
1

image
I have a very simple 1 row table in my DASH app, the first row is actually column names (0%, 10%…100%)
the number of columns generated is actually coming from another callback, which takes input from a user.
I want to display it vertically, without disturbing the content of the cells as I am using this as input for another callback.

2

Not sure if this would work, but have you looked at this?

Here is some adjusting that I made:

css

#testTable table {
  display: flex;
  justify-content: center;
  height: 100vh;
  width: 300px;
}

#testTable tbody {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-grow: 1;
    flex-shrink: 0;

}

#testTable tr {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 0;
    height: 400px;
    width: 300px;
}

#testTable td {
    height: 21px;
}

testing app:

from dash import Dash, dash_table

app = Dash(__name__)

cols = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]

app.layout = dash_table.DataTable(
    data=[{'id':'0%', 'value':0}],
    columns=[{'name':str(i)+'%', 'id':str(i) + '%'} for i in cols],
    editable=True,
    id='testTable'
)

app.run(debug=True)

result:
image

Navigation gets funky and up and down to act naturally. Left and right navigate up and down. Tab drops to the next input.

1 Like
3

sorry for late reply, I will try it