reorderable EditTable finished with tests a docs

berycz · boxed · commit 2afebb7d55b8 · 2025-09-15T09:01:04.000+02:00
diff --git a/conftest.py b/conftest.py
@@ -268,6 +268,8 @@ def damnation(transactional_db):
 
 @pytest.fixture
 def fav_artists(john_doe_user, black_sabbath, damnation, ozzy):
-    FavoriteArtist.objects.create(user=john_doe_user, artist=black_sabbath, comment='Love it!', sort_order=0)
-    FavoriteArtist.objects.create(user=john_doe_user, artist=ozzy, comment='I love this too!', sort_order=1)
-    FavoriteArtist.objects.create(user=john_doe_user, artist=damnation, comment='And this as well', sort_order=2)
+    return [
+        FavoriteArtist.objects.create(user=john_doe_user, artist=black_sabbath, comment='Love it!', sort_order=0),
+        FavoriteArtist.objects.create(user=john_doe_user, artist=ozzy, comment='I love this too!', sort_order=1),
+        FavoriteArtist.objects.create(user=john_doe_user, artist=damnation, comment='And this as well', sort_order=2),
+    ]
diff --git a/docs/test_doc_edit_tables.py b/docs/test_doc_edit_tables.py
@@ -68,8 +68,14 @@ def test_orderable_edit_tables(fav_artists):
 
     .. code-block:: python
 
+           from iommi.models import Orderable
+
            class FavoriteArtist(Orderable):
-               user = ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE, related_name='favorite_artists')
+               user = ForeignKey(
+                   settings.AUTH_USER_MODEL,
+                   on_delete=models.CASCADE,
+                   related_name='favorite_artists',
+               )
                artist = ForeignKey(Artist, on_delete=CASCADE, related_name='+')
                comment = CharField(max_length=255)
 
@@ -88,6 +94,7 @@ class Meta:
             auto__model = FavoriteArtist
             auto__include = ['artist__name', 'comment', 'sort_order']
             columns__comment__field__include = True
+            sortable = False
 
     user = get_user_model().objects.get(username='john.doe')
 
@@ -112,7 +119,7 @@ class Meta:
 
     # language=rst
     """
-    If you already have a custom model field for ordering, you can register it as a reorderderin column:
+    If you already have a custom model field for ordering, you can register it as a `reorder_handle` column:
 
     .. code-block:: python
 
@@ -131,6 +138,7 @@ class MyEditTable(EditTable):
                    class Meta:
                        auto__model = Foo
                        columns__bar = EditColumn.reorder_handle()
+                       sortable = False
     """
 
     # language=rst
@@ -149,4 +157,11 @@ class Meta:
                            "selectedClass": 'selected',  # The class applied to the selected items
                            "fallbackTolerance": 3,  # So that we can select items on mobile
                        }
+                       sortable = False
+    """
+
+    # language=rst
+    """
+    Note: We recommend using `sortable=False` on orderable EditTables, because it doesn't really make sense to have both. 
+    And if you sort table by another column, the `reorder_handle` column gets `render_column=False`.
     """
diff --git a/iommi/edit_table.py b/iommi/edit_table.py
@@ -203,8 +203,8 @@ def on_bind(self) -> None:
         super(EditColumn, self).on_bind()
         if 'reorder_handle' in getattr(self, 'iommi_shortcut_stack', []):
             edit_table = self.iommi_parent().iommi_parent()
-            edit_table.tbody.attrs['data-reorderable-handle-selector'] = f'[data-iommi-path="{self.iommi_dunder_path}__cell"]'
-            edit_table.tbody.attrs['data-reorderable-field-selector'] = '[data-reordering-value]'
+            edit_table.tbody.attrs['data-iommi-reorderable-handle-selector'] = f'[data-iommi-path="{self.iommi_dunder_path}__cell"]'
+            edit_table.tbody.attrs['data-iommi-reorderable-field-selector'] = '[data-reordering-value]'
 
     @classmethod
     @with_defaults(
@@ -558,19 +558,32 @@ def bind(self, *, parent=None, request=None):
             return result
 
         reorder_handles = []
-        for column_name, column in items(result.columns):
+        is_sorting_on = None
+        for column in values(result.columns):
             if 'reorder_handle' in getattr(column, 'iommi_shortcut_stack', []):
-                reorder_handles.append(column_name)
+                reorder_handles.append(column)
+            if column.is_sorting:
+                is_sorting_on = column
+
+        # TODO when needed
+        #  instead of is_sorting_on we should rather check `result.rows.query.order_by != (reorder_handles.attr,)`
+        #  but query.order_by can be an empty tuple, or rows doesn't have to be a queryset etc.
+
         if reorder_handles:
             assert len(reorder_handles) == 1, "You cannot have multiple EditColumn.reorder_handle in an EditTable!"
-            if not result.reorderable:
+            if is_sorting_on:
+                # disable reordering when table is sorted by another column
+                result.reorderable = False
+                result.tbody.attrs['data-iommi-reorderable-handle-selector'] = None
+                result.tbody.attrs['data-iommi-reorderable-field-selector'] = None
+                reorder_handles[0].cell.attrs['class']['reordering-handle-cell'] = False
+                reorder_handles[0].render_column = False
+                result._bind_headers()
+            elif not result.reorderable:
                 result.reorderable = True
-            result.sortable = False
-        if result.reorderable:
-            result.tbody.attrs['data-reorderable'] = json.dumps(result.reorderable) if isinstance(result.reorderable, dict) else result.reorderable
 
-        if result.sortable and result.reorderable:
-            raise NotImplementedError("sortable and reorderable cannot be used simultaneously")
+        if result.reorderable:
+            result.tbody.attrs['data-iommi-reorderable'] = json.dumps(result.reorderable, separators=(',', ':')) if isinstance(result.reorderable, dict) else result.reorderable
 
         return result
 
diff --git a/iommi/edit_table__tests.py b/iommi/edit_table__tests.py
@@ -1,9 +1,11 @@
+import html
 import json
 import pytest
 
 from docs.models import (
     Album,
     Artist,
+    FavoriteArtist,
 )
 from iommi.declarative.namespace import Namespace
 from iommi.edit_table import (
@@ -840,3 +842,181 @@ def test_parent_form_save(abort_on_fail):
             </form>
         """,
     )
