使用GridJS转换HTML表格后列排序功能失效问题求助

我尝试用GridJS给现有HTML表格添加排序和搜索功能，目前搜索栏正常工作，但列排序完全没反应。相关代码如下：

const table = new gridjs.Grid({
    search: true,
    pagination: true,
    sort: true,
    resizable: true,
    from: document.getElementById('myTable'),
}).render(document.getElementById('destination'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/gridjs/6.0.6/gridjs.production.min.js"></script>
<link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet"/>

<div id='destination'></div>
<table id="myTable">
    <thead class="align-bottom">
        <tr>
            <th>Prénom</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <span>aaaa</span>
            </td>
        </tr>
        <tr>
            <td>
                <span>bbbb</span>
            </td>
        </tr>
        <tr>
            <td>
                <span>cccc</span>
            </td>
        </tr>
    </tbody>
</table>

问题原因 #

当使用from选项导入现有HTML表格时，GridJS默认会将单元格的整个DOM元素（比如这里的<td><span>aaaa</span></td>）作为排序依据，而不是提取其中的纯文本内容。排序时会基于HTML字符串的顺序比较，导致视觉上看起来排序没效果。

解决方法 #

方法1：自定义列排序逻辑

通过columns选项为目标列指定自定义排序函数，提取单元格内的纯文本进行比较：

const table = new gridjs.Grid({
    search: true,
    pagination: true,
    sort: true,
    resizable: true,
    from: document.getElementById('myTable'),
    columns: [
        {
            name: 'Prénom',
            // 自定义排序逻辑，提取纯文本后比较
            sort: (a, b) => {
                const textA = a.textContent.trim();
                const textB = b.textContent.trim();
                return textA.localeCompare(textB);
            }
        }
    ]
}).render(document.getElementById('destination'));

方法2：简化原始HTML结构

如果不需要单元格内的<span>标签，直接将纯文本放在<td>中，GridJS会自动识别文本内容用于排序：

<tbody>
    <tr>
        <td>aaaa</td>
    </tr>
    <tr>
        <td>bbbb</td>
    </tr>
    <tr>
        <td>cccc</td>
    </tr>
</tbody>

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