Demo - 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://code.jquery.com/jquery-3.4.0.min.js"></script>
<div id="gridDefault">
</div>
<br>
<div id='filters'>
</div>

CSS

body {
    margin: 20px;
}

.wj-flexgrid {
    max-height: 250px;
    width: auto;
}

JavaScript

// default grid
var gridDefault = new wijmo.grid.FlexGrid('#gridDefault', {
    itemsSource: getData()
});

// create some random data
function getData() {
    var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
        data = [];
    for (var i = 0; i < 200; i++) {
        data.push({
            id: i,
            country: countries[i % countries.length],
            active: i % 5 != 0,
            downloads: Math.round(Math.random() * 200000),
            sales: Math.random() * 100000,
            expenses: Math.random() * 50000
        });
    }
    return data;
}

var filter = new wijmo.grid.filter.FlexGridFilter(gridDefault, {
    defaultFilterType: wijmo.grid.filter.FilterType.Value
});
filter.filterChanged.addHandler(function(s, e) {
    var filterDefinition = JSON.parse(filter.filterDefinition);
    var FilterText = '';
    for (var i = 0; i < filterDefinition.filters.length; i++) {
        var _CurFilter = filterDefinition.filters[i];
        var FilterName = _CurFilter.binding;
        var FilterValuesObj = Object.keys(_CurFilter.showValues);
        var FilterValues = FilterValuesObj.join(", ");
        FilterText = FilterText + "  <span class='SelectedFilters'>" + FilterName + "(" + FilterValues + ") <button id='" + FilterName + "' class='FilterBtn' onclick='ClearThisFilter(this)'> X </button></span>";
        $("#filters").html(FilterText);
    }
});


function ClearThisFilter(e) {
    var f = filter.getColumnFilter(e.id);
    f.clear();
    gridDefault.collectionView.refresh();
    $(e).parent().remove();
}