Display hyperlinks in Inputs.table

Community Help
1

Hello,

I’m relatively new to ObservableHQ and JavaScript in general. I am using the table input to display data from a Google Sheets .csv file, and everything loads perfectly.

However, I’m wondering if there is a way to display one of my columns as a hyperlink. For example, I’d like for each row to contain the word ‘Link’, but each row would hyperlink out to a different URL based on the data contained in my .csv file. Some rows also contain 3 or more links; in those cases, it’d be great to find a programmatic way to just repeat the word ‘Link,’ but iterate through the different URLs in the row, and separate each with a space or comma, for example.

I’ve tried to manually add ‘a’ tags during my data import step, and I’ve tried using the .link() method during the data import step, too. Perhaps I’ve made a mistake in those attempts.

Here’s a link to my notebook, where you can see how I’ve imported the data and display the table.

https://observablehq.com/d/d4c1d6fb2d46f02b

Thanks.

2

You can create links using the format option and returning a DOM element from your format function. For example:

Inputs.table(dataFilter, {
  sort: "Drugs tested",
  format: {
    NCTId: id => htl.html`<a href=https://clinicaltrials.gov/ct2/show/${id} target=_blank>${id}</a>`
  },
  layout: "auto",
  rows: 20
})

If you want to generate links that don’t come from a single column, then I would suggest first deriving a new column, and then writing the corresponding format function for it. For example:

Inputs.table(dataFilter.map(d => ({Link: ["https://example.com", "https://example.com"], ...d})), {
  sort: "Drugs tested",
  format: {
    Link: links => htl.html`${links.map((link, i) => htl.html`<a href=${link} target=_blank>${i + 1}</a> `)}`
  },
  layout: "auto",
  rows: 20
})
1 Like
3

Hey @mbostock thanks for your response, and for looking at the notebook! I will try out this suggestion.

1 Like