react-data-grid同一列排序与筛选功能异常问题求助

问题出在自定义renderHeaderCell时，完全替换了默认表头内容，丢失了排序功能所需的UI元素和事件绑定。默认情况下，当列设置sortable: true时，表头会自动渲染排序按钮，但自定义renderHeaderCell后需要手动保留这部分逻辑。

修改方案 #

在自定义表头中，调用renderDefaultHeaderCell()获取默认的排序表头组件，再将筛选组件与它组合布局：

{
    key: 'description',
    name: 'Description',
    renderCell: ({ row }) => {
        return <div title={row.description}>{row.description}</div>
    },
    headerCellClass: filterColumnClassName,
    renderHeaderCell: (p) => (
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
            {/* 保留默认排序表头 */}
            {p.renderDefaultHeaderCell()}
            {/* 渲染筛选组件 */}
            <FilterRenderer {...p}>
                {({ filters, ...rest }) => (
                    <FilterByInput
                        {...rest}
                        {...filters}
                        changeHandler={handleChangeInput}
                        inputKey={'description'}
                    />
                )}
            </FilterRenderer>
        </div>
    ),
    resizable: true,
    sortable: true
},

关键说明 #

• p.renderDefaultHeaderCell()会返回内置的排序表头组件，包含排序按钮和排序状态的显示逻辑
• 通过flex布局将排序表头与筛选组件并排，保证功能和布局都正常
• 无需额外处理排序的事件逻辑，默认表头已经绑定了onSortColumnsChange相关的回调

这样修改后，列的排序和筛选功能就能同时正常工作了。

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