Fix the width of the tables' columns

Vizzuality · Oct 11, 2024 · 8410e58 · 8410e58
1 parent cd1d4c9
commit 8410e58
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git a/frontend/src/containers/map/content/details/table/expansion-controls/index.tsx b/frontend/src/containers/map/content/details/table/expansion-controls/index.tsx
@@ -24,7 +24,7 @@ const ExpansionControls: React.FC<ExpansionControlsProps> = ({ row, children })
   const toggleExpanded = getToggleExpandedHandler();
 
   return (
-    <div className="flex items-center">
+    <div className="flex max-w-full items-center">
       {isRowExpandable && (
         <button
           type="button"
@@ -42,6 +42,7 @@ const ExpansionControls: React.FC<ExpansionControlsProps> = ({ row, children })
       )}
       <span
         className={cn({
+          'w-full overflow-hidden whitespace-normal': true,
           'flex items-center pl-3': !isParentRow,
           'ml-6': isParentRow && !isRowExpandable,
         })}

diff --git a/frontend/src/containers/map/content/details/table/index.tsx b/frontend/src/containers/map/content/details/table/index.tsx
@@ -58,6 +58,9 @@ const MapTable: MapTableProps<unknown> = <TData,>({
     onSortingChange,
     onPaginationChange,
     rowCount,
+    defaultColumn: {
+      size: 200,
+    },
   });
 
   // NOTE: do not memoize so that the table is re-rendered if the data changes
@@ -95,11 +98,16 @@ const MapTable: MapTableProps<unknown> = <TData,>({
                     ref={isFirstColumn ? firstColumnRef : null}
                     className={cn({
                       'border-r border-dashed border-black': shouldAddColumnSeparator(id),
-                      'h-10': true,
-                      'pl-6 pr-16': !isMapColumn,
+                      'h-10 overflow-hidden': true,
+                      'px-6': !isMapColumn,
                       'pl-0 pr-5': isFirstColumn,
                       'pr-0': isLastColumn,
                     })}
+                    style={{
+                      minWidth: column.getSize() ? `${column.getSize()}px` : undefined,
+                      width: column.getSize() ? `${column.getSize()}px` : undefined,
+                      maxWidth: column.getSize() ? `${column.getSize()}px` : undefined,
+                    }}
                   >
                     {flexRender(column.columnDef.header, header.getContext())}
                   </th>
@@ -135,15 +143,20 @@ const MapTable: MapTableProps<unknown> = <TData,>({
                       <td
                         key={cell.id}
                         className={cn({
-                          'h-16 pl-6': true,
-                          'pl-6 pr-16 ': !isMapColumn,
+                          'overflow-hidden whitespace-normal py-5 pl-6': true,
+                          'px-6 ': !isMapColumn,
                           '-mt-px -mb-px': isMapColumn,
                           'pl-0 pr-5': isFirstColumn,
                           'pr-0': isLastColumn,
                           'border-r border-dashed border-black': shouldAddColumnSeparator(
                             column.id
                           ),
                         })}
+                        style={{
+                          minWidth: column.getSize() ? `${column.getSize()}px` : undefined,
+                          width: column.getSize() ? `${column.getSize()}px` : undefined,
+                          maxWidth: column.getSize() ? `${column.getSize()}px` : undefined,
+                        }}
                       >
                         {flexRender(column.columnDef.cell, cell.getContext())}
                       </td>

diff --git a/frontend/src/containers/map/content/details/tables/national-highseas/hooks.tsx b/frontend/src/containers/map/content/details/tables/national-highseas/hooks.tsx
@@ -269,6 +269,7 @@ export const useColumns = (
             </ExpansionControls>
           );
         },
+        size: 300,
       },
       {
         id: 'environment.name',
-Original file line number
+Diff line change
@@ Expand Up / @@ -269,6 +269,7 @@ export const useColumns = ( @@
                 </ExpansionControls>
               );
             },
+            size: 300,
           },
           {
             id: 'environment.name',
@@ Expand Down @@