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

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.

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~