misaligned columns when set 'data' property

[Vinayak-kadu]

hello, i notice i cannot set data peroperty of DashTable indivisually.. its mentioned to be optional in documentattion. but even if i pass differenent values to dashtable it misalignes the entire data in single row..

columns=[
        {"name": ["", "Timestamp"], "id": "ts"},
        {"name": ["", "Spot"], "id": "spot"},
        .... 
        ... 

data=[{ 
         "ts":df['Timestamp'],
          ....
          ....
}],

so far i found only one example setting data in documentation, i.e in multi-headers. but looks like i cannnot change it..

as shown in image below..

version, plotly=4.12.0 dash=1.20.0 dash-table=4.11.3

[alexcjohnson]

Hi @Vinayak-kadu - that column alignment definitely looks problematic, but from the info you've given I can't really tell what's going on. Can you provide a complete DataTable component we can run that shows this issue?

Thanks!

[Vinayak-kadu]

here,

df = pd.read_csv('Ver1-25-Jun-2021.csv')
app = dash.Dash(__name__)

app.layout = dash_table.DataTable(
    id='A_table',

    columns=[
        {"name": ["", "Timestamp"], "id": "ts"},
        {"name": ["Price", "Spot"], "id": "spot"},
        {"name": ["Price", "Futures"], "id": "fut"},

    ],

    data=[ {  
            "ts":df['Timestamp'],
            "spot":df['Spot Value'],
            "fut":df['Future Value'],
    } ],

    merge_duplicate_headers=True,
)

if __name__ == '__main__':
    app.run_server(debug=True)

please do check the version in multi-headers

https://dash.plotly.com/datatable/style

only this eg is setting data property indivisually..

[AnnMarieW]

@Vinayak-kadu Note that the data property in the DataTable is a list of dict, and each dict is one row. The data you provided only contains one dictionary, ie one row, with all the data in the first row.

data=[ {  
            "ts":df['Timestamp'],
            "spot":df['Spot Value'],
            "fut":df['Future Value'],
    } ],

To include only these three columns in the table, you could do something like: dff = df[["Timestamp", "Spot Value", "Future Value"]]

Then add it to the data prop like: data = dff.to_dict("records")

If you inspect data you will see that it's in a format like:

[{"Timestamp": date1, "Spot Value": spot1,  "Future Value":future1}, {"Timestamp": date2, "Spot Value": spot2,  "Future Value":future2}, {"Timestamp": date3, "Spot Value": spot3,  "Future Value":future3} ...]

Also, I couldn't duplicate any misalignment of headings. Here is a MWE including some data, and the headings are aligned even when all the data is in the first row.

import dash
import dash_table
import pandas as pd

data = dict(
    [
        ("Date", ["2015-01-01", "2015-10-24", "2016-05-10", "2017-01-10", "2018-05-10", "2018-08-15"] *3),
        ("Region", ["Montreal", "Toronto", "New York City", "Miami", "San Francisco", "London"]*3),
        ("Temperature", [1, -20, 3.512, 4, 10423, -441.2]*3),
        ("Humidity", [10, 20, 30, 40, 50, 60]*3),
        ("Pressure", [2, 10924, 3912, -10, 3591.2, 15]*3),
    ]
)
df = pd.DataFrame(data)

app = dash.Dash(__name__)

app.layout = dash_table.DataTable(
    id="table",
    columns=[
        {"name": ["", "Date"], "id": "Date"},
        {"name": ["", "Region"], "id": "Region"},
        {"name": ["", "Temperature"], "id": "Temperature"},
    ],
    data=[
        {"Date": df["Date"], "Region": df["Region"], "Temperature": df["Temperature"]}
    ],
    merge_duplicate_headers=True,
)

if __name__ == "__main__":
    app.run_server(debug=True)

[Vinayak-kadu]

@AnnMarieW

please note the problem is data values are cramped in single rows..

i think, column alignment will be normal if values are set properly

even if i try your example of multi-headers with putting single data frame object in each of it own dictionary..

    data=[
        {"Date": df["Date"]}, 
        {"Region": df["Region"]}, 
        {"Temperature": df["Temperature"]},
    ],

i still get all the data in single row.. no matter the column alignment..

[AnnMarieW]

@Vinayak-kadu

Sorry if I wasn't clear in my previous post.

To include only those three columns in the table, create a new dataframe with the data you would like to display. For example: dff = df[["Date", "Region", "Temperature"]]

Then add it to the data prop like: data = dff.to_dict("records")

Below is a full example, and if you have any more questions, please feel free to post them on the Dash Community Forum

import dash
import dash_table
import pandas as pd

data = dict(
    [
        ("Date", ["2015-01-01", "2015-10-24", "2016-05-10", "2017-01-10", "2018-05-10", "2018-08-15"] *3),
        ("Region", ["Montreal", "Toronto", "New York City", "Miami", "San Francisco", "London"]*3),
        ("Temperature", [1, -20, 3.512, 4, 10423, -441.2]*3),
        ("Humidity", [10, 20, 30, 40, 50, 60]*3),
        ("Pressure", [2, 10924, 3912, -10, 3591.2, 15]*3),
    ]
)
df = pd.DataFrame(data)

dff = df[["Date", "Region", "Temperature"]]

app = dash.Dash(__name__)

app.layout = dash_table.DataTable(
    id="table",
    columns=[
        {"name": ["", "Date"], "id": "Date"},
        {"name": ["", "Region"], "id": "Region"},
        {"name": ["", "Temperature"], "id": "Temperature"},
    ],
    data=dff.to_dict("records"),
    merge_duplicate_headers=True,
)

if __name__ == "__main__":
    app.run_server(debug=True)