Show the rows-per-page size every list opens with (#531)

src/__tests__/components/data-table-pagination.test.tsx

@@ -0,0 +1,31 @@
+import { describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { DataTablePagination } from '@/components/data-table-pagination'
+
+/**
+ * The rows-per-page choice shows the size the list is using. The customer,
+ * vehicle, work order, quote, inspection, inventory and labor preset lists all
+ * open at 20 rows, which the choices did not include, so the box was empty.
+ */
+describe('rows per page', () => {
+  const footer = (pageSize: number) =>
+    render(
+      <DataTablePagination
+        total={57}
+        page={1}
+        pageSize={pageSize}
+        totalPages={Math.ceil(57 / pageSize)}
+        onNavigate={vi.fn()}
+      />
+    )
+
+  it('shows a size that is not one of the usual choices', () => {
+    footer(20)
+    expect(screen.getByRole('combobox')).toHaveTextContent('20')
+  })
+
+  it('shows one of the usual choices as it is', () => {
+    footer(25)
+    expect(screen.getByRole('combobox')).toHaveTextContent('25')
+  })
+})

src/components/data-table-pagination.tsx

@@ -46,6 +46,12 @@ export function DataTablePagination({
   const t = useTranslations('common.pagination')
   if (total === 0) return null
 
+  // The size in use is always one of the choices. Most lists open at 20, which
+  // the default choices do not offer, and a Select whose value is not among its
+  // items shows nothing at all.
+  const sizes = pageSizes.includes(String(pageSize))
+    ? pageSizes
+    : [...pageSizes, String(pageSize)].sort((a, b) => Number(a) - Number(b))
   const startItem = (page - 1) * pageSize + 1
   const endItem = Math.min(page * pageSize, total)
   const goTo = (target: number) => onNavigate({ [pageParam]: target })
@@ -62,7 +68,7 @@ export function DataTablePagination({
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
-            {pageSizes.map((size) => (
+            {sizes.map((size) => (
               <SelectItem key={size} value={size}>
                 {size}
               </SelectItem>