How to use Inputs outside Observable?

Community Help
1

Is it possible to use Inputs outside ObservableHQ?

I want to use ObservableHQ’s Inputs.table to render a table, but I can’t get it to work. Here’s what I did:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Inputs Table</title>
      <script src="https://cdn.jsdelivr.net/npm/@observablehq/inputs@0.10.4/dist/inputs.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
      <script src="https://cdn.jsdelivr.net/npm/htl@0.3.1/dist/htl.min.js"></script>
   </head>
   <body>
      <div id="tab"></div>
     <script>
       d3.csv("https://raw.githubusercontent.com/hadley/data-baby-names/master/baby-names.csv", d3.autoType).then(function(data) {
         console.log(data);
         console.log(Inputs.table);
         document.getElementById("tab").appendChild(Inputs.table(data));
    });
      </script>
   </body>
</html>

And got this error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'html')
    at Object.e.table (inputs.min.js:82)
    at Untitled-1.html:18
e.table @ inputs.min.js:82
(anonymous) @ Untitled-1.html:18
Promise.then (async)
(anonymous) @ Untitled-1.html:15

Thank you.

2

try changing the order

      <script src="https://cdn.jsdelivr.net/npm/htl@0.3.1/dist/htl.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/@observablehq/inputs@0.10.4/dist/inputs.js"></script>
2 Likes