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 }