From d32b2dafccc182bcb3d9340fde2283aeda1c8391 Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Mon, 2 Mar 2026 23:55:15 -0500
Subject: [PATCH 1/2] Add option to show widget table headers

Closes #14120
---
 resources/css/elements/tables.css             | 34 +++++++++++++++++++
 .../components/entries/CollectionWidget.vue   | 22 +++++-------
 resources/js/components/forms/FormWidget.vue  |  7 ++--
 .../js/components/ui/Listing/TableHead.vue    |  2 +-
 src/Forms/Widget.php                          |  1 +
 src/Widgets/Collection.php                    |  1 +
 6 files changed, 49 insertions(+), 18 deletions(-)

diff --git a/resources/css/elements/tables.css b/resources/css/elements/tables.css
index e944ae4ef22..fe9de417afe 100644
--- a/resources/css/elements/tables.css
+++ b/resources/css/elements/tables.css
@@ -163,6 +163,40 @@
     }
 }
 
+.widget-table {
+    @apply w-full max-w-full outline-hidden min-w-full overflow-x-auto text-start;
+
+    thead {
+        th {
+            @apply text-sm font-medium text-start;
+            @apply p-0.75;
+        }
+
+        th[data-column="date"] {
+            @apply text-end;
+        }
+    }
+
+    tbody {
+        @apply text-sm;
+
+        tr {
+            td {
+                @apply p-0.75 text-sm;
+            }
+
+        }
+
+        .type-column {
+            @apply text-end;
+        }
+    }
+
+    .date-index-field {
+        @apply whitespace-nowrap;
+    }
+}
+
 .table-drag-handle {
     @apply h-full cursor-grab hover:bg-gray-100 dark:hover:bg-gray-700 dark:opacity-75;
     background-image: url('../../svg/drag-dots.svg');
diff --git a/resources/js/components/entries/CollectionWidget.vue b/resources/js/components/entries/CollectionWidget.vue
index cfb229a6af7..c71793eadfa 100644
--- a/resources/js/components/entries/CollectionWidget.vue
+++ b/resources/js/components/entries/CollectionWidget.vue
@@ -15,22 +15,16 @@ import { Link } from '@inertiajs/vue3';
 const props = defineProps({
     additionalColumns: Array,
     collection: String,
-	icon: String,
+    icon: String,
     title: String,
     listingUrl: String,
-    initialPerPage: {
-        type: Number,
-        default: 5,
-    },
-    initialSortColumn: {
-        type: String,
-    },
-    initialSortDirection: {
-        type: String,
-    },
+    initialPerPage: { type: Number, default: 5 },
+    initialSortColumn: { type: String },
+    initialSortDirection: { type: String },
     canCreate: Boolean,
     createLabel: String,
     blueprints: Array,
+    showTableHeader: { type: Boolean, default: false },
 });
 
 const requestUrl = cp_url(`collections/${props.collection}/entries`);
@@ -72,8 +66,8 @@ function formatDate(value) {
                     {{ __('There are no entries in this collection') }}
                 </ui-description>
                 <div class="px-4 py-3">
-                    <table class="w-full [&_td]:p-0.75 [&_td]:text-sm" :class="{ 'opacity-50': loading }">
-                        <TableHead sr-only />
+                    <table class="w-full widget-table" :class="{ 'opacity-50': loading }">
+                        <TableHead :sr-only="!props.showTableHeader" />
                         <TableBody>
                             <template #cell-title="{ row: entry, isColumnVisible }">
                                 <div class="flex items-center gap-2">
@@ -85,7 +79,7 @@ function formatDate(value) {
                             </template>
                             <template #cell-date="{ row: entry, isColumnVisible }">
                                 <div
-                                    class="text-end font-mono text-xs whitespace-nowrap text-gray-500 antialiased px-2"
+                                    class="text-end font-inter tabular-nums text-xs whitespace-nowrap text-gray-600 dark:text-gray-400 antialiased px-2"
                                     v-text="formatDate(entry.date.date)"
                                     v-if="isColumnVisible('date')"
                                 />
diff --git a/resources/js/components/forms/FormWidget.vue b/resources/js/components/forms/FormWidget.vue
index 9c9d3f7770b..e2f1907c53a 100644
--- a/resources/js/components/forms/FormWidget.vue
+++ b/resources/js/components/forms/FormWidget.vue
@@ -17,6 +17,7 @@ const props = defineProps({
     title: { type: String },
     submissionsUrl: { type: String },
     initialPerPage: { type: Number, default: 5 },
+    showTableHeader: { type: Boolean, default: false },
 });
 
 const requestUrl = cp_url(`forms/${props.form}/submissions`);
@@ -61,8 +62,8 @@ function formatDate(value) {
                     {{ __('This form is awaiting responses') }}
                 </ui-description>
                 <div class="px-4 py-3">
-                    <table class="w-full [&_td]:p-0.5 [&_td]:text-sm">
-                        <TableHead sr-only />
+                    <table class="w-full widget-table">
+                        <TableHead :sr-only="!props.showTableHeader" />
                         <TableBody>
                             <template v-for="field in fields" #[`cell-${field}`]="{ row: submission }">
                                 <a
@@ -74,7 +75,7 @@ function formatDate(value) {
                             </template>
                             <template #cell-datestamp="{ row: submission }">
                                 <div
-                                    class="text-end font-mono text-xs whitespace-nowrap text-gray-500 antialiased"
+                                    class="text-end font-inter tabular-nums text-xs whitespace-nowrap text-gray-600 dark:text-gray-400 antialiased"
                                     v-text="formatDate(submission.datestamp)"
                                 />
                             </template>
diff --git a/resources/js/components/ui/Listing/TableHead.vue b/resources/js/components/ui/Listing/TableHead.vue
index beb65b85549..2eaf7b28a61 100644
--- a/resources/js/components/ui/Listing/TableHead.vue
+++ b/resources/js/components/ui/Listing/TableHead.vue
@@ -29,7 +29,7 @@ const hasVisibleHeader = computed(() => {
             >
                 <ToggleAll v-if="allowsSelections && allowsMultipleSelections" />
             </th>
-            <HeaderCell v-for="column in visibleColumns" :key="column.field" :column />
+            <HeaderCell v-for="column in visibleColumns" :key="column.field" :column :data-column="column.field" />
             <!-- <th class="type-column" v-if="type">
                 <template v-if="type === 'entries'">{{ __('Collection') }}</template>
                 <template v-if="type === 'terms'">{{ __('Taxonomy') }}</template>
diff --git a/src/Forms/Widget.php b/src/Forms/Widget.php
index c3dae36a27b..4d36333294d 100644
--- a/src/Forms/Widget.php
+++ b/src/Forms/Widget.php
@@ -29,6 +29,7 @@ public function component()
             'form' => $form->handle(),
             'fields' => $this->config('fields', []),
             'title' => $this->config('title', $form->title()),
+            'showTableHeader' => $this->config('show_table_header', false),
             'submissionsUrl' => cp_route('forms.show', $form->handle()),
             'initialPerPage' => $this->config('limit', 5),
         ]);
diff --git a/src/Widgets/Collection.php b/src/Widgets/Collection.php
index f64cec41420..2bd922e16bc 100644
--- a/src/Widgets/Collection.php
+++ b/src/Widgets/Collection.php
@@ -56,6 +56,7 @@ public function component()
             'collection' => $collection->handle(),
             'icon' => $collection->icon(),
             'title' => $this->config('title', $collection->title()),
+            'showTableHeader' => $this->config('show_table_header', false),
             'additionalColumns' => $columns,
             'filters' => Scope::filters('entries', [
                 'collection' => $collection->handle(),

From a72e66bdda03d51c2ea28b4a2c9645cef9f8a871 Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Tue, 3 Mar 2026 00:01:09 -0500
Subject: [PATCH 2/2] right align datestamp col too

---
 resources/css/elements/tables.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/resources/css/elements/tables.css b/resources/css/elements/tables.css
index fe9de417afe..9611ffcf867 100644
--- a/resources/css/elements/tables.css
+++ b/resources/css/elements/tables.css
@@ -172,7 +172,8 @@
             @apply p-0.75;
         }
 
-        th[data-column="date"] {
+        th[data-column="date"],
+        th[data-column="datestamp"] {
             @apply text-end;
         }
     }