React-Table fixed first row

Question

For starters, I've read this post on using footers to fix the last row, and also this whole thread on ignoring top-row when sorting. In fact, I've read this thread several times over.

The threads are inconclusive about how to pin a top-row with react-table, but it is majorly important for my current project and I am seeking a solution. I created the following dummy table for help with this post:

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>

My goal currently is to create a fixed top-row in any way possible. Whether that is by (a) having the desired first-row data as the first object in the data array, or (b) having the desired first-row data in an object that's entirely separate from the data array, and coding that into the header of the column, or (c) some other approach, I don't mind if it's a bit hacky. It appears at least that there's no non-hacky approach this anyway... Feel free to create dummy data outside of data if you're able to pin it as the top row.

I'd like to style the fixed first-row differently from both the headers above it, and the rows below it. For the sake of this post, any getting simple styling on this row (e.g. a different background color) would be sufficient!

This website here (not built in React tho) has a great example of a fixed first row. When you sort the table, the Totals row remains on top. It is also styled separately from other rows.

Will bounty this post in 2 days, and any answers beforehand as well, as I could really really really use the help. Any thoughts / assistance is appreciated!

Edit: - another suggestion (although I dont know how it could be done) is to simply reposition React-Table's Footer as a first row, between the headers and the data. Footer is immune to sorting, although its on the bottom, not the top.

Edit 2: - per this thread, it is not possible to have a 3rd headerGroup, which would be needed since my websites tables already have a headerGroup and another main header.

Answer 1

If you don't need the Footer you can render the first row within it and then reorder the html:

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

Answer 2

Add style option with height

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>