org settings: Make data exports table sortable.

static/js/settings_exports.js

@@ -18,10 +18,11 @@ exports.populate_exports_table = function (exports) {
     }
 
     var exports_table = $('#admin_exports_table').expectOne();
-    exports_table.find('tr.export_row').remove();
+    var exports_list = list_render.create(exports_table, exports, {
-    _.each(exports, function (data) {
+        name: "admin-exports-list",
+        modifier: function (data) {
             if (data.export_data.deleted_timestamp === undefined) {
-            exports_table.append(render_admin_export_list({
+                return render_admin_export_list({
                     realm_export: {
                         id: data.id,
                         acting_user: people.get_full_name(data.acting_user_id),
@@ -31,9 +32,34 @@ exports.populate_exports_table = function (exports) {
                         ),
                         path: data.export_data.export_path,
                     },
-            }));
-        }
                 });
+            }
+            return "";
+        },
+        filter: {
+            element: exports_table.closest(".settings-section").find(".search"),
+            callback: function (item, value) {
+                return people.get_full_name(item.acting_user_id).toLowerCase().indexOf(value) >= 0;
+            },
+            onupdate: function () {
+                ui.reset_scrollbar(exports_table);
+            },
+        },
+        parent_container: $("#data-exports").expectOne(),
+    });
+
+    exports_list.add_sort_function("user", function (a, b) {
+        var a_name = people.get_full_name(a.acting_user_id).toLowerCase();
+        var b_name = people.get_full_name(b.acting_user_id).toLowerCase();
+        if (a_name > b_name) {
+            return 1;
+        } else if (a_name === b_name) {
+            return 0;
+        }
+        return -1;
+    });
+
+    exports_list.sort("user");
 };
 
 exports.set_up = function () {

static/templates/settings/data_exports_admin.hbs

@@ -22,13 +22,16 @@
     </form>
     {{/if}}
     <p class="alert-word-settings-note">{{#tr this}}Any member with administrative access can conduct an export.  Please note that individual organizations are limited to five exports per week.{{/tr}}</p>
-    <div class="admin-table-wrapper">
+
+    <input type="text" class="search" placeholder="{{t 'Filter exports' }}"
+      aria-label="{{t 'Filter exports' }}"/>
+    <div class="progressive-table-wrapper admin-table-wrapper" data-simplebar data-list-render="admin-exports-list">
         <table class="table table-condensed table-striped wrapped-table admin_exports_table">
             <thead>
-                <th>{{t "Requesting user" }}</th>
+                <th class="active" data-sort="user">{{t "Requesting user" }}</th>
-                <th>{{t "Time" }}</th>
+                <th data-sort="numeric" data-sort-prop="export_time">{{t "Time" }}</th>
                 <th>{{t "File" }}</th>
-                <th>{{t "Actions" }}</th>
+                <th class="actions">{{t "Actions" }}</th>
             </thead>
             <tbody id="admin_exports_table" class="required-text" data-empty="{{t 'No exports.' }}"></tbody>
         </table>