diff --git a/py/examples/table_markdown_overflow.py b/py/examples/table_markdown_overflow.py new file mode 100644 index 0000000000..8f38197e68 --- /dev/null +++ b/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', '', '']), + 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', '', '']), + ui.table_row(name='row8', cells=['Code', '``inline code with tooltip``', '``inline code that wraps``']), # change to monospaced font + ] + ) + ]) + + await q.page.save() diff --git a/ui/src/table.tsx b/ui/src/table.tsx index 592b56475c..1e92482678 100644 --- a/ui/src/table.tsx +++ b/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, } })), @@ -485,7 +485,13 @@ const if (col.cellType?.icon) return if (col.cellType?.tag) return if (col.cellType?.menu) return - if (col.cellType?.markdown) return + if (col.cellType?.markdown) { + return ( + + + + ) + } if (col.dataType === 'time') { const epoch = Number(v) v = new Date(isNaN(epoch) ? v : epoch).toLocaleString()