feat: Add 'tooltip' for table markdown cell #1645 (#1736)

py/examples/table_markdown_overflow.py

@@ -0,0 +1,38 @@
+# Table / Markdown / Overflow
+# Creates a table with Markdown content that overflows
+# #table #markdown #overflow
+# ---
+
+from h2o_wave import main, Q, ui, app
+
+
+@app('/demo')
+async def serve(q: Q):
+    q.page['example'] = ui.form_card(box='1 1 4 10', items=[
+        ui.text_xl(content='Table with Markdown Overflow'),
+        ui.table(
+            name='table',
+            columns=[
+                ui.table_column(name='markdown', label='Markdown (No overflow)', 
+                    sortable=True, searchable=True, max_width='250'),
+                ui.table_column(name='markdown_tooltip', label='Tooltip', 
+                    sortable=True, searchable=True, max_width='70', cell_overflow='tooltip',
+                    cell_type=ui.markdown_table_cell_type(target='_blank')),
+                ui.table_column(name='markdown_wrap', label='Wrap', max_width = '70',
+                                cell_type=ui.markdown_table_cell_type(target='_blank'), cell_overflow='wrap'),
+            ],
+            height='800px',
+            rows=[
+                ui.table_row(name='row1', cells=['Normal text', 'Hello World! Make a tooltip!', 'Hello World! Wrap this!']),
+                ui.table_row(name='row2', cells=['Bold text', 'This is a **bold** text.', 'This is a **bold** text.']),
+                ui.table_row(name='row3', cells=['Italicized text', 'This is a _italicized_ text.', 'This is a _italicized_ text.']),
+                ui.table_row(name='row4', cells=['Link', '<http://wave.h2o.ai>', '<http://wave.h2o.ai>']),
+                ui.table_row(name='row5', cells=['Absolute link with label', '[Wave website as tooltip](http://wave.h2o.ai/)', '[Wave website wrapped](http://wave.h2o.ai/)']),
+                ui.table_row(name='row6', cells=['Relative link with label', '[Go to /wave](/wave)', '[Go to /wave](/wave)']),
+                ui.table_row(name='row7', cells=['Email', '<[email protected]>', '<[email protected]>']),
+                ui.table_row(name='row8', cells=['Code', '``inline code with tooltip``', '``inline code that wraps``']),  # change to monospaced font
+            ]
+        )
+    ])
+
+    await q.page.save()

py/examples/tour.conf

@@ -98,6 +98,7 @@ table_pagination_download.py
 table_pagination_groups.py
 table_menu.py
 table_markdown.py
+table_markdown_overflow.py
 tags.py
 image.py
 image_popup.py

ui/src/table.tsx

@@ -361,7 +361,7 @@ const
           cellOverflow: c.cell_overflow,
           styles: { root: { height: 48 }, cellName: { color: cssVar('$neutralPrimary') } },
           isResizable: true,
-          isMultiline: !!c.cell_type?.markdown || c.cell_overflow === 'wrap',
+          isMultiline: c.cell_overflow === 'wrap',
           filters: c.filterable && m.pagination ? c.filters : undefined,
         }
       })),
@@ -499,7 +499,13 @@ const
         if (col.cellType?.icon) return <XIconTableCellType model={col.cellType.icon} icon={item[col.key]} />
         if (col.cellType?.tag) return <XTagTableCellType model={col.cellType.tag} serializedTags={item[col.key]} />
         if (col.cellType?.menu) return <XMenuTableCellType model={{ ...col.cellType.menu, rowId: String(item.key) }} />
-        if (col.cellType?.markdown) return <XMarkdownTableCellType model={{ ...col.cellType.markdown, content: item[col.key] }} />
+        if (col.cellType?.markdown) {
+          return (
+            <TooltipWrapper>
+              <XMarkdownTableCellType model={{ ...col.cellType.markdown, content: item[col.key] }} />
+            </TooltipWrapper>
+          )
+        }
         if (col.dataType === 'time') {
           const epoch = Number(v)
           v = new Date(isNaN(epoch) ? v : epoch).toLocaleString()