To be able to add the headers dynamically using a React Select component, I overrode the ToolBar of MaterialTable. The override worked, but now when I select more than 3 checkboxes and try to update the columns in MaterialTable's datamanger, the app terminates/freezes. (The documentation of MaterialTable didn't help me much with the implementation, so I had to work through the code to update the columns. That's why I'm not sure if I'm doing this correctly. Furthermore this is only a rough first implementation.). I would appreciate any tips on this. Thanks in advance ^^

The following code is inside the overridden Material-Table ToolBar componente. I simply "copied" the implementation of Material-Table and pasted the React-Select component into the ToolBar render method.

 handleChange = (selected) => {
    let columns = this.props.dataManager.columns;

    for (let index in columns) {
      columns[index].hidden = false;
    }

    for (let index in selected) {
      let cIndex = columns.findIndex(object => {
        return object.title === selected[index].value;
      });

      if (cIndex !== -1) {
        columns[cIndex].hidden = true;
      }
    }

    this.setState({
      optionSelected: selected,
    });

    this.props.dataManager.setColumns(columns); //?
    this.props.onColumnsChanged(columns); //Is this correct?
  }

  renderSelectHeaders() {
    let columns = this.props.columns.map((columns) => ({label: columns.title, value: columns.title}))
    return(
      <span
        class="d-inline-block"
        data-toggle="popover"
        data-trigger="focus"
        data-content="Please selecet columns"
      >
        <ReactSelect
            options={columns}
            isMulti
            placeholder={"Selected Columns"}
            closeMenuOnSelect={false}
            hideSelectedOptions={false}
            components={{
              Option
            }}
            onChange={this.handleChange}
            allowSelectAll={true}
            value={this.state.optionSelected}
            className={"select"}
          />
      </span>);
  }