gridjs - how to load from HTML

Question

I have an existing HTML table. I'd like a thin JS library to add simple search and sorting. GridJS looks promising, but I don't understand the docs for loading from HTML. For example, I'm unable to use the useRef function. Even the first line of code in the example fails for me:

>>> gridjs.useRef(null)
Uncaught TypeError: Bt is undefined
    Preact 3
    <anonymous> debugger eval code:1

Here is a minimal example:

<html>
<head>
    <link href='https://unpkg.com/gridjs/dist/theme/mermaid.min.css' rel='stylesheet'>
    <script src="https://cdn.jsdelivr.net/npm/gridjs/dist/gridjs.umd.js"></script>
</head>
<body>
    <table id='table'>
        <tr>
            <td>Foo</td>
            <td>Bar</td>
            <td>Baz</td>
        </tr>
    </table>
    <script>
        window.onload = function() {
            var node = document.getElementById('table');
            new gridjs.Grid({'from': node});
        }
    </script>
</body>
</html>

I get the error

Uncaught TypeError: t.querySelector(...) is null
    fromHTMLTable header.ts:288
    fromUserConfig header.ts:256
    fromUserConfig config.ts:179
    update config.ts:146
    e grid.ts:15
    onload example.html:17
    EventHandlerNonNull* example.html:15

This is probably a bug for their tracker: https://github.com/grid-js/gridjs/issues. It seems like it's meant to clear the `from` input in order to render into a wrapper, but it tries to read after clearing, oddly. As far as I can tell `from` is totally bugged. — rschristian, Oct 17 '22 at 07:48

zpottie · Answer 1 · 2023-01-17T03:56:29.183

I know this answer comes a bit late, but I hope it helps future visitors.

It looks like you still need to call the render function, and the way it seems to work is it hides the table in the DOM and injects the Grid.js table into the wrapper you specify.

For example, this worked for me:

new gridjs.Grid({
    from: document.getElementById('mySourceTable'),
}).render(document.getElementById('myDestinationWrapper'));

Lastly, I think thead & tbody is needed - the documentation shows these elements as well: From HTML Table

Here's a snippet as a demo:

document.addEventListener("DOMContentLoaded", function() {
  new gridjs.Grid({
    from: document.getElementById('sourceTable')
  }).render(document.getElementById('destinationWrapper'));
});

<html>

<head>
  <link href='https://unpkg.com/gridjs/dist/theme/mermaid.min.css' rel='stylesheet'>
  <script src="https://cdn.jsdelivr.net/npm/gridjs/dist/gridjs.umd.js"></script>
</head>

<body>
  <div id='destinationWrapper'></div>
  <table id='sourceTable'>
    <thead>
      <tr>
        <th>One</th>
        <th>Two</th>
        <th>Three</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Foo</td>
        <td>Bar</td>
        <td>Baz</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

gridjs - how to load from HTML

1 Answers1