Expand header width to fill container.

frontend/src/components/tables/CustomTable/CustomTable.jsx

@@ -1,6 +1,6 @@
 import { Box, Flex } from '@mantine/core';
 import CustomTableHeader from './CustomTableHeader';
-import { useCallback, useState, useRef } from 'react';
+import { useCallback, useState, useRef, useMemo } from 'react';
 import { flexRender } from '@tanstack/react-table';
 import table from '../../../helpers/table';
 import CustomTableBody from './CustomTableBody';
@@ -9,11 +9,28 @@ import useLocalStorage from '../../../hooks/useLocalStorage';
 const CustomTable = ({ table }) => {
   const [tableSize, _] = useLocalStorage('table-size', 'default');
 
+  // Get column sizing state for dependency tracking
+  const columnSizing = table.getState().columnSizing;
+
+  // Calculate minimum table width reactively based on column sizes
+  const minTableWidth = useMemo(() => {
+    const headerGroups = table.getHeaderGroups();
+    if (!headerGroups || headerGroups.length === 0) return 0;
+
+    const width =
+      headerGroups[0]?.headers.reduce((total, header) => {
+        return total + header.getSize();
+      }, 0) || 0;
+
+    return width;
+  }, [table, columnSizing]);
+
   return (
     <Box
       className={`divTable table-striped table-size-${tableSize}`}
       style={{
         width: '100%',
+        minWidth: `${minTableWidth}px`,
         display: 'flex',
         flexDirection: 'column',
       }}

frontend/src/components/tables/CustomTable/CustomTableBody.jsx

@@ -1,6 +1,7 @@
 import { Box, Flex } from '@mantine/core';
 import { VariableSizeList as List } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
+import { useMemo } from 'react';
 import table from '../../../helpers/table';
 
 const CustomTableBody = ({
@@ -23,6 +24,15 @@ const CustomTableBody = ({
 
   const rows = getRowModel().rows;
 
+  // Calculate total width of all columns reactively
+  const totalWidth = useMemo(() => {
+    if (rows.length === 0) return 0;
+
+    return rows[0].getVisibleCells().reduce((total, cell) => {
+      return total + cell.column.getSize();
+    }, 0);
+  }, [rows]);
+
   const renderTableBodyContents = () => {
     const virtualized = false;
 
@@ -94,6 +104,7 @@ const CustomTableBody = ({
           style={{
             display: 'flex',
             width: '100%',
+            minWidth: `${totalWidth}px`,
             ...(row.getIsSelected() && {
               backgroundColor: '#163632',
             }),

frontend/src/components/tables/CustomTable/CustomTableHeader.jsx

@@ -1,6 +1,6 @@
 import { Box, Center, Checkbox, Flex } from '@mantine/core';
 import { flexRender } from '@tanstack/react-table';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 
 const CustomTableHeader = ({
   getHeaderGroups,
@@ -40,6 +40,21 @@ const CustomTableHeader = ({
     }
   };
 
+  // Get header groups for dependency tracking
+  const headerGroups = getHeaderGroups();
+
+  // Calculate total width of all columns reactively
+  const totalWidth = useMemo(() => {
+    if (!headerGroups || headerGroups.length === 0) return 0;
+
+    const width =
+      headerGroups[0]?.headers.reduce((total, header) => {
+        return total + header.getSize();
+      }, 0) || 0;
+
+    return width;
+  }, [headerGroups]);
+
   return (
     <Box
       className="thead"
@@ -54,7 +69,11 @@ const CustomTableHeader = ({
         <Box
           className="tr"
           key={headerGroup.id}
-          style={{ display: 'flex', width: '100%' }}
+          style={{
+            display: 'flex',
+            width: '100%',
+            minWidth: `${totalWidth}px`,
+          }}
         >
           {headerGroup.headers.map((header) => {
             return (