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）在与{{1}完全分离的对象中具有所需的第一行数据}数组，并将其编码到专栏的data中，或者（c）其他方法，我不介意它是否有点怪异。 至少看来仍然没有非hacky的方法……如果您可以将其固定在第一行，请随时在header之外创建伪数据。< / p>

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

This website here（不是React tho内置的）有一个很好的例子，固定了第一行。对表格进行排序时，data行将保留在顶部。它的样式也与其他行分开。

将在2天之内将这篇文章和所有答案悬赏，因为我可以真的真的使用该帮助。任何想法/帮助表示赞赏！

编辑：-另一个建议（尽管我不知道该怎么做）是将React-Table的Totals重新放置在标题和数据之间的第一行。 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 }

React-Table固定第一行

2 个答案: