From a863ef2597769177ea854180a19921d2ca01f714 Mon Sep 17 00:00:00 2001
From: fyui001 <yun.cod@gmail.com>
Date: Fri, 10 Jul 2026 15:52:19 +0900
Subject: [PATCH] Move table pagination into the card footer

Relocate the page-size select and pager from the card header to a
bordered footer with a total count on the left, leaving the header to
the title alone. The footer select opens upward.
---
 components/common/PaginatedTable.tsx | 54 ++++++++++++++++------------
 1 file changed, 31 insertions(+), 23 deletions(-)

diff --git a/components/common/PaginatedTable.tsx b/components/common/PaginatedTable.tsx
index 3dc2813..0cfcdea 100644
--- a/components/common/PaginatedTable.tsx
+++ b/components/common/PaginatedTable.tsx
@@ -8,7 +8,13 @@ import {
   SelectTrigger,
   SelectValue,
 } from 'components/ui/select'
-import { Card, CardContent, CardHeader, CardTitle } from 'components/ui/card'
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from 'components/ui/card'
 import { ChevronLeft, ChevronRight } from 'lucide-react'
 import { type ReactNode } from 'react'
 import { type ColumnDef } from '@tanstack/react-table'
@@ -56,19 +62,33 @@ export default function PaginatedTable<T>({
 }: PaginatedTableProps<T>) {
   return (
     <Card className="flex min-h-0 flex-1 flex-col">
-      <CardHeader className="flex-row items-center justify-between">
-        <CardTitle>
-          {title} ({total})
-        </CardTitle>
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+      </CardHeader>
+      <CardContent className="min-h-0 flex-1 p-0">
+        <DataTable
+          columns={columns}
+          data={items}
+          trackBy={trackBy}
+          loading={loading}
+          loadingText={loadingText}
+          emptyText={emptyText}
+          onRowClick={onRowClick}
+          scrollAreaClassName="h-full overflow-auto"
+        />
+      </CardContent>
+      <CardFooter className="justify-between border-t pt-4">
+        <div className="text-sm text-muted-foreground">全 {total} 件</div>
         <div className="flex items-center gap-2">
           <Select
             value={String(perPage)}
             onValueChange={(v) => onPageSizeChange(Number(v))}
           >
-            <SelectTrigger className="w-24">
+            <SelectTrigger size="sm" className="w-24">
               <SelectValue />
             </SelectTrigger>
-            <SelectContent>
+            {/* footer 下端の Select なので上方向に開く */}
+            <SelectContent position="popper" side="top" align="end">
               {PAGE_SIZE_OPTIONS.map((o) => (
                 <SelectItem key={o.value} value={o.value}>
                   {o.label}
@@ -79,19 +99,19 @@ export default function PaginatedTable<T>({
           <div className="flex items-center gap-1">
             <Button
               variant="outline"
-              size="icon"
+              size="icon-sm"
               aria-label="前のページ"
               disabled={currentPage <= 1}
               onClick={() => onPageChange(currentPage - 1)}
             >
               <ChevronLeft className="size-4" />
             </Button>
-            <span className="text-sm px-2">
+            <span className="px-2 text-sm">
               {currentPage} / {lastPage}
             </span>
             <Button
               variant="outline"
-              size="icon"
+              size="icon-sm"
               aria-label="次のページ"
               disabled={currentPage >= lastPage}
               onClick={() => onPageChange(currentPage + 1)}
@@ -100,19 +120,7 @@ export default function PaginatedTable<T>({
             </Button>
           </div>
         </div>
-      </CardHeader>
-      <CardContent className="min-h-0 flex-1 p-0">
-        <DataTable
-          columns={columns}
-          data={items}
-          trackBy={trackBy}
-          loading={loading}
-          loadingText={loadingText}
-          emptyText={emptyText}
-          onRowClick={onRowClick}
-          scrollAreaClassName="h-full overflow-auto"
-        />
-      </CardContent>
+      </CardFooter>
     </Card>
   )
 }