Dynamic table columns

[balazskosi]

Hi,

I want to create tables (using Inputs.table) where the columns visibility can be toggled by the user.

My approach is to create an Inputs.checkbox widget with all the columns and an Inputs.table where
the columns of the table are based on the value of the checkbox widget.

I want to turn this into a function and what I am stuck on is:

How to make the table reactive to the checkboxes within the function?

Or more generally how can I emulate the reactivity of multiple code blocks in a single code block?

[Fil]

For a generic answer, you could pull in the runtime and use it to orchestrate the reactivity across as many variables as you want.

If you only have a few checkboxes, it is probably lighter to add "vanilla" event listeners to your inputs.

[Fil]

This looks good, I think. You can probably write something more concise with Element.replaceWith:
columnsInput.addEventListener("input", () => table.replaceWith(table = renderTable()))

For runtime, I have no specific hints besides the documentation.

[balazskosi]

Thanks! I'll go with event listeners for now.

The next problem I'm bumping into is the replication of the selection into the new table.

My data comes from a duckdb query and so it is an apache-arrow datastructure.

Doing Inputs.table(data, { ...options, columns: columnsInput.value, value: table.value }) does not work because the values are Proxies and it seems that equality does not work on them (the selection here always turns up empty: https://github.com/observablehq/inputs/blob/main/src/table.js#L313 ).

Is there maybe a workaround?

[Fil]

That’s a bug with Inputs.table. Can you please open an issue on https://github.com/observablehq/inputs?

A work-around is probably to arrayify the data — but that might have some performance cost for huge datasets.

function createTable(data, …) {
  data = [...data];
}

[balazskosi]

Thank you! observablehq/inputs#272

[balazskosi]

I've got the example working with runtime. How could this be improved?

const table = createTable(
    [1,2,3,4].map(i => ({x:i, y:2*i})), 
    { 
        columns: [ "x", "y" ], 
        required: false 
    });

const selected = view(table);

display(selected);

import {Runtime} from "npm:@observablehq/runtime"

async function createTable(data, options) {
    const runtime = new Runtime();
    const module = runtime.module();
    module.variable().define("columnInput", [], () => Inputs.checkbox(options.columns, {value: options.columns}));
    module.variable().define("columns", ["columnInput"], (columnInput) => Generators.input(columnInput));
    module.variable().define("table", ["columns"], columns => Inputs.table(data, { ...options, columns}));

    return Generators.observe(notify => {
        module.variable({ fulfilled: notify }).define("element", ["columnInput", "table", "columns"], (columnInput, table) => {
            const element = html`${columnInput} ${table}`;
            table.addEventListener("input", e => element.dispatchEvent(new CustomEvent("input")));
            Object.defineProperty(element, "value", {
                get() { return table.value; }
            });
            return element;
        });
    });
}

[eli-s-goldberg]

Hi @balazskosi and @Fil.

I've been wanting something similar, except with the addition of enabling a degree of editing and expansion for tables.

Here's a demo.

Here's the code itself

FYI: @Fil, this was MADDENING to get to work. Curious to get your thoughts, but I have no idea how you and Mike do it. Straight code god saints.