Introduction to Dash DataTable - Growing a Spreadsheet into an Application

A complete Introduction to Dash DataTable component. In this tutorial, you will learn how to create spreadsheet-driven interactive dashboards, all in python. Open Links below...
View my book - The Book of Dash:
www.amazon.com/Python-Dash-An...
github.com/DashBookProject/Pl...
Code:
github.com/Coding-with-Adam/D...
Data:
drive.google.com/file/d/1QOfo...
DataTable Sorting documentation:
dash.plotly.com/datatable/int...
DataTable Reference:
dash.plotly.com/datatable/ref...
Video layout:
00:00 - Introduction
04:23 - the Code
08:00 - Essential DataTable Parameters
16:26 - the Callback
27:36 - Good-to-know DataTable Parameters
************************************************************************
👉 Your support keeps Charming Data running, which is proudly a 100% member-supported educational channel:
Patreon: / charmingdata
GitHub: github.com/sponsors/Coding-wi...
KZbin: / @charmingdata

[@CharmingData]

Hey Everyone, I hope you find this tutorial useful. 👉 If you appreciate these tutorials and can support their existence while getting some perks: kzbin.info/door/qBFsuAz41sqWcFjZkqmJqQjoin

[@Theamitgodbole]

Great tutorial - explained with the right pace, right details...thank you!

[@petera1033]

FANTASTIC set of tutorials and introducitons - thank you.

[@satishkumar988]

Excellent set of tutorials . This channel is and was my first place to check if I get stuck . It takes lot of effort to create such videos and really appreciate. Thanks a lot .

[@irmdev595]

same. Adam is now an official employee of Dash Hopefully hell have time for us rookies

[@petera1033]

Appreciate the detailed walk through - very helpful .

[@CharmingData]

You are welcome. It's great to read that my tutorials are helping you.

[@sean7891233]

Thanks Adam, I've seen countless youtube tutorials out there on data and python, you're easily the best teacher in terms of explaining concepts and why things are done in a certain way... your videos are the best for helping me "get the hang of it"... love your videos!!

[@robtuke]

Thanks Adam - Probably the best python Dash video I have seen and an a very detailed sample code

[@CharmingData]

You're welcome, Rob. Hope you get to build beautiful Dashboards.

[@random_birch_forest]

Hi Adam! Adding a lot of comments into the code is very much appreciated! Makes it much easier to change it for our use later on. Thank you

[@CharmingData]

Thank you for the feedback, Alex. That's good to know. I'll make sure to continue doing that.

[@Mira_k452]

Thank you for your work and your tutorials, I am learning a lot from them!

[@CharmingData]

You're welcome, Aina. If you have any qeustions, let me know.

[@flowers134]

I am explicitly following you because of the details of structure and documentation of libraries. Really what programming is about, and profoundly usefull. I think people that work with python for some time knows the value of this.

[@CharmingData]

Thank you Federico

[@johnanih56]

Very very helpful! Thanks Adams. Amazing tutorial

[@CharmingData]

Thank you John

[@e-normous]

Thank you so much for this very helpful tutorial and the tremendous effort you put into these videos. They help me a ton!❤🎉

[@CharmingData]

Thank you for watching.

[@arturooreamuno5619]

ur the best man ! thanks sooo much !!! much appreciated cheers from Costa Rica

[@CharmingData]

Qué bien..me encanta Costa Rica. Uno de los únicos países sin ejército. You guys know what you're doing.. Good luck building dashboards with Dash 👍🏼

[@RuslanSkiraUkraine]

Awesome tutorial very helpful.

[@shaheerzaman620]

Brilliant! One of the best youtube channels out there!

[@CharmingData]

Thank you Shaheer. I'm glad you're liking the videos.

[@shaheerzaman620]

@@CharmingData it will be great if you can do more real time charts. Specially weather or pollution maps.

[@CharmingData]

@@shaheerzaman620 Shaheer, did you see my app/tutorial on weather api kzbin.info/www/bejne/hHawdal_isZ8bKM I just connect an API weather data to a table, but once you have the data, you can create any graph you want with Plotly Express

[@TheNotoriousPhD]

Very informative video !!!!

[@CharmingData]

Glad it was helpful! Tristan.

[@GordonShamway1984]

love your channel. keep up the good work! Would love to see how to build a good structure of web app and style it

[@CharmingData]

Thank you Stefan. Are you referring to app layout?

[@GordonShamway1984]

