Flask Data Tables - Open-Source Sample
Tags: webdev, flask, datatables, opensource
Published: 2022-02-06 18:26:10

---
title: Flask Data Tables - Open-Source Sample
published: true
description: The project implements paginated access to data using Simple-DataTables, a lightweight, extendable, dependency-free javascript HTML table plugin
tags: webdev, flask, datatables, opensource
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hins06ak8y0r60ztz12m.png
canonical_url: https://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](https://github.com/app-generator/flask-volt-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](https://appseed.us/)

- 👉 [Flask Datatables](https://github.com/app-generator/flask-volt-datatables) - source code
- 🎁 Free [Support](https://appseed.us/support) via email (issues tracker) and [Discord](https://discord.gg/fZC6hup) (1k+ community)

--- 

## ✨ 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

```bash
$ git clone https://github.com/app-generator/flask-volt-datatables.git
$ cd flask-volt-datatables
```

> Start the app in Docker

```bash
$ docker-compose up --build 
```

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

--- 

![Flask Data Tables - GIF animated presentation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ap0qnfdascry5hl5zovq.gif)

--- 

## ✨ Implementation

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

> Input file Sample (truncated content)

```csv
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
```

--- 

> Model That saves the data

```python
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())

```

--- 

> The API Node (powered by Flask-RestX)

```python
@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
```

---

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:

---

- ✨ [Free Dashboards](https://appseed.us/admin-dashboards/open-source) crafted in Django, Flask, and **React**
- ✨ [Admin Dashboards](https://www.admin-dashboards.com/) - a huge index with products