Python Flask & Dash Dataframe to Data Table (Web App)

Hi everyone, in this article i’ll show you how to display dataframe on web. Libraries required for this; Flask and dash

I mostly use Pycharm as an IDE, and I will do these examples in PyCharm.

First, let’s create a Flask project,

After the project is created, you will see a screen like the one below.

For testing, let’s run the project and go to localhost:5000.

Now we start the important part, dash allows us to show the dataframe as a table in our web application.  It also contains many features such as filtering and visualization on the table.

Install the dash library.

pip install dash

Then add this library to our app.py file.

import dash_table

Using flask and dash together can sometimes seem confusing, First, I share the entire code block and then I’ll start explaining.

from flask import Flask
import pandas as pd
import dash_table
import dash

server = Flask(__name__)

@server.route('/')
def hello_world():
return 'Hello World!'

DataFrame = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/solar.csv")

app = dash.Dash(
__name__,
server=server,
routes_pathname_prefix='/dash/')

app.layout = dash_table.DataTable(
id = "table",
data=DataFrame.to_dict('records'),
columns=[{'id': c, 'name': c} for c in DataFrame.columns],
page_action='none',
style_table={'height': '300px', 'overflowY': 'auto'}
)

if __name__ == '__main__':
app.run_server()

1- )  The code block in the green box is the area where our flask application first started.

2- )  The code block in the blue box is the necessary configurations of our dash application. When we go to the /dash area, we will see our table. We can give this part the name we want

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.

Finally, let’s run our application and go to 127.0.0.1/dash.

Everything seems right.

See you in the next article 🙂

Decathlon Product Capturing using Python (Beautifulsoup)