From 900ce7320014e7b218931d073e2d9d3c5f4e6926 Mon Sep 17 00:00:00 2001 From: SergeantPanda Date: Fri, 12 Sep 2025 16:38:18 -0500 Subject: [PATCH] Better sizing for epg and m3u tables. Rearranged m3u table slightly. --- .../tables/CustomTable/CustomTableBody.jsx | 37 +++++++++++-------- .../tables/CustomTable/CustomTableHeader.jsx | 34 +++++++++-------- frontend/src/components/tables/EPGsTable.jsx | 4 +- frontend/src/components/tables/M3UsTable.jsx | 16 ++++---- frontend/src/components/tables/table.css | 2 +- 5 files changed, 52 insertions(+), 41 deletions(-) diff --git a/frontend/src/components/tables/CustomTable/CustomTableBody.jsx b/frontend/src/components/tables/CustomTable/CustomTableBody.jsx index 50ff0581..9e43c57a 100644 --- a/frontend/src/components/tables/CustomTable/CustomTableBody.jsx +++ b/frontend/src/components/tables/CustomTable/CustomTableBody.jsx @@ -24,12 +24,16 @@ const CustomTableBody = ({ const rows = getRowModel().rows; - // Calculate total width of all columns reactively - const totalWidth = useMemo(() => { + // Calculate minimum width based only on fixed-size columns + const minTableWidth = useMemo(() => { if (rows.length === 0) return 0; return rows[0].getVisibleCells().reduce((total, cell) => { - return total + cell.column.getSize(); + // Only count columns with fixed sizes, flexible columns will expand + const columnSize = cell.column.columnDef.size + ? cell.column.getSize() + : cell.column.columnDef.minSize || 150; // Default min for flexible columns + return total + columnSize; }, 0); }, [rows]); @@ -104,7 +108,7 @@ const CustomTableBody = ({ style={{ display: 'flex', width: '100%', - minWidth: `${totalWidth}px`, + minWidth: '100%', // Force full width ...(row.getIsSelected() && { backgroundColor: '#163632', }), @@ -112,23 +116,24 @@ const CustomTableBody = ({ }} > {row.getVisibleCells().map((cell) => { + const hasFixedSize = cell.column.columnDef.size; + const isFlexible = !hasFixedSize; + return ( diff --git a/frontend/src/components/tables/CustomTable/CustomTableHeader.jsx b/frontend/src/components/tables/CustomTable/CustomTableHeader.jsx index 4aafccaa..92643fc9 100644 --- a/frontend/src/components/tables/CustomTable/CustomTableHeader.jsx +++ b/frontend/src/components/tables/CustomTable/CustomTableHeader.jsx @@ -43,13 +43,17 @@ const CustomTableHeader = ({ // Get header groups for dependency tracking const headerGroups = getHeaderGroups(); - // Calculate total width of all columns reactively - const totalWidth = useMemo(() => { + // Calculate minimum width based only on fixed-size columns + const minTableWidth = useMemo(() => { if (!headerGroups || headerGroups.length === 0) return 0; const width = headerGroups[0]?.headers.reduce((total, header) => { - return total + header.getSize(); + // Only count columns with fixed sizes, flexible columns will expand + const columnSize = header.column.columnDef.size + ? header.getSize() + : header.column.columnDef.minSize || 150; // Default min for flexible columns + return total + columnSize; }, 0) || 0; return width; @@ -72,7 +76,7 @@ const CustomTableHeader = ({ style={{ display: 'flex', width: '100%', - minWidth: `${totalWidth}px`, + minWidth: '100%', // Force full width }} > {headerGroup.headers.map((header) => { @@ -81,18 +85,16 @@ const CustomTableHeader = ({ className="th" key={header.id} style={{ - flex: header.column.columnDef.size - ? `0 0 ${header.getSize()}px` - : '1 1 0%', - width: header.column.columnDef.size - ? `${header.getSize()}px` - : 'auto', - maxWidth: header.column.columnDef.size - ? `${header.getSize()}px` - : 'none', - minWidth: header.column.columnDef.minSize - ? `${header.column.columnDef.minSize}px` - : '0px', + ...(header.column.columnDef.grow + ? { + flex: '1 1 0%', + minWidth: 0, + } + : { + flex: `0 0 ${header.getSize ? header.getSize() : 150}px`, + width: `${header.getSize ? header.getSize() : 150}px`, + maxWidth: `${header.getSize ? header.getSize() : 150}px`, + }), position: 'relative', // ...(tableCellProps && tableCellProps({ cell: header })), }} diff --git a/frontend/src/components/tables/EPGsTable.jsx b/frontend/src/components/tables/EPGsTable.jsx index 9c40a14a..4ea66b30 100644 --- a/frontend/src/components/tables/EPGsTable.jsx +++ b/frontend/src/components/tables/EPGsTable.jsx @@ -195,6 +195,7 @@ const EPGsTable = () => { header: 'URL / API Key / File Path', accessorKey: 'url', enableSorting: false, + minSize: 250, cell: ({ cell, row }) => { const value = cell.getValue() || @@ -220,7 +221,7 @@ const EPGsTable = () => { { header: 'Status', accessorKey: 'status', - size: 150, + size: 100, cell: ({ row }) => { const data = row.original; @@ -236,6 +237,7 @@ const EPGsTable = () => { header: 'Status Message', accessorKey: 'last_message', enableSorting: false, + grow: true, cell: ({ row }) => { const data = row.original; diff --git a/frontend/src/components/tables/M3UsTable.jsx b/frontend/src/components/tables/M3UsTable.jsx index d72fbeb4..d31da0e6 100644 --- a/frontend/src/components/tables/M3UsTable.jsx +++ b/frontend/src/components/tables/M3UsTable.jsx @@ -443,6 +443,7 @@ const M3UTable = () => { { header: 'URL / File', accessorKey: 'server_url', + size: 250, cell: ({ cell, row }) => { const value = cell.getValue() || row.original.file_path || ''; return ( @@ -461,16 +462,10 @@ const M3UTable = () => { ); }, }, - { - header: 'Max Streams', - accessorKey: 'max_streams', - sortable: true, - size: 150, - }, { header: 'Status', accessorKey: 'status', - size: 150, + size: 100, cell: ({ cell }) => { const value = cell.getValue(); if (!value) return null; @@ -486,6 +481,7 @@ const M3UTable = () => { { header: 'Status Message', accessorKey: 'last_message', + grow: true, cell: ({ cell, row }) => { const value = cell.getValue(); const data = row.original; @@ -569,6 +565,12 @@ const M3UTable = () => { ); }, }, + { + header: 'Max Streams', + accessorKey: 'max_streams', + sortable: true, + size: 125, + }, { header: 'Updated', accessorKey: 'updated_at', diff --git a/frontend/src/components/tables/table.css b/frontend/src/components/tables/table.css index 15304103..30fd033a 100644 --- a/frontend/src/components/tables/table.css +++ b/frontend/src/components/tables/table.css @@ -8,8 +8,8 @@ html { } .divTable { + width: 100%; /* border: 1px solid lightgray; */ - /* width: fit-content; */ /* display: flex; flex-direction: column; */ }