React-Table 修复了第一行

Question

对于初学者，我读过this post on using footers to fix the last row，还有this whole thread on ignoring top-row when sorting。事实上，我已经多次阅读这个帖子了。

关于如何用 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。 看起来至少无论如何都没有非hacky方法......如果您能够将其固定为第一行，请随意在data之外创建虚拟数据。

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

This website here（不是在 React 中内置）有一个很好的例子，即固定的第一行。对表格进行排序时，Totals 行仍位于顶部。它的样式也与其他行分开。

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

编辑： - 另一个建议（虽然我不知道怎么做）是简单地将 React-Table 的 Footer 重新定位为第一行，在标题和数据之间。 Footer 对排序免疫，虽然它在底部，而不是顶部。

编辑 2： - 根据 this thread，不可能有第三个 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 }