Lucas/t 295 fix checkbox column width (#261)

* wip

* Fixed table and column width

* Use last resizable column instead of table width 100%

* Removed comments

* Fix lint

* Fixed table theme

* Removed left clickable margin

* Removed overflow

* Added table width

front/src/modules/ui/components/table/CheckboxCell.tsx

@@ -15,10 +15,7 @@ type OwnProps = {
 };
 
 const StyledContainer = styled.div`
-  width: 32px;
   height: 32px;
-  margin-left: -${(props) => props.theme.table.horizontalCellMargin};
-  padding-left: ${(props) => props.theme.table.horizontalCellMargin};
 
   display: flex;
   align-items: center;

front/src/modules/ui/components/table/EntityTable.tsx

@@ -39,8 +39,8 @@ type OwnProps<
 };
 
 const StyledTable = styled.table`
-  min-width: 1000px;
-  width: calc(100% - 2 * ${(props) => props.theme.table.horizontalCellMargin});
+  width: calc(100% - ${(props) => props.theme.table.horizontalCellMargin} * 2);
+
   border-radius: 4px;
   border-spacing: 0;
   border-collapse: collapse;
@@ -54,11 +54,17 @@ const StyledTable = styled.table`
     padding: 0;
     border: 1px solid ${(props) => props.theme.tertiaryBackground};
     text-align: left;
+
     :last-child {
       border-right-color: transparent;
     }
     :first-of-type {
       border-left-color: transparent;
+      border-right-color: transparent;
+    }
+    :last-of-type {
+      width: 100%;
+      min-width: 0;
     }
   }
 
@@ -67,12 +73,19 @@ const StyledTable = styled.table`
     color: ${(props) => props.theme.text80};
     padding: 0;
     border: 1px solid ${(props) => props.theme.tertiaryBackground};
+
     text-align: left;
+
     :last-child {
       border-right-color: transparent;
     }
     :first-of-type {
       border-left-color: transparent;
+      border-right-color: transparent;
+    }
+    :last-of-type {
+      width: 100%;
+      min-width: 0;
     }
   }
 `;
@@ -160,7 +173,9 @@ export function EntityTable<
                   <th
                     key={header.id}
                     style={{
-                      width: `${header.getSize()}px`,
+                      width: header.column.getSize(),
+                      minWidth: header.column.getSize(),
+                      maxWidth: header.column.getSize(),
                     }}
                   >
                     {header.isPlaceholder
@@ -171,6 +186,7 @@ export function EntityTable<
                         )}
                   </th>
                 ))}
+                <th></th>
               </tr>
             ))}
           </thead>
@@ -188,6 +204,11 @@ export function EntityTable<
                       onContextMenu={(event) =>
                         handleContextMenu(event, row.original.id)
                       }
+                      style={{
+                        width: cell.column.getSize(),
+                        minWidth: cell.column.getSize(),
+                        maxWidth: cell.column.getSize(),
+                      }}
                     >
                       {flexRender(
                         cell.column.columnDef.cell,
@@ -196,6 +217,7 @@ export function EntityTable<
                     </td>
                   );
                 })}
+                <td></td>
               </StyledRow>
             ))}
           </tbody>

front/src/modules/ui/layout/styles/themes.ts

@@ -21,6 +21,7 @@ const commonTheme = {
 
   table: {
     horizontalCellMargin: '8px',
+    checkboxColumnWidth: '32px',
   },
 
   borderRadius: '4px',

front/src/modules/ui/tables/utils/getCheckBoxColumn.tsx

@@ -0,0 +1,27 @@
+import { CellContext } from '@tanstack/react-table';
+
+import { CheckboxCell } from '@/ui/components/table/CheckboxCell';
+import { SelectAllCheckbox } from '@/ui/components/table/SelectAllCheckbox';
+
+export function getCheckBoxColumn() {
+  return {
+    id: 'select',
+    header: ({ table }: any) => (
+      <SelectAllCheckbox
+        checked={table.getIsAllRowsSelected()}
+        indeterminate={table.getIsSomeRowsSelected()}
+        onChange={(newValue) => table.toggleAllRowsSelected(newValue)}
+      />
+    ),
+    cell: (props: CellContext<any, string>) => (
+      <CheckboxCell
+        id={`checkbox-selected-${props.row.original.id}`}
+        name={`checkbox-selected-${props.row.original.id}`}
+        checked={props.row.getIsSelected()}
+        onChange={(newValue) => props.row.toggleSelected(newValue)}
+      />
+    ),
+    size: 32,
+    maxSize: 32,
+  };
+}