@stacksjs/defaults 0.75.277 → 0.75.280

package/resources/components/Dashboard/Commerce/CommerceOrdersTable.stx

@@ -1,66 +1,93 @@
+@import('../UI/Table')
+
 <script client>
 import type { CommerceOrderRecord } from '../../../../app/Actions/Dashboard/Commerce/commerce-order-records'
-import { formatCurrency } from '@stacksjs/commerce/money'
 
 const records = useReactiveProp('records', [] as CommerceOrderRecord[])
 const loading = useReactiveProp('loading', false)
+/** The parent's sort select: a change hands the order back from a header sort. */
+const sortResetKey = useReactiveProp<unknown>('sortResetKey', '')
+/** The parent's search and filters: a change returns to the first page. */
+const pageResetKey = useReactiveProp<unknown>('pageResetKey', '')
 const emit = defineEmits()
 
 function label(value: string): string {
   return value.replaceAll('_', ' ').toLowerCase().replace(/\b\w/g, letter => letter.toUpperCase())
 }
 
-function formatMoney(value: number, currency: string): string {
-  return formatCurrency(value, currency)
+/**
+ * The pill's colour by tone rather than by status, so a status the table
+ * has not named still reads as pending, as the hand-rolled pill did.
+ */
+function statusTone(status: string): string {
+  const value = status.toUpperCase()
+  if (['DELIVERED', 'COMPLETED', 'PAID'].includes(value))
+    return 'done'
+  if (['CANCELED', 'CANCELLED', 'REFUNDED'].includes(value))
+    return 'stopped'
+  if (['PREPARING', 'PROCESSING', 'READY', 'SHIPPED'].includes(value))
+    return 'moving'
+  return 'pending'
 }
 
-function formatDate(value: string): string {
-  if (!value)
-    return 'Not recorded'
-  const normalized = /^\d{4}-\d{2}-\d{2} \d/.test(value)
-    ? `${value.replace(' ', 'T')}Z`
-    : value
-  const date = new Date(normalized)
-  return Number.isNaN(date.getTime())
-    ? value
-    : new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(date)
-}
+const COLUMNS = [
+  { key: 'orderLabel', label: 'Order', sortable: true, subtitleKey: 'itemsLabel', class: 'font-medium text-gray-900 whitespace-nowrap dark:text-white' },
+  { key: 'customerLabel', label: 'Customer', sortable: true, subtitleKey: 'customerEmail', class: 'text-gray-700 dark:text-neutral-200' },
+  // Integer minor units of the order's own currency.
+  { key: 'totalAmount', label: 'Total', type: 'currency' as const, currencyKey: 'currency', sortable: true, class: 'font-medium' },
+  { key: 'fulfillmentLabel', label: 'Fulfillment', sortable: true, subtitleKey: 'deliveryAddress', class: 'text-gray-700 dark:text-neutral-200' },
+  {
+    key: 'statusTone',
+    label: 'Status',
+    type: 'badge' as const,
+    sortable: true,
+    badgeLabelKey: 'statusLabel',
+    badgeClasses: {
+      done: 'bg-green-50 text-green-700 dark:bg-green-950/40 dark:text-green-300',
+      stopped: 'bg-red-50 text-red-700 dark:bg-red-950/40 dark:text-red-300',
+      moving: 'bg-blue-50 text-blue-700 dark:bg-blue-950/40 dark:text-blue-300',
+      pending: 'bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-300',
+    },
+  },
+  { key: 'createdAt', label: 'Created', type: 'datetime' as const, sortable: true, emptyText: 'Not recorded', class: 'whitespace-nowrap' },
+]
+
+const ROW_ACTIONS = [
+  { action: 'view', label: 'View order', icon: 'i-hugeicons-view' },
+  { action: 'edit', label: 'Edit order', icon: 'i-hugeicons-edit-02' },
+  { action: 'delete', label: 'Delete order', icon: 'i-hugeicons-delete-02', class: 'text-red-500' },
+]
+
+const rows = derived(() => records().map(record => ({
+  ...record,
+  orderLabel: `ORD-${record.id.padStart(5, '0')}`,
+  itemsLabel: `${record.itemCount} ${record.itemCount === 1 ? 'item' : 'items'}`,
+  customerLabel: record.customerName || 'Unassigned customer',
+  fulfillmentLabel: label(record.orderType),
+  statusTone: statusTone(record.status),
+  statusLabel: label(record.status),
+})))
 
-function statusClass(record: CommerceOrderRecord): string {
-  const status = record.status.toUpperCase()
-  if (['DELIVERED', 'COMPLETED', 'PAID'].includes(status))
-    return 'bg-green-50 text-green-700 dark:bg-green-950/40 dark:text-green-300'
-  if (['CANCELED', 'CANCELLED', 'REFUNDED'].includes(status))
-    return 'bg-red-50 text-red-700 dark:bg-red-950/40 dark:text-red-300'
-  if (['PREPARING', 'PROCESSING', 'READY', 'SHIPPED'].includes(status))
-    return 'bg-blue-50 text-blue-700 dark:bg-blue-950/40 dark:text-blue-300'
-  return 'bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-300'
+function handleRowAction(payload: { action: string, row: CommerceOrderRecord }): void {
+  emit(payload.action, payload.row)
 }
 </script>
 
-<div class="overflow-hidden bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
-  <div :if="loading()" class="flex items-center justify-center py-16 text-gray-500 text-sm dark:text-neutral-400"><span class="mr-2 h-4 w-4 animate-spin i-hugeicons-loading-03"></span>Loading orders</div>
-  <div :if="!loading() && records().length === 0" class="py-16 text-center">
-    <div class="mb-3 mx-auto h-8 w-8 text-gray-400 i-hugeicons-invoice-03"></div>
-    <p class="font-medium text-gray-900 text-sm dark:text-white">No orders found</p>
-    <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">Adjust the filters or add a native Order record.</p>
-  </div>
-  <div :if="!loading() && records().length > 0" class="overflow-x-auto">
-    <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
-      <thead class="bg-gray-50 dark:bg-neutral-900/60"><tr><th class="px-4 py-3 font-semibold text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Order</th><th class="px-4 py-3 font-semibold text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Customer</th><th class="px-4 py-3 font-semibold text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Total</th><th class="px-4 py-3 font-semibold text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Fulfillment</th><th class="px-4 py-3 font-semibold text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Status</th><th class="px-4 py-3 font-semibold text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Created</th><th class="px-4 py-3"><span class="sr-only">Actions</span></th></tr></thead>
-      <tbody class="divide-gray-100 divide-y dark:divide-neutral-700">
-        <template :for="record in records()" :key="record.id">
-          <tr class="hover:bg-gray-50/70 dark:hover:bg-neutral-900/40">
-            <td class="px-4 py-3 min-w-28 whitespace-nowrap"><Button variant="ghost" size="xs" @click="emit('view', record)">ORD-{{ record.id.padStart(5, '0') }}</Button><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ record.itemCount }} {{ record.itemCount === 1 ? 'item' : 'items' }}</p></td>
-            <td class="px-4 py-3 min-w-40"><p class="text-gray-700 text-sm dark:text-neutral-200">{{ record.customerName || 'Unassigned customer' }}</p><p :if="record.customerEmail" class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ record.customerEmail }}</p></td>
-            <td class="px-4 py-3 font-medium text-gray-700 text-sm dark:text-neutral-200">{{ formatMoney(record.totalAmount, record.currency) }}</td>
-            <td class="px-4 py-3 min-w-36"><p class="text-gray-700 text-sm dark:text-neutral-200">{{ label(record.orderType) }}</p><p :if="record.deliveryAddress" class="mt-1 max-w-48 text-gray-400 text-xs truncate dark:text-neutral-500">{{ record.deliveryAddress }}</p></td>
-            <td class="px-4 py-3"><span :class="'inline-flex px-2 py-1 font-medium text-xs rounded-full ' + statusClass(record)">{{ label(record.status) }}</span></td>
-            <td class="px-4 py-3 text-gray-700 text-sm whitespace-nowrap dark:text-neutral-200">{{ formatDate(record.createdAt) }}</td>
-            <td class="px-4 py-3"><div class="flex gap-1 justify-end"><Button variant="ghost" size="sm" iconOnly :ariaLabel="'View order ' + record.id" @click="emit('view', record)"><span class="block h-4 w-4 text-blue-500 i-hugeicons-view"></span></Button><Button variant="ghost" size="sm" iconOnly :ariaLabel="'Edit order ' + record.id" @click="emit('edit', record)"><span class="block h-4 w-4 text-blue-500 i-hugeicons-edit-02"></span></Button><Button variant="ghost" size="sm" iconOnly :ariaLabel="'Delete order ' + record.id" @click="emit('delete', record)"><span class="block h-4 w-4 text-red-500 i-hugeicons-delete-02"></span></Button></div></td>
-          </tr>
-        </template>
-      </tbody>
-    </table>
-  </div>
-</div>
+{{--
+  No `searchable` or `filterable`: the parent dashboard owns the search box
+  and the filter selects. Table pages the whole filtered list the parent passes.
+--}}
+<Table
+  :sort-reset-key="sortResetKey()"
+  :page-reset-key="pageResetKey()"
+  :columns="COLUMNS"
+  :data="rows()"
+  :loading="loading()"
+  :row-actions="ROW_ACTIONS"
+  action-label-key="id"
+  paginated
+  :page-size="12"
+  empty-title="No orders found"
+  empty-description="Adjust the filters or add a native Order record."
+  @row-action="handleRowAction"
+/>

