From 4279b014e92fef181823a455841d800dfcd968d9 Mon Sep 17 00:00:00 2001
From: hallidayo <22655069+Hallidayo@users.noreply.github.com>
Date: Mon, 26 Sep 2022 14:41:08 +0100
Subject: [PATCH] feat: table column title hover (#8255)

added title prop to span to show hoverValue
---
 studio/components/grid/components/grid/ColumnHeader.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/studio/components/grid/components/grid/ColumnHeader.tsx b/studio/components/grid/components/grid/ColumnHeader.tsx
index 59759b12cf2..5ae9d1f2fe4 100644
--- a/studio/components/grid/components/grid/ColumnHeader.tsx
+++ b/studio/components/grid/components/grid/ColumnHeader.tsx
@@ -19,6 +19,7 @@ export function ColumnHeader<R>({
   const columnKey = column.key
   const columnFormat = getColumnFormat(columnType, format)
   const state = useTrackedState()
+  const hoverValue = column.name as string
 
   // keep state.gridColumns' order in sync with data grid component
   if (state.gridColumns[columnIdx].key != columnKey) {
@@ -122,7 +123,9 @@ export function ColumnHeader<R>({
               <IconKey size="tiny" strokeWidth={2} />
             </div>
           )}
-          <span className="sb-grid-column-header__inner__name">{column.name}</span>
+          <span className="sb-grid-column-header__inner__name" title={hoverValue}>
+            {column.name}
+          </span>
           <span className="sb-grid-column-header__inner__format">{columnFormat}</span>
         </div>
         <ColumnMenu column={column} />