{"id":16174935,"url":"https://github.com/app-generator/sample-flask-datatables","last_synced_at":"2025-03-19T00:31:03.491Z","repository":{"id":100503251,"uuid":"455919686","full_name":"app-generator/sample-flask-datatables","owner":"app-generator","description":"Flask Data Tables - Open-Source Sample | AppSeed","archived":false,"fork":false,"pushed_at":"2022-02-07T16:00:43.000Z","size":5030,"stargazers_count":27,"open_issues_count":1,"forks_count":18,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-11T05:55:55.204Z","etag":null,"topics":["appseed-sample","datatables","flask-sample"],"latest_commit_sha":null,"homepage":"https://blog.appseed.us/flask-data-tables-open-source-sample/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/app-generator.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-05T16:17:05.000Z","updated_at":"2024-11-19T22:55:18.000Z","dependencies_parsed_at":"2023-05-15T11:15:34.030Z","dependency_job_id":null,"html_url":"https://github.com/app-generator/sample-flask-datatables","commit_stats":null,"previous_names":[],"tags_count":5,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/app-generator%2Fsample-flask-datatables","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/app-generator%2Fsample-flask-datatables/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/app-generator%2Fsample-flask-datatables/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/app-generator%2Fsample-flask-datatables/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/app-generator","download_url":"https://codeload.github.com/app-generator/sample-flask-datatables/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244331731,"owners_count":20435987,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["appseed-sample","datatables","flask-sample"],"created_at":"2024-10-10T04:43:48.123Z","updated_at":"2025-03-19T00:31:03.485Z","avatar_url":"https://github.com/app-generator.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [Flask DataTables Sample](https://blog.appseed.us/flask-data-tables-open-source-sample/)\n\nOpen-source sample provided by [AppSeed](https://appseed.us). The project implements [paginated access to data using Flask](https://blog.appseed.us/flask-data-tables-open-source-sample/) and **Simple-DataTables**, a lightweight, extendable, dependency-free javascript HTML table plugin (no jQuery dependency).\n\n\u003cbr /\u003e\n\n\u003e Features:\n\n- DataTables managed by `Simple-DataTables`  (Vanilla) JS\n- Stack: Flask, SqlAlchemy, Flask-Migrate, Flask-RestX\n- Data Tables Implementation(s):\n  - Loaded from `Data` table by a controller (route)\n  - Served by `/api/data` API node and consumed from JS\n  - Loaded without any processing from a file:\n    - `app/static/datatables/data.json`\n  - Inline Edit / Delete\n- UI Kit: **Volt Dashboard** (Free Version) by **Themesberg**\n- Deployment scripts: Docker, Gunicorn/Nginx, HEROKU\n- Support via **Github** (issues tracker) and [Discord](https://discord.gg/fZC6hup).\n\n\u003cbr /\u003e\n\n\u003e Links:\n\n- 👉 [Flask DataTables Sample](#) - LIVE Demo (coming soon)\n- 👉 More [Free Samples](https://appseed.us/admin-dashboards/open-source) - provided by AppSeed\n\n\u003cbr /\u003e\n\n## ✨ Quick Start in `Docker`\n\n\u003e Get the code\n\n```bash\n$ git clone https://github.com/app-generator/flask-volt-datatables.git\n$ cd flask-volt-datatables\n```\n\n\u003e Start the app in Docker\n\n```bash\n$ docker-compose up --build \n```\n\nVisit `http://localhost:85` in your browser. The app should be up \u0026 running.\n\n\u003cbr /\u003e\n\n![Flask DataTables Sample - Open-Source Sample Project provided by AppSeed.](https://user-images.githubusercontent.com/51070104/152824173-a55c9ddd-e282-4dac-bd59-07b27c41269a.gif)\n\n\u003cbr /\u003e\n\n## ✨ How to use it\n\n\u003e Clone Sources (this repo)\n\n```bash\n$ git clone https://github.com/app-generator/flask-volt-datatables.git\n$ cd flask-volt-datatables\n```\n\n\u003cbr /\u003e\n\n\u003e Install Modules using a Virtual Environment\n\n```bash\n$ virtualenv env\n$ source env/bin/activate\n$ pip3 install -r requirements.txt\n```\n\nOr for **Windows-based Systems**\n\n```bash\n$ virtualenv env\n$ .\\env\\Scripts\\activate\n$\n$ # Install modules - SQLite Database\n$ pip3 install -r requirements.txt\n```\n\n\u003cbr /\u003e\n\n\u003e Set up the environment\n\n```bash\n$ export FLASK_APP=run.py\n$ export FLASK_ENV=development\n```\n\nOr for **Windows-based Systems**\n\n```bash\n$ # CMD terminal\n$ set FLASK_APP=run.py\n$ set FLASK_ENV=development\n$\n$ # Powershell\n$ $env:FLASK_APP = \".\\run.py\"\n$ $env:FLASK_ENV = \"development\"\n```\n\n\u003cbr /\u003e\n\n\u003e Load Sample Data `media/data.csv`\n\n```bash\n$ flask load_data  # randomize the timestamp\n// OR\n$ flask load_random_data  # randomize the timestamp and values\n```\n\n\u003cbr /\u003e\n\n\u003e Start the APP\n\n```bash\n$ flask run \n```\n\nThe paginated information is available in three ways: \n\n- Loaded from `Data` table by a controller (route)\n- Served by `/api/data` API node and consumed from JS\n- Loaded without any processing from a file:\n  - `app/static/datatables/data.json`  \n\n\u003cbr /\u003e\n## Code-base structure\n\nThe project has a simple structure, represented as bellow:\n\n```bash\n\u003c PROJECT ROOT \u003e\n   |\n   |-- app/__init__.py\n   |-- app/\n   |    |-- static/\n   |    |    |-- \u003ccss, JS, images\u003e         # CSS files, Javascripts files\n   |    |\n   |    |-- templates/\n   |    |    |\n   |    |    |-- includes/                 # Page chunks, components\n   |    |    |    |\n   |    |    |    |-- navigation.html      # Top bar\n   |    |    |    |-- sidebar.html         # Left sidebar\n   |    |    |    |-- scripts.html         # JS scripts common to all pages\n   |    |    |    |-- footer.html          # The common footer\n   |    |    |\n   |    |    |-- layouts/                  # App Layouts (the master pages)\n   |    |    |    |\n   |    |    |    |-- base.html            # Used by common pages like index, UI\n   |    |    |    |-- base-fullscreen.html # Used by auth pages (login, register)\n   |    |    |\n   |    |  index.html                      # The default page\n   |    |  login.html                      # Auth Login Page\n   |    |  register.html                   # Auth Registration Page\n   |    |  page-404.html                   # Error 404 page (page not found)\n   |    |  page-500.html                   # Error 500 page (server error)\n   |    |    *.html                        # All other pages provided by the UI Kit\n   |\n   |-- requirements.txt\n   |\n   |-- run.py\n   |\n   |-- ************************************************************************\n```\n\n\u003cbr /\u003e\n\n## Recompile CSS\n\nTo recompile SCSS files, follow this setup:\n\n\u003cbr /\u003e\n\n**Step #1** - Install tools\n\n- [NodeJS](https://nodejs.org/en/) 12.x or higher\n- [Gulp](https://gulpjs.com/) - globally \n    - `npm install -g gulp-cli`\n- [Yarn](https://yarnpkg.com/) (optional) \n\n\u003cbr /\u003e\n\n**Step #2** - Change the working directory to `assets` folder\n\n```bash\n$ cd app/base/static/assets\n```\n\n\u003cbr /\u003e\n\n**Step #3** - Install modules (this will create a classic `node_modules` directory)\n\n```bash\n$ npm install\n// OR\n$ yarn\n```\n\n\u003cbr /\u003e\n\n**Step #4** - Edit \u0026 Recompile SCSS files \n\n```bash\n$ gulp\n```\n\nThe generated files (css, min.css) are saved in `static/assets/css` directory.\n\n\u003cbr /\u003e \n\n## Deployment\n\nThe project comes with a basic configuration for [Docker](https://www.docker.com/), [HEROKU](https://www.heroku.com/), [Gunicorn](https://gunicorn.org/), and [Waitress](https://docs.pylonsproject.org/projects/waitress/en/stable/).\n\n### [Heroku](https://www.heroku.com/)\n---\n\nSteps to deploy on **Heroku**\n\n- [Create a FREE account](https://signup.heroku.com/) on Heroku platform\n- [Install the Heroku CLI](https://devcenter.heroku.com/articles/getting-started-with-python#set-up) that match your OS: Mac, Unix or Windows\n- Open a terminal window and authenticate via `heroku login` command\n- Clone the sources and push the project for LIVE deployment\n\n```bash\n$ # Clone the source code:\n$ git clone https://github.com/app-generator/jinja-volt-dashboard.git\n$ cd jinja-volt-dashboard\n$\n$ # Check Heroku CLI is installed\n$ heroku -v\nheroku/7.25.0 win32-x64 node-v12.13.0 # \u003c-- All good\n$\n$ # Check Heroku CLI is installed\n$ heroku login\n$ # this commaond will open a browser window - click the login button (in browser)\n$\n$ # Create the Heroku project\n$ heroku create\n$\n$ # Trigger the LIVE deploy\n$ git push heroku master\n$\n$ # Open the LIVE app in browser\n$ heroku open\n```\n\n\u003cbr /\u003e\n\n### [Gunicorn](https://gunicorn.org/)\n---\n\nGunicorn 'Green Unicorn' is a Python WSGI HTTP Server for UNIX.\n\n\u003e Install using pip\n\n```bash\n$ pip install gunicorn\n```\n\u003e Start the app using gunicorn binary\n\n```bash\n$ gunicorn --bind 0.0.0.0:8001 run:app\nServing on http://localhost:8001\n```\n\nVisit `http://localhost:8001` in your browser. The app should be up \u0026 running.\n\n\u003cbr /\u003e\n\n### [Waitress](https://docs.pylonsproject.org/projects/waitress/en/stable/)\n---\n\nWaitress (Gunicorn equivalent for Windows) is meant to be a production-quality pure-Python WSGI server with very acceptable performance. It has no dependencies except ones that live in the Python standard library.\n\n\u003e Install using pip\n\n```bash\n$ pip install waitress\n```\n\u003e Start the app using [waitress-serve](https://docs.pylonsproject.org/projects/waitress/en/stable/runner.html)\n\n```bash\n$ waitress-serve --port=8001 run:app\nServing on http://localhost:8001\n```\n\nVisit `http://localhost:8001` in your browser. The app should be up \u0026 running.\n\n\u003cbr /\u003e\n\n## Credits \u0026 Links\n\n- [Flask Framework](https://www.palletsprojects.com/p/flask/) - The official website\n\n\u003cbr /\u003e\n\n---\n[Flask DataTables Sample](https://blog.appseed.us/flask-data-tables-open-source-sample/) - Provided by **AppSeed** [App Generator](https://appseed.us/app-generator).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapp-generator%2Fsample-flask-datatables","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapp-generator%2Fsample-flask-datatables","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapp-generator%2Fsample-flask-datatables/lists"}