Python Dash data_table shows columns in wrong order

Dash Python
1

Hi,

I was trying to setup a data_table in my Dash project, the data_table was styled as below:

html.Div([
          dash_table.DataTable(
              id='temp',
              page_size=100,
              style_table={'height': '300px', 'width': '100%', 'overflow': 'auto',
                           'marginLeft': 'auto', 'marginRight': 'auto'},
              style_header={
                  'backgroundColor': '#F5F5F5',
                  'fontWeight': 'bold'
              },
              fixed_rows={'headers': True},
              style_cell={'minWidth': '60px'}
          )
      ]),

then in the callback, I setup a pandas dataframe with column order of “YYQQ, 1, 2, 3, 4, …, 61”, then used df._to_dict(‘records’) to transform the dataframe as what the data_table needed, below is the result of df.columns returned

Index(['YYQQ', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13',
       '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25',
       '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37',
       '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49',
       '50', '51', '52', '53', '54', '55', '56', '57', '58', '59', '60', '61'],
      dtype='object')

however, in the dash web page, the data_table always shows the column ‘YYQQ’ at the last position.

image
image876×298 12.2 KB

I’ve tried to reorder my dataframe, reanme the column ‘YYQQ’ to ‘0YYQQ’ and ‘00’, they doesn’t work at all, whatever the column name is, it always shows at the last position.

FYI, the values in YYQQ columns are year-quarter like ‘2020Q1’, while the values in the rest columns are percentage in string format like ‘2%’, I’m not sure if the values are the reason of the incorrect column order.

BTW, I’ve setup data_table in my other dash projects, but this issue never happened before.

I am really confused now, please help.

2

Figured out, it seems that data_table sorts the column by some hidden order that places columns name with numbers before the columns name with letters. Manually renamed my number-named columns to letter-named columns, the problem is gone now.

1 Like