React-Table 固定第一行

Question

对于初学者，我已经阅读了这篇关于使用页脚修复最后一行的文章，以及关于在排序时忽略顶行的整个主题。 事实上，我已经多次阅读这个线程。

这些线程关于如何用 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>

我目前的目标是以任何可能的方式创建一个固定的顶行。 这是否是由（a）具有所需的第一行的数据作为在所述第一对象data阵列，或（b）具有在一个对象，它是完全从分离期望的第一行的数据data阵列，和编码到列的header ，或 (c) 一些其他方法，我不介意它是否有点 hacky。 看来，至少，有没有非哈克方法，这无论如何...随意创建的虚拟数据之外的data ，如果你能够将它作为脚顶行。

我想将固定的第一行与其上方的标题和下方的行设置为不同的样式。 为了这篇文章，在这一行上任何简单的样式（例如不同的背景颜色）就足够了！

这个网站（不是用 React 构建的）有一个固定第一行的很好的例子。 对表格进行排序时， Totals行仍位于顶部。 它的样式也与其他行分开。

将在 2 天内赏金这篇文章，以及任何事先的答案，因为我真的可以真正真正地使用帮助。 任何想法/帮助表示赞赏！

编辑： - 另一个建议（虽然我不知道如何实现）是简单地将 React-Table 的Footer重新定位为标题和数据之间的第一行。 Footer不受排序的影响，尽管它在底部，而不是顶部。

编辑 2： - 根据这个线程，不可能有第三个 headerGroup，因为我的网站表已经有一个 headerGroup 和另一个主标题，所以这是必需的。

Answer 1

添加带有高度的样式选项

style={{
    height: "200px"
}}

 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} style={{ height: "200px" }} 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>

Answer 2

如果您不需要页脚，您可以渲染其中的第一行，然后重新排序 html：

.rt-table > .rt-thead { order: -2 }
.rt-table > .rt-tbody { order: -1 }
.rt-table > .rt-tfoot { order: -2 }