feat: modify table design

src/components/data-table/Footer/index.tsx

@@ -1,7 +1,12 @@
 'use client';
 
 import { Table } from '@tanstack/react-table';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from 'lucide-react';
 
 import { Button } from '@/components/ui/button';
 import {
@@ -25,26 +30,33 @@ export function TableFooter<TData>({
   pageSize?: number;
   onPageSizeChange?: (pageSize: number) => void;
 }) {
-  const rows = table.getRowModel().rows.length;
   const currentPageSize = pageSize ?? table.getState().pagination.pageSize;
+  const selectedRowCount = Object.keys(table.getState().rowSelection).length;
+  const pageIndex = table.getState().pagination.pageIndex;
+  const rawPageCount = table.getPageCount();
+  const pageCount = Math.max(
+    1,
+    Number.isFinite(rawPageCount) && rawPageCount > 0 ? rawPageCount : 1,
+  );
 
   return (
-    <div className="flex flex-col gap-3 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
-      <div className="flex flex-wrap items-center gap-3">
-        <span>
-          Showing {rows} of {totalItems}
-        </span>
+    <div className="flex flex-col gap-3 px-4 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
+      <div>
+        {selectedRowCount} of {totalItems} row(s) selected.
+      </div>
+
+      <div className="flex flex-wrap items-center gap-4 sm:justify-end">
         {onPageSizeChange ? (
-          <div className="flex items-center gap-2">
-            <span>Rows per page</span>
+          <div className="flex items-center gap-2 text-foreground">
+            <span className="font-medium">Rows per page</span>
             <Select
               value={String(currentPageSize)}
-              onValueChange={(value) => onPageSizeChange(Number(value))}
+              onValueChange={(value) => table.setPageSize(Number(value))}
             >
-              <SelectTrigger className="h-8 w-18 bg-background">
+              <SelectTrigger className="h-8 w-20 border-border bg-background shadow-none">
                 <SelectValue />
               </SelectTrigger>
-              <SelectContent>
+              <SelectContent align="end">
                 {PAGE_SIZE_OPTIONS.map((size) => (
                   <SelectItem key={size} value={String(size)}>
                     {size}
@@ -54,26 +66,57 @@ export function TableFooter<TData>({
             </Select>
           </div>
         ) : null}
-      </div>
-      <div className="flex gap-2">
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={() => table.previousPage()}
-          disabled={!table.getCanPreviousPage()}
-        >
-          <ChevronLeft className="size-4" />
-          Previous
-        </Button>
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={() => table.nextPage()}
-          disabled={!table.getCanNextPage()}
-        >
-          Next
-          <ChevronRight className="size-4" />
-        </Button>
+
+        <div className="min-w-24 text-foreground font-medium">
+          Page {pageIndex + 1} of {pageCount}
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Button
+            type="button"
+            variant="outline"
+            size="icon-sm"
+            className="size-8 shadow-none"
+            onClick={() => table.setPageIndex(0)}
+            disabled={!table.getCanPreviousPage()}
+            aria-label="Go to first page"
+          >
+            <ChevronsLeft className="size-4" />
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            size="icon-sm"
+            className="size-8 shadow-none"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+            aria-label="Go to previous page"
+          >
+            <ChevronLeft className="size-4" />
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            size="icon-sm"
+            className="size-8 shadow-none"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+            aria-label="Go to next page"
+          >
+            <ChevronRight className="size-4" />
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            size="icon-sm"
+            className="size-8 shadow-none"
+            onClick={() => table.setPageIndex(pageCount - 1)}
+            disabled={!table.getCanNextPage()}
+            aria-label="Go to last page"
+          >
+            <ChevronsRight className="size-4" />
+          </Button>
+        </div>
       </div>
     </div>
   );