Mirrors/Dispatcharr
1
0
Fork 1
mirror of https://github.com/Dispatcharr/Dispatcharr.git synced 2026-07-22 09:37:57 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Better sizing for epg and m3u tables. Rearranged m3u table slightly.

Browse source
This commit is contained in:
SergeantPanda 2025-09-12 16:38:18 -05:00
parent fa41b8eb23
commit 900ce73200
5 changed files with 52 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

37
frontend/src/components/tables/CustomTable/CustomTableBody.jsx
View file

@ -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 (
<Box
className="td"
key={`td-${cell.id}`}
style={{
flex: cell.column.columnDef.size
? `0 0 ${cell.column.getSize()}px`
: '1 1 0%',
width: cell.column.columnDef.size
? `${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',
...(cell.column.columnDef.grow
? {
flex: '1 1 0%',
minWidth: 0,
}
: {
flex: `0 0 ${cell.column.getSize ? cell.column.getSize() : 150}px`,
width: `${cell.column.getSize ? cell.column.getSize() : 150}px`,
maxWidth: `${cell.column.getSize ? cell.column.getSize() : 150}px`,
}),
...(tableCellProps && tableCellProps({ cell })),
}}
>

34
frontend/src/components/tables/CustomTable/CustomTableHeader.jsx
View file

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

4
frontend/src/components/tables/EPGsTable.jsx
View file

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

16
frontend/src/components/tables/M3UsTable.jsx
View file

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

2
frontend/src/components/tables/table.css
View file

@ -8,8 +8,8 @@ html {
}
.divTable {
width: 100%;
/* border: 1px solid lightgray; */
/* width: fit-content; */
/* display: flex;
flex-direction: column; */
}