improve table with better row sizing

frontend/src/components/resources/build/table.tsx

@@ -19,16 +19,19 @@ export const BuildTable = ({ search }: { search?: string }) => {
             <SortableHeader column={column} title="Name" />
           ),
           cell: ({ row }) => <ResourceLink type="Build" id={row.original.id} />,
-        },
-        {
-          header: "Version",
-          accessorFn: ({ info }) => fmt_version(info.version),
+          size: 200,
         },
         {
           accessorKey: "info.repo",
           header: ({ column }) => (
             <SortableHeader column={column} title="Repo" />
           ),
+          size: 200,
+        },
+        {
+          header: "Version",
+          accessorFn: ({ info }) => fmt_version(info.version),
+          size: 100,
         },
         {
           accessorKey: "info.state",
@@ -38,6 +41,7 @@ export const BuildTable = ({ search }: { search?: string }) => {
           cell: ({ row }) => (
             <BuildComponents.Status.State id={row.original.id} />
           ),
+          size: 100,
         },
         {
           header: "Tags",

frontend/src/components/resources/deployment/table.tsx

@@ -33,6 +33,7 @@ export const DeploymentTable = ({
           cell: ({ row }) => (
             <ResourceLink type="Deployment" id={row.original.id} />
           ),
+          size: 200,
         },
         {
           accessorKey: "info.image",
@@ -46,6 +47,7 @@ export const DeploymentTable = ({
               },
             },
           }) => <Image build_id={build_id} image={image} />,
+          size: 200,
         },
         {
           accessorKey: "info.server_id",
@@ -67,6 +69,7 @@ export const DeploymentTable = ({
           cell: ({ row }) => (
             <ResourceLink type="Server" id={row.original.info.server_id} />
           ),
+          size: 200,
         },
         {
           accessorKey: "info.state",
@@ -76,6 +79,7 @@ export const DeploymentTable = ({
           cell: ({ row }) => (
             <DeploymentComponents.Status.State id={row.original.id} />
           ),
+          size: 100,
         },
         {
           header: "Tags",

frontend/src/components/resources/repo/table.tsx

@@ -18,18 +18,21 @@ export const RepoTable = ({ search }: { search?: string }) => {
             <SortableHeader column={column} title="Name" />
           ),
           cell: ({ row }) => <ResourceLink type="Repo" id={row.original.id} />,
+          size: 200,
         },
         {
           accessorKey: "info.repo",
           header: ({ column }) => (
             <SortableHeader column={column} title="Repo" />
           ),
+          size: 200,
         },
         {
           accessorKey: "info.branch",
           header: ({ column }) => (
             <SortableHeader column={column} title="Branch" />
           ),
+          size: 200,
         },
         {
           accessorKey: "info.state",
@@ -39,6 +42,7 @@ export const RepoTable = ({ search }: { search?: string }) => {
           cell: ({ row }) => (
             <RepoComponents.Status.State id={row.original.id} />
           ),
+          size: 100,
         },
         {
           header: "Tags",

frontend/src/components/resources/server/table.tsx

@@ -20,6 +20,7 @@ export const ServerTable = ({ search }: { search?: string }) => {
           cell: ({ row }) => (
             <ResourceLink type="Server" id={row.original.id} />
           ),
+          size: 200,
         },
         {
           accessorKey: "id",
@@ -51,13 +52,9 @@ export const ServerTable = ({ search }: { search?: string }) => {
           header: ({ column }) => (
             <SortableHeader column={column} title="State" />
           ),
-          cell: ({
-            row: {
-              original: { id },
-            },
-          }) => {
-            return <ServerComponents.Status.State id={id} />;
-          },
+          cell: ({ row }) => (
+            <ServerComponents.Status.State id={row.original.id} />
+          ),
         },
         {
           header: "Tags",

frontend/src/ui/data-table.tsx

@@ -77,7 +77,10 @@ export function DataTable<TData, TValue>({
                   <TableHead
                     key={header.id}
                     colSpan={header.colSpan}
-                    className="border-x first:border-r first:border-l-0 last:border-l last:border-r-0 whitespace-nowrap"
+                    className={cn(
+                      "border-x first:border-r first:border-l-0 last:border-l last:border-r-0 whitespace-nowrap",
+                      `w-[${header.column.getSize()}px]`
+                    )}
                   >
                     {header.isPlaceholder
                       ? null
@@ -100,15 +103,24 @@ export function DataTable<TData, TValue>({
                 onClick={() => onRowClick && onRowClick(row.original)}
                 className={cn(onRowClick && "cursor-pointer")}
               >
-                {row.getVisibleCells().map((cell) => (
-                  <TableCell
-                    key={cell.id}
-                    // className="p-4 border-x first:border-r first:border-l-0 last:border-l last:border-r-0"
-                    className="p-4"
-                  >
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </TableCell>
-                ))}
+                {row.getVisibleCells().map((cell) => {
+                  const size = cell.column.getSize();
+                  return (
+                    <TableCell
+                      key={cell.id}
+                      // className="p-4 border-x first:border-r first:border-l-0 last:border-l last:border-r-0"
+                      className={cn(
+                        "p-4 overflow-hidden overflow-ellipsis",
+                        size && `w-[${size}px]`
+                      )}
+                    >
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  );
+                })}
               </TableRow>
             ))
           ) : (