# Is there a way to create column filter methods that can function as an Input with viewof?

**URL:** <https://talk.observablehq.com/t/is-there-a-way-to-create-column-filter-methods-that-can-function-as-an-input-with-viewof/9074>\
**Category:** Help\
**Created:** [April 4, 2024, 9:32pm UTC](https://talk.observablehq.com/t/is-there-a-way-to-create-column-filter-methods-that-can-function-as-an-input-with-viewof/9074 "2024-04-04T21:32:23Z")\
**Posts on this page:** 5\
**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:** [April 4, 2024, 9:32pm UTC](https://talk.observablehq.com/t/is-there-a-way-to-create-column-filter-methods-that-can-function-as-an-input-with-viewof/9074/1 "2024-04-04T21:32:23Z")

</div>

In the notebook below I’ve outlined my question. I’ll repeat it here but the basic idea is that I want to add dropdown filters to `Inputs.table` or something like it.

### Question

Is there any way to add filters to the column header? So for example, I’d love a drop down where `Gender` has unique values for (“Male”, “Female”) and I could apply a filter to the whole `tbl` (say all “Male”).

### Note

I know that one can create a data table (see below). Those are _amazing_ but I want to implement this in code for re-use in quarto and observable framework.

Here is the notebook:

> **[Column Filter Methods](https://observablehq.com/d/b86ab03c52c8c262)**
>
> Let's create an \`Inputs.table\` where the \`viewof\` is the entire table. You can see that that changes by clicking the box on the left. Question Is there any way to add filters to the column header? So for example, I'd love a drop down where \`Gender\`...

Thoughts?

Sam

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [April 5, 2024, 7:01am UTC](https://talk.observablehq.com/t/is-there-a-way-to-create-column-filter-methods-that-can-function-as-an-input-with-viewof/9074/2 "2024-04-05T07:01:12Z")

</div>

That’s not supported in Inputs.table, but you can create each of the drop-downs individually, then create a table downstream.

For example:

```
viewof year = Inputs.select([null, 1960, 1961, 1962, …])

viewof city = Inputs.select([null, "Boston", "Singapore", …])

filtered = data
           .filter((d) => year === null || d.year === year)
           .filter((d) => city === null || d.city === city)

Inputs.table(filtered)

```

In [summary tables by Fil · Pull Request #1120 · observablehq/framework · GitHub](https://github.com/observablehq/framework/pull/1120) we have a prototype to do this in a more integrated way, but it’s far from being usable.

---

<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:** [April 5, 2024, 6:22pm UTC](https://talk.observablehq.com/t/is-there-a-way-to-create-column-filter-methods-that-can-function-as-an-input-with-viewof/9074/3 "2024-04-05T18:22:46Z")

</div>

Ah thanks for the reply. Your suggestion makes complete sense but it sort of the opposite of what I am trying to achieve. Ultimately trying to provide a UI piece that limits a large number of values in `Inputs.select` by having a top level table for selection.

I did think based on this that I might be able to use `Inputs.bind` like this:

```js
Inputs.bind(
  Inputs.table(distinctTable, {columns: ["Gender"]}),
  Inputs.table(distinctTable, {columns: ["Name"]})
)

```

but reading the docs a bit closer I realized that that’s not how it is meant to be used.

But I am wondering if this approach _could_ work generally where one makes several single column tables and then uses the selection values. I get a bit confused on how to align Inputs horizontal but is it possible to put line up several `Inputs.table` objects horizontally so that it looks like one table but each column ends up with an input check mark?

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [April 6, 2024, 3:16pm UTC](https://talk.observablehq.com/t/is-there-a-way-to-create-column-filter-methods-that-can-function-as-an-input-with-viewof/9074/4 "2024-04-06T15:16:43Z")

</div>

One of the challenges of filtering a table is that you lose the current selection when the table rerenders. Even if you reassign the previous value it will still discard items that are filtered out.

I put together a guide for a helper that I had created a while back:

> **[Filtering a selection](https://observablehq.com/d/fe65c694a06cc12b)**
>
> Demonstrates how to filter and update an input while preserving all selected values. First, let's define the data that the example below will select from: We import a helper that allows us to keep track of "hidden" selections. Next we define a set of...

---

<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:** [April 16, 2024, 8:30pm UTC](https://talk.observablehq.com/t/is-there-a-way-to-create-column-filter-methods-that-can-function-as-an-input-with-viewof/9074/5 "2024-04-16T20:30:00Z")

</div>

This is perfect. Thank you! I modified the template function like so:

```js
function filterGrid(inputs) {
  const scope = DOM.uid().id;
  return htl.html`<div class=${scope}>${Object.values(inputs)}
    <style>
      .${scope} { 
        display: flex; 
        flex-wrap: wrap; 
        gap: 0.5ch; 
        font-size: 0.8em; 
      }
      .${scope} form, .${scope} form > * { 
        width: fit-content !important margin-bottom: 1em;
      }
  `;
}

```