Not able to display multi index data dash data table

[ashik3192]

Hi i have a pandas data frame and i have used .set index on specific columns and I wanted to display the data frame as a data table with the defined index . I tried many approaches but could not display the mult -index data as a dash data table . when I tried to display like this index is not showing up on the table … can some here help me on this … thanks …

[akroma]

Hey @ashik3192 ,

Welcome to the community.

Can you post a minimal working example with small amount of data ?

[ashik3192]

Hi @akroma , Thanks for you reply . please see the sample data and code attached …

I am not getting the data reflected back in the form of multi index … what I was looking for is the columns that are used in set index should be fixed in the data table and I should be able to scroll the rest of the values in the data table .

import pandas as pd
from dash import Dash, dash_table

filter_day = {‘dc’: {0: ‘SK’, 1: ‘SK’, 2: ‘SK’, 3: ‘SK’, 4: ‘SK’, 5: ‘SK’, 6: ‘SK’, 7: ‘SK’, 8: ‘SK’, 9: ‘SK’}, ‘sku’: {0: ‘BAK-00-002243-1’, 1: ‘BAK-00-002243-1’, 2: ‘BAK-00-002245-1’, 3: ‘BAK-00-002245-1’, 4: ‘BAK-00-002247-1’, 5: ‘BAK-00-002247-1’, 6: ‘BAK-00-002248-1’, 7: ‘BAK-00-002248-1’, 8: ‘BAK-00-10011-1’, 9: ‘BAK-00-10011-1’}, ‘display_name’: {0: ‘Stone Oven Baked Baguette / Baguette / Baguette / Baguette - 120g’, 1: ‘Stone Oven Baked Baguette / Baguette / Baguette / Baguette - 120g’, 2: ‘Stone Oven Baked Baguette / Baguette / Baguette / Baguette - 2x120g’, 3: ‘Stone Oven Baked Baguette / Baguette / Baguette / Baguette - 2x120g’, 4: ‘Naan / Naan / Naan/ Naan - 2 pcs’, 5: ‘Naan / Naan / Naan/ Naan - 2 pcs’, 6: ‘Naan / Naan / Naan/ Naan - 4 pcs’, 7: ‘Naan / Naan / Naan/ Naan - 4 pcs’, 8: ‘Tortillas / Tortillas / Tortillas / Tortillas - Small - 8-pack’, 9: ‘Tortillas / Tortillas / Tortillas / Tortillas - Small - 8-pack’}, ‘sku_category’: {0: ‘BAK’, 1: ‘BAK’, 2: ‘BAK’, 3: ‘BAK’, 4: ‘BAK’, 5: ‘BAK’, 6: ‘BAK’, 7: ‘BAK’, 8: ‘BAK’, 9: ‘BAK’}, ‘variable’: {0: ‘forecasted’, 1: ‘variation_to_actuals’, 2: ‘forecasted’, 3: ‘variation_to_actuals’, 4: ‘forecasted’, 5: ‘variation_to_actuals’, 6: ‘forecasted’, 7: ‘variation_to_actuals’, 8: ‘forecasted’, 9: ‘variation_to_actuals’}, ‘actuals’: {0: 2990.0, 1: 2990.0, 2: 1827.0, 3: 1827.0, 4: 4373.0, 5: 4373.0, 6: 2777.0, 7: 2777.0, 8: 4397.0, 9: 4397.0}, ‘T_-1’: {0: 3061.0, 1: 71.0, 2: 1813.0, 3: -14.0, 4: 4452.0, 5: 79.0, 6: 2769.0, 7: -8.0, 8: 4449.0, 9: 52.0}, ‘T_0’: {0: 3136.0, 1: 146.0, 2: 1858.0, 3: 31.0, 4: 4526.0, 5: 153.0, 6: 2817.0, 7: 40.0, 8: 4529.0, 9: 132.0}, ‘T_1’: {0: 2989.0, 1: -1.0, 2: 1841.0, 3: 14.0, 4: 4298.0, 5: -75.0, 6: 2800.0, 7: 23.0, 8: 4302.0, 9: -95.0}, ‘T_2’: {0: 3013.0, 1: 23.0, 2: 1880.0, 3: 53.0, 4: 4393.0, 5: 20.0, 6: 2908.0, 7: 131.0, 8: 4331.0, 9: -66.0}, ‘T_3’: {0: 3053.0, 1: 63.0, 2: 1905.0, 3: 78.0, 4: 4535.0, 5: 162.0, 6: 2962.0, 7: 185.0, 8: 4435.0, 9: 38.0}, ‘T_7’: {0: 3168.0, 1: 178.0, 2: 1976.0, 3: 149.0, 4: 4745.0, 5: 372.0, 6: 3131.0, 7: 354.0, 8: 4550.0, 9: 153.0}, ‘T_10’: {0: 3663.0, 1: 673.0, 2: 2314.0, 3: 487.0, 4: 5335.0, 5: 962.0, 6: 3670.0, 7: 893.0, 8: 5117.0, 9: 720.0}, ‘T_14’: {0: 3322.0, 1: 332.0, 2: 2138.0, 3: 311.0, 4: 5067.0, 5: 694.0, 6: 3404.0, 7: 627.0, 8: 4787.0, 9: 390.0}, ‘T_17’: {0: 3204.0, 1: 214.0, 2: 2095.0, 3: 268.0, 4: 4984.0, 5: 611.0, 6: 3394.0, 7: 617.0, 8: 4673.0, 9: 276.0}, ‘T_21’: {0: 4073.0, 1: 1083.0, 2: 2642.0, 3: 815.0, 4: 3770.0, 5: -603.0, 6: 2633.0, 7: -144.0, 8: 5552.0, 9: 1155.0}, ‘T_28’: {0: 4081.0, 1: 1091.0, 2: 2977.0, 3: 1150.0, 4: 3916.0, 5: -457.0, 6: 2789.0, 7: 12.0, 8: 3405.0, 9: -992.0}, ‘T_31’: {0: 4499.0, 1: 1509.0, 2: 3222.0, 3: 1395.0, 4: 4290.0, 5: -83.0, 6: 3030.0, 7: 253.0, 8: 3743.0, 9: -654.0}, ‘T_35’: {0: 2455.0, 1: -535.0, 2: 1503.0, 3: -324.0, 4: 4214.0, 5: -159.0, 6: 3701.0, 7: 924.0, 8: 4311.0, 9: -86.0}, ‘T_36’: {0: 2601.0, 1: -389.0, 2: 1527.0, 3: -300.0, 4: 4472.0, 5: 99.0, 6: 3805.0, 7: 1028.0, 8: 4499.0, 9: 102.0}, ‘T_38’: {0: 3204.0, 1: 214.0, 2: 1837.0, 3: 10.0, 4: 5553.0, 5: 1180.0, 6: 4713.0, 7: 1936.0, 8: 5522.0, 9: 1125.0}, ‘T_42’: {0: 5639.0, 1: 2649.0, 2: 4175.0, 3: 2348.0, 4: 5337.0, 5: 964.0, 6: 4615.0, 7: 1838.0, 8: 2355.0, 9: -2042.0}, ‘T_49’: {0: 3094.0, 1: 104.0, 2: 1827.0, 3: 0.0, 4: 2941.0, 5: -1432.0, 6: 2030.0, 7: -747.0, 8: 4923.0, 9: 526.0}, ‘T_56’: {0: 4384.0, 1: 1394.0, 2: 2773.0, 3: 946.0, 4: 3240.0, 5: -1133.0, 6: 2174.0, 7: -603.0, 8: 6836.0, 9: 2439.0}, ‘T_63’: {0: 5117.0, 1: 2127.0, 2: 4009.0, 3: 2182.0, 4: 4367.0, 5: -6.0, 6: 3101.0, 7: 324.0, 8: 3646.0, 9: -751.0}, ‘T_77’: {0: 5417.0, 1: 2427.0, 2: 4246.0, 3: 2419.0, 4: 4353.0, 5: -20.0, 6: 3374.0, 7: 597.0, 8: 4960.0, 9: 563.0}, ‘T_84’: {0: 2522.0, 1: -468.0, 2: 1391.0, 3: -436.0, 4: 4894.0, 5: 521.0, 6: 4039.0, 7: 1262.0, 8: 3187.0, 9: -1210.0}, ‘T_91’: {0: 2461.0, 1: -529.0, 2: 1349.0, 3: -478.0, 4: 4987.0, 5: 614.0, 6: 4033.0, 7: 1256.0, 8: 3114.0, 9: -1283.0}}

