Closes #6088: Improved table configuration form

docs/release-notes/version-2.11.md

@@ -4,6 +4,7 @@
 
 ### Enhancements (from Beta)
 
+* [#6088](https://github.com/netbox-community/netbox/issues/6088) - Improved table configuration form
 * [#6097](https://github.com/netbox-community/netbox/issues/6097) - Redirect old slug-based object views
 * [#6109](https://github.com/netbox-community/netbox/issues/6109) - Add device counts to locations table
 * [#6121](https://github.com/netbox-community/netbox/issues/6121) - Extend parent interface assignment to VM interfaces

netbox/netbox/views/generic.py

@@ -182,7 +182,7 @@ class ObjectListView(ObjectPermissionRequiredMixin, View):
         if request.GET.get('export') == 'table':
             exclude_columns = {'pk'}
             exclude_columns.update({
-                col for col in table.base_columns if col not in table.visible_columns
+                name for name, _ in table.available_columns
             })
             exporter = TableExport(
                 export_format=TableExport.CSV,

netbox/project-static/js/tableconfig.js

@@ -1,9 +1,27 @@
 $(document).ready(function() {
-    $('form.userconfigform input.reset').click(function(event) {
+
-        // Deselect all columns when the reset button is clicked
+    // Select or reset table columns
+    $('#save_tableconfig').click(function(event) {
+        $('select[name="columns"] option').attr("selected", "selected");
+    });
+    $('#reset_tableconfig').click(function(event) {
         $('select[name="columns"]').val([]);
     });
 
+    // Swap columns between available and selected lists
+    $('#add_columns').click(function(e) {
+        let selected_columns = $('#id_available_columns option:selected');
+        $('#id_columns').append($(selected_columns).clone());
+        $(selected_columns).remove();
+        e.preventDefault();
+    });
+    $('#remove_columns').click(function(e) {
+        let selected_columns = $('#id_columns option:selected');
+        $('#id_available_columns').append($(selected_columns).clone());
+        $(selected_columns).remove();
+        e.preventDefault();
+    });
+
     $('form.userconfigform').submit(function(event) {
         event.preventDefault();
 

netbox/templates/utilities/templatetags/table_config_form.html

@@ -8,17 +8,23 @@
             </div>
             <div class="modal-body">
                 <form class="form-horizontal userconfigform" data-config-root="tables.{{ table_config_form.table_name }}">
-                    {% render_form table_config_form %}
+                    {% render_field table_config_form.available_columns %}
-                    <div class="row">
+                    <div class="form-group">
+                        <div class="col-md-9 col-md-offset-3">
+                            <a class="btn btn-success btn-xs" id="add_columns"><i class="mdi mdi-arrow-down-bold"></i> Add columns</a>
+                            <a class="btn btn-danger btn-xs" id="remove_columns"><i class="mdi mdi-arrow-up-bold"></i> Remove columns</a>
+                        </div>
+                    </div>
+                    {% render_field table_config_form.columns %}
+                    <div class="form-group">
                         <div class="col-md-9 col-md-offset-3">
                             <a class="btn btn-primary btn-xs" id="move-option-up" data-target="id_columns"><i class="mdi mdi-arrow-up-bold"></i> Move up</a>
                             <a class="btn btn-primary btn-xs" id="move-option-down" data-target="id_columns"><i class="mdi mdi-arrow-down-bold"></i> Move down</a>
-                            <a class="btn btn-success btn-xs" id="select-all-options" data-target="id_columns"><i class="mdi mdi-expand-all-outline"></i> Select all</a>
                         </div>
                     </div>
                     <div class="text-right">
-                        <input type="submit" class="btn btn-primary" value="Save" />
+                        <input type="submit" class="btn btn-primary" id="save_tableconfig" value="Save" />
-                        <input type="submit" class="btn btn-danger reset" value="Reset" />
+                        <input type="submit" class="btn btn-danger" id="reset_tableconfig" value="Reset" />
                     </div>
                 </form>
             </div>

netbox/utilities/forms/forms.py

@@ -161,13 +161,21 @@ class TableConfigForm(BootstrapMixin, forms.Form):
     """
     Form for configuring user's table preferences.
     """
+    available_columns = forms.MultipleChoiceField(
+        choices=[],
+        required=False,
+        widget=forms.SelectMultiple(
+            attrs={'size': 10}
+        ),
+        label='Available columns'
+    )
     columns = forms.MultipleChoiceField(
         choices=[],
         required=False,
         widget=forms.SelectMultiple(
             attrs={'size': 10}
         ),
-        help_text="Use the buttons below to arrange columns in the desired order, then select all columns to display."
+        label='Selected columns'
     )
 
     def __init__(self, table, *args, **kwargs):
@@ -176,8 +184,8 @@ class TableConfigForm(BootstrapMixin, forms.Form):
         super().__init__(*args, **kwargs)
 
         # Initialize columns field based on table attributes
-        self.fields['columns'].choices = table.configurable_columns
+        self.fields['available_columns'].choices = table.available_columns
-        self.fields['columns'].initial = table.visible_columns
+        self.fields['columns'].choices = table.selected_columns
 
     @property
     def table_name(self):

netbox/utilities/tables.py

@@ -107,19 +107,20 @@ class BaseTable(tables.Table):
                         prefetch_fields.append('__'.join(prefetch_path))
             self.data.data = self.data.data.prefetch_related(None).prefetch_related(*prefetch_fields)
 
-    @property
+    def _get_columns(self, visible=True):
-    def configurable_columns(self):
+        columns = []
-        selected_columns = [
+        for name, column in self.columns.items():
-            (name, self.columns[name].verbose_name) for name in self.sequence if name not in ['pk', 'actions']
+            if column.visible == visible and name not in ['pk', 'actions']:
-        ]
+                columns.append((name, column.verbose_name))
-        available_columns = [
+        return columns
-            (name, column.verbose_name) for name, column in self.columns.items() if name not in self.sequence and name not in ['pk', 'actions']
-        ]
-        return selected_columns + available_columns
 
     @property
-    def visible_columns(self):
+    def available_columns(self):
-        return [name for name in self.sequence if self.columns[name].visible]
+        return self._get_columns(visible=False)
+
+    @property
+    def selected_columns(self):
+        return self._get_columns(visible=True)
 
 
 #