diff --git a/client/scss/components/_listing.scss b/client/scss/components/_listing.scss
index d676386738..d09a812569 100644
--- a/client/scss/components/_listing.scss
+++ b/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 {
diff --git a/wagtail/admin/templates/wagtailadmin/pages/index.html b/wagtail/admin/templates/wagtailadmin/pages/index.html
index de5fb5cc11..85b835901e 100644
--- a/wagtail/admin/templates/wagtailadmin/pages/index.html
+++ b/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 %}
diff --git a/wagtail/admin/templates/wagtailadmin/pages/listing/_ordering_cell.html b/wagtail/admin/templates/wagtailadmin/pages/listing/_ordering_cell.html
new file mode 100644
index 0000000000..cbcd528e80
--- /dev/null
+++ b/wagtail/admin/templates/wagtailadmin/pages/listing/_ordering_cell.html
@@ -0,0 +1,10 @@
+{% load i18n wagtailadmin_tags %}
+|
+
+ {% icon name="grip" classname="default" %}
+
+ {% trans 'Drag' %}
+ Item {{ forloop.counter }} of {{ pages|length }}
+
+
+ |
diff --git a/wagtail/admin/templates/wagtailadmin/pages/listing/_ordering_header.html b/wagtail/admin/templates/wagtailadmin/pages/listing/_ordering_header.html
new file mode 100644
index 0000000000..47a34249b8
--- /dev/null
+++ b/wagtail/admin/templates/wagtailadmin/pages/listing/_ordering_header.html
@@ -0,0 +1,12 @@
+{% load i18n wagtailadmin_tags %}
+
+ {% if is_ascending %}
+
+ {% icon name="order" %}{% trans 'Sort' %}
+
+ {% else %}
+
+ {% icon name="order" %}{% trans 'Sort' %}
+
+ {% endif %}
+ |
diff --git a/wagtail/admin/ui/tables/pages.py b/wagtail/admin/ui/tables/pages.py
index 302c4bcb8b..5a6ad76a3a 100644
--- a/wagtail/admin/ui/tables/pages.py
+++ b/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 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")
diff --git a/wagtail/admin/views/pages/listing.py b/wagtail/admin/views/pages/listing.py
index 3609cb2bb9..de9fee4aae 100644
--- a/wagtail/admin/views/pages/listing.py
+++ b/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,