Convert page listing view to tables framework

client/scss/components/_listing.scss

@@ -421,7 +421,8 @@ table.listing {
 .page-explorer .listing {
   position: relative;
 
-  .table-headers {
+  .table-headers,
+  thead tr {
     height: 35px;
 
     .title {

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

@@ -62,7 +62,7 @@
             {% endif %}
         {% endif %}
 
-        {% include "wagtailadmin/pages/listing/_list_explore.html" with sortable=1 sortable_by_type=1 full_width=1 show_ordering_column=show_ordering_column show_bulk_actions=show_bulk_actions parent_page=parent_page orderable=parent_page_perms.can_reorder_children 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/templates/wagtailadmin/pages/listing/_ordering_cell.html

@@ -0,0 +1,10 @@
+{% load i18n wagtailadmin_tags %}
+<td class="ord">
+    <div class="handle" tabindex="0" aria-live="polite" data-order-handle>
+        {% icon name="grip" classname="default" %}
+        <span class="w-sr-only">
+            {% trans 'Drag' %}
+            <span data-order-label>Item {{ forloop.counter }} of {{ pages|length }}</span>
+        </span>
+    </div>
+</td>

wagtail/admin/templates/wagtailadmin/pages/listing/_ordering_header.html

@@ -0,0 +1,12 @@
+{% load i18n wagtailadmin_tags %}
+<th class="ord{% if is_ascending %} ord--active{% endif %}">
+    {% if is_ascending %}
+        <a href="{{ table.base_url }}{% querystring p=None ordering=None %}" title="{% trans 'Disable ordering of child pages' %}">
+            {% icon name="order" %}{% trans 'Sort' %}
+        </a>
+    {% else %}
+        <a href="{{ table.base_url }}{% querystring p=None ordering=column.sort_key %}" title="{% trans 'Enable ordering of child pages' %}">
+            {% icon name="order" %}{% trans 'Sort' %}
+        </a>
+    {% endif %}
+</th>

wagtail/admin/ui/tables/pages.py

@@ -49,6 +49,11 @@ class BulkActionsColumn(BulkActionsCheckboxColumn):
         return context
 
 
+class OrderingColumn(BaseColumn):
+    header_template_name = "wagtailadmin/pages/listing/_ordering_header.html"
+    cell_template_name = "wagtailadmin/pages/listing/_ordering_cell.html"
+
+
 class NavigateToChildrenColumn(BaseColumn):
     cell_template_name = "wagtailadmin/pages/listing/_navigation_explore.html"
 
@@ -65,12 +70,22 @@ class NavigateToChildrenColumn(BaseColumn):
 
 
 class PageTable(Table):
+    # If true, attributes will be added on the <tr> element to support reordering
+    use_row_ordering_attributes = False
+
     def get_row_classname(self, instance):
         if not instance.live:
             return "unpublished"
         else:
             return ""
 
+    def get_row_attrs(self, instance):
+        attrs = super().get_row_attrs(instance)
+        if self.use_row_ordering_attributes:
+            attrs["id"] = "page_%d" % instance.id
+            attrs["data-page-title"] = instance.get_admin_display_title()
+        return attrs
+
     def get_context_data(self, parent_context):
         context = super().get_context_data(parent_context)
         context["show_locale_labels"] = parent_context.get("show_locale_labels")

wagtail/admin/views/pages/listing.py

@@ -2,15 +2,25 @@ from django.conf import settings
 from django.db.models import Count
 from django.shortcuts import get_object_or_404, redirect
 from django.urls import reverse
-from django.views.generic import ListView
+from django.utils.translation import gettext_lazy as _
 
 from wagtail import hooks
 from wagtail.admin.ui.side_panels import PageSidePanels
+from wagtail.admin.ui.tables import Column, DateColumn
+from wagtail.admin.ui.tables.pages import (
+    BulkActionsColumn,
+    NavigateToChildrenColumn,
+    OrderingColumn,
+    PageStatusColumn,
+    PageTable,
+    PageTitleColumn,
+)
+from wagtail.admin.views.generic.base import BaseListingView
 from wagtail.admin.views.generic.permissions import PermissionCheckedMixin
 from wagtail.permission_policies.pages import Page, PagePermissionPolicy
 
 
-class IndexView(PermissionCheckedMixin, ListView):
+class IndexView(PermissionCheckedMixin, BaseListingView):
     template_name = "wagtailadmin/pages/index.html"
     permission_policy = PagePermissionPolicy()
     any_permission_required = {
@@ -24,6 +34,41 @@ class IndexView(PermissionCheckedMixin, ListView):
     context_object_name = "pages"
     page_kwarg = "p"
     paginate_by = 50
+    table_class = PageTable
+    table_classname = "listing full-width"
+
+    columns = [
+        BulkActionsColumn("bulk_actions", width="10px"),
+        PageTitleColumn(
+            "title",
+            label=_("Title"),
+            sort_key="title",
+            classname="align-top title",
+        ),
+        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",
+            sort_key="content_type",
+            width="12%",
+            classname="align-top",
+        ),
+        PageStatusColumn(
+            "status",
+            label=_("Status"),
+            sort_key="live",
+            width="12%",
+            classname="align-top",
+        ),
+        NavigateToChildrenColumn("navigate", width="10%"),
+    ]
 
     def get(self, request, parent_page_id=None):
         if parent_page_id:
@@ -120,9 +165,15 @@ class IndexView(PermissionCheckedMixin, ListView):
         return reverse("wagtailadmin_explore", args=[self.parent_page.id])
 
     def get_context_data(self, **kwargs):
+        show_ordering_column = self.ordering == "ord"
+        if show_ordering_column:
+            self.columns = self.columns.copy()
+            self.columns[0] = OrderingColumn("ordering", width="10px", sort_key="ord")
+
         context = super().get_context_data(**kwargs)
 
-        show_ordering_column = self.ordering == "ord"
+        if show_ordering_column:
+            context["table"].use_row_ordering_attributes = True
 
         side_panels = PageSidePanels(
             self.request,