@@CharmingData Yes, how to structure and design it. For example making different columns and boxes and align divs in it. Basically how to plan and execute it. I mean it is kind of ok-ish to make plots and drop them on a canvas, but the gallery shows so much more impressive stuff which would take me years to design... (basically because I don´t know how) - maybe you do?

[@CharmingData]

@@GordonShamway1984 Agreed. I'll add this to my list of tutorials to make. Many of us could benefit from understanding how to layout an app. Thank you for the suggestions.

[@robertpfaff4834]

Thank you for the comprehensive video. I am interested in an editable table, though much simpler than the one presented here, and preferably one that accepts a JSON datasource, allowing the user to modify the data inside the cells. but not table structure. I spent hours playing with the editable table templates, but I cannot figure out how to modify the table (or restructure the data) to make this interaction possible. The columns seem straightforward, but I don't understand how to populate the rows. The functions in the templates seem designed to create dummy data that populates the cells, without specifying how to structure the underlying spreadsheet or JSON object. I hope this is making sense. I've only been coding in Python for about six months, but I have a stronger background in HTML and CSS. Can you suggest an editable template, and give some direction about how to structure the data from a beginner's perspective? Thank you very much.

[@tombrad8795]

man, you are goooooooooooooooooooooooooooooooood

[@sean7891233]

Thanks!

[@CharmingData]

Thank you so much :)

[@avisankhadutta4053]

This is great. So much clarity. Can you please show how to upload a csv/xlsx, use a certain variable for dropdown list after uploading and then use the dropdown id for further manipulation?

[@chriskeo392]

Csv upload - he did. Drop-down - Check out his drop down video on his channel

[@avisankhadutta4053]

@@chriskeo392 thanks. This entire process is complete and I have created a tool for NLP based solution. The next step is improving on the speed of processing and running the model. The front end is almost ready.

[@prakharkumar4114]

How do I add multiple editable tables to the dashboard?

[@venkat2132]

I have use case can you please help me in creating that exandable/collapsable rows in datatable like if click on category cell it should exandable the sub category sales under it please help me in this use case this is a must for dash because excel or power b provides this feature

[@azizee]

It is possible to do a dropdown and the data on the chart and dataTable change according to the dropdown value?

[@jonas4223]

Hey, does anybody knows how to rename the "Toggle Columns" Button? I also look for a way to style this button with my dash-bootstrap theme (dbc)...

[@AbhinavKumar-mm1ys]

Amazing tutorial!!!! Can you assist me on how to upload image on the dash server then do some ML on it and lastly show the result back?

[@daltonborges1073]

Thank you Adam! As always, it was a very nice tutorial. I have a question: Is it possible to change what is written in "Toggle Columns" and "filter data..."? I would like to translate those words into another language.

[@CharmingData]

Hi Dalton. Yes, I think you can change the words inside the toggle columns.

[@robdawg417]

Hey, why are your for loops backwards? meaning the for loop is on the bottom, the the if statement in the middle and the action at the top? is this dash specific language?

[@CharmingData]

Hi Robert, thanks for watching. It's python specific. Your don't need one on top of the other. But in a list comprehension with a for loop and an "if", the result comes first, then the for section, then the if. That order changes if you add an 'else' part 😊

[@shardula-ai4ourkids169]

Dear Charming Data, I want to have two plots with a single range selection. Plan to do on plotly save as html and embed in another html. How does Dash help in this use case.

[@CharmingData]

Hi 4ourKids I've never embedded a saved html in another html. This site might help clarify more about Dash and interactive html, see: plotly.com/python/interactive-html-export/ To save your graph to html, you can do: fig.write_html("path/to/file.html")

[@gastonalvarez3386]

Hi Adam! Thank you again for your excellent videos! I have a question, I'm trying to create a dropdown with a callback that return me a datatable with the data that I selected. Then, I'm trying to select some rows from this datatable and create some charts, but I can't do this because I don't know how I can connect all this callbacks. could you help me please? Chears from Argentina!

[@CharmingData]

hi Gaston, You might find this video helpful. kzbin.info/www/bejne/mpi5ZHp9e7KWisU

[@Rightx2u]

how do I add a secondary data bar ?

[@JoaoVitorBRgomes]

Is it possible to create a final row with total sum?

[@pankajag7101]

Hello Charming Data. I want to filter my dash DataTable (created from dataframe say df1) based on hover/selection on graph (created from dataframe say df2). Both dataframes have one common key. Is it possible?

[@CharmingData]

Hi @pankaj I don't think that's possible

[@shaileshkamble345]

