JSFiddle - React, Tailwind, and code Playground

HTML

<div data-bind="foreach: filterProducts">
    <div class="row">
               <div class="col-md-2" data-bind="text: name"></div>
        <div class="col-md-1" data-bind="text: price"></div>
        <div class="col-md-3" data-bind="text: description"></div>
        <div class="col-md-1" data-bind='text: offer_id'></div>
        <div class="col-md-2" data-bind="text: genre"></div>
        <div class="col-md-1" data-bind="text: show"></div>
    </div>
</div>
<button data-bind="click: function() { filter('1') }">Filter</button>

JavaScript

function Product(data) {
    this.id = data.id;
    this.name = data.name;
    this.price = data.price;
    this.description = data.desc;
    this.image = data.image;
    this.genre = data.genre;
    this.show = data.show;
    this.offer_desc = data.offer_desc;
    this.offer_id = data.offer_id;
}

function ProductModel() {
    var self = this;
    self.products = ko.observableArray([]);

    self.currentFilter = ko.observable(); // property to store the filter

    self.products([
    new Product({
        name: 'prod1',
        genre: '1'
    }),
    new Product({
        name: 'prod2',
        genre: '0'
    }),
    new Product({
        name: 'prod3',
        genre: '0'
    }),
    new Product({
        name: 'prod4',
        genre: '1'
    }), ])

    self.filterProducts = ko.computed(function () {
        if (!self.currentFilter()) {
            return self.products();
        } else {
            return ko.utils.arrayFilter(self.products(), function (prod) {
                return prod.genre == self.currentFilter();
            });
        }
    });

    self.filter = function (genre) {
        self.currentFilter(genre);
    }
}

ko.applyBindings(new ProductModel())