Enhance column resizing functionality in ChannelsTable, CustomTableHeader, and CustomTableBody components

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) => {

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 })),
                 }}
               >

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';

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',