Hello sir i have a query may be it's silly questions but i am not able to do it Sir as you have used only single csv file to for data table and same csv is being used fir plotting graph Sir my query is can we use 2 different CSV file one for data table and one to plot data based on data table input or basically selected checklist

[@evileyelivelumix831]

Great tutorial! thanks a lot. A question, why the choromap-container's component-property is "children" but not a 'figure'? as it is a figure, same value you put in the component-property of the bar chart.

[@CharmingData]

Great question. That's because the function returns the children of a Div: html.Div(id='choromap-container'). In previous videos, I return the figure of dcc.Graph() but here it's a div.

[@CharmingData]

Hi Evileyelive. I am trying to gather more supporters to create higher quality educational tutorials on Dash 👨🏽‍🏫 My goal is to reach my first 15 supporters, and it would mean a lot if you were able to support me 😊 www.patreon.com/charmingdata You were one of my first supporters, and I'll always be thankful to you for that 🧡

[@random_birch_forest]

Hi Adam! In this datatable, I saw a column "Internet access". How do I change the display of the values into percentages, e.g. 86% or 79% without modifying the initial excel or csv document. Can I do it with python within the dash datatable itself? Many thanks!

[@CharmingData]

hi Alex, You need to use import dash_table.FormatTemplate as FormatTemplate It's doesn't have as many formatting themes as Pandas, but it should be able to do what you're looking for. See usage example under the formatting section here: dash.plotly.com/datatable/typing

[@random_birch_forest]

@@CharmingData Great, many thanks for pointing me in the right direction, Adam.

[@0xfsec]

Hi, Love all your tutorials.. just suggestion, it would be great if you made video how to deploy dash plotly on google colab and run the server with ngrok..

[@CharmingData]

Thanks for the suggestion, @fajar. Have you done that yet?

[@0xfsec]

@@CharmingData i try some of it, from several tutorials. But haven't succeed so far..

[@ysingh6762]

When I write some input in the dcc. Input, the checkbox of the dashtables get unchecked, why is it so?

[@CharmingData]

hi Singh, not sure what you're referring to. There is no dcc.Input in the code of this tutorial.

[@siddheshkadam5750]

Say if I want to create a radio button which will help me select a continent and then I only want the countries in that continent to be visible in the data table. How can this be implemented?

[@CharmingData]

Include the radioItem value in the callback and return DataTable rows that only have those country values.

[@marcuschoi4162]

Is there a parameter for the data table that allows to filter through a column for multiple values inside that column?

[@CharmingData]

Hi Marcus, try to look at the datatable references conditional formatting dash.plotly.com/datatable

[@Advaitt1]

Thanks for the tutorial ! Is it possible to download and save edited data table as a csv?

[@CharmingData]

Hi Advait. It is. Dash Datatable has a built-in parameter that allows you to export table to csv. Go to dash.plotly.com/datatable/reference and look for these parameters below. export_format (a value equal to: 'csv', 'xlsx', 'none'; default 'none'): Denotes the type of the export data file, Defaults to 'none' export_headers (a value equal to: 'none', 'ids', 'names', 'display'; optional): Denotes the format of the headers in the export data file. If 'none', there will be no header. If 'display', then the header of the data file will be be how it is currently displayed. Note that 'display' is only supported for 'xlsx' export_format and will behave like 'names' for 'csv' export format. If 'ids' or 'names', then the headers of data file will be the column id or the column names, respectively

[@yanliu6202]

I love your lessons. could you please help me for an error I got in callbacks, in your example update_bar, I need to reconstruct another dataframe and then pass to fig. but when I do this b_row = slctd_cell[0]['row'], I got this error in the UI ... TypeError: 'NoneType' object is not subscriptable, please help if you can.. thanks!!

[@CharmingData]

Hi Yan, it's really hard to help without the full code and the data, or replicating the problem. My recommendation is to print(slctd_cell[0]['row']) and see what you get. I think you are getting a None, which means you need to change the slctd_cell[0]['row']. Try different things, maybe take out the zero, maybe it's "row" without the " ". Try various ways until you actually get the data you need printed.

[@shachi20cancer]

Hi adam, my dashboard has a date slicer that influences the data showing in dcc.graphs and dash_table.DashTable. How do i return this dash table in my appcallback function call?

[@CharmingData]

Hi @Shachi, you can return the rows data and column data in the callback function, based on the data slicer.

[@rodrigomolinadacaret8108]

Hey great tutorial! I've learned a lot and it has motivated me to create my own dashboard. Is there any way to listen to changes in the DataTable cells? I would like to save the changes in the table and send them back to a MongoDB database whenever a cell is edited.

