.. _edit-tables:

Edit tables
===========

iommi edit tables build on top of iommi tables but enable editing of cells too.

A simple example:

.. code-block:: python

    EditTable(
        auto__model=Album,
        page_size=10,
        # Turn on the edit feature for the year column
        columns__year__field__include=True,
        # Turn on the delete row feature
        columns__delete=EditColumn.delete(),
    )

.. raw:: html

    <div class="iframe_collapse" onclick="toggle('2248ff35-d420-4a9e-a1ca-2f5206a440d1', this)">▼ Hide result</div>
    <iframe id="2248ff35-d420-4a9e-a1ca-2f5206a440d1" src="doc_includes/edit_tables/test_edit_tables.html" style="background: white; display: ; width: 100%; min-height: 100px; border: 1px solid gray;"></iframe>
    <div class="show_structure_toggler"><span onclick="toggle_iframe_structure_overlay()">Toggle structure</span></div>

.. _orderable-edit-tables:

Orderable edit tables
---------------------

iommi edit tables also support manual ordering. That can be especially useful for editing reverse FKs in nested forms.

The easiest way to make an `EditTable` orderable is to inherit your model from `iommi.models.Orderable`:

.. 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',
           )
           artist = ForeignKey(Artist, on_delete=CASCADE, related_name='+')
           comment = CharField(max_length=255)

           def __str__(self):
               return self.artist.name

.. code-block:: python

    class UserForm(Form):
        class Meta:
            auto__model = get_user_model()
            auto__include = ['username', 'email']
            fields__username__editable = False

    class FavoriteArtists(EditTable):
        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')

    class ParentForm(Form):
        user_form = UserForm.edit(auto__instance=user)
        favorite_artists = FavoriteArtists(rows=user.favorite_artists.all())

        class Meta:
            actions__submit__post_handler = save_nested_forms

.. code-block:: python

    ParentForm()

.. raw:: html

    <div class="iframe_collapse" onclick="toggle('9b3e63f5-2ea0-4788-ac30-feb5a1c7ae9b', this)">▼ Hide result</div>
    <iframe id="9b3e63f5-2ea0-4788-ac30-feb5a1c7ae9b" src="doc_includes/edit_tables/test_orderable_edit_tables.html" style="background: white; display: ; width: 100%; min-height: 100px; border: 1px solid gray;"></iframe>
    <div class="show_structure_toggler"><span onclick="toggle_iframe_structure_overlay()">Toggle structure</span></div>

If you already have a custom model field for ordering, you can register it as a `reorder_handle` column:

.. code-block:: python

       from iommi import register_edit_column_factory

       register_edit_column_factory(YourOrderField, shortcut_name='reorder_handle')

If you just use any django integer field, you can still make your EditTable orderable with:

.. code-block:: python

           class MyEditTable(EditTable):
               class Meta:
                   auto__model = Foo
                   columns__bar = EditColumn.reorder_handle()
                   sortable = False

We use SortableJS and if you want, you can also pass other `options <https://github.com/SortableJS/Sortable?tab=readme-ov-file#options>`__.
For example this allows multi-drag:

.. code-block:: python

           class MyEditTable(EditTable):
               class Meta:
                   auto__model = Foo
                   columns__bar = EditColumn.reorder_handle()
                   reorderable = {
                       "multiDrag": True,  # Enable multi-drag
                       "selectedClass": 'selected',  # The class applied to the selected items
                       "fallbackTolerance": 3,  # So that we can select items on mobile
                   }
                   sortable = False

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`.