feat: modify table design

src/components/data-table/index.tsx

@@ -210,8 +210,8 @@ function DataTableContent<TData, TValue>({
     },
     manualPagination: !!pagination,
     manualSorting: isManualSorting,
-    pageCount: pagination?.totalItems
-      ? Math.ceil(pagination.totalItems / pagination.limit)
+    pageCount: pagination
+      ? 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',
-                            pinned && 'bg-card',
+                            'h-13 max-w-0 overflow-hidden border-b border-border px-4 py-3 text-sm',
+                            pinned && 'bg-background',
                             isRowClickable && 'cursor-pointer',
                             isActionsCell && 'cursor-default',
                           )}