如何禁用GridJS表格中指定列的排序功能？

官方推荐方法 #

GridJS的列配置中，sort属性不仅支持自定义比较逻辑，设置为false即可直接禁用该列的排序功能。修改你的列配置，给Actions列添加sort: false：

this.usersGrid = new gridjs.Grid({
    columns: [
        { id: 'email', name: 'Email' },
        { id: 'userName', name: 'User Name' },
        {
            id: '',
            name: 'Actions',
            formatter: (_, row) => gridjs.html(
                `<button class="outline" onclick="window.users.edit('${row.cells[2].data}')">Edit</button>`
            ),
            width: 175,
            attributes: {
                class: 'center-header'
            },
            sort: false // 新增：禁用该列排序
        }
    ],
    search: true,
    server: {
        data: async (opts) => {
            // omitted for brevity
        }
    },
    pagination: {
        enabled: true,
        limit: 10
    },
    sort: true
});
this.usersGrid.render(document.getElementById('grid-users'));

设置后，该列表头不会显示排序按钮，点击也不会触发排序逻辑，完全满足需求。

临时兼容方案（针对旧版本GridJS） #

如果你的GridJS版本不支持sort: false，可以通过以下两种方式组合解决：

1. CSS精准隐藏排序按钮 #

/* 定位到Actions列（id为空），隐藏排序按钮 */
th[data-column-id=""] .gridjs-sort {
    display: none;
    pointer-events: none;
}

2. 事件委托阻止排序触发 #

由于GridJS是动态渲染DOM，直接绑定静态元素事件无效，需要用事件委托绑定到表格容器：

document.getElementById('grid-users').addEventListener('click', function(e) {
    // 判断点击目标是否为Actions列的表头
    const targetTh = e.target.closest('th[data-column-id=""]');
    if (targetTh) {
        e.preventDefault();
        e.stopPropagation();
    }
});

这样点击Actions列表头时，会直接阻止GridJS的排序逻辑触发，避免打乱现有排序状态。

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