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-col gap-3 px-4 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
-      <div className="flex flex-wrap items-center gap-3">
+      <div>
-        <span>
+        {selectedRowCount} of {totalItems} row(s) selected.
-          Showing {rows} of {totalItems}
+      </div>
-        </span>
+
+      <div className="flex flex-wrap items-center gap-4 sm:justify-end">
         {onPageSizeChange ? (
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-2 text-foreground">
-            <span>Rows per page</span>
+            <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">
+        <div className="min-w-24 text-foreground font-medium">
-        <Button
+          Page {pageIndex + 1} of {pageCount}
-          variant="outline"
+        </div>
-          size="sm"
+
-          onClick={() => table.previousPage()}
+        <div className="flex items-center gap-2">
-          disabled={!table.getCanPreviousPage()}
+          <Button
-        >
+            type="button"
-          <ChevronLeft className="size-4" />
+            variant="outline"
-          Previous
+            size="icon-sm"
-        </Button>
+            className="size-8 shadow-none"
-        <Button
+            onClick={() => table.setPageIndex(0)}
-          variant="outline"
+            disabled={!table.getCanPreviousPage()}
-          size="sm"
+            aria-label="Go to first page"
-          onClick={() => table.nextPage()}
+          >
-          disabled={!table.getCanNextPage()}
+            <ChevronsLeft className="size-4" />
-        >
+          </Button>
-          Next
+          <Button
-          <ChevronRight className="size-4" />
+            type="button"
-        </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>
   );

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

@@ -21,26 +21,35 @@ const TopHeader = ({
   tableTools,
 }: TopHeaderProps) => {
   return (
-    <div className="space-y-4">
+    <div className="space-y-3">
       {(title || onAddNew) && (
-        <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
-          <div>
+          <div className="min-w-0">
-            {title ? <h2>{title}</h2> : null}
+            {title ? <h2 className="text-lg font-semibold">{title}</h2> : null}
-            <p className="text-muted-foreground">Total {itemCount ?? 0}</p>
+            <p className="text-sm text-muted-foreground">
+              Total {itemCount ?? 0}
+            </p>
           </div>
           {onAddNew ? (
-            <Button onClick={onAddNew}>
+            <Button onClick={onAddNew} size="sm" className="w-fit">
-              <Plus className="mr-2 size-4" />
+              <Plus className="size-4" />
               {addButtonText}
             </Button>
           ) : null}
         </div>
       )}
+
       {(toolbar || tableTools) && (
         <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-          <div className="min-w-0 flex-1">{toolbar}</div>
+          {toolbar ? (
+            <div className="min-w-0 flex-1 **:data-[slot=input-group]:border-border [&_[data-slot=input-group]]:bg-background [&_[data-slot=input-group]]:shadow-none [&_[data-slot=select-trigger]]:border-border [&_[data-slot=select-trigger]]:bg-background [&_[data-slot=select-trigger]]:shadow-none">
+              {toolbar}
+            </div>
+          ) : null}
           {tableTools ? (
-            <div className="flex shrink-0 justify-end">{tableTools}</div>
+            <div className="flex shrink-0 justify-end **:data-[slot=button]:shadow-none">
+              {tableTools}
+            </div>
           ) : null}
         </div>
       )}

src/components/data-table/TableHeader.tsx

@@ -16,7 +16,7 @@ import { getPinnedColumnStyles } from './columnStyles';
 
 const TableHeader = <TData, _>({ table }: { table: Table<TData> }) => {
   return (
-    <ShadTableHeader className="sticky top-0 z-20 bg-card">
+    <ShadTableHeader className="sticky top-0 z-20 bg-muted/70 backdrop-blur supports-backdrop-filter:bg-muted/60">
       {table.getHeaderGroups().map((headerGroup) => (
         <TableRow key={headerGroup.id}>
           {headerGroup.headers.map((header) => {
@@ -39,9 +39,9 @@ const TableHeader = <TData, _>({ table }: { table: Table<TData> }) => {
                   canSort ? header.column.getToggleSortingHandler() : undefined
                 }
                 className={cn(
-                  'h-10 max-w-0 overflow-hidden border-b border-border bg-card px-2 text-foreground transition-colors',
+                  'h-11 max-w-0 overflow-hidden border-b border-border bg-muted/70 px-4 text-sm font-semibold text-foreground transition-colors',
-                  canSort && 'cursor-pointer select-none hover:bg-muted/60',
+                  canSort && 'cursor-pointer select-none hover:bg-muted',
-                  sortDirection && 'bg-muted/70',
+                  sortDirection && 'bg-muted',
                 )}
               >
                 {header.isPlaceholder ? null : (

src/components/data-table/TableSearchInput.tsx

@@ -23,14 +23,20 @@ export function TableSearchInput({
   className,
 }: TableSearchInputProps) {
   return (
-    <InputGroup className={cn('md:max-w-xs', className)}>
+    <InputGroup
+      className={cn(
+        'h-9 border-border bg-background shadow-none md:max-w-xs',
+        className,
+      )}
+    >
       <InputGroupAddon>
-        <Search />
+        <Search className="size-4" />
       </InputGroupAddon>
       <InputGroupInput
         value={value}
         onChange={(event) => onChange(event.target.value)}
         placeholder={placeholder}
+        className="placeholder:text-muted-foreground/70"
       />
     </InputGroup>
   );

src/components/data-table/index.tsx

@@ -210,8 +210,8 @@ function DataTableContent<TData, TValue>({
     },
     manualPagination: !!pagination,
     manualSorting: isManualSorting,
-    pageCount: pagination?.totalItems
+    pageCount: pagination
-      ? Math.ceil(pagination.totalItems / pagination.limit)
+      ? Math.ceil((pagination.totalItems ?? data.length) / pagination.limit)
       : -1,
     state: {
       rowSelection,
@@ -247,7 +247,7 @@ function DataTableContent<TData, TValue>({
 
   return (
     <>
-      <section className="space-y-4 rounded-lg border bg-card p-4">
+      <section className="space-y-3">
         <TopHeader
           title={onAddNew ? title : undefined}
           itemCount={pagination?.totalItems ?? data.length}
@@ -259,9 +259,9 @@ function DataTableContent<TData, TValue>({
           }
         />
 
-        <div>
+        <div className="overflow-hidden rounded-lg border border-border bg-background">
           <Table
-            containerClassName="max-h-[calc(100vh-350px)] overflow-y-auto"
+            containerClassName="max-h-[calc(100vh-350px)] overflow-auto"
             className="table-fixed border-separate border-spacing-0"
             style={{ width: '100%', minWidth: table.getTotalSize() }}
           >
@@ -273,7 +273,7 @@ function DataTableContent<TData, TValue>({
                     {columns.map((_, colIdx) => (
                       <TableCell
                         key={colIdx}
-                        className="border-b border-border"
+                        className="h-13 border-b border-border px-4 py-3"
                       >
                         <Skeleton className="h-4 w-full max-w-35" />
                       </TableCell>
@@ -290,7 +290,9 @@ function DataTableContent<TData, TValue>({
                       const truncate = shouldTruncateCell(cell.column);
                       const pinned = cell.column.getIsPinned();
                       const isActionsCell = cell.column.id === 'actions';
-                      const isRowClickable = Boolean(onRowClick && !isActionsCell);
+                      const isRowClickable = Boolean(
+                        onRowClick && !isActionsCell,
+                      );
                       const content = flexRender(
                         cell.column.columnDef.cell,
                         cell.getContext(),
@@ -306,8 +308,8 @@ function DataTableContent<TData, TValue>({
                               : undefined
                           }
                           className={cn(
-                            'max-w-0 overflow-hidden border-b border-border',
+                            'h-13 max-w-0 overflow-hidden border-b border-border px-4 py-3 text-sm',
-                            pinned && 'bg-card',
+                            pinned && 'bg-background',
                             isRowClickable && 'cursor-pointer',
                             isActionsCell && 'cursor-default',
                           )}