GridJS从HTML表格加载失败求助：含报错及示例代码

问题1：gridjs.useRef报错 #

直接调用gridjs.useRef会报错是因为useRef是Preact/React专属的钩子函数，GridJS的UMD版本并未在全局暴露该API。纯原生JS环境下无需使用useRef，直接通过document.getElementById获取DOM节点即可。

问题2：加载表格时t.querySelector(...) is null错误 #

这个错误的核心原因是：GridJS要求被加载的HTML表格必须包含<thead>和<tbody>结构，你的示例表格只有<tr>，没有明确区分表头与表体，导致GridJS无法正确解析表格结构。

修复后的完整代码 #

<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>
    <!-- 为原表格添加规范的thead和tbody结构 -->
    <table id='table'>
        <thead>
            <tr>
                <th>列1</th>
                <th>列2</th>
                <th>列3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Foo</td>
                <td>Bar</td>
                <td>Baz</td>
            </tr>
        </tbody>
    </table>
    <!-- 准备空容器用于挂载GridJS渲染后的表格 -->
    <div id="gridjs-container"></div>

    <script>
        window.onload = function() {
            const originalTable = document.getElementById('table');
            // 初始化GridJS并开启搜索、排序功能
            new gridjs.Grid({
                from: originalTable,
                search: true,
                sort: true,
                pagination: false
            }).render(document.getElementById('gridjs-container'));
            
            // 可选：隐藏原表格，避免页面重复显示
            originalTable.style.display = 'none';
        }
    </script>
</body>
</html>

关键修复点说明 #

1. 规范表格结构：给原表格添加<thead>（包含表头<th>）和<tbody>（包含数据行<tr>），这是GridJS解析HTML表格的硬性要求。
2. 指定挂载容器：GridJS需要将渲染后的表格挂载到空DOM容器中，必须调用.render()方法指定目标容器，而非仅初始化实例。
3. 开启所需功能：通过search: true和sort: true直接开启搜索、排序功能。
4. 处理原表格：可选择隐藏原表格，避免页面同时显示两个表格。

额外注意事项 #

• 确保GridJS的CSS与JS版本匹配，避免版本不一致引发兼容性问题。
• 若无需保留原表格，也可直接删除原表格，改用GridJS的columns和data配置直接定义数据，但基于你的需求，上述方案更贴合场景。

内容的提问来源于stack exchange，提问作者jds