[@CharmingData]

Hi Rodrigo, it's a bit complicated to listen to changes in the DataTable cells. I've seen a work-around here, though. community.plotly.com/t/detecting-changed-cell-in-editable-datatable/26219/4 I just created another tutorial that I will be posting on the same topic this weekend. Instead of saving data to my postgreSQL database every time a cell changes, I save data at the end by replacing the whole datatable. Here's the app and code that go with that tutorial . github.com/Coding-with-Adam/Dash-by-Plotly/blob/master/Dash_More_Advanced_Shit/CRUD_app/crud_dash_postgresql.py phones-sold.herokuapp.com/

[@rodrigomolinadacaret8108]

@@CharmingData Thanks for the answer! Seems like replacing the whole datatable is the simplest way to it, as you say. Looking forward to your next video. I've been learning a lot from them.

[@mponcardas94]

Thank you for your sharing your knowledge!! Is it possible to update the data in datatable to google sheets (i have API setup already), and once it is reloaded, the edited data still appears?

[@CharmingData]

Hi Mai, it should be possible. I don't see why not. But I've never done that. You just need to find a way to connect Google sheets with your app, so any time google sheets changes, your DataTable would change.

[@mponcardas94]

@@CharmingData Thanks for the response! I have Google sheets connected already. I was creating like a "chatting area within Dash" (structured in such a way like a data table) that should be seen across all viewers... with google sheets as database. but actually had troubles on grabbing the values in Dash state. Perhaps i am being too complicated and there are simple workarounds..

[@CharmingData]

@@mponcardas94 send me your code. I'll try my best to help. You can contact me through [e-mail]

[@mponcardas94]

Wow! Thanks a lot! I will send it asap

[@rajatrahatgaonkar224]

Hi @CharmingData thanks for the video. I wanted to ask can we use dash datatable inside dash bootstrap. Thanks

[@CharmingData]

Hi Rajat, you should be able to. You can use Dash Bootstrap to style the app with a theme like CYBORG and then put the dash datatable inside your app.

[@murtazahaji1291]

Amazing tutorials, Can you do next video on communicating with API and show real time graphs? Do we havto collect data in advance or we can connect a graph with data from API and have it refresh on every time interval or user input.

[@CharmingData]

Hi Murtaza, I'm glad you liked the tutorials. Have you checked out my two videos on API? kzbin.info/www/bejne/bYrdZJJ8esaHp5o kzbin.info/www/bejne/hHawdal_isZ8bKM

[@murtazahaji1291]

Charming Data Thanks ill check these out

[@evileyelivelumix831]

@@CharmingData Hi Charming Data, thank you for the tutorial. Another easy way I guess we also can connect with other web data is to use ParseHub, which is like a web scratcher tool and we can create a free token and access the real-time data

[@CharmingData]

@@evileyelivelumix831 nice. I didn't know that. Thank you

[@bhavyaasharma9706]

Can we make a dynamic id column? and what effect would it be having on interactivity?

[@CharmingData]

I think you can, but what are you trying to accomplish with a dynamic column? can you just use the hide column function?

[@shachi20cancer]

Hey Adam, how can i 'reset filters' or 'clear filters' to regain the table in its original state?

[@CharmingData]

HI Shachi, this post might help you. community.plotly.com/t/button-callback-to-refresh-global-data/21125/2 You could also refresh the web browser to get back to the original datatable, but ideally, you would add a button that would refresh everything, just like in the post attached.

[@kajalgupta8426]

Hey Can we put our first column as a list of variables and then 3 columns with radio buttons so that the user can select a particular option for every variable ?

[@CharmingData]

I don't think you can add radio buttons inside the DataTable but hopefully that will change soon.

[@ashutoshagraharicse]

Thanks for wonderful video on Dash tutorial. I have one problem where I need to put column wise validation on user input like a numeric column should have the option to enter value between 0 to 1. Please provide some help on this.

[@CharmingData]

Hi ashutosh, what are you trying to do exactly?

[@ashutoshagraharicse]

@@CharmingData hello, I am trying to give editable as true option in datatable on screen but with some condition for values which user can put in the cell. Like a numeric column, which has the condition of values with range between 1 to 100, so user can't update the column cell value beyond that. Same feature is available rhandsontable in R Shiny. I hope this will clear the doubt.

[@CharmingData]

