Use table component for page search results

client/scss/components/_listing.scss

@@ -106,7 +106,8 @@ ul.listing {
     border: 0;
   }
 
-  &.align-top td {
+  &.align-top td,
+  td.align-top {
     vertical-align: top;
   }
 

wagtail/admin/templates/wagtailadmin/pages/search_results.html

@@ -32,7 +32,7 @@
             </nav>
         {% endif %}
 
-        {% include "wagtailadmin/pages/listing/_list_explore.html" with show_parent=1 sortable=1 sortable_by_type=0 show_bulk_actions=1 show_locale_labels=show_locale_labels %}
+        {% component table %}
 
         {% if is_paginated %}
             {% include "wagtailadmin/shared/pagination_nav.html" with items=page_obj linkurl=index_url %}

wagtail/admin/ui/tables/pages.py

@@ -1,14 +1,22 @@
+from django.utils.safestring import mark_safe
+from django.utils.translation import gettext
+
 from wagtail.admin.ui.tables import BaseColumn, Column
 
 
 class PageTitleColumn(BaseColumn):
     cell_template_name = "wagtailadmin/pages/listing/_page_title_cell.html"
 
+    def __init__(self, *args, show_locale_labels=False, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.show_locale_labels = show_locale_labels
+
     def get_cell_context_data(self, instance, parent_context):
         context = super().get_cell_context_data(instance, parent_context)
         context["page_perms"] = instance.permissions_for_user(
             parent_context["request"].user
         )
+        context["show_locale_labels"] = self.show_locale_labels
         return context
 
 
@@ -21,3 +29,44 @@ class ParentPageColumn(Column):
 
 class PageStatusColumn(BaseColumn):
     cell_template_name = "wagtailadmin/pages/listing/_page_status_cell.html"
+
+
+class BulkActionsColumn(BaseColumn):
+    header_template_name = "wagtailadmin/bulk_actions/select_all_checkbox_cell.html"
+    cell_template_name = "wagtailadmin/bulk_actions/listing_checkbox_cell.html"
+
+    def get_header_context_data(self, parent_context):
+        context = super().get_header_context_data(parent_context)
+        parent_page = parent_context.get("parent_page")
+        if parent_page:
+            context["parent"] = parent_page.id
+        return context
+
+    def get_cell_context_data(self, instance, parent_context):
+        context = super().get_cell_context_data(instance, parent_context)
+        context.update(
+            {
+                "obj_type": "page",
+                "obj": instance,
+                "aria_labelledby_prefix": "page_",
+                "aria_labelledby": str(instance.pk),
+                "aria_labelledby_suffix": "_title",
+                "checkbox_aria_label": gettext("Select page"),
+            }
+        )
+        return context
+
+
+class NavigateToChildrenColumn(BaseColumn):
+    cell_template_name = "wagtailadmin/pages/listing/_navigation_explore.html"
+
+    def get_cell_context_data(self, instance, parent_context):
+        context = super().get_cell_context_data(instance, parent_context)
+        context["page"] = instance
+        context["page_perms"] = instance.permissions_for_user(
+            parent_context["request"].user
+        )
+        return context
+
+    def render_header_html(self, parent_context):
+        return mark_safe("<th></th>")

wagtail/admin/views/pages/search.py

@@ -5,9 +5,18 @@ from django.contrib.contenttypes.models import ContentType
 from django.db.models.query import QuerySet
 from django.http import Http404
 from django.urls import reverse
-from django.views.generic import ListView
+from django.utils.translation import gettext_lazy as _
 
 from wagtail.admin.forms.search import SearchForm
+from wagtail.admin.ui.tables import Column, DateColumn
+from wagtail.admin.ui.tables.pages import (
+    BulkActionsColumn,
+    NavigateToChildrenColumn,
+    PageStatusColumn,
+    PageTitleColumn,
+    ParentPageColumn,
+)
+from wagtail.admin.views.generic.base import BaseListingView
 from wagtail.admin.views.generic.permissions import PermissionCheckedMixin
 from wagtail.models import Page
 from wagtail.permission_policies.pages import PagePermissionPolicy
@@ -40,7 +49,7 @@ def page_filter_search(q, pages, all_pages=None, ordering=None):
     return pages, all_pages
 
 
-class BaseSearchView(PermissionCheckedMixin, ListView):
+class BaseSearchView(PermissionCheckedMixin, BaseListingView):
     permission_policy = PagePermissionPolicy()
     any_permission_required = {
         "add",
@@ -57,6 +66,40 @@ class BaseSearchView(PermissionCheckedMixin, ListView):
     def get(self, request):
         self.show_locale_labels = getattr(settings, "WAGTAIL_I18N_ENABLED", False)
 
+        self.columns = [
+            BulkActionsColumn("bulk_actions", width="10px"),
+            PageTitleColumn(
+                "title",
+                label=_("Title"),
+                sort_key="title",
+                show_locale_labels=self.show_locale_labels,
+                classname="align-top",
+            ),
+            ParentPageColumn("parent", label=_("Parent"), classname="align-top"),
+            DateColumn(
+                "latest_revision_created_at",
+                label=_("Updated"),
+                sort_key="latest_revision_created_at",
+                width="12%",
+                classname="align-top",
+            ),
+            Column(
+                "type",
+                label=_("Type"),
+                accessor="page_type_display_name",
+                width="12%",
+                classname="align-top",
+            ),
+            PageStatusColumn(
+                "status",
+                label=_("Status"),
+                sort_key="live",
+                width="12%",
+                classname="align-top",
+            ),
+            NavigateToChildrenColumn("navigate", width="10%"),
+        ]
+
         self.content_types = []
         self.ordering = None
 
@@ -132,7 +175,6 @@ class BaseSearchView(PermissionCheckedMixin, ListView):
                 "content_types": self.content_types,
                 "selected_content_type": self.selected_content_type,
                 "ordering": self.ordering,
-                "show_locale_labels": self.show_locale_labels,
                 "index_url": self.get_index_url(),
             }
         )