![\"\"](\"https:\/\/ittutorial.org\/wp-content\/uploads\/2020\/08\/Screenshot_1-1.png\")
<\/p>\nHi everyone, in this article i’ll show you how to display dataframe on web. Libraries required for this; Flask and dash<\/p>\n
I mostly use Pycharm as an IDE, and I will do these examples in PyCharm.<\/p>\n
First, let’s create a Flask project,<\/p>\n
<\/p>\n
<\/p>\n
After the project is created, you will see a screen like the one below.<\/p>\n
![\"\"](\"https:\/\/ittutorial.org\/wp-content\/uploads\/2020\/08\/Screenshot_2-2.png\")
<\/p>\n
For testing, let’s run the project and go to localhost:5000<\/strong>.<\/p>\n Now we start the important part, dash allows us to show the dataframe as a table in our web application.\u00a0 It also contains many features such as filtering and visualization on the table.<\/p>\n Install the dash library.<\/p>\n Then add this library to our app.py file.<\/p>\n Using flask and dash together can sometimes seem confusing, First, I share the entire code block and then I’ll start explaining.<\/p>\n 1- )\u00a0 The code block in the green box is the area where our flask application first started.<\/span><\/p>\n 2- )\u00a0 The code block in the blue box is the necessary configurations of our dash application. When we go to the \/dash<\/strong> area, we will see our table. We can give this part the name we want<\/span><\/p>\n 3- ) We specify what we want to do with the code block dash in the red box. dash has too many components, we will create a data table in this example. In the future, we will make a visualization with the app.layout part in the examples.<\/span><\/p>\n Finally, let’s run our application and go to 127.0.0.1\/dash<\/strong>.<\/p>\n Everything seems right.<\/p>\n See you in the next article \ud83d\ude42<\/p>\n <\/p>\n Decathlon Product Capturing using Python (Beautifulsoup)<\/a><\/p><\/blockquote>\n![\"\"](\"https:\/\/ittutorial.org\/wp-content\/uploads\/2020\/08\/Screenshot_3-2.png\")
<\/p>\npip install dash<\/pre>\n
import dash_table<\/pre>\n
from flask import Flask\r\nimport pandas as pd\r\nimport dash_table\r\nimport dash\r\n\r\nserver = Flask(__name__)\r\n\r\n@server.route('\/')\r\ndef hello_world():\r\nreturn 'Hello World!'\r\n\r\nDataFrame = pd.read_csv(\"https:\/\/raw.githubusercontent.com\/plotly\/datasets\/master\/solar.csv\")\r\n\r\napp = dash.Dash(\r\n__name__,\r\nserver=server,\r\nroutes_pathname_prefix='\/dash\/')\r\n\r\napp.layout = dash_table.DataTable(\r\nid = \"table\",\r\ndata=DataFrame.to_dict('records'),\r\ncolumns=[{'id': c, 'name': c} for c in DataFrame.columns],\r\npage_action='none',\r\nstyle_table={'height': '300px', 'overflowY': 'auto'}\r\n)\r\n\r\nif __name__ == '__main__':\r\napp.run_server()<\/pre>\n![\"\"](\"https:\/\/ittutorial.org\/wp-content\/uploads\/2020\/08\/Screenshot_5-1.png\")
<\/p>\n![\"\"](\"https:\/\/ittutorial.org\/wp-content\/uploads\/2020\/08\/Screenshot_4.png\")
<\/p>\n