@@ashutoshagraharicse I think you can put type: numeric . like show here: dash.plotly.com/datatable/typing I'm not sure if you can limit the value to a certain range, but I'll give you the documentation to try and find out. If you find an answer, I would love to know. dash.plotly.com/datatable/reference (see format attribute) community.plotly.com/t/dash-table-formatting-decimal-place/34975/5 github.com/plotly/dash-table/tree/dev/dash_table

[@jonathantan2284]

Thanks for this tutorial! Is it possible for you to share how to show certain columns from a dataframe to the datatable? Like in this example, I only want to have country, year and internet daily columns in the datatable. Also is it possible to have check all/uncheck all button for the select rows? Thanks!

[@CharmingData]

Hi Even, as of now, it is not possible to have a check-all button for all rows. For your first question, can you please clarify. Are you asking how to add only certain columns to the datatable instead of all columns?

[@jonathantan2284]

@@CharmingData Hi Charming! Thanks for your reply! I found a workaround for the check-all button in the Plotly forum but it is a little buggy - maybe you may want to have a look at the Plotly forum. For the first question, yes I am asking on how to add only certain columns to the datatable from the dataframe. Thanks in advance! :)

[@CharmingData]

​@@jonathantan2284 Hi Even, can you please share the link for the workaround in the plotly forum. For the first question, you can add only the columns you're interested in: columns=[ {"name": "name1", "id": "id1"} , {"name": "name2", "id": "id2"} , {"name": "name3", "id": "id3"} ],

[@jonathantan2284]

@@CharmingData Hi Charming! Yes, the column works, thank you! Here is the link to the workaround, I tried to play with it but couldn't get it to function properly. You can read the forum post from me on what is the issue. community.plotly.com/t/data-table-select-all-rows/16619/7. This is something that Plotly should have thought of if they want to make Dash truly accessible to everyone!

[@CharmingData]

@@jonathantan2284 thank you

[@vinaysalian17]

Hi. Thanks for the tutorial, very helpful. Can this be executed from Jupyter notebook? I get the below error Running on 127.0.0.1:8050/ Running on 127.0.0.1:8050/ Debugger PIN: 305-914-609 Debugger PIN: 305-914-609 * Serving Flask app "__main__" (lazy loading) * Environment: production WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead. * Debug mode: on An exception has occurred, use %tb to see the full traceback. SystemExit: 1

[@CharmingData]

I think you need to use dash for Jupyter

[@harmalhusen6887]

Hi, I just came across your video and I have a question: Is there a way to format the DataTable in a way that allows the user to select multiple cells like Excel? Many users are used to this type of interaction. Currently, I can only select single cells or use shift-left-cursor. Thanks!

[@CharmingData]

Hi there, i think you can do that with Dash AG Grid. Try that.

[@harmalhusen6887]

@@CharmingData Will try it, thanks a lot!

[@FireForest61]

hey, was just wonderin gif you had any tutorials where you pull from a database and update the contents of the dash table via callback, thanks

[@CharmingData]

Hi @Aidan. What kind of database?

[@FireForest61]

@@CharmingData essetially we have created a dash app that filters trough a mongodb database and pulls the document based on the dropdown boxes selected from our dash app. we are able to make the callbacks work for displaying a graph now we want to display the corresponding dataframe below it. ive seen lots of tutorials for the dashtable, but none using a dashtable that gets updated based on the callback, cheers

[@CharmingData]

@@FireForest61 Hi Aidan, here's an example of how a datatable gets updated based on a callback. dash.plotly.com/datatable/editable See the last callback in the section "Integration with Dash loading states" The callback updates the datatable based on the dropdown value chosen, every 5 seconds.

[@koladeadewoye5226]

Thanks so much for this video, it is very simple and easy to understand. Is there a way to update the datatable itself via a callback? For example the data for the datatable will be from a dcc.store element that is consistently updated via API calls

[@CharmingData]

Hi Kolade, Yes, I think you can. Great question. You can save your API data in a dcc.Store(), and then use a dcc.Interval() to update the data of datatable every x amount of time.

[@koladeadewoye5226]

@@CharmingData Thanks a lot. That makes sense. Also how can I export the details of the filtered and sorted table into a csv file.

[@CharmingData]

@@koladeadewoye5226 I think you can do something like: df = pd.DataFrame(dataset) df.to_csv("Your_Data.csv")

[@irmdev595]

is there an autocomplete option? i see this out there ...how can one integrate this into dash datatable?

[@CharmingData]

Hi irm, autocomplete what exactly?

[@amirkaraj6746]

Hello charming data. Can you please help me how can I update the all dataframe from actions taken from datatable. Ex deleting a row from table I want also this to be deleted to dataframe as well. Thank you in advice!

