DataTables is an excellent JS library for displaying tabular data, and its Editor plugin provides tabular editing.

!! DataTables Editor is a paid-for plugin. We are not affiliated with DataTables. !!

We have encapsulated this into a Django widget, to allow easy editing of Postgres' ArrayField.

The specific implementation, and feature-set, we have created for this widget may not suit your needs perfectly, but this repo may serve as a useful reference point for your own implementations.

Features:

• Inline editing
• Keyboard interface
• Column filtering
• Row insertion + deletion

This is a very minimal project, designed to be used as a complete working reference for how everything links together.

It's not pretty (except for the datatable itself!)

The ArrayField that the widget is designed to be used with is only available with a Postgres backend. This demo uses Docker compose, to automatically install and set up a Postgres instance for you.

0. Install Docker compose

1. Clone this repo

git clone https://github.com/lqmltd/datatables-django-widget.git

2. Download the DataTables files (see this README)

   1. You will need a Datatables Editor license (a trial is available)

3. Build and start the Docker compose environment

docker compose up -d --build

4. Click "Create your first demo model"

The widget is the table, the surrounding form is ugly. We recommend using Django crispy forms for form styling and layout.

You will need:

1. Postgres (required)
2. DataTables (required)
   1. See this README for instructions on downloading your own bundle
   2. You will need a DataTables Editor license (a trial is available)
3. Bootstrap 5 (recommended)
   1. Datatables provides styling for various other UI librarys, but you will likely need to modify some of the code used here to make things look right
4. Bootstrap icons (recommended)
   1. Any icon set will work, you will need to replace the icons used with your preferred library.

Files to copy:

1. widgets.py
2. fields.py
3. grid-widget.html
4. grid-widget.css
5. grid-widget-text-area-plugin.js
6. grid-widget.js
7. project.css (incorporate this into your project's CSS files)

If you want tooltips:

8. project.js

If you don't want tooltips, remove all calls to initialiseTooltips() and disposeTooltips()