This is an automated email from the ASF dual-hosted git repository.
ppawar pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/atlas.git
The following commit(s) were added to refs/heads/master by this push:
new 364f332ec ATLAS-5151: React UI: Fix UI layout issue for tables when no
records are present (#465)
364f332ec is described below
commit 364f332ec9d8c0624f500af2d829fe3f203a8308
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)
---
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 {