[@CharmingData]

Hi Amir. You have to connect your app to am external database. I have s bigger on that: connect your dash app to MongoDB

[@amirkaraj6746]

@@CharmingData Thank you for your response, I will considering that in a latter time and it will be necessary to make a connection, but for know I was looking for a fast solution. Another question, do you have any tutorial or any documentation for how to upload a file and update the dataframe with that

[@RuslanSkiraUkraine]

Hello, could you please share your experience? What is better updating graph by table or table by graph? Because now I have ready logic for the graph and need a table.

[@CharmingData]

Either way should work. Usually I find it easier to update graph based on the table

[@RuslanSkiraUkraine]

@@CharmingData Thank you for the answer. I decided to do everything in one callback with different related functions.

[@marlin9107]

Great tutorial. Just confused as sometimes a single quotation is used, and in other times, double quotation is used. Is there a reason for that?

[@CharmingData]

Hi Marlin. No, there is no difference. I need to be more consistent with that. But on a side note, if you have a sentence with a sine quote like this: I know it's been crazy. You have to put this sentence inside a double quotation

[@franciscomiranda3239]

Its possible to change dash with a new csv file in real time for html watching??

[@CharmingData]

Hi Fransisco, you you have to use a database and connect it to your app

[@PrudensiaMaziku]

GReat tutorial! but i am finding a tutorial that has the functionality of adding rows and columns in your dash datatable ,also swapping rows and columns.

[@joshraj143]

Hi good vedio I am trying to update my datatable by filtering using datepickerrange and then automatically update graph based on filter ,note i want to give pivot table as input i got json error any suggestions appreciated

[@CharmingData]

Hi Josh, it's hard to say without seeing the code. You can share the code here at Plotly forum and ask the question as a post. community.plotly.com/

[@joshraj143]

@@CharmingData thanks for reply ,I coverted my dataframe in pivot table then i tried to filter it using datetime pickerrange while updating using callback is not working json my dataframe contains dates,nationality,number of patients by pivoting i got the below table when i call back based on timepickerrange its not working dash.exceptions.InvalidCallbackReturnValue: The callback for `` returned a value having type `DataFrame` which is not JSON serializable. The value in question is either the only value returned, or is in the top level of the returned list, and has string representation ` DATES NATIONALITY NUMBER_OF_PATIENTS 0 2020-06-21 K 9 1 2020-06-21 NK 4 2 2020-06-22 K 7`

[@joshraj143]

@@CharmingData this is my callback code @app.callback( dash.dependencies.Output('table', 'data'), [dash.dependencies.Input('my-date-picker-range', 'start_date'), dash.dependencies.Input('my-date-picker-range', 'end_date')]) def update_table(start_date, end_date): df4 = df3.loc[start_date: end_date] data = df4.to_dict("rows") return df4

[@CharmingData]

@@joshraj143 I'm not sure. But try print(type(start_date)) to see what it gives you. Maybe the problem is when you try to filter df3.loc[dates...] Is the filter but working because of the values?

[@daytraderph]

is there anyway i can implement dash into django and render it there ?

[@CharmingData]

Hi @daytraderph, there is, but I've never tried it. Sorry

[@salonishah493]

Hello, Amazing Video!! It was so easy to understand after this video. Thank you for this great work! I am trying to execute something similar for my excel. I used almost the exact same code for the bar-container as shown in your video. However, when I run the app I get an error on the dashboard " ⛑️ ID not found in layout5:09:18 PM Attempting to connect a callback Output item to component: "bar-container" but no components with that id exist in the layout. If you are assigning callbacks to components that are generated by other callbacks (and therefore not in the initial layout), you can suppress this exception by setting `suppress_callback_exceptions=True`. This ID was used in the callback(s) for Output(s): bar-container.children Is this something I can get help with?

[@CharmingData]

Hi Saloni, do you know what suppress callback exception is? Have you used it in your code?

[@salonishah493]

Thank you for such a prompt reply. No I have not used any suppress_callback_exceptions in my code. I have used same code as yours with my excel.

[@CharmingData]

@@salonishah493 ok. Look at this section "Callbacks require their Inputs, States, and Output to be present in the layout" Here: dash.plotly.com/callback-gotchas

[@salonishah493]

@@CharmingData Thank you so much for your help!!

[@CharmingData]

@@salonishah493 good luck. I hope you build beautiful dashboards.

[@inasbadr]

Thanks a lot for your fruitful lecture . but I tried to use this line but it gave me an error (df['id'] = df['iso_alpha3']) the error is (KeyError: 'iso_alpha3' )

