Help

Welcome to the Airtable Community! If you're new here, check out our Getting Started area to get the most out of your community experience.

Possible to make line break in a table

Topic Labels: Scripting extentions
Solved
Jump to Solution
863 6
cancel
Showing results for 
Search instead for 
Did you mean: 

I’m trying to make a simple repport and wonder if I can make line breaks in a table?

I have tried a few different things like:

  output.table([
        {'': 'start', '%':0},
        {'': 'Halfway', '%':50},
        {'': 'finished\ncompleted' , '%':100},
        ]
    )

 output.table([
        {'': 'start', '%':0},
        {'': 'Halfway', '%':50},
        {'': 'Delivered<br>Completed' , '%':100},
        ]
    )

 output.table([
        {'': 'start', '%':0},
        {'': 'Halfway', '%':50},
        {'': 'Delivered\nCompleted' , '%':100},
        ]
    ) 

output.table([
        {'': 'start', '%':0},
        {'': 'Halfway', '%':50},
        {'': ['Delivered', 'Completed'] , '%':100},
        ]
    ) 

 output.table([
        {'': 'start', '%':0},
        {'': 'Halfway', '%':50},
        {'': `Delivered
        Completed` , '%':100},
        ]
    )

The closest I’ve come to a line break is this:

 output.table([
        {'': 'start', '%':0},
        {'': 'Halfway', '%':50},
        {'': [{'Finished': 'Delivered'}, {'Finished': 'completed' }] , '%':100},
        ]
    )

However it’s not user friendly as it just lists two objects, and I just need two stacked strings.

Is it not possible at all to make a line break?

1 Solution

Accepted Solutions

No - just use the script block to fabricate a markdown string that contains table properties like this.

UPDATE - not entirely certain you can insert line breaks inside markdown strings, so I may be in err about this. But, the markdown columns should naturally add line wraps given the width of the content and the width of the viewport.

output.markdown('# Record Linking Example');

// select the table
let currentTable = await input.tableAsync('Select a table');
let queryResults = await currentTable.selectRecordsAsync();
let oRecords     = queryResults.records;

// build the list
var recordList = "";
for (let record of oRecords)
{
    recordList += "- [" + record.name + "](" + currentTable.url + "/" + record.id + ")\n";
}

// render the list
// output.markdown(recordList);

// build the list
var recordList = "| Record ID   | Name        |\n";
recordList    += "| ----------- | ----------- |\n";
for (let record of oRecords)
{
    thisName = "";
    recordList += "|[" + record.id + "](" + currentTable.url + "/" + record.id + ")|" + record.name + "|\n";
}

// render the list
output.markdown(recordList);

See Solution in Thread

6 Replies 6

Table.output() is not designed for custom rendering of data. If you use output.markdown() and build out the table using markdown tags, you can achieve some degree of newline and wrap control. However, if this is in a script block, you will ultimately hit a ceiling leaving you with three outs:

  1. Write the results data to an actual table where fields do support newline and wrap rendering.
  2. Move from Script Block to a Custom App (and the SDK).
  3. Send the data to something external that handles the rendering required.

Thank you again Bill…

Do you mean sending it back into a table that supports newline and taking it back into the script again.?

One day I want to ‘graduate’ to React and SDK, however might be a bullet a little too big to bite atm. I tried to get to grips with React, but do not have enough time atm to really get it going.

No - just use the script block to fabricate a markdown string that contains table properties like this.

UPDATE - not entirely certain you can insert line breaks inside markdown strings, so I may be in err about this. But, the markdown columns should naturally add line wraps given the width of the content and the width of the viewport.

output.markdown('# Record Linking Example');

// select the table
let currentTable = await input.tableAsync('Select a table');
let queryResults = await currentTable.selectRecordsAsync();
let oRecords     = queryResults.records;

// build the list
var recordList = "";
for (let record of oRecords)
{
    recordList += "- [" + record.name + "](" + currentTable.url + "/" + record.id + ")\n";
}

// render the list
// output.markdown(recordList);

// build the list
var recordList = "| Record ID   | Name        |\n";
recordList    += "| ----------- | ----------- |\n";
for (let record of oRecords)
{
    thisName = "";
    recordList += "|[" + record.id + "](" + currentTable.url + "/" + record.id + ")|" + record.name + "|\n";
}

// render the list
output.markdown(recordList);

Thank you again @Bill.French I fiddled around with the markdown(). Not ideal but does the job for now.
I’ll have to up my game to React so I can get involved with some custom apps.

Indeed, script block is severely limited in terms of UI capabilities. I urge the Airtable team to consider at least adding a sanitized ability to output HTML/CSS into the already sandboxed script block frame. It would allow us to put a nice tidy UX on top of data and computations.