I almost forgot. You need at least Dash 1.15.0 or higher to reproduce this code on your computer. Good luck. 👉If you benefitted from these tutorials and would like to show your appreciation and support the existence of more tutorials: www.patreon.com/charmingdata
Hey Adam, thank you again for another wonderful new video. Love learning Dash-plotly from your videos. I am trying to re-write my former solution with Dash and am stuck at a point where I can't move further. I am fetching and storing locally some json data (tabular) from a different thread (every 5 mins). I need my Dash APP to cyclically read the current stored data and refresh the contents of my webpage without any manual input/callback. Earlier I was writing out a simple HTML output with styled pandas dataframe with a "http-equiv, refresh content" meta tags in the source output. Can you give some hints how can I do this now with DASH? Appreciate your time and help. Thanks.
@@curtisjackson3377 Hi Curtis, I'm glad you're finding my videos helpful. I understand what you're trying to do, but I'm really not sure how to get that done. Sorry I can't be of more help with this. Have you tried asking on the Plotly Dash Forum?
Hey everybody, if you're short on time, the meat of the tutorial is the "Formatting the DataTable" section at 06:25. And don't forget to download the supporting document at drive.google.com/file/d/18JRffZsZhds6yFmheAJ9kiodynHcxUrL/view
Thanks @Charming Data for the awesome video. Is there any way to pass the parameter to the style data conditional list from outside and highlight the rows accordingly. Thanks
Is it possible to assign specific (background) colors to selected_cells of a given DataTable based on what "color option"-button of an additional dcc.RadioItems-component has been selected? Is there any way of connecting a dash_table.DataTable with another component (f.ex. dcc.RadioItems as color selection), or is the coloring really only doable within the DataTable-scope in which you are able to assign colors only by comparing columns and rows?
Hi Muris, That should be possible. You might have to use the radio item value as the callback input and the datatable property that controls the color as the callback output
Thank you, Abhinav. Yes, the Dash DataTable is really cool. Once you master all its features, you can do really a lot with it. Good luck with the switch.
Hi Adam! your videos are really useful and so detailed. I didn't undertand at first chance the documentation and i found this great explanation. Thanks a lot. I just a have one question, whay if i want to set a background color in a completely row in a dataset with differents data type, for example a metrics dataset wich incluide different values (where is not posible to put an unique conditional)... maybe it's posible to set an extra if in row_index? i solved this answer adding an extra col in dataset that write 'Cumple' or 'No Cumple' and then i use the next -> 'filter_query': '{EVALUACION} = "Cumple"' ...do this... But it there any other option that allow me put the background color without this extra column?
Hey Adam , thanks for the excellent tutorial. I'm wondering if it's possible to transpose this DataTable within a html.Div? Simply I have one header with column names and then one row where each cell is a calculated value according to the column name. I want to position this table as a thin vertical object to the right of my Dash app. Would you have any suggestions or resources to check on how I could achieve my idea?
@@CharmingData Hi Adam, thanks very much for your quick response! No worries, the solution I got to was to define my table through use of html table tags, then has a callback update the Td cells. I contained this in a dbc.Table compnent. Worked great. It was a 2 column table, with the dynamic data values stored in just one of the columns. A row example being: html.Tr([html.Th('Mean Daily Return %', scope = 'col'), html.Td(id = 'mean_daily_return')])
Great tutorial Adam ! Is there a way we can use colorscale (may be in background) on selective rows and cols in a datatable, making it like a heatmap ?
Hi Adam, was working on a Dash application and came across this video while doing conditional formatting. How would you write the filter query if you wanted to do something like this - 'if': { 'filter_query': '{Part sent date} > {Part received date + 10}', 'column_id': 'Part sent date' } This code is not working for me as we can't add integers to strings.
Great video again! How would you conditional format when you have multi select option enabled for your data table and a user selects multiple rows and you want your rows to be highlighted?
Hi Adam, Your videos are really awesome. can you please help me on my usecase i have DataTable(columns=[{'name':col, 'id':col for col in df.columns}]) so in this case columns are iterating through dataframe columns dynamically so how can we give type='text'/numeric and format parameters for iterative columns. in order to format my table columns numbers.
Hi, Is it possible to make a table in dash and that within an initial row when clicked it hides/shows more rows or maybe a graph or other components? Or am I already thinking too much for what can be done in php. I wait your answer thank you.
hi Jorge, I don't think that's possible. That is possible with Enterprise AG Grid but not with the Dash DataTable. What you can do is listen to a row being selected, and based on the selected row, you can create a graph next to the table.
Where ca I found information about how to put a row in a column (in a table)? For example, I what to have the "countries" in the table but like a column
Hi there, just started following your dash tutorial a couple of months ago...I noted the important key points you’ve notified in the video... Now coding along...!
Hi Adam , I need your help , I wanted to display XML data returned from SQL query into Data table z it's giving error always that it's a data that is not JSON serializable , I saw that XML data was having type byte , can you suggest a way to solve this . ?
Hi Adam, I have integer column for x axis in line plot. Week number like 202101,202102,202103. When it plots its converting to 202K, 202.1K 202.1K. Is there any way I can't show it exactly integer numbers, I tried as type it still shows K. Since its integer I can use replace or regex. Appreciate any work around for this.
Thanks Adam! Very useful. Just one quick q. In your previous table tutorial the overall look is very different from what we see here (excluding conditional formatting). For example, the table headers and the font look much cleaner and professional. How did you achieve that?
@@CharmingData Hi Adam. Actually there's nothing different regarding the table style. What happened is that in your other tutorial the options "filter_action = native", "sort_mode = multi" and "column_selectable = multi" make it look less tidy.
Great tutorials! Any advice on how to turn a URL string in a datatable to a clickable link? I've done quite a bit of searching but haven't been able to produce the intended result
Hello, thank you. Your video is very helpful. I have one question. Is it possible to compare row of some coloumn with date with variable (six_hours_back = datetime.datetime.now() - datetime.timedelta(hours = 6))? I have formatted coloumn ({'name':'LAST_UPDATE', 'id':'LAST_UPDATE','type':'datetime'}) and I want to compare LAST_UPDATE with six_hours_back variable. And I can´t figure out how to write it to the style_data_conditional. I have somethning like: six_hours_back = datetime.datetime.now() - datetime.timedelta(hours = 6 style_data_conditional=[{'if': { 'filter_query': ('{LAST_UPDATE} < six_hours_back), 'column_id': 'LAST_UPDATE' }, 'backgroundColor': 'tomato', 'color': 'white' } ] But it doesn´t work, Can you help me, please?
Hi Adam, this is a great video on datatables. This feature is so powerful! I'm facing a small problem. The backgroundColor is not changing in my datatable. Text color is changing though. What mistake am I doing?
Hii Adam, love your videos. But I am facing a different kind of situation. So I want a dash output as a table and I m not able to do it. I m taking user input and reading it from S3 loc. So this reading part I m doing in the function. But the output comes as dictionary not as a table.
sorry for not being clear, if I have two editable columns and a third which is a %change of the two, how do I update the %change column when one of the editable columns has new information
I am trying to divide two columns & perform a highlighting action if the condition met for some reason it just gives a syntax error can someone help me fix this { 'if': { 'filter_query': '({Parcels - last 1 hour}/{Chute count}) >= 100', 'column_id': 'Parcels - last 1 hour' }, 'backgroundColor': 'red', 'color': 'white' }
I almost forgot. You need at least Dash 1.15.0 or higher to reproduce this code on your computer. Good luck.
👉If you benefitted from these tutorials and would like to show your appreciation and support the existence of more tutorials: www.patreon.com/charmingdata
Hey Adam, thank you again for another wonderful new video. Love learning Dash-plotly from your videos. I am trying to re-write my former solution with Dash and am stuck at a point where I can't move further. I am fetching and storing locally some json data (tabular) from a different thread (every 5 mins). I need my Dash APP to cyclically read the current stored data and refresh the contents of my webpage without any manual input/callback.
Earlier I was writing out a simple HTML output with styled pandas dataframe with a "http-equiv, refresh content" meta tags in the source output. Can you give some hints how can I do this now with DASH?
Appreciate your time and help.
Thanks.
@@curtisjackson3377 Hi Curtis, I'm glad you're finding my videos helpful. I understand what you're trying to do, but I'm really not sure how to get that done. Sorry I can't be of more help with this. Have you tried asking on the Plotly Dash Forum?
I am currently doing a front end project that requires to highlight the difference in number.
This video helps alot!
Thank You !!
You're welcome Tristan
thanks! it helped me fix my issue :)
Awesome!! I learned dash very fast thanks to your videos.
Hey everybody, if you're short on time, the meat of the tutorial is the "Formatting the DataTable" section at 06:25. And don't forget to download the supporting document at drive.google.com/file/d/18JRffZsZhds6yFmheAJ9kiodynHcxUrL/view
Thanks @Charming Data for the awesome video. Is there any way to pass the parameter to the style data conditional list from outside and highlight the rows accordingly.
Thanks
Thank you so much. You have such enrich contents in your channel
Love your art of teaching and the energy!
Great tutorial - you are a terrific teacher!
These videos are amazing and are helping everyone so much. Continue owning the space for Dash tutorials on RUclips! Gracias y saludos.
Con mucho gusto, Andres. Me alegra mucho que te sirvan los videos. Avísame si tienes preguntas. Good luck with building your dashboards.
Is it possible to assign specific (background) colors to selected_cells of a given DataTable based on what "color option"-button of an additional dcc.RadioItems-component has been selected?
Is there any way of connecting a dash_table.DataTable with another component (f.ex. dcc.RadioItems as color selection), or is the coloring really only doable within the DataTable-scope in which you are able to assign colors only by comparing columns and rows?
Hi Muris,
That should be possible. You might have to use the radio item value as the callback input and the datatable property that controls the color as the callback output
Super efforts, great videos on Dash 🙌
I guess I'll have to switch from Plotly Table to dash DataTable.
Thank you, Abhinav. Yes, the Dash DataTable is really cool. Once you master all its features, you can do really a lot with it. Good luck with the switch.
Thanks Adam! Quick question, if my dataframe comes from a callback, how do I call the df in the data_bars function as an argument?
Hi @safrirons88 I'm not sure I understand. How is your dataframe coming from a callback?
Hi Adam! your videos are really useful and so detailed. I didn't undertand at first chance the documentation and i found this great explanation. Thanks a lot. I just a have one question, whay if i want to set a background color in a completely row in a dataset with differents data type, for example a metrics dataset wich incluide different values (where is not posible to put an unique conditional)... maybe it's posible to set an extra if in row_index? i solved this answer adding an extra col in dataset that write 'Cumple' or 'No Cumple' and then i use the next -> 'filter_query': '{EVALUACION} = "Cumple"' ...do this... But it there any other option that allow me put the background color without this extra column?
Good question Alexis. From what I know, I don't think that's possible now.
Really great video. Any advice how to edit multiple rows in the editable in dash?
What do you mean? Can you give an example of what you're trying to do.
Hey Adam , thanks for the excellent tutorial. I'm wondering if it's possible to transpose this DataTable within a html.Div? Simply I have one header with column names and then one row where each cell is a calculated value according to the column name. I want to position this table as a thin vertical object to the right of my Dash app. Would you have any suggestions or resources to check on how I could achieve my idea?
Hi James, I am not sure that's possible. Are you looking to create a DataTable with only 1 ro 2 columns?
@@CharmingData Hi Adam, thanks very much for your quick response! No worries, the solution I got to was to define my table through use of html table tags, then has a callback update the Td cells. I contained this in a dbc.Table compnent. Worked great.
It was a 2 column table, with the dynamic data values stored in just one of the columns. A row example being:
html.Tr([html.Th('Mean Daily Return %', scope = 'col'), html.Td(id = 'mean_daily_return')])
Great tutorial Adam ! Is there a way we can use colorscale (may be in background) on selective rows and cols in a datatable, making it like a heatmap ?
YOURE THE BEST
Hi Adam, was working on a Dash application and came across this video while doing conditional formatting. How would you write the filter query if you wanted to do something like this -
'if': {
'filter_query': '{Part sent date} > {Part received date + 10}',
'column_id': 'Part sent date'
}
This code is not working for me as we can't add integers to strings.
Great video again! How would you conditional format when you have multi select option enabled for your data table and a user selects multiple rows and you want your rows to be highlighted?
Hi Adam, Your videos are really awesome. can you please help me on my usecase i have DataTable(columns=[{'name':col, 'id':col for col in df.columns}]) so in this case columns are iterating through dataframe columns dynamically so how can we give type='text'/numeric and format parameters for iterative columns. in order to format my table columns numbers.
Hi,
Is it possible to make a table in dash and that within an initial row when clicked it hides/shows more rows or maybe a graph or other components?
Or am I already thinking too much for what can be done in php.
I wait your answer thank you.
hi Jorge, I don't think that's possible. That is possible with Enterprise AG Grid but not with the Dash DataTable.
What you can do is listen to a row being selected, and based on the selected row, you can create a graph next to the table.
Amazing Adam.
Hi :) Thank you so much for all the videos!! Do you know if it's possible to add a title to the Data Table? Like in the graphs? Thank you so much
Hi @Mafalda. Not in the datatable but you can add a title right above it with html H2()
@@CharmingData thank you so much for the rapid response. Yeah, that's it. Thank you !
Thanks, Adam. Is there a way to add totals row that changes dynamically as the table is edited?
Where ca I found information about how to put a row in a column (in a table)? For example, I what to have the "countries" in the table but like a column
Hi @Rene, you can try to manipulate the pandas dataframe so your current countries is a column. Then, put that df into the Dash DataTable.
Awesome video on custom dash conditional formatting...You’re nailing it...
Thanks...A live session will be helpful?
Hi Shyam, it will, I agree. I'll try to do one in the near future.
Have you built a Dashboard with the Dash DataTable already?
Hi there, just started following your dash tutorial a couple of months ago...I noted the important key points you’ve notified in the video...
Now coding along...!
Funny enough is now I just gotta configure data bars to work with a string :)
Hi Adam , I need your help , I wanted to display XML data returned from SQL query into Data table z it's giving error always that it's a data that is not JSON serializable , I saw that XML data was having type byte , can you suggest a way to solve this . ?
Hi Rahul, I would have to test it out myself. I've never tried that. Unfortunately, I'm swamped with videos and emails right now. Sorry
Hi Adam, I have integer column for x axis in line plot. Week number like 202101,202102,202103. When it plots its converting to 202K, 202.1K 202.1K. Is there any way I can't show it exactly integer numbers, I tried as type it still shows K. Since its integer I can use replace or regex. Appreciate any work around for this.
Hi Ravi,
this chapter of Plotly tick formatting should have the answer:
plotly.com/python/tick-formatting/
@@CharmingData thanks Adam, I used tickformat="000" to resolve this.
@@raviramadas4313 lovely
Thanks Adam! Very useful. Just one quick q. In your previous table tutorial the overall look is very different from what we see here (excluding conditional formatting).
For example, the table headers and the font look much cleaner and professional. How did you achieve that?
Hi Francisco, Can you clarify which tutorial has a better-looking app? can you copy-paste please the link to that tutorial.
Thank you
@@CharmingData Hi Adam. Actually there's nothing different regarding the table style. What happened is that in your other tutorial the options "filter_action = native", "sort_mode = multi" and "column_selectable = multi" make it look less tidy.
Great tutorials! Any advice on how to turn a URL string in a datatable to a clickable link? I've done quite a bit of searching but haven't been able to produce the intended result
Hello, thank you. Your video is very helpful. I have one question. Is it possible to compare row of some coloumn with date with variable (six_hours_back = datetime.datetime.now() - datetime.timedelta(hours = 6))? I have formatted coloumn ({'name':'LAST_UPDATE', 'id':'LAST_UPDATE','type':'datetime'}) and I want to compare LAST_UPDATE with six_hours_back variable. And I can´t figure out how to write it to the style_data_conditional. I have somethning like:
six_hours_back = datetime.datetime.now() - datetime.timedelta(hours = 6
style_data_conditional=[{'if': {
'filter_query': ('{LAST_UPDATE} < six_hours_back),
'column_id': 'LAST_UPDATE'
},
'backgroundColor': 'tomato',
'color': 'white'
} ]
But it doesn´t work, Can you help me, please?
Hi Adam, this is a great video on datatables. This feature is so powerful!
I'm facing a small problem. The backgroundColor is not changing in my datatable. Text color is changing though. What mistake am I doing?
Hi @dammalapati
I would take have to see your code. Are you using the exact code I use in the video or did you change anything?
@@CharmingData Exact; made no changes. 'color':'white' is working; 'backgroundColor':'hotpink' is not :|
@@thechaoticneuron ok. I'll check my code when I'm back home tonight. Thank you for bringing this to my attention
@@CharmingData Thanks Adam!
@@thechaoticneuron Hi, I tried it out on my computer and it works. I can see the hot pink background. I'm using Dash 1.16 and Dash-table 4.10.1.
Got it. Thanks
Hii Adam, love your videos.
But I am facing a different kind of situation. So I want a dash output as a table and I m not able to do it.
I m taking user input and reading it from S3 loc. So this reading part I m doing in the function. But the output comes as dictionary not as a table.
Hi @guarav. Why is your output generating a dictionary instead of table?
@@CharmingData Hi Adam, thanks for reverting back. I solved it. Thanks to ur well detailed videos mate!
Your tutorials are really helpful, thanks a lot. Is there a way to create calculated columns which update when cells are edited?
What do you mean, Donovan? If I update a cell with new information, you would like the column to do what exactly?
sorry for not being clear, if I have two editable columns and a third which is a %change of the two, how do I update the %change column when one of the editable columns has new information
@@donovankwaramba8766 I think you would need to create a callback that returns new a new DataTable with new columns whenever data is edited.
Thank you!
You welcome, John. Have you used the Dash DataTable before?
@@CharmingData No, just getting started. I will be though!
I am trying to divide two columns & perform a highlighting action if the condition met for some reason it just gives a syntax error can someone help me fix this {
'if': {
'filter_query': '({Parcels - last 1 hour}/{Chute count}) >= 100',
'column_id': 'Parcels - last 1 hour'
},
'backgroundColor': 'red',
'color': 'white'
}