misaligned columns when set 'data' property #921

Activity

1. alexcjohnson commented on Jul 11, 2021

   

   alexcjohnson

   on Jul 11, 2021

   Collaborator

   More actions

   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!
2. Vinayak-kadu commented on Jul 11, 2021

   

   Vinayak-kadu

   on Jul 11, 2021

   Author

   More actions

   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..
3. AnnMarieW commented on Jul 12, 2021

   

   AnnMarieW

   on Jul 12, 2021

   Last edited by AnnMarieW

   Contributor

   More actions

   @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)
   
   

   
4. Vinayak-kadu commented on Jul 13, 2021

   

   Vinayak-kadu

   on Jul 13, 2021

   Author

   More actions

   @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..

   
5. AnnMarieW commented on Jul 20, 2021

   

   AnnMarieW

   on Jul 20, 2021

   Contributor

   More actions

   @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)