fix: Header row in View table disappears when scrolling up (#3105)

Author: mtrezza

src/dashboard/Data/Views/Views.react.js

@@ -356,16 +356,24 @@ class Views extends TableView {
     return (
       <div>
         <LoaderContainer loading={loading} solid={false}>
-          <div className={tableStyles.content} style={{ overflowX: 'auto', paddingTop: 96 }}>
-            <div style={{ width: this.state.tableWidth }}>
+          <div style={{
+            position: 'fixed',
+            top: 96,
+            left: 300,
+            right: 0,
+            bottom: 0,
+            overflow: 'auto'
+          }}>
+            <div style={{ minWidth: this.state.tableWidth }}>
               <div
                 className={tableStyles.headers}
                 style={{
-                  width: this.state.tableWidth,
-                  right: 'auto',
                   position: 'sticky',
                   top: 0,
                   left: 0,
+                  right: 0,
+                  zIndex: 10,
+                  background: '#66637A',
                 }}
                 ref={this.headersRef}
               >
@@ -602,31 +610,30 @@ class Views extends TableView {
 
       return (
         <div key={name} className={styles.headerWrap} style={{ width }}>
-          <span className={styles.headerText}>
-            <span className={styles.headerLabel}>{name}</span>
-            {isPointerColumn && (
-              <button
-                type="button"
-                className={styles.pointerIcon}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  e.preventDefault();
-                  this.handleOpenAllPointers(name);
-                  // Remove focus after action to follow UX best practices
-                  e.currentTarget.blur();
-                }}
-                aria-label={`Filter to show all pointers from ${name} column`}
-                title="Filter to show all pointers from this column"
-              >
-                <Icon
-                  name="right-outline"
-                  width={20}
-                  height={20}
-                  fill="white"
-                />
-              </button>
-            )}
-          </span>
+          <div className={styles.headerName}>{name}</div>
+          <div className={styles.headerType}>{columnType || 'String'}</div>
+          {isPointerColumn && (
+            <button
+              type="button"
+              className={styles.pointerIcon}
+              onClick={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                this.handleOpenAllPointers(name);
+                // Remove focus after action to follow UX best practices
+                e.currentTarget.blur();
+              }}
+              aria-label={`Filter to show all pointers from ${name} column`}
+              title="Filter to show all pointers from this column"
+            >
+              <Icon
+                name="right-outline"
+                width={20}
+                height={20}
+                fill="white"
+              />
+            </button>
+          )}
           <DragHandle className={styles.handle} onDrag={delta => this.handleResize(i, delta)} />
         </div>
       );

src/dashboard/Data/Views/Views.scss

@@ -5,33 +5,44 @@
 }
 
 .headerWrap {
+  @include MonospaceFont;
   display: inline-block;
   vertical-align: top;
   background: #66637A;
   color: white;
-  line-height: 30px;
-  padding: 0 16px;
+  font-size: 12px;
+  height: 30px;
+  padding: 4px 16px;
   border-right: 1px solid #e3e3ea;
   position: relative;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+
+  &:has(.pointerIcon) {
+    padding-right: 46px;
+  }
 }
 
-.headerText {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  min-width: 0; // Enable text truncation in flex containers
+.headerName {
+  color: white;
+  font-size: 12px;
+  height: 22px;
+  line-height: 22px;
+  margin-right: 8px;
+  float: left;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.headerLabel {
+.headerType {
+  color: #A2A6B1;
+  font-size: 10px;
+  height: 22px;
+  line-height: 22px;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-  min-width: 0; // Enable text truncation
 }
 
 .pointerIcon {
@@ -41,31 +52,32 @@
   font: inherit;
   color: inherit;
   background: rgba(255, 255, 255, 0.2);
-  
+
   // Custom styles
   cursor: pointer;
   opacity: 0.7;
   transition: opacity 0.2s ease;
   z-index: 10;
   pointer-events: auto;
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
   height: 20px;
   width: 20px;
   border-radius: 50%;
-  margin-left: 5px;
-  flex-shrink: 0;
-  
+  position: absolute;
+  right: 15px;
+  top: 5px;
+
   & svg {
     transform: rotate(316deg);
   }
-  
+
   &:hover {
     opacity: 1;
     background: rgba(255, 255, 255, 0.3);
   }
-  
+
   &:focus {
     opacity: 1;
     background: rgba(255, 255, 255, 0.4);

src/dashboard/TableView.react.js

@@ -38,6 +38,7 @@ export default class TableView extends DashboardView {
         if (data.length === 0) {
           content = <div className={styles.empty}>{this.renderEmpty()}</div>;
         } else {
+          headers = this.renderHeaders();
           content = (
             <div className={styles.rows}>
               <table>
@@ -46,7 +47,6 @@ export default class TableView extends DashboardView {
               {footer}
             </div>
           );
-          headers = this.renderHeaders();
         }
       }
     }
@@ -55,10 +55,12 @@ export default class TableView extends DashboardView {
     return (
       <div>
         <LoaderContainer loading={loading}>
-          <div className={styles.content}>{content}</div>
+          <div className={styles.content}>
+            <div className={styles.headers}>{headers}</div>
+            {content}
+          </div>
         </LoaderContainer>
         {toolbar}
-        <div className={styles.headers}>{headers}</div>
         {extras}
       </div>
     );

src/dashboard/TableView.scss

@@ -8,24 +8,19 @@
 @import 'stylesheets/globals.scss';
 
 .headers {
-  position: fixed;
+  position: sticky;
   top: 96px;
-  left: 300px;
+  left: 0;
   right: 0;
   background: #66637A;
   height: 30px;
   white-space: nowrap;
-}
-
-body:global(.expanded) {
-  .headers {
-    left: $sidebarCollapsedWidth;
-  }
+  z-index: 10;
 }
 
 .content {
   position: relative;
-  padding-top: 126px;
+  padding-top: 96px;
   min-height: 100vh;
 }