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=".5.3/react-table.css" rel="stylesheet"/>
<script src=".1.0/react.js"></script>
<script src=".1.0/react-dom.min.js"></script>
<script src=".5.3/react-table.js"></script>
<div id="app"></div>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./ajax/libs/react-table/6.5.3/react-table.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare./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.
Share Improve this question edited Mar 14, 2019 at 1:03 Canovice asked Mar 14, 2019 at 0:33 CanoviceCanovice 10.5k31 gold badges130 silver badges280 bronze badges2 Answers
Reset to default 2Add 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./ajax/libs/react-table/6.5.3/react-table.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-table/6.5.3/react-table.js"></script>
<div id="app"></div>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 }
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744868832a4598135.html
评论列表（0条）