custom table width

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;