package/resources/components/Dashboard/Commerce/CommercePaymentsDashboard.stx

@@ -200,7 +200,7 @@ onMount(() => {
       <label class="flex gap-2 items-center text-gray-500 text-sm dark:text-neutral-400">Sort<select x-model="sort" class="px-3 py-1.5 text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-700"><option value="newest">Newest</option><option value="oldest">Oldest</option><option value="amount">Highest amount</option><option value="status">Status</option></select></label>
     </div>
 
-    <CommercePaymentsTable :records="visibleRecords()" :loading="loading()" @view="openDetails" />
+    <CommercePaymentsTable :sort-reset-key="sort()" :records="visibleRecords()" :loading="loading()" @view="openDetails" />
   </section>
 </div>
 

package/resources/components/Dashboard/Commerce/CommercePaymentsTable.stx

@@ -6,6 +6,8 @@ import { formatCurrency } from '@stacksjs/commerce/money'
 
 const records = useReactiveProp('records', [] as PaymentRecord[])
 const loading = useReactiveProp('loading', false)
+/** The parent's sort select; a change hands the order back from a header sort. */
+const sortResetKey = useReactiveProp<unknown>('sortResetKey', '')
 const emit = defineEmits()
 
 /** `partiallyRefunded` and `bank_transfer` as words, each capitalized. */
@@ -83,6 +85,7 @@ function handleRowAction(payload: { action: string, row: PaymentRecord }): void
 </script>
 
 <Table
+  :sort-reset-key="sortResetKey()"
   :columns="COLUMNS"
   :data="rows()"
   :loading="loading()"

package/resources/components/Dashboard/Commerce/CommerceProductsDashboard.stx

@@ -8,7 +8,6 @@ import type {
 import { DashboardApiError, dashboardApi } from '../../../../functions/dashboard-api'
 import { pushToast } from '../../../../functions/toasts'
 import { minorToInput } from '@stacksjs/commerce/money'
-import { pageControls } from '../../../../functions/dashboard-list'
 
 interface ProductIndexResponse {
   records: CommerceProductRecord[]
@@ -34,8 +33,6 @@ const search = state('')
 const categoryFilter = state('all')
 const availabilityFilter = state('all')
 const sort = state('newest')
-const page = state(1)
-const pageSize = 10
 const loading = state(true)
 const loadError = state('')
 const dialogOpen = state(false)
@@ -94,15 +91,6 @@ function filteredRecords(): CommerceProductRecord[] {
     })
 }
 
-function pageCount(): number {
-  return Math.max(1, Math.ceil(filteredRecords().length / pageSize))
-}
-
-function visibleRecords(): CommerceProductRecord[] {
-  const selectedPage = Math.min(page(), pageCount())
-  return filteredRecords().slice((selectedPage - 1) * pageSize, selectedPage * pageSize)
-}
-
 function matchingLabel(): string {
   const count = filteredRecords().length
   return `${count} matching ${count === 1 ? 'product' : 'products'}`
@@ -146,13 +134,13 @@ function exportHref(): string {
   return `data:text/csv;charset=utf-8,${encodeURIComponent(`\uFEFF${csv}`)}`
 }
 
-effect(() => {
-  search()
-  categoryFilter()
-  availabilityFilter()
-  sort()
-  page.set(1)
-})
+/**
+ * What the table is showing: a change returns it to the first page, as this
+ * page's own pager did before the table took over paging.
+ */
+function viewKey(): string {
+  return JSON.stringify([search(), categoryFilter(), availabilityFilter(), sort()])
+}
 
 async function loadProducts(): Promise<void> {
   loading.set(true)
@@ -164,7 +152,6 @@ async function loadProducts(): Promise<void> {
     categories.set(Array.isArray(data.categories) ? data.categories : [])
     manufacturers.set(Array.isArray(data.manufacturers) ? data.manufacturers : [])
     defaultCurrency.set(data.defaultCurrency || 'USD')
-    page.set(Math.min(page(), Math.max(1, Math.ceil((data.records?.length || 0) / pageSize))))
   }
   catch (error) {
     loadError.set('Product records could not be loaded.')
@@ -260,8 +247,6 @@ async function deleteProduct(): Promise<void> {
   }
 }
 
-const { previousPage, nextPage } = pageControls(page, pageCount)
-
 onMount(() => {
   void loadProducts()
 })
@@ -294,14 +279,9 @@ onMount(() => {
 
     <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
       <p class="text-gray-500 text-sm dark:text-neutral-400">{{ matchingLabel() }}</p>
-      <div class="flex gap-2 items-center">
-        <Button variant="secondary" size="sm" :disabled="page() <= 1" @click="previousPage()">Previous</Button>
-        <span class="text-gray-500 text-sm dark:text-neutral-400">Page {{ Math.min(page(), pageCount()) }} of {{ pageCount() }}</span>
-        <Button variant="secondary" size="sm" :disabled="page() >= pageCount()" @click="nextPage()">Next</Button>
-      </div>
     </div>
 
-    <CommerceProductsTable :records="visibleRecords()" :loading="loading()" :currency="defaultCurrency()" @view="viewProduct" @edit="openEdit" @delete="openDelete" />
+    <CommerceProductsTable :sort-reset-key="sort()" :page-reset-key="viewKey()" :records="filteredRecords()" :loading="loading()" :currency="defaultCurrency()" @view="viewProduct" @edit="openEdit" @delete="openDelete" />
   </section>
 </div>
 

package/resources/components/Dashboard/Commerce/CommerceProductsTable.stx

@@ -1,9 +1,14 @@
+@import('../UI/Table')
+
 <script client>
 import type { CommerceProductRecord } from '../../../../app/Actions/Dashboard/Commerce/commerce-product-records'
-import { formatCurrency } from '@stacksjs/commerce/money'
 
 const records = useReactiveProp('records', [] as CommerceProductRecord[])
 const loading = useReactiveProp('loading', false)
+/** The parent's sort select: a change hands the order back from a header sort. */
+const sortResetKey = useReactiveProp<unknown>('sortResetKey', '')
+/** The parent's search and filters: a change returns to the first page. */
+const pageResetKey = useReactiveProp<unknown>('pageResetKey', '')
 const currency = useReactiveProp('currency', 'USD')
 const emit = defineEmits()
 
@@ -11,40 +16,82 @@ function initials(name: string): string {
   return name.split(/\s+/).filter(Boolean).slice(0, 2).map(part => part[0]?.toUpperCase() || '').join('') || 'PR'
 }
 
-function formatMoney(value: number): string {
-  return formatCurrency(value, currency())
-}
+/**
+ * The product cell is slotted for its initials, and inventory for its colour:
+ * none in stock reads red. Everything else is a column option.
+ */
+const COLUMNS = [
+  { key: 'nameLabel', label: 'Product', sortable: true, slotted: true },
+  { key: 'categoryName', label: 'Relationships', sortable: true, subtitleKey: 'manufacturerName', class: 'text-gray-700 dark:text-neutral-200' },
+  { key: 'price', label: 'Price', type: 'currency' as const, currencyKey: 'currency', sortable: true, class: 'font-medium whitespace-nowrap' },
+  { key: 'inventoryCount', label: 'Inventory', sortable: true, slotted: true },
+  {
+    key: 'availability',
+    label: 'Availability',
+    type: 'badge' as const,
+    sortable: true,
+    badgeClasses: { available: 'bg-green-50 text-green-700 dark:bg-green-950/40 dark:text-green-300' },
+    badgeLabels: { available: 'Available', unavailable: 'Unavailable' },
+  },
+  { key: 'variantsLabel', label: 'Related', subtitleKey: 'reviewsLabel', searchable: false, class: 'text-gray-500 text-xs dark:text-neutral-400' },
+]
+
+const ROW_ACTIONS = [
+  { action: 'view', label: 'View product', icon: 'i-hugeicons-view' },
+  { action: 'edit', label: 'Edit product', icon: 'i-hugeicons-edit-02' },
+  { action: 'delete', label: 'Delete product', icon: 'i-hugeicons-delete-02', class: 'text-red-500' },
+]
+
+const rows = derived(() => records().map(record => ({
+  ...record,
+  currency: currency(),
+  nameLabel: record.name || 'Unnamed product',
+  initials: initials(record.name),
+  descriptionLabel: record.description || 'No description',
+  outOfStock: record.inventoryCount === 0,
+  inventoryLabel: record.inventoryCount.toLocaleString(),
+  prepLabel: `${record.preparationTime} min prep`,
+  availability: record.isAvailable ? 'available' : 'unavailable',
+  variantsLabel: `${record.variantCount} variants, ${record.unitCount} units`,
+  reviewsLabel: `${record.reviewCount} reviews`,
+})))
 
-function availabilityClass(record: CommerceProductRecord): string {
-  return record.isAvailable
-    ? 'bg-green-50 text-green-700 dark:bg-green-950/40 dark:text-green-300'
-    : 'bg-gray-100 text-gray-600 dark:bg-neutral-700 dark:text-neutral-300'
+function handleRowAction(payload: { action: string, row: CommerceProductRecord }): void {
+  emit(payload.action, payload.row)
 }
 </script>
 
-<div class="overflow-hidden bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
-  <div :if="loading()" class="flex items-center justify-center py-16 text-gray-500 text-sm dark:text-neutral-400"><span class="mr-2 h-4 w-4 animate-spin i-hugeicons-loading-03"></span>Loading products</div>
-  <div :if="!loading() && records().length === 0" class="py-16 text-center">
-    <div class="mb-3 mx-auto h-8 w-8 text-gray-400 i-hugeicons-package"></div>
-    <p class="font-medium text-gray-900 text-sm dark:text-white">No products found</p>
-    <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">Adjust the filters or add a native Product record.</p>
-  </div>
-  <div :if="!loading() && records().length > 0" class="overflow-x-auto">
-    <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
-      <thead class="bg-gray-50 dark:bg-neutral-900/60"><tr><th class="px-4 py-3 font-semibold text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Product</th><th class="px-4 py-3 font-semibold text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Relationships</th><th class="px-4 py-3 font-semibold text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Price</th><th class="px-4 py-3 font-semibold text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Inventory</th><th class="px-4 py-3 font-semibold text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Availability</th><th class="px-4 py-3 font-semibold text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Related</th><th class="px-4 py-3"><span class="sr-only">Actions</span></th></tr></thead>
-      <tbody class="divide-gray-100 divide-y dark:divide-neutral-700">
-        <template :for="record in records()" :key="record.id">
-          <tr class="hover:bg-gray-50/70 dark:hover:bg-neutral-900/40">
-            <td class="px-4 py-3 min-w-56"><div class="flex gap-3 items-center"><div class="flex flex-none items-center justify-center h-9 w-9 font-semibold text-blue-700 text-xs dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40 rounded-md">{{ initials(record.name) }}</div><div class="min-w-0"><Button variant="ghost" size="xs" @click="emit('view', record)">{{ record.name || 'Unnamed product' }}</Button><p class="mt-1 max-w-52 text-gray-400 text-xs truncate dark:text-neutral-500">{{ record.description || 'No description' }}</p></div></div></td>
-            <td class="px-4 py-3 min-w-44"><p class="text-gray-700 text-sm dark:text-neutral-200">{{ record.categoryName }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ record.manufacturerName }}</p></td>
-            <td class="px-4 py-3 font-medium text-gray-700 text-sm whitespace-nowrap dark:text-neutral-200">{{ formatMoney(record.price) }}</td>
-            <td class="px-4 py-3 min-w-28"><p :class="'font-medium text-sm ' + (record.inventoryCount === 0 ? 'text-red-600 dark:text-red-400' : 'text-gray-700 dark:text-neutral-200')">{{ record.inventoryCount.toLocaleString() }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ record.preparationTime }} min prep</p></td>
-            <td class="px-4 py-3"><span :class="'inline-flex px-2 py-1 font-medium text-xs rounded-full ' + availabilityClass(record)">{{ record.isAvailable ? 'Available' : 'Unavailable' }}</span></td>
-            <td class="px-4 py-3 min-w-36 text-gray-500 text-xs dark:text-neutral-400"><p>{{ record.variantCount }} variants, {{ record.unitCount }} units</p><p class="mt-1">{{ record.reviewCount }} reviews</p></td>
-            <td class="px-4 py-3"><div class="flex gap-1 justify-end"><Button variant="ghost" size="sm" iconOnly :ariaLabel="'View product ' + record.name" @click="emit('view', record)"><span class="block h-4 w-4 text-blue-500 i-hugeicons-view"></span></Button><Button variant="ghost" size="sm" iconOnly :ariaLabel="'Edit product ' + record.name" @click="emit('edit', record)"><span class="block h-4 w-4 text-blue-500 i-hugeicons-edit-02"></span></Button><Button variant="ghost" size="sm" iconOnly :ariaLabel="'Delete product ' + record.name" @click="emit('delete', record)"><span class="block h-4 w-4 text-red-500 i-hugeicons-delete-02"></span></Button></div></td>
-          </tr>
-        </template>
-      </tbody>
-    </table>
-  </div>
-</div>
+{{--
+  No `searchable` or `filterable`: the parent dashboard owns the search box
+  and the filter selects. Table pages the whole filtered list the parent passes.
+--}}
+<Table
+  :sort-reset-key="sortResetKey()"
+  :page-reset-key="pageResetKey()"
+  :columns="COLUMNS"
+  :data="rows()"
+  :loading="loading()"
+  :row-actions="ROW_ACTIONS"
+  action-label-key="nameLabel"
+  paginated
+  :page-size="10"
+  empty-title="No products found"
+  empty-description="Adjust the filters or add a native Product record."
+  @row-action="handleRowAction"
+>
+  <template #cell="{ row, column }">
+    <template :if="column.key === 'nameLabel'">
+      <div class="flex gap-3 items-center">
+        <div class="flex flex-none items-center justify-center h-9 w-9 font-semibold text-blue-700 text-xs dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40 rounded-md" x-text="row.initials"></div>
+        <div class="min-w-0">
+          <p class="font-medium text-gray-900 text-sm dark:text-white" x-text="row.nameLabel"></p>
+          <p class="mt-1 max-w-52 text-gray-400 text-xs truncate dark:text-neutral-500" x-text="row.descriptionLabel"></p>
+        </div>
+      </div>
+    </template>
+    <template :if="column.key === 'inventoryCount'">
+      <p :class="'font-medium text-sm ' + (row.outOfStock ? 'text-red-600 dark:text-red-400' : 'text-gray-700 dark:text-neutral-200')" x-text="row.inventoryLabel"></p>
+      <p class="mt-1 text-gray-400 text-xs dark:text-neutral-500" x-text="row.prepLabel"></p>
+    </template>
+  </template>
+</Table>

package/resources/components/Dashboard/Commerce/CommerceReviewsDashboard.stx

@@ -43,8 +43,6 @@ const productFilter = state('all')
 const ratingFilter = state('all')
 const moderationFilter = state('all')
 const sort = state('newest')
-const page = state(1)
-const pageSize = 12
 const loading = state(true)
 const loadError = state('')
 const editingReview = state<ReviewRecord | null>(null)
@@ -109,24 +107,6 @@ function filteredRecords(): ReviewRecord[] {
     })
 }
 
-function totalPages(): number {
-  return Math.max(1, Math.ceil(filteredRecords().length / pageSize))
-}
-
-function visibleRecords(): ReviewRecord[] {
-  const safePage = Math.min(page(), totalPages())
-  const offset = (safePage - 1) * pageSize
-  return filteredRecords().slice(offset, offset + pageSize)
-}
-
-function rangeStart(): number {
-  return filteredRecords().length === 0 ? 0 : (Math.min(page(), totalPages()) - 1) * pageSize + 1
-}
-
-function rangeEnd(): number {
-  return Math.min(Math.min(page(), totalPages()) * pageSize, filteredRecords().length)
-}
-
 function metricCards(): Array<{ label: string, value: string }> {
   return [
     { label: 'Recorded', value: String(summary().total) },
@@ -137,14 +117,13 @@ function metricCards(): Array<{ label: string, value: string }> {
   ]
 }
 
-effect(() => {
-  search()
-  productFilter()
-  ratingFilter()
-  moderationFilter()
-  sort()
-  page.set(1)
-})
+/**
+ * What the table is showing: a change returns it to the first page, as this
+ * page's own pager did before the table took over paging.
+ */
+function viewKey(): string {
+  return JSON.stringify([search(), productFilter(), ratingFilter(), moderationFilter(), sort()])
+}
 
 async function loadReviews(): Promise<void> {
   loading.set(true)
@@ -154,8 +133,6 @@ async function loadReviews(): Promise<void> {
     records.set(Array.isArray(data.records) ? data.records : [])
     summary.set(data.summary ?? { ...emptySummary })
     products.set(Array.isArray(data.products) ? data.products : [])
-    if (page() > totalPages())
-      page.set(totalPages())
   }
   catch (error) {
     loadError.set('Review records could not be loaded.')
@@ -335,7 +312,7 @@ onMount(() => {
 
     <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
       <p class="text-gray-500 text-sm dark:text-neutral-400">
-        Showing {{ rangeStart() }} to {{ rangeEnd() }} of {{ filteredRecords().length }} reviews
+        {{ filteredRecords().length }} matching {{ filteredRecords().length === 1 ? 'review' : 'reviews' }}
       </p>
       <label class="flex gap-2 items-center text-gray-500 text-sm dark:text-neutral-400">
         Sort
@@ -350,7 +327,9 @@ onMount(() => {
     </div>
 
     <CommerceReviewsTable
-      :reviews="visibleRecords()"
+      :sort-reset-key="sort()"
+      :page-reset-key="viewKey()"
+      :reviews="filteredRecords()"
       :loading="loading()"
       :busy-id="busyId()"
       @approve="toggleApproval"
@@ -359,11 +338,6 @@ onMount(() => {
       @delete="openDelete"
     />
 
-    <nav :if="totalPages() > 1" aria-label="Review pages" class="flex items-center justify-between">
-      <Button variant="secondary" :disabled="page() <= 1" @click="page.update(value => value - 1)">Previous</Button>
-      <span class="text-gray-500 text-sm dark:text-neutral-400">Page {{ page() }} of {{ totalPages() }}</span>
-      <Button variant="secondary" :disabled="page() >= totalPages()" @click="page.update(value => value + 1)">Next</Button>
-    </nav>
   </section>
 </div>