filter_day = pd.DataFrame(filter_day)
final_data = filter_day.set_index(
[
“dc”,
“sku”,
“display_name”,
“sku_category”,
“variable”,
“actuals”,
]
)

app = Dash(name)

app.layout = dash_table.DataTable(
filter_day.to_dict(“records”), [{“name”: i, “id”: i} for i in filter_day.columns]
)

if name == “main”:
app.run_server(debug=True)

[ljam]

What you need to do is reset_index() on your pandas df and then specify fixed_columns in datatable. See “Horizontal Scrolling via Fixed Columns” DataTable Width & Column Width | Dash for Python Documentation | Plotly

[ashik3192]

hello @ljam if I reset index , i see the same names for each of the filled again per row … Please see attached … I just wanted the columns to be fixed even in the output …

[akroma]

import pandas as pd
from dash import Dash, dash_table

filter_day = {"dc": {0: "SK", 1: "SK", 2: "SK", 3: "SK", 4: "SK", 5: "SK", 6: "SK", 7: "SK", 8: "SK", 9: "SK"},
              "sku": {0: "BAK-00-002243-1", 1: "BAK-00-002243-1", 2: "BAK-00-002245-1", 3: "BAK-00-002245-1", 4: "BAK-00-002247-1", 5: "BAK-00-002247-1", 6: "BAK-00-002248-1", 7: "BAK-00-002248-1", 8: "BAK-00-10011-1", 9: "BAK-00-10011-1"},
              "display_name": {0: "Stone Oven 6Baked Baguette / Baguette / Baguette / Baguette - 120g", 1: "Stone Oven Baked Baguette / Baguette / Baguette / Baguette - 120g", 2: "Stone Oven Baked Baguette / Baguette / Baguette / Baguette - 2x120g", 3: "Stone Oven Baked Baguette / Baguette / Baguette / Baguette - 2x120g", 4: "Naan / Naan / Naan/ Naan - 2 pcs", 5: "Naan / Naan / Naan/ Naan - 2 pcs", 6: "Naan / Naan / Naan/ Naan - 4 pcs", 7: "Naan / Naan / Naan/ Naan - 4 pcs", 8: "Tortillas / Tortillas / Tortillas / Tortillas - Small - 8-pack", 9: "Tortillas / Tortillas / Tortillas / Tortillas - Small - 8-pack"},
              "sku_category": {0: "BAK", 1: "BAK", 2: "BAK", 3: "BAK", 4: "BAK", 5: "BAK", 6: "BAK", 7: "BAK", 8: "BAK", 9: "BAK"},
              "variable": {0: "forecasted", 1: "variation_to_actuals", 2: "forecasted", 3: "variation_to_actuals", 4: "forecasted", 5: "variation_to_actuals", 6: "forecasted", 7: "variation_to_actuals", 8: "forecasted", 9: "variation_to_actuals"},
              "actuals": {0: 2990.0, 1: 2990.0, 2: 1827.0, 3: 1827.0, 4: 4373.0, 5: 4373.0, 6: 2777.0, 7: 2777.0, 8: 4397.0, 9: 4397.0},
              "T_-1": {0: 3061.0, 1: 71.0, 2: 1813.0, 3: -14.0, 4: 4452.0, 5: 79.0, 6: 2769.0, 7: -8.0, 8: 4449.0, 9: 52.0},
              "T_0": {0: 3136.0, 1: 146.0, 2: 1858.0, 3: 31.0, 4: 4526.0, 5: 153.0, 6: 2817.0, 7: 40.0, 8: 4529.0, 9: 132.0},
              "T_1": {0: 2989.0, 1: -1.0, 2: 1841.0, 3: 14.0, 4: 4298.0, 5: -75.0, 6: 2800.0, 7: 23.0, 8: 4302.0, 9: -95.0},
              "T_2": {0: 3013.0, 1: 23.0, 2: 1880.0, 3: 53.0, 4: 4393.0, 5: 20.0, 6: 2908.0, 7: 131.0, 8: 4331.0, 9: -66.0},
              "T_3": {0: 3053.0, 1: 63.0, 2: 1905.0, 3: 78.0, 4: 4535.0, 5: 162.0, 6: 2962.0, 7: 185.0, 8: 4435.0, 9: 38.0},
              "T_7": {0: 3168.0, 1: 178.0, 2: 1976.0, 3: 149.0, 4: 4745.0, 5: 372.0, 6: 3131.0, 7: 354.0, 8: 4550.0, 9: 153.0},
              "T_10": {0: 3663.0, 1: 673.0, 2: 2314.0, 3: 487.0, 4: 5335.0, 5: 962.0, 6: 3670.0, 7: 893.0, 8: 5117.0, 9: 720.0},
              "T_14": {0: 3322.0, 1: 332.0, 2: 2138.0, 3: 311.0, 4: 5067.0, 5: 694.0, 6: 3404.0, 7: 627.0, 8: 4787.0, 9: 390.0},
              "T_17": {0: 3204.0, 1: 214.0, 2: 2095.0, 3: 268.0, 4: 4984.0, 5: 611.0, 6: 3394.0, 7: 617.0, 8: 4673.0, 9: 276.0},
              "T_21": {0: 4073.0, 1: 1083.0, 2: 2642.0, 3: 815.0, 4: 3770.0, 5: -603.0, 6: 2633.0, 7: -144.0, 8: 5552.0, 9: 1155.0},
              "T_28": {0: 4081.0, 1: 1091.0, 2: 2977.0, 3: 1150.0, 4: 3916.0, 5: -457.0, 6: 2789.0, 7: 12.0, 8: 3405.0, 9: -992.0},
              "T_31": {0: 4499.0, 1: 1509.0, 2: 3222.0, 3: 1395.0, 4: 4290.0, 5: -83.0, 6: 3030.0, 7: 253.0, 8: 3743.0, 9: -654.0},
              "T_35": {0: 2455.0, 1: -535.0, 2: 1503.0, 3: -324.0, 4: 4214.0, 5: -159.0, 6: 3701.0, 7: 924.0, 8: 4311.0, 9: -86.0},
              "T_36": {0: 2601.0, 1: -389.0, 2: 1527.0, 3: -300.0, 4: 4472.0, 5: 99.0, 6: 3805.0, 7: 1028.0, 8: 4499.0, 9: 102.0},
              "T_38": {0: 3204.0, 1: 214.0, 2: 1837.0, 3: 10.0, 4: 5553.0, 5: 1180.0, 6: 4713.0, 7: 1936.0, 8: 5522.0, 9: 1125.0},
              "T_42": {0: 5639.0, 1: 2649.0, 2: 4175.0, 3: 2348.0, 4: 5337.0, 5: 964.0, 6: 4615.0, 7: 1838.0, 8: 2355.0, 9: -2042.0},
              "T_49": {0: 3094.0, 1: 104.0, 2: 1827.0, 3: 0.0, 4: 2941.0, 5: -1432.0, 6: 2030.0, 7: -747.0, 8: 4923.0, 9: 526.0},
              "T_56": {0: 4384.0, 1: 1394.0, 2: 2773.0, 3: 946.0, 4: 3240.0, 5: -1133.0, 6: 2174.0, 7: -603.0, 8: 6836.0, 9: 2439.0},
              "T_63": {0: 5117.0, 1: 2127.0, 2: 4009.0, 3: 2182.0, 4: 4367.0, 5: -6.0, 6: 3101.0, 7: 324.0, 8: 3646.0, 9: -751.0},
              "T_77": {0: 5417.0, 1: 2427.0, 2: 4246.0, 3: 2419.0, 4: 4353.0, 5: -20.0, 6: 3374.0, 7: 597.0, 8: 4960.0, 9: 563.0},
              "T_84": {0: 2522.0, 1: -468.0, 2: 1391.0, 3: -436.0, 4: 4894.0, 5: 521.0, 6: 4039.0, 7: 1262.0, 8: 3187.0, 9: -1210.0},
              "T_91": {0: 2461.0, 1: -529.0, 2: 1349.0, 3: -478.0, 4: 4987.0, 5: 614.0, 6: 4033.0, 7: 1256.0, 8: 3114.0, 9: -1283.0}}