[@CharmingData]

Hi Inas, did you change anything in the code? what version of dash are you using? Is that the only error message you got?

[@swarupramkumargonthina9711]

Geting below error sir, TypeError Traceback (most recent call last) in 3 app.layout = html.Div([ 4 html.Div([ ----> 5 dash_table.DataTable( 6 id='datatable_id', 7 df=error_data.to_dict('records'), ~\Anaconda3\lib\site-packages\dash\development\base_component.py in wrapper(*args, **kwargs) 364 if "self" in kwargs["_explicit_args"]: 365 kwargs["_explicit_args"].remove("self") --> 366 return func(*args, **kwargs) 367 368 # If Python 3, we can set the function signature to be correct ~\Anaconda3\lib\site-packages\dash_table\DataTable.py in __init__(self, active_cell, columns, include_headers_on_copy_paste, locale_format, markdown_options, css, data, data_previous, data_timestamp, editable, end_cell, export_columns, export_format, export_headers, fill_width, hidden_columns, id, is_focused, merge_duplicate_headers, fixed_columns, fixed_rows, column_selectable, row_deletable, cell_selectable, row_selectable, selected_cells, selected_rows, selected_columns, selected_row_ids, start_cell, style_as_list_view, page_action, page_current, page_count, page_size, dropdown, dropdown_conditional, dropdown_data, tooltip, tooltip_conditional, tooltip_data, tooltip_header, tooltip_delay, tooltip_duration, filter_query, filter_action, sort_action, sort_mode, sort_by, sort_as_null, style_table, style_cell, style_data, style_filter, style_header, style_cell_conditional, style_data_conditional, style_filter_conditional, style_header_conditional, virtualization, derived_filter_query_structure, derived_viewport_data, derived_viewport_indices, derived_viewport_row_ids, derived_viewport_selected_columns, derived_viewport_selected_rows, derived_viewport_selected_row_ids, derived_virtual_data, derived_virtual_indices, derived_virtual_row_ids, derived_virtual_selected_rows, derived_virtual_selected_row_ids, loading_state, persistence, persisted_props, persistence_type, **kwargs) 799 raise TypeError( 800 'Required argument `' + k + '` was not specified.') --> 801 super(DataTable, self).__init__(**args) ~\Anaconda3\lib\site-packages\dash\development\base_component.py in __init__(self, **kwargs) 105 106 if not k_in_propnames and not k_in_wildcards: --> 107 raise TypeError( 108 "{} received an unexpected keyword argument: `{}`".format( 109 error_string_prefix, k TypeError: The `dash_table.DataTable` component (version 4.11.0) with the ID "datatable_id" received an unexpected keyword argument: `df` Allowed arguments: active_cell, cell_selectable, column_selectable, columns, css, data, data_previous, data_timestamp, derived_filter_query_structure, derived_viewport_data, derived_viewport_indices, derived_viewport_row_ids, derived_viewport_selected_columns, derived_viewport_selected_row_ids, derived_viewport_selected_rows, derived_virtual_data, derived_virtual_indices, derived_virtual_row_ids, derived_virtual_selected_row_ids, derived_virtual_selected_rows, dropdown, dropdown_conditional, dropdown_data, editable, end_cell, export_columns, export_format, export_headers, fill_width, filter_action, filter_query, fixed_columns, fixed_rows, hidden_columns, id, include_headers_on_copy_paste, is_focused, loading_state, locale_format, markdown_options, merge_duplicate_headers, page_action, page_count, page_current, page_size, persisted_props, persistence, persistence_type, row_deletable, row_selectable, selected_cells, selected_columns, selected_row_ids, selected_rows, sort_action, sort_as_null, sort_by, sort_mode, start_cell, style_as_list_view, style_cell, style_cell_conditional, style_data, style_data_conditional, style_filter, style_filter_conditional, style_header, style_header_conditional, style_table, tooltip, tooltip_conditional, tooltip_data, tooltip_delay, tooltip_duration, tooltip_header, virtualization

[@MallikPullela]

The example for Grid is really good, I managed to configure this for SQL Server. The application works great with smaller set of data - when I used it with a 10K of data - the application started to experience serious lag. Am I missing some thing - should I increase the "refresh rate" for the application - if yes how do I do that?

[@CharmingData]

Hi Mallik, for large datasets, you should use different attributes or backend paging within the DataTable. dash.plotly.com/datatable/callbacks

[@MallikPullela]

@@CharmingData Thnak you for the quick reply. Is there a way to limit/control the number of records to read from the grid to update back to the database ?

[@CharmingData]

@@MallikPullela I would filter the pandas dataframe inside the callback function so not all rows go into the records of the datatable.

[@MallikPullela]

@@CharmingData This is an update for all, I used derived_virtual_selected_rows to get to what I was looking for. dash.plotly.com/datatable/interactivity

[@CharmingData]

@@MallikPullela Thank you for sharing @Mallik.

[@matiastorres392]

Im a data scientist and i always use plotly for my análisis, so ¿dash is the best option for front end app??

[@CharmingData]

Hey Matias, there are other options out there but Dash is the most comprehensive and most scalable than the others. Dash gives you the most control over your python dashboards

[@ravir8987]

Hi Adam, this is great, thank you. Is there anyway we can create crosstab data table ?

[@CharmingData]

Hi Ravi, yes. You should use the dcc.store to transfer data between tabs

[@raviramadas4313]

@@CharmingData Thanks for quick reply. My question was about building pivot table. sorry for the confusion. By default data table adds regular table like this. I would like to pivot this .

[@CharmingData]

@@raviramadas4313 Hi Ravi, you mean instead of a dashdatatable you would like to build a pivot table with the data?

[@raviramadas4313]

@@CharmingData Correct. I tried dash-pivotable thats not so useful for custom report. So wondering if there is any way we can build pivot table. thanks for your help

[@CharmingData]

@@raviramadas4313 hi Ravi. Not that I'm aware of, but maybe something new came out.

[@mehuljain1098]

Hey adam ,your tutorials are very nice. But i have some specific doubts , is there any way to contact you?

[@CharmingData]

for sure. You can reach me at [e-mail]

[@fredericodesouzacruz3779]

Thank you for this marvelous tutorial. Where my I get the code.

[@CharmingData]

Hi Frederico, Most of my code is free on Github. Here's the one for this video: github.com/Coding-with-Adam/Dash-by-Plotly/blob/master/DataTable/datatable_intro_and_sort.py

[@fredericodesouzacruz3779]

@@CharmingData thanks a lot something is wrong with my copy code. Congratulations for your tutorial they are really fantastic

[@subirrakshit1563]

Please make dash canvas tutorial

[@CharmingData]

ok Subir. I'll it to my list.

[@andrewilliams2378]

This is a little complicated when the index of your dataframe is anything other that a integer index

[@Sam-hc2el]

Hi Adam, I was able to build my data table following the guide that you have here. However, I would like to update the data table using Date Picker Range. I used your video here as a guide: kzbin.info/www/bejne/a6baqaKulrV3bq8&pbjreload=101 I understand that the layout uses two dcc components a DatePickerRange and a DataTable. How can I link them together in the callback so the data table updates depending on the dates.

[@CharmingData]

Hi @Sam. It really depends what you want to updated in the datatable. Do you want to update the dates inside the datatable cell according to the datePickerRange, or do you want to updated the rows of the datatable, etc. There are many things that can be updated. But a good start is to use the needed DatePickerRange parameter in the callback Input, like this: @app.callback( Output('DatatableID', 'WhatYouWishToUpdate'), Input('datepickerID', 'TheParameterYouNeed') )

[@Sam-hc2el]

@@CharmingData Hi Adam, what if I want all the rows in the data table to update when the users choose a start date and end date? How many output and input do i need to make?

[@CharmingData]

@@Sam-hc2el Hi Sam, I don't think you'd need a lot, because you would use the value/date chosen to filter the pandas dataframe, and then you would spit out a new datatable, using the filtered dataframe. Something like this: @app.callback( Output('datatable', 'data'), [Input('my-date-picker-range', 'start_date'), Input('my-date-picker-range', 'end_date')] ) def update_output(start_date, end_date): dff = df.loc[start_date:end_date] return dff.to_dict('records')

[@Sam-hc2el]

@@CharmingData Hi Adam, I tried that but I got an error that says: ID not found in layout Attempting to connect a callback Input item to component: "my-date-picker-range" but no components with that id exist in the layout. If you are assigning callbacks to components that are generated by other callbacks (and therefore not in the initial layout), you can suppress this exception by setting `suppress_callback_exceptions=True`. This ID was used in the callback(s) for Output(s): datatable-interactivity.data datatable-interactivity.data

[@Sam-hc2el]

Here's my code on the app layout where the IDs are: app.layout = html.Div([ dcc.DatePickerRange( id='my-date-picker-range', # ID to be used for callback app.layout = html.Div([ dash_table.DataTable( id='datatable-interactivity',