How to Put Show/Hide Columns in Modal

jspin77 commented 4 years ago

I have too many columns to show the toggle above the table. I wanted to put them in a modal window instead. The modal appears and the show/hide columns works while the modal is open. As soon as I close the modal, the columns reappear. Here are some snippets from the file:

const CustomToggleList = ({ columns, onColumnToggle, toggles }) => (
  <Modal show={this.state.columnModal} onHide={this.hideColumnModal}>
    <Modal.Header closeButton>
      <Modal.Title>Show/Hide Columns</Modal.Title>
    </Modal.Header>
    <Modal.Body>
      <h4>Text in a modal</h4>
      <div className="" data-toggle="buttons">
        {columns
          .map((column) => ({
            ...column,
            toggle: toggles[column.dataField],
          }))
          .map((column) => (
            <button
              type="button"
              key={column.dataField}
              className={`btn btn-info ${column.toggle ? "active" : ""}`}
              data-toggle="button"
              aria-pressed={column.toggle ? "true" : "false"}
              onClick={() => onColumnToggle(column.dataField)}
            >
              {column.text}
            </button>
          ))}
      </div>
    </Modal.Body>
    <Modal.Footer>
      <Button onClick={this.hideColumnModal}>Close</Button>
    </Modal.Footer>
  </Modal>
);

.... the render method .... return (

{(props) => (

Export

)}