Dash DataTable - Columns Are Rearranged

Chris, something very odd happens when I apply this code to my data.
the columns automatically rearrange themselves such that the numbers (even if i set them to be strings) go first and the other columns shift to the end. This messes up my callback.

I’m trying to find a way to set the columns as well (as I would in a fixed table with columns =
(DF_GAPMINDER.columns) )…with no luck though

1 Like

Hm, I’m not sure what’s going on here. Could you create a small, reproducable example?

Sure! The following should show you what i mean,

import dash
import dash_html_components as html
import dash_table_experiments as dt
import pandas as pd

app = dash.Dash()

app.scripts.config.serve_locally = True


df ={'y': [1,2,3],
                  '1': [4,5,6],
                  'x' : [7,8,9]} # automatically rearranged to be alphabetical (1, x, y)
df = pd.DataFrame(df)
#To set it back non-alphabetically,
df = df[['y', '1', 'x']]


#Produces a table with columns in the order 1,x,y
app.layout = html.Div([
    dt.DataTable(
        rows=df.to_dict('records'),
        columns=(df.columns),
        filters=True,
        resizable=True,
        sortColumn=True,
        editable=True,
        row_selectable=True,
        filterable=True,
        sortable=True,
        selected_row_indices=[],
        id='datatable-gapminder')])

#Produces a table with columns in the order y, 1, x (desired)
app.layout = html.Div([
    dt.DataTable(
        rows=df.to_dict('records'),
        columns=(df.columns),
        filters=True,
        resizable=True,
        sortColumn=True,
        editable=True,
        row_selectable=True,
        filterable=True,
        sortable=True,
        selected_row_indices=[],
        id='datatable-gapminder')])

app.run_server(debug=False, host='0.0.0.0')

The thing is, I want my table to be the result of a drop-down, similar to what you’ve got here, Dash DataTable - Updating Rows with Dropdowns?
and I dont know where I could add the columns command, so that they return in the order set in the dataframe.

1 Like

I’ve solved this issue by creating an empty dataframe with the set columns, and adding

to the app layout.

then when df.to_dict('records') is returned in the app callback, the order is the way i set it to start off with.

Hi Ola,

I came across your post while looking for a solution for my column display! I was hoping to generate a similar callback for displaying only the selected columns by the users. It is essentially the same property as row_selectable, only that the package does not have the property included yet. I would be so grateful if you could share more detail or experience regarding your post!

P.S., I have read about this Pandas selection method, but it discards certain data from the beginning so that they cannot be later retrieved in callbacks.

map_data = pd.read_csv(“nyc-wi-fi-hotspot-locations.csv”)

# Selecting only required columns
map_data = map_data[[“Borough”, “Type”, “Provider”, “Name”, “Location”, “Latitude”, “Longitude”]].drop_duplicates()

Would you say it’s better to just modify this DataFrame selection command everytime I retrieve certain columns, or write a callback function with desired duplicates of the original data?

Best,
Chirmi

For instance, I’m hoping to display and undisplay this column of States everytime a user checks or unchecks this label~