[英]React Bootstrap Accordion on table
Hi is anyone know how to implement accordion on react table?嗨,有人知道如何在反应桌上实现手风琴吗? im trying to hide my entire table upon clicking a title ( tag).我试图在单击标题(标签)时隐藏我的整个表格。 thank you谢谢你
<div class="Asalertpf1 block" >
<FormLabel className="btn-success d-flex justify-content-center m-0">
<h6 >PF1 AS Alert</h6>
</FormLabel>
<div >
<Table striped hover responsive >
<thead className="theadAS text-white thAS" >
<tr className="text-center" >
<th>Time</th>
<th>Job Name</th>
<th>Result</th>
<th>Alarm Switch</th>
</tr>
</thead>
</Table>
</div>
<div>
<p class="text-center font-weight-bold ">
Latest Update Time:
{new Date().toDateString()}
{new Date().toLocaleTimeString()}
</p>
</div>
</div>
Basically, you maintain a state say open
and have an onClick on the title and toggle the state open
基本上,您维护一个 state 说open
并在标题上有一个 onClick 并切换 state open
Working demo in codesandbox 在代码沙箱中工作演示
The example uses a simple div without styles but you get the idea.该示例使用没有 styles 的简单 div,但您明白了。
Example snippet:示例片段:
class App extends React.Component {
constructor() {
super();
this.state = {
data: makeData(),
open: true
};
}
toggleAccordian = () => {
this.setState(prev => ({ ...prev, open: !prev.open }));
};
render() {
const { data } = this.state;
return (
<div>
<div
style={{ background: "red", cursor: "pointer" }}
onClick={this.toggleAccordian}
>
toggle table
</div>
<div
style={{
margin: "20px",
display: this.state.open ? "block" : "none"
}}
>
<ReactTable
data={data}
columns={[
{
Header: "First Name",
accessor: "firstName",
className: "sticky",
headerClassName: "sticky"
},
......
Also as mentioned in the comments, if you are using any library you can make use of ready-made accordions同样如评论中所述,如果您使用任何库,则可以使用现成的手风琴
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.