From 09ba42d36c57e13ac44b97e1660cfb9bfff61eda Mon Sep 17 00:00:00 2001
From: SergeantPanda <chester.cullen@gmail.com>
Date: Fri, 12 Sep 2025 10:08:46 -0500
Subject: [PATCH] Enhance column resizing functionality in ChannelsTable,
 CustomTableHeader, and CustomTableBody components

---
 .../src/components/tables/ChannelsTable.jsx   | 16 +++++++++----
 .../tables/CustomTable/CustomTableBody.jsx    | 15 ++++++++----
 .../tables/CustomTable/CustomTableHeader.jsx  | 23 +++++++++++++------
 .../components/tables/CustomTable/index.jsx   |  7 +++---
 4 files changed, 42 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/tables/ChannelsTable.jsx b/frontend/src/components/tables/ChannelsTable.jsx
index d216d44a..bd200c67 100644
--- a/frontend/src/components/tables/ChannelsTable.jsx
+++ b/frontend/src/components/tables/ChannelsTable.jsx
@@ -307,7 +307,10 @@ const ChannelsTable = ({}) => {
   const [channelToDelete, setChannelToDelete] = useState(null);
 
   // Column sizing state for resizable columns
-  const [columnSizing, setColumnSizing] = useLocalStorage('channels-table-column-sizing', {});
+  const [columnSizing, setColumnSizing] = useLocalStorage(
+    'channels-table-column-sizing',
+    {}
+  );
 
   // M3U and EPG URL configuration state
   const [m3uParams, setM3uParams] = useState({
@@ -724,7 +727,7 @@ const ChannelsTable = ({}) => {
       {
         id: 'channel_number',
         accessorKey: 'channel_number',
-        size: 40,
+        size: columnSizing.channel_number || 40,
         minSize: 30,
         maxSize: 100,
         cell: ({ getValue }) => {
@@ -747,6 +750,7 @@ const ChannelsTable = ({}) => {
       {
         id: 'name',
         accessorKey: 'name',
+        size: columnSizing.name || 200,
         minSize: 100,
         cell: ({ getValue }) => (
           <Box
@@ -802,7 +806,7 @@ const ChannelsTable = ({}) => {
             </Box>
           );
         },
-        size: 120,
+        size: columnSizing.epg || 120,
         minSize: 80,
         maxSize: 200,
       },
@@ -823,7 +827,7 @@ const ChannelsTable = ({}) => {
             {getValue()}
           </Box>
         ),
-        size: 175,
+        size: columnSizing.channel_group || 175,
         minSize: 100,
         maxSize: 300,
       },
@@ -870,7 +874,7 @@ const ChannelsTable = ({}) => {
         ),
       },
     ],
-    [selectedProfileId, channelGroups, logos, theme]
+    [selectedProfileId, channelGroups, logos, theme, columnSizing]
   );
 
   const renderHeaderCell = (header) => {
@@ -972,6 +976,8 @@ const ChannelsTable = ({}) => {
     onRowSelectionChange: onRowSelectionChange,
     state: {
       columnSizing,
+      pagination,
+      sorting,
     },
     onColumnSizingChange: setColumnSizing,
     getExpandedRowHeight: (row) => {
diff --git a/frontend/src/components/tables/CustomTable/CustomTableBody.jsx b/frontend/src/components/tables/CustomTable/CustomTableBody.jsx
index 8a271373..81f73455 100644
--- a/frontend/src/components/tables/CustomTable/CustomTableBody.jsx
+++ b/frontend/src/components/tables/CustomTable/CustomTableBody.jsx
@@ -106,11 +106,18 @@ const CustomTableBody = ({
                 className="td"
                 key={`td-${cell.id}`}
                 style={{
-                  flex: cell.column.columnDef.size ? '0 0 auto' : '1 1 0',
+                  flex: cell.column.columnDef.size
+                    ? `0 0 ${cell.column.getSize()}px`
+                    : '1 1 0%',
                   width: cell.column.columnDef.size
-                    ? cell.column.getSize()
-                    : undefined,
-                  minWidth: 0,
+                    ? `${cell.column.getSize()}px`
+                    : 'auto',
+                  maxWidth: cell.column.columnDef.size
+                    ? `${cell.column.getSize()}px`
+                    : 'none',
+                  minWidth: cell.column.columnDef.minSize
+                    ? `${cell.column.columnDef.minSize}px`
+                    : '0px',
                   ...(tableCellProps && tableCellProps({ cell })),
                 }}
               >
diff --git a/frontend/src/components/tables/CustomTable/CustomTableHeader.jsx b/frontend/src/components/tables/CustomTable/CustomTableHeader.jsx
index 17ceecd7..06ae5aba 100644
--- a/frontend/src/components/tables/CustomTable/CustomTableHeader.jsx
+++ b/frontend/src/components/tables/CustomTable/CustomTableHeader.jsx
@@ -62,11 +62,18 @@ const CustomTableHeader = ({
                 className="th"
                 key={header.id}
                 style={{
-                  flex: header.column.columnDef.size ? '0 0 auto' : '1 1 0',
+                  flex: header.column.columnDef.size
+                    ? `0 0 ${header.getSize()}px`
+                    : '1 1 0%',
                   width: header.column.columnDef.size
-                    ? header.getSize()
-                    : undefined,
-                  minWidth: 0,
+                    ? `${header.getSize()}px`
+                    : 'auto',
+                  maxWidth: header.column.columnDef.size
+                    ? `${header.getSize()}px`
+                    : 'none',
+                  minWidth: header.column.columnDef.minSize
+                    ? `${header.column.columnDef.minSize}px`
+                    : '0px',
                   position: 'relative',
                   // ...(tableCellProps && tableCellProps({ cell: header })),
                 }}
@@ -77,12 +84,13 @@ const CustomTableHeader = ({
                     ...(header.column.columnDef.style &&
                       header.column.columnDef.style),
                     height: '100%',
+                    paddingRight: header.column.getCanResize() ? '8px' : '0px', // Add padding for resize handle
                   }}
                 >
                   {renderHeaderCell(header)}
                 </Flex>
                 {header.column.getCanResize() && (
-                  <Box
+                  <div
                     onMouseDown={header.getResizeHandler()}
                     onTouchStart={header.getResizeHandler()}
                     className={`resizer ${
@@ -93,15 +101,16 @@ const CustomTableHeader = ({
                       right: 0,
                       top: 0,
                       height: '100%',
-                      width: '5px',
+                      width: '8px', // Make it slightly wider
                       cursor: 'col-resize',
                       userSelect: 'none',
                       touchAction: 'none',
                       backgroundColor: header.column.getIsResizing()
                         ? '#3b82f6'
                         : 'transparent',
-                      opacity: header.column.getIsResizing() ? 1 : 0.5,
+                      opacity: header.column.getIsResizing() ? 1 : 0.3, // Make it more visible by default
                       transition: 'opacity 0.2s',
+                      zIndex: 1000, // Ensure it's on top
                     }}
                     onMouseEnter={(e) => {
                       e.target.style.opacity = '1';
diff --git a/frontend/src/components/tables/CustomTable/index.jsx b/frontend/src/components/tables/CustomTable/index.jsx
index 3a1ab69b..ecd2e04d 100644
--- a/frontend/src/components/tables/CustomTable/index.jsx
+++ b/frontend/src/components/tables/CustomTable/index.jsx
@@ -85,15 +85,16 @@ const useTable = ({
 
   const table = useReactTable({
     defaultColumn: {
-      size: undefined,
       minSize: 0,
+      maxSize: Number.MAX_SAFE_INTEGER,
+      size: 150,
     },
     ...options,
     state: {
-      data: options.data,
+      ...options.state,
       selectedTableIds,
-      columnSizing: options.state?.columnSizing || {},
     },
+    onStateChange: options.onStateChange,
     getCoreRowModel: options.getCoreRowModel ?? getCoreRowModel(),
     enableColumnResizing: true,
     columnResizeMode: 'onChange',