title: Header checkbox selection for React ag-grid (infinite row model)
body: <p>Since infinite row model is not supporting the parameter <code>headerCheckboxSelection=true</code>,
  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 <strong>necessary api-functions?</strong><br>
   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?<br>
  I've tried setting the first column def <code>columnDef.headerComponentFramework = CustomCheckbox</code>,  or
  <code>columnDef.headerComponent = CustomCheckbox</code>,  or using them as a string, but all I get is this error:</p>
  
  <pre><code>Warning: React.createElement: type is invalid -- expected a string (for built-in components or a class/function (for composite components) but got: undefined.
  </code></pre>
  
  <p>Here is my checkbox component:</p>
  
  <pre><code>export default class customCheckbox extends Component {
    constructor(props) {
      super(props);
      console.log(props)
      this.state = {
        checked: false,
      };
    }
  
    updateState = e =&gt; {
      this.setState({ checked: e.value });
      if (!this.state.checked) this.selectAllRows(true);
      if (this.state.checked) this.selectAllRows(false);
    };
  
    selectAllRows = bool =&gt; {
      this.props.api.forEachNode(row =&gt; {
        this.props.api.getRowNode(row.id).selectThisNode(bool);
      });
    };
    render() {
  
      return (
        &lt;div className="custom-header-checkbox"&gt;
          &lt;CheckBox value={this.state.checked} onChange={this.updateState} /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Edit: </p>
  
  <p>I got the checkbox to show changing the checkbox component to a function and with this <code>headerComponentFramework = CustomCheckboxFunction</code>, but I couldn't pass the api to it</p>