React Bootstrap Accordion on table

Question

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()}&nbsp;
                          {new Date().toLocaleTimeString()}
                        </p>

                  </div>
                    </div>

Answer 1

Basically, you maintain a state say open and have an onClick on the title and toggle the state open

Working demo in codesandbox

The example uses a simple div without styles but you get the idea.

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