mixing search + table in plain HTML

Community Help
1

Hi Community.

I managed to cobble together a combination of search + table inputs using standard HTML (no notebook; no framework). It’s pretty concise, but I wonder whether I could do better to correctly leverage the Observable runtime and to avoid having to dispose of and re-render my table with event listeners. Any suggestions?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ObservableHQ Table with Search</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@observablehq/inputs@0.12/dist/index.css">
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>

    <h2>Observable Search + Table</h2>
    <div id="search-container"></div> 
    <div id="table-container"></div>

    <script type="module">
        import * as Inputs from "https://cdn.jsdelivr.net/npm/@observablehq/inputs@0.12/+esm";

        const csv_source = `Name,Age,City
        Alice,25,New York
        Bob,30,Los Angeles
        Charlie,22,Chicago
        David,35,Houston
        Eva,28,San Francisco`;

        let data = d3.csvParse(csv_source);

        const search = Inputs.search(data, { placeholder: "Search table..." });
        document.getElementById("search-container").append(search);

        let table = Inputs.table(search.value, { format: { Age: d3.format("d") } });
        document.getElementById("table-container").append(table);

        search.addEventListener("input", () => {
            const filtered_table = Inputs.table(search.value, { format: { Age: d3.format("d") } });
            document.getElementById("table-container").replaceChildren(filtered_table);
        });

    </script>

</body>
</html>