javascript - 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>