Flexchart

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/interop/knockout/wijmo.knockout.min.js"></script>
<div data-bind="wjFlexGrid: { itemsSource: data, childItemsPath: 'children',  autoGenerateColumns: false, control: grid, itemFormatter: formatItem}, click: showMessage">
	<div data-bind="wjFlexGridColumn: { header: 'Name', binding: 'name', width: 300}"></div>
	<div data-bind="wjFlexGridColumn: { header: 'Button', isReadOnly: true, width: 200}"></div>
</div>

CSS

body {
    margin: 40px;
}

.wj-flexchart {
    height: 400px;
    background-color: white;
    box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.75);
    padding: 8px;
    margin-bottom: 12px;
}

.wj-inputcolor {
    margin-top: 20px;
}

JavaScript

// create and apply application view model
function viewModel1() {

	var self = this;
	this.grid = ko.observable();
   
   var data = [
        { name: 'Albert', children: [
                { name: 'Anton' },
                { name: 'Annette' },
            ] },
        { name: 'Benjamin', children: [
                { name: 'Bridget', children: [
                        { name: 'Billy' },
                        { name: 'Bernard' },
                    ] },
                { name: 'Bella' },
                { name: 'Bob' },
            ] },
        { name: 'Charlie', children: [
                { name: 'Chris' },
                { name: 'Connie' },
                { name: 'Carrie' },
            ] },
        { name: 'Douglas', children: [
                { name: 'Dinah' },
                { name: 'Donald' }
            ] },
    ];
   
    // add data array to scope
    this.data = new wijmo.collections.CollectionView(data);
	
	this.formatItem = function(panel, row, col, cell) {
		if(panel === panel.grid.cells && col === 0) {
			var item = panel.rows[row].dataItem;
			if(!item.children) {
				var padding = ((panel.grid.treeIndent * panel.rows[row].level) + 20);
				cell.style.paddingLeft = padding + 'px';
			}
		}
		if(panel === panel.grid.cells && col === 1) {
			cell.innerHTML = `<button class="grid-button">Click Me!</button>`;
		}
	}
	
	this.showMessage = function(data, e) {
		if(wijmo.hasClass(e.target, 'grid-button')) { // clicked button is in the grid
			var hti = this.grid().hitTest(e);
			alert(`Clicked ${hti.panel.rows[hti.row].dataItem.name}`);
		}
	}
}

(function() {
    ko.applyBindings(new viewModel1());
})();