Flexgrid

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/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/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.filter.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.pdf.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.pdf.min.js"></script>
<div id="theGrid">
</div>

CSS

.wj-flexgrid {
    max-height: 250px;
    margin: 12px 0;
}

body {
    margin: 20px;
}

.left-align {
    text-align: left;
}

.dropdown {
    float: right;
    margin-top: 8px;
}

JavaScript

var theGrid, countries;
onload = function() {

    // create some random data
    countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
    var data = [];
    for (var i = 0; i < 200; i++) {
        data.push({
            id: i,
            country: countries[i % countries.length],
            sales: Math.random() * 10000,
            expenses: Math.random() * 5000
        });
    }

    // show the data in a grid
    theGrid = new wijmo.grid.FlexGrid('#theGrid', {
        autoGenerateColumns: false,
        columns: [{
                binding: 'id',
                header: 'ID',
                width: 60,
                visible: false
            },
            {
                binding: 'country',
                header: 'Country',
                width: '2*',
            },
            {
                binding: 'sales',
                header: 'Sales',
                width: '*',
                format: 'n2'
            },
            {
                binding: 'expenses',
                header: 'Expenses',
                width: '*',
                format: 'n2'
            }
        ],
        itemsSource: data,
        showDropDown: false
    });

    theGrid.itemFormatter = function(panel, r, c, cell) {
        var data = theGrid.getCellData(r, c, false).toString() == 'Germany';
        if (data) {
            cell.innerHTML += `<button onclick="dropDown(${r}, ${c})" class="wj-btn wj-btn-glyph wj-right wj-elem-dropdown"><span class="wj-glyph-down"></span></button>`;
        }
    }

    theGrid.beginningEdit.addHandler(function(sender, e) {
        var data = theGrid.getCellData(e.row, e.col, false).toString() == 'Germany';
        if (data) {
            theGrid.columns[e.col].dataMap = countries;
            theGrid.toggleDropDownList();
        }
    });

    theGrid.cellEditEnded.addHandler(function(sender, e) {
        theGrid.columns[e.col].dataMap = null;
    });

}

function dropDown(r, c) {
		theGrid.columns[c].dataMap =...