Black Lives Matter. Please consider donating to Black Girls Code today.

How can I upload csv data with dcc.upload and then directly show the table using dash_table with sorting/filtering function

I have read through and experimented below two sites:
https://dash.plotly.com/dash-core-components/upload

https://dash.plotly.com/datatable/callbacks

However, it’s kind of hard to combine both to be able to upload a dataset and then the table contents will pop up in dash table with sorting/filtering function as listed in the second link above.

Can anyone help with a minimal example? Thanks!

Hi @sound118 welcome to the forum! Why is it hard exactly? You can write a callback taking

  • as Input, the contents of the Upload component
  • as Outputs, the columns and data properties of the table, and also a dcc.Store to store the whole dataframe so that you can have this Store component as State in the filtering callback if you need a custom filter.

Side remark: do you require custom filtering and/or paging, or could you use the built-in filters of the datatable like https://dash.plotly.com/datatable/interactivity?

Hi @Emmanuelle, thanks for your hint. I have resolve the problem by writing a callback with two outputs with component properties as “data”, ‘columns’ respectively. Features like sorting/filtering and pagination are done by learning from Dash_table official documents.