custom table width

app/(authenticated)/chunithm/page.tsx

@@ -2,9 +2,10 @@ import ChunithmScorePlaylog from "@/components/scoreplaylog/page";
 
 const ChunithmPage = () => {
   return (
-    <div className="p-10">
-
-    <ChunithmScorePlaylog/>
+    <div className="h-screen flex items-center justify-center overflow-y-scroll no-scrollbar">
+      <div className="w-[70vw]">
+        <ChunithmScorePlaylog />
+      </div>
     </div>
   );
 };

app/globals.css

@@ -73,4 +73,5 @@
     body {
       @apply bg-background text-foreground;
     }
-  }
+  }
+

components/scoreplaylog/data-table.tsx

@@ -34,7 +34,7 @@ export function DataTable<TData, TValue>({
   });
 
   return (
-    <div className="rounded-md border">
+    <div className="rounded-md border   ">
       <Table>
         <TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (
@@ -60,7 +60,7 @@ export function DataTable<TData, TValue>({
                 data-state={row.getIsSelected() && "selected"}
               >
                 {row.getVisibleCells().map((cell) => (
-                  <TableCell key={cell.id}>
+                  <TableCell key={cell.id} className="p-5">
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
                   </TableCell>
                 ))}

components/scoreplaylog/page.tsx

@@ -5,7 +5,7 @@ import { z } from "zod";
 import { columns } from "./colums";
 
 const userSchema = z.object({
-  UserId: z.number()
+  UserId: z.number(),
 });
 
 const ChunithmScorePlaylog = async () => {
@@ -23,10 +23,7 @@ const ChunithmScorePlaylog = async () => {
 
   const songs = await getSongsWithTitles(TypedUser.data.UserId);
 
-  return (
-      <DataTable columns={columns} data={songs} />
-   
-  );
+  return <DataTable columns={columns} data={songs} />;
 };
 
 export default ChunithmScorePlaylog;