can headerCellRenderer using reactCellRendererFactory?

[hank7444]

I tried to add checkbox on header for check/cancel all

but I got a err msg:

invariant.js:38Uncaught Invariant Violation: _registerComponent(...): Target container is not a DOM element.

I try return html directly, but I can't binding the event which create in react..

Have any Idea?

[nemish]

+1

[elhay-av]

+1

my solution:

function reactHeaderRendererFactory(reactComponent) {
  return function (params) {
    var eCell = document.createElement('span');

    ReactDOM.render(reactComponent({params}), eCell);

    // TODO: maybe there is a better event rather then "columnMoved"
     params.api.eventService.addModalPriorityEventListener('columnMoved', () => {
          ReactDOM.unmountComponentAtNode(eCell);
    });
    return eCell;
  };
}

[ceolter]

not provided out of the box (yet). i intent to cover better support for Reach (and Angular 2) in custom components in a release that will be available in approx 2 months from now.

[hank7444]

here is my solution

{
        headerName: 'checkbox',
        field: 'chck',
        width: 30,
        minWidth: 30,
        maxWidth: 30,
        headerCellTemplate: this._selectAllCheckboxHeaderCellRendererFunc,
        suppressSorting: true,
        suppressMovable: true,
        suppressResize: true,
        cellRenderer: reactCellRendererFactory(Checkbox),
}
 _selectAllCheckboxHeaderCellRendererFunc() {
    const input = this.checkAllInput;
    const icon = this.checkAllIcon;

    const header = document.createElement('div');

    input.setAttribute('type', 'checkbox');
    input.style.display = 'none';

    icon.addEventListener('click', () => {
      this._handleOnSelectAll(!input.checked);
    });

    header.appendChild(input);
    header.appendChild(icon);
    return header;
  }

[marc314]

Solution posted by @elhay-av works, however when I drag the column the values are gone and the headers appear blank. Any advice? @ceolter

[marc314]

Never mind..
onColumnMoved = event => this.api.refreshHeader()

[seanlandsman]

Hi - this should now be resolved as we now support header components. Please let us know if this is not the case. Thanks