export class GridDemoComponent implements OnInit {
    columns: OneDArray<any> = [
        {
            name: 'CheckBox',
            sort: false,
            width: '5px',
            formatter: (cellData) => {
                return createDivContainer((div) => {
                    div.appendChild(this.createCheckBox(cellData).location.nativeElement);
                });
            }
        },
        'Name',
        'Email',
        'Phone Number',
        {
            name: 'Button',
            sort: false,
            width: '30px',
            formatter: (cellData) => {
                return createDivContainer((div) => {
                    div.appendChild(this.createButton(cellData).location.nativeElement);
                });
            }
        }
    ];

    data$: Observable<any[]>;
    private dataSubject = new BehaviorSubject<any[]>([]);

    constructor(
        private dialog: MatDialog,
        private componentFactory: ComponentFactoryResolver,
        private viewContainerRef: ViewContainerRef
    ) {}

    ngOnInit(): void {
        this.data$ = this.dataSubject.pipe(debounceTime(1000));

        this.dataSubject.next([
            [true, 'John', '[email protected]', '(353) 01 222 3333', 22],
            [false, 'Mark', '[email protected]', '(01) 22 888 4444', 33]
        ]);
    }

    openModal(rowData) {
        this.dialog.open(DialogComponent, { data: rowData });
    }

    createComponent<T>(type: Type<T>): ComponentRef<T> {
        const componentFactory = this.componentFactory.resolveComponentFactory(type);
        return this.viewContainerRef.createComponent<T>(componentFactory);
    }

   // any custom Angular component
    createButton(cellData) {
        const button = this.createComponent<ActionButtonComponent>(ActionButtonComponent);
        button.instance.eventFunction = () => this.openModal(cellData);

        return button;
    }

    // Angular Material component
    createCheckBox(cellData) {
        const checkBox = this.createComponent<MatCheckbox>(MatCheckbox);
        checkBox.instance.checked = cellData;

        return checkBox;
    }
}

import { h, createRef as gCreateRef } from 'gridjs';

export function createDivContainer(creatorFunction) {
    const ref = gCreateRef();
    const div = h('div', { ref: ref });
    setTimeout(() => {
        if (ref.current?.children.length === 0) {
            creatorFunction(ref.current);
        }
    }, 0);
    return div;
}