javascript - How to Have a Knockout Grid Display Header and Data Based on a Dropdown Result -

javascript - How to Have a Knockout Grid Display Header and Data Based on a Dropdown Result -

i need create grid display info user selects based on dropdown menu using knockout. if illustration dataset is:

{"data":[{"avg. number of insects":9, "percent of harm leaves":67.5},{"avg. number of insects":8, "percent of harm leaves":33.9},{"avg. number of insects":10, "percent of harm leaves":10.4},{"avg. number of insects":10, "percent of harm leaves":21.6}]}

and have drop downwards menus pupil select variables want work (normally there more two) , want display actual info based on variables have selected. tried starting simplegrid doesn't seem respond header , row changing.

here jsfiddle: http://jsfiddle.net/anyaejohnson/z2cma7ya/7/

to populate header follow illustration here: http://knockoutjs.com/examples/carteditor.html instead of using info category populate product, utilize category populate observable array of bind header

javascript knockout.js