[6.x] Add option to show widget table headers

resources/css/elements/tables.css

@@ -163,6 +163,41 @@
     }
 }
 
+.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"],
+        th[data-column="datestamp"] {
+            @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');

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')"
                                 />

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>

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>

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),
         ]);

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(),