Formatting the cells
The Table supports a simple subset of Markdown out of the box.
-
ts.ui.get('#table1', table => { table.rows([ ['*Italic text*'], ['**Strong text**'], ['~~Strike text~~'], ['`monotype text`'] ]); });
Use double newline \n
to render multiple paragraphs. We also have
UL
lists.
-
ts.ui.get('#table2', table => { table.rows([ ['Para 1\n\n\Para 2\n\nPara 3'], ['* Item 1\n* Item 2\n* Item 3'] ]); });
To support links, you'll first need to call the
linkable
method, just to remind yourself that you may now become exposed to
phishing attacks.
-
ts.ui.get('#table3', table => { table.linkable(); table.rows([ ['Please visit [Tradeshift](http://www.tradeshift.com)'] ]); });
When you link to something, make sure to include the protocol
http(s)://
and note that links should not be used for internal navigation, at
least not just yet.
If you need to support links only in specific column, you can set the
linkable
property to true
in a column's config:
-
ts.ui.get('#table4', table => { table.cols([ {label: 'Disabled link column'}, {label: 'Not disabled link column', linkable: true} ]); table.rows([ ['Please visit [Tradeshift](http://www.tradeshift.com)', 'Please visit [Tradeshift](http://www.tradeshift.com)'] ]); });
If the link should work more like a button, you can intecept the click action with the
onlink
callback. In this case, you can use any string as the
href
.
-
var popup = ts.ui.Notification; ts.ui.get('#table5', table => { table.linkable(function onlink(anystring) { popup.success(anystring); }).rows([ ['Choose link [one](ONE) or [two](TWO) or [three](THREE).'] ]); });
You can disable the Markdown in the table by call the disableMarkdown
method.
To enable it again you can call the enableMarkdown
method.
-
ts.ui.get('#table6', function(table) { table.disableMarkdown(); table.rows([ ['*Italic text*'], ['**Strong text**'], ['~~Strike text~~'], ['`monotype text`'] ]); });
You can disable the Markdown in specific column by column's property
markdownFormatting
:
-
ts.ui.get('#table7', function(table) { table.cols([ {label: 'Disabled markdown column', markdownFormatting: false, linkable: true}, {label: 'Not disabled markdown column'} ]); table.rows([ ['*Italic text*', '*Italic text*'], ['**Strong text**', '**Strong text**'], ['~~Strike text~~', '~~Strike text~~'], ['`monotype text`', '`monotype text`'] ]); });