如何让MUI Datatable中已勾选行置顶显示？

API 探路者

2026-7-25

实现MUI Datatable勾选行置顶的方案

核心思路

通过自定义排序逻辑，将已勾选行的优先级设为最高，强制让这类行显示在表格顶部，同时可保留未勾选行的原有排序规则。

具体实现步骤

维护勾选状态缓存
在组件内部用状态存储已勾选行的唯一标识集合，通过表格的行选择回调更新这个集合：

const [selectedRowIds, setSelectedRowIds] = useState(new Set());

const handleRowSelection = (currentRows, allRows) => {
  const ids = new Set(
    allRows.filter(row => row.selected).map(row => row.data[0]) // 假设第一列为行唯一标识
  );
  setSelectedRowIds(ids);
};

配置自定义排序函数
在表格的options中设置customSort，优先排列已勾选行：

const options = {
  onRowSelectionChange: handleRowSelection,
  customSort: (data) => {
    // 拆分已勾选和未勾选行
    const selectedRows = data.filter(row => selectedRowIds.has(row[0]));
    const unselectedRows = data.filter(row => !selectedRowIds.has(row[0]));
    // 合并结果：勾选行在前，未勾选行保持原有顺序
    return [...selectedRows, ...unselectedRows];
  }
};

触发表格重新排序
借助useRef获取表格实例，在勾选状态变化时手动触发排序更新：

const tableRef = useRef();

const handleRowSelection = (currentRows, allRows) => {
  const ids = new Set(
    allRows.filter(row => row.selected).map(row => row.data[0])
  );
  setSelectedRowIds(ids);
  // 触发表格重新排序
  tableRef.current.sort();
};

// 绑定ref到MUI Datatable组件
<MUIDataTable ref={tableRef} data={tableData} columns={columns} options={options} />