django-tableaux 0.7.2__py3-none-any.whl

django_tableaux/__init__.py

@@ -0,0 +1,26 @@
+"""
+Django tables with Advanced User eXperience
+===============
+This project builds upon two well-established django apps: `django_tables2 <https://github.com/jieter/django-tables2>`_
+and `django_filter <https://github.com/carltongibson/django-filter>`_ and enhances their functionality through a
+sprinkling of `htmx <https://htmx.org>`_ magic. It provides a single class-based view in which you can enable multiple
+features to deliver a customised user experience that embodies the best practice for interactive tables.
+
+Key features
+============
+* The columns to display can be user-defined
+* Fully responsive: Define different column layouts for mobile, tablet and desktop
+* Bulk actions on selected rows or on all (possibly filtered) rows
+* Infinite scroll
+* Infinite load-more data
+* Position filters in a toolbar, in a modal or embed them within the table header
+* Show active filters with ability to clear individual filters
+* Edit specific fields directly inside the table
+* Easy integration with generic views for CRUD operations
+
+The project is still in beta but is fully usable.
+
+Full documentation to follow.
+"""
+
+__version__ = "0.7.2"

django_tableaux/buttons.py

@@ -0,0 +1,45 @@
+from django.template.loader import render_to_string
+from django.utils.safestring import mark_safe
+from django.utils.text import slugify
+from .utils import get_template_path
+
+
+class Button:
+    template_name = "button.html"
+    prefix = "btn_"
+    name = ""
+
+    def __init__(
+        self, content="", name="", typ="button", css="btn btn-primary", **kwargs
+    ):
+        if content == "" and name == "":
+            raise ValueError("Button content and name cannot both be empty.")
+        self.name = (
+            f"{self.prefix}{name}"
+            if name
+            else f"{self.prefix}{slugify(content).replace('-', '_')}"
+        )
+        self.context = {
+            "element": "a" if kwargs.get("href") else "button",
+            "content": content,
+            "name": self.name,
+            "class": css,
+        }
+        if self.context["element"] == "button":
+            self.context["type"] = typ
+        self.context.update(kwargs)
+
+    def render(self):
+        html = mark_safe(
+            render_to_string(
+                template_name=get_template_path(self.template_name),
+                context=self.context,
+            )
+        )
+        return html
+
+    def original_name(self):
+        """
+        Return the button name without the prefix added
+        """
+        return self.name[len(self.prefix) :]

django_tableaux/columns.py

@@ -0,0 +1,89 @@
+import itertools
+import django_tables2 as tables
+from django.contrib.humanize.templatetags.humanize import intcomma
+from .utils import get_template_path
+from django.utils.safestring import mark_safe
+
+
+class EditableColumn(tables.Column):
+    def render(self, value, record):
+        return value
+
+
+class RightAlignedColumn(tables.Column):
+    def __init__(self, **kwargs):
+        super().__init__()
+        if "th" not in self.attrs:
+            self.attrs["th"] = {}
+        if "td" not in self.attrs:
+            self.attrs["td"] = {}
+        self.attrs["th"]["style"] = "text-align: right;"
+        self.attrs["td"]["style"] = "text-align: right;"
+
+
+class CenteredColumn(tables.Column):
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+        if "th" not in self.attrs:
+            self.attrs["th"] = {}
+        if "td" not in self.attrs:
+            self.attrs["td"] = {}
+        self.attrs["th"]["style"] = "text-align: center;"
+        self.attrs["td"]["style"] = "text-align: center;"
+
+
+class CenteredTrueColumn(CenteredColumn):
+    def render(self, value):
+        if value:
+            return "\u2705"
+        return ""
+
+
+class CenteredTrueFalseColumn(CenteredColumn):
+    def render(self, value):
+        if value:
+            return "\u2705"
+        return "\u274c"
+
+
+class CurrencyColumn(RightAlignedColumn):
+    def __init__(self, **kwargs):
+        self.integer = kwargs.pop("integer", None)
+        self.prefix = kwargs.pop("prefix", "")
+        self.suffix = kwargs.pop("suffix", "")
+        super().__init__(**kwargs)
+
+    def render(self, value):
+        if self.integer:
+            value = int(value)
+        return mark_safe(f"{self.prefix}{intcomma(value)}{self.suffix}")
+
+
+class CheckBoxColumn(tables.TemplateColumn):
+    def __init__(self, **kwargs):
+        kwargs["template_name"] = get_template_path("custom_checkbox.html")
+        super().__init__(**kwargs)
+
+
+class SelectionColumn(tables.TemplateColumn):
+    def __init__(self, **kwargs):
+        kwargs["template_name"] = get_template_path("select_checkbox.html")
+        kwargs["verbose_name"] = ""
+        kwargs["accessor"] = "id"
+        kwargs["orderable"] = False
+        super().__init__(**kwargs)
+
+
+class CounterColumn(tables.Column):
+    row_counter = None
+
+    def __init__(self, **kwargs):
+        kwargs["orderable"] = False
+        kwargs["empty_values"] = ()
+        kwargs["verbose_name"] = ""
+        super().__init__(**kwargs)
+
+    def render(self, value):
+        if not self.row_counter:
+            self.row_counter = itertools.count()
+        return next(self.row_counter) + 1

django_tableaux/static/django_tableaux/css/django_tableaux.css

