From 576326d852b5f1526381f9312102d058c83dbca5 Mon Sep 17 00:00:00 2001
From: Tanvi Kuchanur <alnk8465@gmail.com>
Date: Thu, 23 Jul 2026 11:24:37 +0530
Subject: [PATCH] [BUGFIX] Table: align filter rows with table columns

Signed-off-by: Tanvi Kuchanur <alnk8465@gmail.com>
---
 table/src/components/TablePanel.tsx | 252 +++++++++++++++++++---------
 1 file changed, 174 insertions(+), 78 deletions(-)

diff --git a/table/src/components/TablePanel.tsx b/table/src/components/TablePanel.tsx
index 75106f32f..3b943db2d 100644
--- a/table/src/components/TablePanel.tsx
+++ b/table/src/components/TablePanel.tsx
@@ -37,6 +37,7 @@ import { QueryDataType, TimeSeriesData } from '@perses-dev/spec';
 import { CellSettings, ColumnSettings, evaluateConditionalFormatting, TableOptions } from '../models';
 import { buildRawTableData, getTablePanelQueryMode } from '../table-data-utils';
 import { EmbeddedPanel } from './EmbeddedPanel';
+import { createPortal } from 'react-dom';
 
 type FilterValuesType<T> = Array<{ original: T; formatted: T }>;
 
@@ -401,6 +402,10 @@ export function TablePanel({ contentDimensions, spec, queryResults }: TableProps
   });
 
   const filteredDataRef = useRef<Array<Record<string, unknown>>>([]);
+  // Refs used to keep the filter row in sync with the table's horizontal
+  const panelContainerRef = useRef<HTMLDivElement>(null);
+  const filterRowInnerRef = useRef<HTMLDivElement>(null);
+  const filterCellRefs = useRef<Array<HTMLDivElement | null>>([]);
 
   // Convert selectionMap to TanStack's RowSelectionState format
   const rowSelection = useMemo((): RowSelectionState => {
@@ -728,6 +733,77 @@ export function TablePanel({ contentDimensions, spec, queryResults }: TableProps
     }
   }, [spec.pagination, pagination]);
 
+  // Sync the filter row's horizontal position with the table scroll.
+  useEffect(() => {
+    if (!spec.enableFiltering) {
+      return;
+    }
+
+    const scrollContainer = panelContainerRef.current?.querySelector<HTMLElement>('.MuiTableContainer-root');
+    const filterRowInner = filterRowInnerRef.current;
+
+    if (!scrollContainer || !filterRowInner) {
+      return;
+    }
+
+    const syncFilterRowScroll = (): void => {
+      filterRowInner.style.transform = `translateX(-${scrollContainer.scrollLeft}px)`;
+
+      setOpenFilterColumn((current) => (current === null ? current : null));
+      setFilterAnchorEl({});
+    };
+
+    syncFilterRowScroll();
+
+    scrollContainer.addEventListener('scroll', syncFilterRowScroll, { passive: true });
+    return (): void => {
+      scrollContainer.removeEventListener('scroll', syncFilterRowScroll);
+    };
+  }, [spec.enableFiltering, columns, contentDimensions]);
+
+// Sync filter cell widths with the actual rendered table column widths to keep them aligned.
+  useEffect(() => {
+    if (!spec.enableFiltering) {
+      return;
+    }
+
+    const scrollContainer = panelContainerRef.current?.querySelector<HTMLElement>('.MuiTableContainer-root');
+    if (!scrollContainer) {
+      return;
+    }
+
+    const syncColumnWidths = (): void => {
+      const headerCells = scrollContainer.querySelectorAll<HTMLElement>('thead tr th');
+
+      columns.forEach((_, idx) => {
+        const headerCell = headerCells[idx];
+        const filterCell = filterCellRefs.current[idx];
+        if (!headerCell || !filterCell) {
+          return;
+        }
+
+        const width = `${headerCell.getBoundingClientRect().width}px`;
+        filterCell.style.width = width;
+        filterCell.style.minWidth = width;
+        filterCell.style.maxWidth = width;
+      });
+    };
+
+    syncColumnWidths();
+
+    // Re-sync whenever the header row's size changes 
+    const headerRow = scrollContainer.querySelector('thead tr');
+    const resizeObserver = new ResizeObserver(syncColumnWidths);
+    if (headerRow) {
+      resizeObserver.observe(headerRow);
+    }
+
+    return (): void => {
+      resizeObserver.disconnect();
+    };
+  }, [spec.enableFiltering, columns, contentDimensions, selectionEnabled, actionButtons]);
+
+
   if (contentDimensions === undefined) {
     return null;
   }
