Inputs.form() lets you compose multiple inputs into one. You can technically do the same yourself, but it removes some boilerplate for you.
That in turn makes it easier to create data-driven filters. Here’s a basic example using the built-in penguins dataset:
~~~js
const prop = (arr, name) => arr.map(d => d[name]);
const unique = (arr) => [...new Set(arr)];
~~~
~~~js
const data = penguins;
const choices = view(Inputs.form({
species: Inputs.checkbox(unique(prop(data, "species")), {label: "Species"}),
island: Inputs.checkbox(unique(prop(data, "island")), {label: "Island"}),
sex: Inputs.checkbox(unique(prop(data, "sex")), {label: "Sex"}),
}));
~~~
~~~js
const filters = Object.entries(choices).map(
([name, values]) => values.length
? d => values.some(v => v === d[name])
: () => true
);
const filtered = data.filter(d => filters.every(f => f(d)));
display(Inputs.table(filtered));
~~~