@@ -0,0 +1,310 @@
+:root {
+    --background: whitesmoke;
+    --header-background: aquamarine;
+    --header-color: darkgreen;
+    --border-color: grey;
+}
+
+
+
+.dt-table {
+    table {
+        border-collapse: collapse;
+        width: 100%
+    }
+    th, td {
+        padding: 5px;
+        text-align: left;
+        border: 1px solid;
+        border-color: var(--border-color);
+    }
+    th {
+        background-color: var(--header-background);
+        color: #111;
+    }
+
+
+    td {
+        background-color: var(--background);
+        color: var(--header-color);
+    }
+    td.odd {
+        background-color: yellow;
+    }
+    td.even{
+    background-color: orange;
+    }
+    caption {
+        caption-side: bottom;
+        text-align: left
+    }
+}
+
+
+.container {
+  width: 100%;
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+@media (min-width: 576px) {
+  .container {
+    max-width: 540px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 720px;
+  }
+}
+
+@media (min-width: 992px) {
+  .container {
+    max-width: 960px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .container {
+    max-width: 1140px;
+  }
+}
+.container-fluid {
+  width: 100%;
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.sticky-header {
+    thead {
+        position: sticky;
+        top: -1px;
+    }
+}
+
+.fixed_headers {
+    width: 100px;
+    table-layout: fixed;
+    border-collapse: collapse;
+
+    th {
+        text-decoration: underline;
+    }
+
+
+    /*
+  td:nth-child(1), th:nth-child(1) { min-width: @column_one_width; }
+  td:nth-child(2), th:nth-child(2) { min-width: @column_two_width; }
+  td:nth-child(3), th:nth-child(3) { width: @column_three_width; }
+  */
+
+    th {
+        background-color: #ddd;
+        color: #fff;
+
+        tr {
+            display: block;
+            position: relative;
+        }
+    }
+
+    tbody {
+        display: block;
+        overflow: auto;
+        width: 100%;
+        /*height: 700px;*/
+
+        tr:nth-child(even) {
+            background-color: #ddd
+        }
+    }
+}
+.even {
+    background-color: #ddd;!important;
+}
+.odd {
+    background-color: #ffffff;!important;
+}
+/*
+th.asc:after {
+    content: '\0000a0\0025b2';
+    float: right;
+}
+th.desc:after {
+    content: '\0000a0\0025bc';
+    float: right;
+}
+*/
+.filter-pill {
+    font-size: .9rem;
+    background-color: deepskyblue;
+    color: darkblue;
+    padding: 3px 10px;
+    border: 1px solid cadetblue;
+    border-radius: 10px;
+    margin-right: 10px;
+}
+
+.filter-value {
+    color: white;
+    padding: 5px;
+}
+
+.filter-clear {
+    background-color: transparent;
+    color: gray;
+    border: 1px transparent;
+}
+
+.filter-clear:hover {
+    cursor: pointer;
+}
+
+.filter-x {
+    color: white;
+}
+
+.filter-x:hover {
+    cursor: pointer;
+}
+
+
+
+.td-edit {
+    cursor: pointer;
+}
+
+.td-edit:hover {
+    background-color: floralwhite;
+}
+
+tr:hover {
+    cursor: pointer;
+    background-color: floralwhite;
+}
+
+.select-list {
+    .select-title {
+        display: inline-block;
+        cursor: pointer;
+        background: #fff;
+        border: 1px solid #eaeaea;
+        border-radius: 5px;
+        padding: 5px 10px 5px 10px;
+
+        &::after {
+            display: inline-block;
+            content: '>';
+            margin-left: 15px;
+            font-size: 11px;
+            transform: rotate(90deg) scale(1.5, 2) translate(-2px, 0);
+        }
+
+        &:hover {
+            background: #eaeaea;
+        }
+    }
+
+    .select-options {
+        margin-top: 5px;
+        display: none;
+        position: absolute;
+        z-index: 500;
+        border: 1px solid #808080;
+        border-radius: 5px;
+        background: #fff;
+
+        .select-option {
+            line-height: 1;
+            padding: 5px 5px 5px 5px;
+
+            label {
+                display: inline-block;
+            }
+
+            &:hover {
+                background: #eaeaea;
+            }
+
+            input {
+                margin: 0px 5px 0px 5px;
+            }
+        }
+    }
+    .selected{
+            background: #a0f0f0;
+        }
+    .opened {
+        display: block;
+    }
+}
+.flex-display {
+    display: flex;
+    margin: 2px 0 2px 0;
+}
+.flex-row {
+    flex-direction: row;
+}
+.flex-start{
+    justify-content: flex-start;
+}
+.flex-end {
+    justify-content: flex-end;
+}
+.flex-between {
+    justify-content: space-between;
+}
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  padding-left: 0;
+  list-style: none;
+  border-radius: 0.25rem;
+}
+
+.page-link {
+  position: relative;
+  display: block;
+  padding: 0.5rem 0.75rem;
+  margin-left: -1px;
+  line-height: 1.25;
+    text-decoration: none;
+  color: #5156ff;
+  background-color: var(--background);
+  border: 1px solid var(--border-color);
+}
+
+.page-link:hover {
+  z-index: 2;
+  color: #050cff;
+  text-decoration: none;
+  background-color: var(--background);
+  border-color: var(--border-color);
+}
+
+.page-link:focus {
+  z-index: 2;
+  outline: 0;
+  box-shadow: none;
+}
+
+.page-item.active .page-link {
+  z-index: 1;
+  color: #FFF;
+  background-color: #1C685A;
+  border-color: #1C685A;
+}
+
+.page-item.disabled .page-link {
+  color: #6c757d;
+  pointer-events: none;
+  cursor: auto;
+  background-color: #FFF;
+  border-color: #dee2e6;
+}