Header checkbox selection for React ag-grid (infinite row model)

Question

Since infinite row model is not supporting the parameter headerCheckboxSelection=true , I need to create my own checkbox. So the question is, how do I add a checkbox to the first column header, that has the necessary api-functions?
Using a custom header resets all filtering, sorting, styling and menu options for all headers, is it possible to do it just for the first one?
I've tried setting the first column def columnDef.headerComponentFramework = CustomCheckbox , or columnDef.headerComponent = CustomCheckbox , or using them as a string, but all I get is this error:

Warning: React.createElement: type is invalid -- expected a string (for built-in components or a class/function (for composite components) but got: undefined.

Here is my checkbox component:

export default class customCheckbox extends Component {
  constructor(props) {
    super(props);
    console.log(props)
    this.state = {
      checked: false,
    };
  }

  updateState = e => {
    this.setState({ checked: e.value });
    if (!this.state.checked) this.selectAllRows(true);
    if (this.state.checked) this.selectAllRows(false);
  };

  selectAllRows = bool => {
    this.props.api.forEachNode(row => {
      this.props.api.getRowNode(row.id).selectThisNode(bool);
    });
  };
  render() {

    return (
      <div className="custom-header-checkbox">
        <CheckBox value={this.state.checked} onChange={this.updateState} />
      </div>
    );
  }
}

Edit:

I got the checkbox to show changing the checkbox component to a function and with this headerComponentFramework = CustomCheckboxFunction , but I couldn't pass the api to it

Answer 1

Found the solution!

Ag-grid apparently expects you to have some String value in your custom component before it allows you to use it. So all I did was add some text to my checkbox and all was fine.

To summarize:

1. Create your custom header component normally (remember to add text)
2. To set the column header you want to swap with your own, you can use colDef[index].headerComponentFramework = myNewCustomComponent or by getting it via header name or id etc. It is up to you.
3. The params object (with api functions) are automatically applied there, just remember to super(props) in the constructor