+
+
+@pytest.mark.django_db
+def test_orderable_edit_table(fav_artists):
+    class FavoriteArtists(EditTable):
+        class Meta:
+            auto__model = FavoriteArtist
+            auto__include = ['artist__name', 'comment', 'sort_order']
+            columns__comment__field__include = True
+            sortable = False
+
+    verify_table_html(
+        table=FavoriteArtists().bind(request=req('get')),
+        # language=html
+        expected_html=f"""
+            <table class="table" data-new-row-endpoint="/new_row" data-next-virtual-pk="-1">
+                <thead>
+                    <tr>
+                        <th class="first_column subheader">Name</th>
+                        <th class="first_column subheader">Comment</th>
+                        <th class="first_column subheader">Sort order</th>
+                    </tr>
+                </thead>
+                <tbody data-iommi-reorderable data-iommi-reorderable-field-selector="[data-reordering-value]" data-iommi-reorderable-handle-selector="[data-iommi-path=&quot;columns__sort_order__cell&quot;]">
+                    <tr data-pk="{fav_artists[0].pk}">
+                        <td>Black Sabbath</td>
+                        <td><input id="id_columns__comment__{fav_artists[0].pk}" name="columns/comment/{fav_artists[0].pk}" type="text" value="Love it!"></td>
+                        <td class="reordering-handle-cell" title="Drag and drop to reorder"><input data-reordering-value id="id_columns__sort_order__{fav_artists[0].pk}" name="columns/sort_order/{fav_artists[0].pk}" type="hidden" value="0"></td>
+                    </tr>
+                    <tr data-pk="{fav_artists[1].pk}">
+                        <td>Ozzy Osbourne</td>
+                        <td><input id="id_columns__comment__{fav_artists[1].pk}" name="columns/comment/{fav_artists[1].pk}" type="text" value="I love this too!"></td>
+                        <td class="reordering-handle-cell" title="Drag and drop to reorder"><input data-reordering-value id="id_columns__sort_order__{fav_artists[1].pk}" name="columns/sort_order/{fav_artists[1].pk}" type="hidden" value="1"></td>
+                    </tr>
+                    <tr data-pk="{fav_artists[2].pk}">
+                        <td>Damnation</td>
+                        <td><input id="id_columns__comment__{fav_artists[2].pk}" name="columns/comment/{fav_artists[2].pk}" type="text" value="And this as well"></td>
+                        <td class="reordering-handle-cell" title="Drag and drop to reorder"><input data-reordering-value id="id_columns__sort_order__{fav_artists[2].pk}" name="columns/sort_order/{fav_artists[2].pk}" type="hidden" value="2"></td>
+                    </tr>
+                </tbody>
+            </table>
+        """,
+    )
+
+
+@pytest.mark.django_db
+def test_orderable_edit_table_sortablejs_options(fav_artists):
+    sortablejs_options = {
+        "multiDrag": True,  # Enable multi-drag
+        "selectedClass": 'selected',  # The class applied to the selected items
+        "fallbackTolerance": 3,  # So that we can select items on mobile
+    }
+    class FavoriteArtists(EditTable):
+        class Meta:
+            auto__model = FavoriteArtist
+            auto__include = ['artist__name', 'comment', 'sort_order']
+            columns__comment__field__include = True
+            reorderable = sortablejs_options
+            sortable = False
+
+    verify_table_html(
+        table=FavoriteArtists().bind(request=req('get')),
+        # language=html
+        expected_html=f"""
+            <table class="table" data-new-row-endpoint="/new_row" data-next-virtual-pk="-1">
+                <thead>
+                    <tr>
+                        <th class="first_column subheader">Name</th>
+                        <th class="first_column subheader">Comment</th>
+                        <th class="first_column subheader">Sort order</th>
+                    </tr>
+                </thead>
+                <tbody data-iommi-reorderable="{html.escape(json.dumps(sortablejs_options, separators=(',', ':')))}" data-iommi-reorderable-field-selector="[data-reordering-value]" data-iommi-reorderable-handle-selector="[data-iommi-path=&quot;columns__sort_order__cell&quot;]">
+                    <tr data-pk="{fav_artists[0].pk}">
+                        <td>Black Sabbath</td>
+                        <td><input id="id_columns__comment__{fav_artists[0].pk}" name="columns/comment/{fav_artists[0].pk}" type="text" value="Love it!"></td>
+                        <td class="reordering-handle-cell" title="Drag and drop to reorder"><input data-reordering-value id="id_columns__sort_order__{fav_artists[0].pk}" name="columns/sort_order/{fav_artists[0].pk}" type="hidden" value="0"></td>
+                    </tr>
+                    <tr data-pk="{fav_artists[1].pk}">
+                        <td>Ozzy Osbourne</td>
+                        <td><input id="id_columns__comment__{fav_artists[1].pk}" name="columns/comment/{fav_artists[1].pk}" type="text" value="I love this too!"></td>
+                        <td class="reordering-handle-cell" title="Drag and drop to reorder"><input data-reordering-value id="id_columns__sort_order__{fav_artists[1].pk}" name="columns/sort_order/{fav_artists[1].pk}" type="hidden" value="1"></td>
+                    </tr>
+                    <tr data-pk="{fav_artists[2].pk}">
+                        <td>Damnation</td>
+                        <td><input id="id_columns__comment__{fav_artists[2].pk}" name="columns/comment/{fav_artists[2].pk}" type="text" value="And this as well"></td>
+                        <td class="reordering-handle-cell" title="Drag and drop to reorder"><input data-reordering-value id="id_columns__sort_order__{fav_artists[2].pk}" name="columns/sort_order/{fav_artists[2].pk}" type="hidden" value="2"></td>
+                    </tr>
+                </tbody>
+            </table>
+        """,
+    )
+
+
+@pytest.mark.django_db
+def test_orderable_edit_table_reorder_handle():
+    obj1 = TFoo.objects.create(a=1, b='test_reorder_handle')
+    obj2 = TFoo.objects.create(a=2, b='test_reorder_handle')
+
+    class MyEditTable(EditTable):
+        class Meta:
+            auto__model = TFoo
+            rows = TFoo.objects.filter(b='test_reorder_handle')
+            auto__include = ['a', 'b']
+            columns__a = EditColumn.reorder_handle()
+            sortable = False
+
+    verify_table_html(
+        table=MyEditTable().bind(request=req('get')),
+        # language=html
+        expected_html=f"""
+            <table class="table" data-new-row-endpoint="/new_row" data-next-virtual-pk="-1">
+                <thead>
+                    <tr>
+                        <th class="first_column subheader">B</th>
+                        <th class="first_column subheader">A</th>
+                    </tr>
+                </thead>
+                <tbody data-iommi-reorderable data-iommi-reorderable-field-selector="[data-reordering-value]" data-iommi-reorderable-handle-selector="[data-iommi-path=&quot;columns__a__cell&quot;]">
+                    <tr data-pk="{obj1.pk}">
+                        <td>test_reorder_handle</td>
+                        <td class="reordering-handle-cell" title="Drag and drop to reorder"><input data-reordering-value id="id_columns__a__{obj1.pk}" name="columns/a/{obj1.pk}" type="hidden" value="1"></td>
+                    </tr>
+                    <tr data-pk="{obj2.pk}">
+                        <td>test_reorder_handle</td>
+                        <td class="reordering-handle-cell" title="Drag and drop to reorder"><input data-reordering-value id="id_columns__a__{obj2.pk}" name="columns/a/{obj2.pk}" type="hidden" value="2"></td>
+                    </tr>
+                </tbody>
+            </table>
+        """,
+    )
+
+
+@pytest.mark.django_db
+def test_orderable_sortable_edit_table(fav_artists):
+    """
+    when sorted by any column, the reordering turns off
+    """
+    class FavoriteArtists(EditTable):
+        class Meta:
+            auto__model = FavoriteArtist
+            auto__include = ['artist__name', 'comment', 'sort_order']
+            columns__comment__field__include = True
+
+    fav_artists_data = FavoriteArtist.objects.order_by('artist__name')
+
+    verify_table_html(
+        table=FavoriteArtists().bind(request=req('get', order='artist_name')),
+        # language=html
+        expected_html=f"""
+            <table class="table" data-new-row-endpoint="/new_row" data-next-virtual-pk="-1">
+                <thead>
+                    <tr>
+                        <th class="ascending first_column iommi_sort_header sorted subheader">
+                            <a href="?order=-artist_name">Name</a>
+                        </th>
+                        <th class="first_column iommi_sort_header subheader">
+                            <a href="?order=comment">Comment</a>
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr data-pk="{fav_artists_data[0].pk}">
+                        <td>{fav_artists_data[0].artist.name}</td>
+                        <td><input id="id_columns__comment__{fav_artists_data[0].pk}" name="columns/comment/{fav_artists_data[0].pk}" type="text" value="{fav_artists_data[0].comment}"></td>
+                    </tr>
+                    <tr data-pk="{fav_artists_data[1].pk}">
+                        <td>{fav_artists_data[1].artist.name}</td>
+                        <td><input id="id_columns__comment__{fav_artists_data[1].pk}" name="columns/comment/{fav_artists_data[1].pk}" type="text" value="{fav_artists_data[1].comment}"></td>
+                    </tr>
+                    <tr data-pk="{fav_artists_data[2].pk}">
+                        <td>{fav_artists_data[2].artist.name}</td>
+                        <td><input id="id_columns__comment__{fav_artists_data[2].pk}" name="columns/comment/{fav_artists_data[2].pk}" type="text" value="{fav_artists_data[2].comment}"></td>
+                    </tr>
+                </tbody>
+            </table>
+        """,
+    )
diff --git a/iommi/static/css/iommi.css b/iommi/static/css/iommi.css
@@ -59,6 +59,7 @@ div[data-iommi-edit-table-delete-with="checkbox"] input[data-iommi-edit-table-de
 	cursor: move;
 	cursor: -webkit-grabbing;
     width: 30px;
+    text-align: right;
 }
 .reordering-handle-cell::after {
     content: "||";
diff --git a/iommi/static/js/iommi.js b/iommi/static/js/iommi.js
@@ -605,7 +605,7 @@ class IommiSelect2 {
 }
 
 class IommiReorderable {
-    defaultSelector = '[data-reorderable]';
+    defaultSelector = '[data-iommi-reorderable]';
 
     constructor() {
         const SELF = this;
@@ -628,7 +628,7 @@ class IommiReorderable {
     recalculate(tbody) {
         let index = 0;
         for (let item of tbody.children) {
-            item.querySelector(tbody.dataset.reorderableFieldSelector).value = index;
+            item.querySelector(tbody.dataset.iommiReorderableFieldSelector).value = index;
             index += 1;
         }
     }
@@ -647,15 +647,15 @@ class IommiReorderable {
         const options = {
             animation: 150
         };
-        if(elem.dataset.reorderableHandleSelector) {
-            options.handle = elem.dataset.reorderableHandleSelector;
+        if(elem.dataset.iommiReorderableHandleSelector) {
+            options.handle = elem.dataset.iommiReorderableHandleSelector;
         }
         let requiredOptions = {}
-        if(elem.dataset.reorderable.startsWith("{")) {
-            requiredOptions = JSON.parse(elem.dataset.reorderable);
+        if(elem.dataset.iommiReorderable.startsWith("{")) {
+            requiredOptions = JSON.parse(elem.dataset.iommiReorderable);
         }
         const SELF = this;
-        if(elem.dataset.reorderableFieldSelector) {
+        if(elem.dataset.iommiReorderableFieldSelector) {
             options.onUpdate = function(event) {
                 SELF.recalculate(elem);
             }

Original file line number	Diff line number	Diff line change
`@@ -59,6 +59,7 @@ div[data-iommi-edit-table-delete-with="checkbox"] input[data-iommi-edit-table-de`
`59`	`59`	`cursor: move;`
`60`	`60`	`cursor: -webkit-grabbing;`
`61`	`61`	`width: 30px;`
	`62`	`+ text-align: right;`
`62`	`63`	`}`
`63`	`64`	`.reordering-handle-cell::after {`
`64`	`65`	`content: "\|\|";`