DEV Community

Cover image for Flask Data Tables - Open-Source Sample
Sm0ke
Sm0ke

Posted on • Originally published at blog.appseed.us

Flask Data Tables - Open-Source Sample

Hello Coders!

This article presents an open-source project that provides paginated access to information using Flask and Simple-DataTables, a Vanilla JS library. Information can be accessed in three different ways: loaded from database, exposed by an API, and loaded from the file system. The sources can be downloaded from Github (MIT License) without a registration lock and used in commercial projects or eLearning activities.


Thanks for reading! Content provided by App Generator


✨ How it works

The information provided in CSV format is loaded via a custom Flask CLI command and saved in the database. From this point, the app serves the information using different techniques:

  • Loaded from Data table by a controller (route)
  • Served by /api/data API node and consumed from JS
  • Loaded without any processing from a file:
    • app/static/datatables/data.json

✨ Project features

  • Data Tables managed by Simple-DataTables (Vanilla) JS
  • Stack: Flask, SqlAlchemy, Flask-Migrate, Flask-RestX
  • Implementations:
    • Loaded from Data table by a controller (route)
    • Served by /api/data API node and consumed from JS
    • Loaded without any processing from a file:
    • app/static/datatables/data.json
    • Search over the data
  • UI Kit: Volt Dashboard (Free Version) by Themesberg
  • Deployment: Docker, Gunicorn/Nginx, HEROKU

✨ Quick Start

Probably the most easier way is to use the Docker set up shipped with the source code and start the project using a minimum amount of work:

Get the code

$ git clone https://github.com/app-generator/flask-volt-datatables.git
$ cd flask-volt-datatables
Enter fullscreen mode Exit fullscreen mode

Start the app in Docker

$ docker-compose up --build 
Enter fullscreen mode Exit fullscreen mode

Visit http://localhost:85 in your browser. The app should be up & running.


Flask Data Tables - GIF animated presentation


✨ Implementation

The input file is mirrored to the tables (model) used for persistence:

Input file Sample (truncated content)

product_code,product_info,value,currency,type
Nike_Air,Nike Air More Uptempo,105,usd,transaction
Nike_Club,Nike Club Joggers BB,55,usd,transaction
Nike_Uptempo,Nike Uptempo (Gs) 415082,130,usd,transaction
Nike_SportSwear,Nike SportSwear Club Tee,25,usd,transaction
Nike Dry, Nike Dry Park VII Junior,39,usd,transaction
Enter fullscreen mode Exit fullscreen mode

Model That saves the data

class Data(db.Model):

    __tablename__ = 'data'

    id = db.Column(db.Integer, primary_key=True)

    code     = db.Column(db.String(64))   # product code 
    name     = db.Column(db.String(128))  # product name
    value    = db.Column(db.Integer)      # numeric
    currency = db.Column(db.String(10))   # string: usd, euro
    type     = db.Column(db.String(64))   # transaction
    ts       = db.Column(db.Integer, default=datetime.utcnow().timestamp())

Enter fullscreen mode Exit fullscreen mode

The API Node (powered by Flask-RestX)

@rest_api.route('/api/data')
class Items(Resource):

    def get(self):

        data = []

        for item in Data.query.all():
            data.append( item.toDICT() ) 

        response = app.response_class(
            response=json.dumps(data),
            status=200,
            mimetype='application/json'
        )

        return response
Enter fullscreen mode Exit fullscreen mode

This simple project will be updated (soon) with more features:

  • Inline edit
  • Different Charts generated from loaded information:
    • Line, Pie and bar Charts

Thanks for reading! For more resources feel free to access:


Top comments (4)

Collapse
 
crearesite profile image
WebsiteMarket

The rows per page has a minor layout problem.
Thank you for your efforts.

Collapse
 
sm0ke profile image
Sm0ke

🚀🚀

Collapse
 
uithemes profile image
ui-themes

Super useful feature

Collapse
 
sm0ke profile image
Sm0ke

🚀🚀