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`']
    	]);
    });