# Dynamically rename column headers in \`Inputs.table\`

**URL:** <https://talk.observablehq.com/t/dynamically-rename-column-headers-in-inputs-table/8594>\
**Category:** Help\
**Created:** [December 12, 2023, 5:11pm UTC](https://talk.observablehq.com/t/dynamically-rename-column-headers-in-inputs-table/8594 "2023-12-12T17:11:20Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![boshek](https://avatars.discourse-cdn.com/v4/letter/b/ba8739/32.png) [@boshek](https://talk.observablehq.com/u/boshek)\
**Post date:** [December 12, 2023, 5:11pm UTC](https://talk.observablehq.com/t/dynamically-rename-column-headers-in-inputs-table/8594/1 "2023-12-12T17:11:20Z")

</div>

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](https://observablehq.com/d/c52a67a80dc6632a)

But here is my process:

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

```js
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`:

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

```

### Plot resulting data

```js
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:

```js
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?

---

<div class="post-metadata">

**Author:** ![mythmon](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mythmon/32/8504_2.png) [@mythmon](https://talk.observablehq.com/u/mythmon)\
**Post date:** [December 12, 2023, 5:28pm UTC](https://talk.observablehq.com/t/dynamically-rename-column-headers-in-inputs-table/8594/2 "2023-12-12T17:28:15Z")

</div>

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.

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

```

https://observablehq.com/embed/d80478894a06b039@65?cells=viewof+tab

---

<div class="post-metadata">

**Author:** ![boshek](https://avatars.discourse-cdn.com/v4/letter/b/ba8739/32.png) [@boshek](https://talk.observablehq.com/u/boshek)\
**Post date:** [December 12, 2023, 6:01pm UTC](https://talk.observablehq.com/t/dynamically-rename-column-headers-in-inputs-table/8594/3 "2023-12-12T18:01:13Z")

</div>

brilliant