Dynamically rename column headers in `Inputs.table`

I am trying figure out how to dynamically rename columns particularly in Inputs.table. I have a notebook to illustrate: Input tables / Sam Albers | Observable

But here is my process:

Create a table that is just the islands and species columns:

viewof tab = Inputs.table(penguinsMeta)

Take that input (tab) and join that on the penguins data to return all data that matches my selection with Inputs.table:

penguinsSub = penguinsAq.join(aq.from(tab))

Plot resulting data

Plot.plot({
  marks: [
    Plot.barY(penguinsSub, {x: "culmen_length_mm", y: "body_mass_g", sort: {x: "y", reverse: true}}),
    Plot.ruleY([0])
  ]
})

Now here is my issue:

I want to append _tab to any column name that starts with an s. But only the column name, not the column. I know I can manually do this like so:

viewof tab = Inputs.table(penguinsMeta, {
  header: {
    species: "species_tab"
  }
})

However I want to make it so that it will append _tab to a column called sloth or sleep as well. And because I am doing a join on that original data with the original column headers I donā€™t want to permanently change the column names - this is strictly for presentation purposes.

Any ideas?

Iā€™d do this by dynamically generating the object you pass to the table function. Here Iā€™ve also renamed the ā€œislandā€ column to ā€œisland_demoā€, just to show how to mix manual and automatic renaming.

viewof tab = Inputs.table(penguinsMeta, {
  header: {
    island: "island_demo",
    ...Object.fromEntries(
      penguinsMeta
        .columnNames()
        .filter((name) => name.startsWith("s"))
        .map((name) => [name, `${name}_tab`])
    )
  }
})
1 Like

brilliant