Caption Inputs.table

Community Help
1

Is there a simple, robust way to add a caption (above or below, centred or left/right-justified) to an Inputs.table? Currently I just use an adjacent markdown cell but it’s not pretty. I had a look for examples but came up short.

2

Not officially, and making a top caption work isn’t trivial due to the way the table is layouted. If you don’t mind a bottom caption that wobbles a bit on scroll, you can do:

{
  const form = Inputs.table(penguins);
  form.querySelector("table").prepend(htl.html`<caption style="caption-side:bottom;position:sticky;bottom:0;background:white;border-top:solid 1px #ccc">Yep, this is a table`);
  return form;
}

Alternatively you can use a <figure>:

htl.html`<figure style="max-width:100%">
${Inputs.table(penguins)}
<figcaption>Yep, that's a table.</figcaption>
</figure>
`

If you also want to retain access to the table’s value, do:

viewof foo = Object.defineProperty(htl.html`<figure style="max-width:100%">
${Inputs.table(penguins)}
<figcaption>Yep, that's a table.</figcaption>
</figure>
`, "value", {
  get() { return this.querySelector("form").value },
  set(value) { this.querySelector("form").value = value }
})
4 Likes
3

Thank you so much! I used a couple of your methods to achieve what I wanted.