This is an automated email from the ASF dual-hosted git repository. ppawar pushed a commit to branch atlas-2.5 in repository https://gitbox.apache.org/repos/asf/atlas.git
commit 418b763dc3afeeb81ce5e1086138e9dc97c63489 Author: Prasad Pawar <[email protected]> AuthorDate: Wed Oct 8 10:35:08 2025 +0530 ATLAS-5151: React UI: Fix UI layout issue for tables when no records are present (#465) ( cherry picked from 364f332ec9d8c0624f500af2d829fe3f203a8308 ) --- dashboard/src/components/Table/TableLayout.tsx | 37 +++++++++++++------------- dashboard/src/styles/table.scss | 17 ++++++++++++ 2 files changed, 36 insertions(+), 18 deletions(-) diff --git a/dashboard/src/components/Table/TableLayout.tsx b/dashboard/src/components/Table/TableLayout.tsx index 53e1073d7..97143aa65 100644 --- a/dashboard/src/components/Table/TableLayout.tsx +++ b/dashboard/src/components/Table/TableLayout.tsx @@ -192,7 +192,7 @@ const Row = ({ ); }; -const DraggableTableHeader = ({ header }: { header: any }) => { +const DraggableTableHeader = ({ header, isEmptyRows }: { header: any; isEmptyRows?: boolean }) => { const { attributes, isDragging, listeners, setNodeRef, transform } = useSortable({ id: header.column.id @@ -204,10 +204,11 @@ const DraggableTableHeader = ({ header }: { header: any }) => { transform: CSS.Translate.toString(transform), transition: "width transform 0.2s ease-in-out", whiteSpace: "nowrap", - width: - header.column.columnDef?.width != undefined - ? header.column.columnDef?.width - : header.column.getSize(), + width: isEmptyRows + ? undefined + : header.column.columnDef?.width != undefined + ? header.column.columnDef?.width + : header.column.getSize(), zIndex: isDragging ? 1 : 0 }; @@ -221,14 +222,9 @@ const DraggableTableHeader = ({ header }: { header: any }) => { > {header.isPlaceholder ? null : ( <div - className={ + className={`${ header.column.getCanSort() ? "cursor-pointer select-none" : "" - } - style={{ - display: "flex", - alignItems: "center", - gap: "0.125rem" - }} + } table-header-wrap`} onClick={header.column.getToggleSortingHandler()} title={ header.column.getCanSort() @@ -241,10 +237,7 @@ const DraggableTableHeader = ({ header }: { header: any }) => { } > <span - style={{ - display: "inline-block", - lineHeight: "20px" - }} + className="table-header-text" {...attributes} {...listeners} > @@ -416,6 +409,9 @@ const TableLayout: FC<TableProps> = ({ currentParams.forEach((value, key) => { params[key] = value; }); + // Total number of visible table columns including selection/expand controls + const totalVisibleColumns = + (showRowSelection ? 1 : 0) + (expandRow ? 1 : 0) + columnOrder.length; const { getHeaderGroups, getRowModel, @@ -635,8 +631,12 @@ const TableLayout: FC<TableProps> = ({ ? "has-expanded-rows" : "" }`} - sx={{ tableLayout: "fixed", width: "100%" }} + sx={{ + tableLayout: memoizedData.length > 0 ? "fixed" : "auto", + width: "100%" + }} > + {/* remove dynamic colgroup for empty state */} {!isFetching && ( <TableHead> {getHeaderGroups().map((headerGroup) => ( @@ -667,6 +667,7 @@ const TableLayout: FC<TableProps> = ({ <DraggableTableHeader key={header.id} header={header} + isEmptyRows={!isFetching && memoizedData.length === 0} /> ) )} @@ -680,7 +681,7 @@ const TableLayout: FC<TableProps> = ({ <TableRowsLoader rowsNum={10} /> ) : memoizedData.length === 0 && isFetching == false ? ( <TableRow> - <TableCell colSpan={columns.length + 1}> + <TableCell colSpan={Math.max(1, totalVisibleColumns)}> <Stack textAlign="center"> <Typography fontWeight="600" color="text.secondary"> {emptyText} diff --git a/dashboard/src/styles/table.scss b/dashboard/src/styles/table.scss index 7f108cc7a..2ec0641dd 100644 --- a/dashboard/src/styles/table.scss +++ b/dashboard/src/styles/table.scss @@ -69,6 +69,23 @@ width: auto !important; } +/* Ensure the content wrapper inside header spans full cell width */ +.table-header-cell > div, +.table-header-wrap { + display: flex; + width: 100%; + min-width: 0; /* allow flex children to shrink instead of overflowing */ +} + +/* Header text wrapper to avoid inline styles in JSX */ +.table-header-text { + display: flex; + align-items: center; + line-height: 20px; + width: 100%; + min-width: 0; +} + /* table-pagination */ .table-pagination {
