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 (eg 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

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>

Answer 2

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 }