data = FileAttachment("data/building_a_library_database.csv")
  .csv({ typed: true })

Search for recommended classical music recordings

Source: BBC Radio 3 Building a Library database

viewof filtered = Inputs.select(
    d3.group(data, (d) => d.composer),
    {sort: true, label: "Select a composer"}
  );

Inputs.table(filtered, {
  sort: "piece",
  columns: [
  "piece", 
  "top_recommendation", 
  "date", 
  "reviewer", 
  "podcast"
  ],
  header: {
    composer: "Composer",
    piece: "Piece",
    top_recommendation: "Top recommendation",
    date: "Date",
    reviewer: "Reviewer",
    podcast: "Podcast"
    },
  format: {
    top_recommendation : overflow_large(
      filtered,
      d => d.top_recommendation
    ),
    reviewer : (reviewer) =>
      reviewer.includes("NA")
        ? "" : reviewer,
    podcast : (podcast) =>
      podcast.includes("http")
        ? htl.html`<a href=${podcast} target=_blank>Link</a>`
        : "",
  },
  layout: "auto",
  rows: 20
})

function overflow_large(words) {
  return (x) => htl.html`<div style="
    display: inline-block;
    width: 350px;
    white-space: pre-line;
    break-text: auto;
    overflow-wrap: normal;
    height: auto;
    word-wrap: break-word;
    overflow: auto;
">${x.toLocaleString("en")}`;
}