首先，我阅读了使用页脚来修复最后一行的这篇文章，以及忽略排序时的顶部行的整个主题。事实上，我已经多次阅读了这个主题。
这些主题没有得出如何使用react-table固定顶部行的结论，但这对我的当前项目非常重要，我正在寻求解决方案。我创建了以下虚拟表格以帮助发帖：
var ReactTable = ReactTable.default
class App extends React.Component {
constructor() {
super();
this.state = {
data: [
{ firstName: 'joe', lastName: 'james', age: 18, status: 'real', visits: 14 },
{ firstName: 'tom', lastName: 'smith', age: 15, status: 'okay', visits: 24 },
{ firstName: 'tom', lastName: 'smith', age: 15, status: 'okay', visits: 24 },
{ firstName: 'tom', lastName: 'smith', age: 15, status: 'okay', visits: 24 },
{ firstName: 'tom', lastName: 'smith', age: 15, status: 'okay', visits: 24 }
]
};
}
render() {
const { data } = this.state;
return (
<div>
<ReactTable
data={data}
columns={[
{
Header: "Name",
columns: [
{
width: '100',
Header: "First Name",
accessor: "firstName"
},
{
width: '100',
Header: "Last Name",
id: "lastName",
accessor: d => d.lastName
}
]
},
{
Header: "Info",
columns: [
{
width: '100',
Header: "Age",
accessor: "age"
},
{
width: '100',
Header: "Status",
accessor: "status"
}
]
},
{
Header: 'Stats',
columns: [
{
width: '100',
Header: "Visits",
accessor: "visits"
}
]
}
]}
defaultPageSize={5}
showPagination={false}
className="-striped -highlight"
/>
<br />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));<link href="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.5.3/react-table.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.5.3/react-table.js"></script>
<div id="app"></div>data数组中的第一个对象，还是将所需的第一行数据放在与data数组完全分离的对象中，并将其编码到列的header中，或者其他方法，即使它有点hacky，我都不介意。看起来至少没有非hacky的方法...如果你能将它固定在顶部行之外，请随意在data之外创建虚拟数据。我想将固定的第一行样式与上面的标题和下面的行区别开来。为了这篇文章，对这一行进行简单的样式设置（例如不同的背景颜色）就足够了！ 这个网站（虽然不是用React构建的）有一个很好的固定第一行的示例。当您对表进行排序时，
Totals行仍保持在顶部。它也与其他行分开样式。我将在两天内奖励此帖子，并且任何提前回答的答案也会奖励，因为我真的非常需要帮助。欢迎任何想法/协助！
编辑：另一个建议（虽然我不知道如何实现）是简单地重新定位React-Table的Footer作为第一行，在标题和数据之间。Footer不受排序影响，尽管它在底部而不是顶部。
编辑2：根据此线程this thread，不可能有第三个headerGroup，因为我的网站表格已经有一个headerGroup和另一个主标题。