Para poder agregar los encabezados dinámicamente usando un componente React Select, anulé la barra de herramientas de MaterialTable. La anulación funcionó, pero ahora, cuando selecciono más de 3 casillas de verificación e intento actualizar las columnas en el administrador de datos de MaterialTable, la aplicación finaliza/se congela. (La documentación de MaterialTable no me ayudó mucho con la implementación, por lo que tuve que trabajar con el código para actualizar las columnas. Por eso no estoy seguro de si lo estoy haciendo correctamente. Además, esto es solo una primera aproximación. implementación.). Agradecería cualquier consejo sobre esto. Gracias de antemano ^^

El siguiente código está dentro del componente de barra de herramientas de tabla de materiales anulado. Simplemente "copié" la implementación de Material-Table y pegué el componente React-Select en el método de representación ToolBar.

 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>); }