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}">
    <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);
	var self = this;

    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" data-bind="click: showMessage">Click...