custom table width

app/(authenticated)/chunithm/page.tsx

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

app/globals.css

@@ -74,3 +74,4 @@
       @apply bg-background text-foreground;
     }
   }
+

components/scoreplaylog/data-table.tsx

@@ -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 (
+  return <DataTable columns={columns} data={songs} />;
-      <DataTable columns={columns} data={songs} />
-   
-  );
 };
 
 export default ChunithmScorePlaylog;