Django Dynamic DataTables - Free Tool (Updated)
Tags: django, devtools, opensource
Published: 2022-10-08 14:25:58

---
title: Django Dynamic DataTables - Free Tool (Updated)
published: true
description: The tool aims to provide a powerful data table interface using the developer's minimum amount of code.
tags: django, devtools, opensource
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/onu779paj75rgk1z96us.jpg
canonical_url: https://github.com/app-generator/devtool-django-dynamic-datatb
---
Hello Coders!

This article presents an open-source tool that builds server-side paginated `DataTables` with minimum effort. The input expected by the [Dynamic DataTables](https://github.com/app-generator/devtool-django-dynamic-datatb) module is the model definition plus a single line in the configuration. `Sources are published on GitHub` and the permissive (MIT) license allows the incorporation in commercial projects or use for eLearning activities. *Thanks for reading!*

- 👉 [Django Dynamic DataTables](https://github.com/app-generator/devtool-django-dynamic-datatb) - `source code`
- 👉 [Django Dyamic DataTables](https://appseed.us/developer-tools/django-dynamic-datatables/) - `Product Page` (for support)

--- 

## DevTool Highlights 

Data pagination can be useful in many use cases like management and interaction with `registered users of a popular app`, students of a class, etc. For all those cases, this tool might be helpful.  

Here are the features provided on top of every model defined in our Django project, without any coding effort: 

- ✅ Manages the data for `any model`
- ✅ `One-line` configuration
- ✅ `Server-side` pagination
- ✅ `Search`, `Data Filters`
- ✅ `Exports` in PDF, CSV formats

---

## Quick Start in `Docker`

The tool is pre-configured to enable the Dynamic DataTables UI for a simple `Books` model. Once the project is downloaded and started we should be able to interact with the UI without any efforts. 

> 👉 **Step 1** - Download the code from GitHub

```bash
$ git clone https://github.com/app-generator/devtool-django-dynamic-datatb.git
$ cd devtool-django-dynamic-datatb
```

--- 

> 👉 **Step 2** - Start the APP in `Docker`

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

At this point, we can visit the app in the browser. The dynamic view is live at `http://localhost:5085/datatb/books`. 

![Django Dynamic DataTables - Open-Source tool for developers (GIF nimated presentation).](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vxue6zug9o9w1lbwqamw.gif)

---

## How it works

The tool builds a generic layout on top of each model defined in the project and enabled in the configuration. 

To showcase the tool, sources are shipped with a working sample for the Books model - Here are the relevant parts: 

> 👉 **(1)** `Books` Model Definition - in [apps/models.py](https://github.com/app-generator/devtool-django-dynamic-datatb/blob/master/apps/models.py) file

```python
class Book(models.Model): 
    title = models.CharField(max_length=100)
```

--- 

> 👉 **(2)** `Configuration` for `Books` model

```python
DYNAMIC_DATATB = {
    'books': "Book",
}
```

The pattern used in this Python DICT is to use the URL segment as key and Model as the entity to be processed.

So, the above settings enable the Dynamic DataTB for `Books` model using url: `http://localhost:8000/datatb/books` 

--- 

## Video Presentation 

A full demonstration of this feature can be found on YouTube: 

{% embed https://www.youtube.com/watch?v=9RwzSEWMHj8 %}

---

## Next Steps

The roadmap of the product includes the following evolutions: 

- ✅ Bulk Data Provisioning (drop zone)
- ✅ Independent module installation via PIP
- ✅ Styling Option: Tailwind or BS5
  - Note: currently only BS5 is supported. 

--- 

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

- 👉 [Tools for Developers](https://medium.com/@appseed.us/tools-for-developers-curated-list-b39709ed16f4) - a `curated list`
- 👉 [API Generator for Django](https://github.com/app-generator/devtool-django-api-generator) - free tool, recently updated 

![Django API Generator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gqx5kxpp613r97n5n81v.jpg)