filter_day = pd.DataFrame(filter_day)

final_data = filter_day.set_index(["dc",
                                   "sku",
                                   "display_name",
                                   "sku_category",
                                   "variable",
                                   "actuals"
                                   ])

app = Dash(__name__)

app.layout = dash_table.DataTable(
    filter_day.to_dict("records"),
    [{"name": i, "id": i} for i in filter_day.columns],

    style_data_conditional=[
        {'border': '1px solid blue'},
        {'if': {'row_index': 'odd'},'backgroundColor': 'rgb(215, 254, 255)'}
        ]
    )

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

Hey @ashik3192 I reformatted your data and code. Thanks for sharing it. If I find anything I’ll let you know.

[AnnMarieW]

You could try this new package:

Pandas-Dash: Make life with Pandas and Dash easier

Hello Dash community! I wanted to share a new Python package I released to make working with Pandas and Dash easier. It leverages pandas’ API extension similarly to geopandas or pandas-ta. Currently, it has two functionalities: data, columns = df.dash.to_dash_table(): This can be used to obtain the data and columns necessary for dash_table. It works with flat pandas df but it becomes most useful when working with multi index pandas df. Indeed, many difficulties pop up when working with …

[ashik3192]

Thanks @akroma ,Please let me know if you find anything similar , it would be super helpful …

[ashik3192]

Thanks for sharing this @AnnMarieW I tried it but it is not considering the columns that are in the set index .