Add default sort option to DataTables view

* Adds sort field, sort direction
* Primarily useful when the data doesn't necessarily come in in a
manner that makes sense for presentation

Author: JavierJimenezIE

ckanext/datatablesview/assets/datatablesview.js

@@ -323,6 +323,8 @@ this.ckan.module('datatables_view', function (jQuery) {
       const resourceurl = dtprv.data('resource-url')
       const defaultview = dtprv.data('default-view')
       const responsivemodal = dtprv.data('responsive-modal')
+      const sortfield = dtprv.data('sort-field')
+      const sortorder = dtprv.data('sort-order')
 
       // get view mode setting from localstorage (table or list/responsive])
       const lastView = getWithExpiry('lastView-' + gresviewId)
@@ -479,6 +481,12 @@ this.ckan.module('datatables_view', function (jQuery) {
           })
       })
 
+      let defaultOrder = [[0, sortorder]]
+      const sortIndex = dynamicCols.findIndex((e) => e.data === sortfield)
+      if (sortIndex !== -1) {
+        defaultOrder = [[sortIndex, sortorder]]
+      }
+
       // init the datatable
       $('#dtprv').on('preInit.dt', function (_event, _settings) {
         // show loading indicator when first painting data into the table.
@@ -514,6 +522,7 @@ this.ckan.module('datatables_view', function (jQuery) {
           }
         },
         columns: dynamicCols,
+        order: defaultOrder,
         ajax: {
           url: ajaxurl,
           type: 'POST',

ckanext/datatablesview/plugin.py

@@ -100,5 +100,7 @@ def info(self) -> dict[str, Any]:
                 u'date_format': [default(self.date_format)],
                 u'show_fields': [ignore_missing],
                 u'filterable': [default(True), boolean_validator],
+                u'sort_field': [ignore_missing],
+                u'sort_order': [default(u'asc'), ignore_missing],
             }
         }

ckanext/datatablesview/templates/datatables/datatables_form.html

@@ -25,6 +25,33 @@
   _('Moment.js date format to use for displaying dates (see <a href="https://devhints.io/moment#formatting-1" target="_blank">Moment.js cheatsheet</a>). If <b>NONE</b>, the raw timestamp value will be shown.', classes=['info-help-tight'])) }}
 {% endcall %}
 
+{% set fields = h.datastore_dictionary(resource.id) or [] %}
+{% set sort_field_options = [{'value': '', 'text': _('None (use _id)')}] %}
+{% for f in fields %}
+  {% set _ = sort_field_options.append({'value': f.id, 'text': f.id}) %}
+{% endfor %}
+{% call form.select(
+  'sort_field',
+  id='field-sort_field',
+  label=_('Default sort field'),
+  options=sort_field_options,
+  selected=data.sort_field or '',
+) %}
+  {{ form.info(
+  _('Field to use for default sorting. If empty, _id will be used.', classes=['info-help-tight'])) }}
+{% endcall %}
+
+{% call form.select(
+  'sort_order',
+  id='field-sort_order',
+  label=_('Default sort order'),
+  options=[{'value': 'asc', 'text': _('Ascending')}, {'value': 'desc', 'text': _('Descending')}],
+  selected=data.sort_order or 'asc',
+) %}
+  {{ form.info(
+  _('Direction for default sorting: ascending or descending.', classes=['info-help-tight'])) }}
+{% endcall %}
+
 <div class="control-group">
   <label class="form-label">{{ _('Show Columns') }}</label>
   <br/>
@@ -48,7 +75,7 @@
           </td>
           <td></td>
         </tr>
-      {% for f in h.datastore_dictionary(resource.id) %}
+      {% for f in fields %}
         <tr>
           <td>
             <label class="checkbox">

ckanext/datatablesview/templates/datatables/datatables_view.html

@@ -34,7 +34,9 @@
       data-responsive-flag="{{ resource_view.get('responsive')|lower }}"
       data-page-length-choices="{{ page_length_choices }}"
       data-responsive-modal="{{ responsive_modal|lower }}"
-      data-resource-url="{{ h.url_for(package.type ~ '_resource.read', id=package.name, resource_id=resource.id ) }}">
+      data-resource-url="{{ h.url_for(package.type ~ '_resource.read', id=package.name, resource_id=resource.id ) }}"
+      data-sort-field="{{ resource_view.get('sort_field', '') }}"
+      data-sort-order="{{ resource_view.get('sort_order', 'asc') }}">
     <thead>
       <tr>
         <th class="all" data-name="_id">_id</th>