@@ -748,99 +824,119 @@ export function TablePanel({ contentDimensions, spec, queryResults }: TableProps
   }
 
   return (
-    <>
+    <div ref={panelContainerRef} style={{ display: 'contents' }}>
       {confirmDialog}
       {spec.enableFiltering && (
         <div
           style={{
-            display: 'flex',
+            overflow: 'hidden',
             background: theme.palette.background.default,
             borderBottom: `1px solid ${theme.palette.divider}`,
             width: contentDimensions.width,
             boxSizing: 'border-box',
           }}
         >
-          {columns.map((column, idx) => {
-            const filters = getSelectedFilterValues(column.accessorKey as string);
-            const columnWidth = column.width || spec.defaultColumnWidth;
-            return (
-              <div
-                key={`filter-${idx}`}
-                style={{
-                  padding: '8px',
-                  borderRight: idx < columns.length - 1 ? `1px solid ${theme.palette.divider}` : 'none',
-                  width: columnWidth,
-                  minWidth: columnWidth,
-                  maxWidth: columnWidth,
-                  display: 'flex',
-                  alignItems: 'center',
-                  position: 'relative',
-                  boxSizing: 'border-box',
-                  flex: typeof columnWidth === 'number' ? 'none' : '1 1 auto',
-                }}
-              >
-                <span
-                  style={{
-                    marginRight: 8,
-                    fontSize: '12px',
-                    color: theme.palette.text.secondary,
-                    flex: 1,
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    whiteSpace: 'nowrap',
-                  }}
-                >
-                  {filters.length ? `${filters.length} items` : 'All'}
-                </span>
-                <button
-                  onClick={(e) => {
-                    handleFilterClick(e, column.accessorKey as string);
+
+          <div
+            ref={filterRowInnerRef}
+            style={{
+              display: 'flex',
+              width: 'max-content',
+              willChange: 'transform',
+            }}
+          >
+            {columns.map((column, idx) => {
+              const filters = getSelectedFilterValues(column.accessorKey as string);
+              const columnWidth = column.width || spec.defaultColumnWidth;
+              const anchorEl = filterAnchorEl[column.accessorKey as string];
+
+              return (
+                <div
+                  key={`filter-${idx}`}
+                  ref={(el) => {
+                    filterCellRefs.current[idx] = el;
                   }}
                   style={{
-                    border: `1px solid ${theme.palette.divider}`,
-                    background: theme.palette.background.paper,
-                    cursor: 'pointer',
-                    fontSize: '12px',
-                    color: filters.length ? theme.palette.primary.main : theme.palette.text.secondary,
-                    padding: '4px 8px',
-                    borderRadius: '4px',
-                    minWidth: '20px',
-                    height: '24px',
-                    flexShrink: 0,
-                    transition: 'all 0.2s ease',
-                  }}
-                  onMouseEnter={(e) => {
-                    e.currentTarget.style.background = theme.palette.action.hover;
-                  }}
-                  onMouseLeave={(e) => {
-                    e.currentTarget.style.background = theme.palette.background.paper;
+                    padding: '8px',
+                    borderRight: idx < columns.length - 1 ? `1px solid ${theme.palette.divider}` : 'none',
+                    // These are just a starting size for the first paint —
+                    // the width-sync effect above overwrites them with the
+                    // table's actual rendered column widths.
+                    width: columnWidth,
+                    minWidth: columnWidth,
+                    maxWidth: columnWidth,
+                    display: 'flex',
+                    alignItems: 'center',
+                    position: 'relative',
+                    boxSizing: 'border-box',
+                    flex: 'none',
                   }}
-                  type="button"
                 >
-                  ▼
-                </button>
-
-                {openFilterColumn === column.accessorKey && (
-                  <div
+                  <span
+                    style={{
+                      marginRight: 8,
+                      fontSize: '12px',
+                      color: theme.palette.text.secondary,
+                      flex: 1,
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      whiteSpace: 'nowrap',
+                    }}
+                  >
+                    {filters.length ? `${filters.length} items` : 'All'}
+                  </span>
+                  <button
+                    onClick={(e) => {
+                      handleFilterClick(e, column.accessorKey as string);
+                    }}
                     style={{
-                      position: 'absolute',
-                      top: '100%',
-                      left: 0,
-                      zIndex: 1000,
-                      marginTop: 4,
+                      border: `1px solid ${theme.palette.divider}`,
+                      background: theme.palette.background.paper,
+                      cursor: 'pointer',
+                      fontSize: '12px',
+                      color: filters.length ? theme.palette.primary.main : theme.palette.text.secondary,
+                      padding: '4px 8px',
+                      borderRadius: '4px',
+                      minWidth: '20px',
+                      height: '24px',
+                      flexShrink: 0,
+                      transition: 'all 0.2s ease',
+                    }}
+                    onMouseEnter={(e) => {
+                      e.currentTarget.style.background = theme.palette.action.hover;
                     }}
+                    onMouseLeave={(e) => {
+                      e.currentTarget.style.background = theme.palette.background.paper;
+                    }}
+                    type="button"
                   >
-                    <ColumnFilterDropdown
-                      allValues={columnUniqueValues[column.accessorKey as string] || []}
-                      selectedValues={filters}
-                      onFilterChange={(values) => updateColumnFilter(column.accessorKey as string, values)}
-                      theme={theme}
-                    />
-                  </div>
-                )}
-              </div>
-            );
-          })}
+                    ▼
+                  </button>
+
+                  {openFilterColumn === column.accessorKey &&
+                    anchorEl &&
+                    createPortal(
+                      <div
+                        style={{
+                          position: 'fixed',
+                          top: anchorEl.getBoundingClientRect().bottom + 4,
+                          left: anchorEl.getBoundingClientRect().left,
+                          zIndex: 1300,
+                        }}
+                      >
+                        <ColumnFilterDropdown
+                          allValues={columnUniqueValues[column.accessorKey as string] || []}
+                          selectedValues={filters}
+                          onFilterChange={(values) => updateColumnFilter(column.accessorKey as string, values)}
+                          theme={theme}
+                        />
+                      </div>,
+                      document.body
+                    )}
+                </div>
+              );
+            })}
+          </div>
         </div>
       )}
       <Table
@@ -862,6 +958,6 @@ export function TablePanel({ contentDimensions, spec, queryResults }: TableProps
         getItemActions={({ id, data }) => getItemActionButtons({ id, data: data as Record<string, unknown> })}
         hasItemActions={actionButtons && actionButtons.length > 0}
       />
-    </>
+    </div>
   );
-}
+}
\ No newline at end of file