JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<span><input type="checkbox" id="selectAll" data-bind="checked: SelectAll"/>Select All</span>
<table>
<tbody data-bind="foreach: productsData">
<tr>
<td><input type="checkbox" data-bind="value: ProductLabelNumber, checked: IsChecked"/></td>
<td><a data-bind="attr: { href: ProductUrl }, text: ProductName"></a></td>
<td><img data-bind="attr: { src: ImageUrl }" style="width:40px"/></td>
<td data-bind="text: GTIN"></td>
<td data-bind="text: UnitSize"></td>
<td data-bind="text: CaseSize"></td>
</tr>
</table>
<button data-bind="enable: isButtonEnabled">Download Results Excel</button>
<button data-bind="enable: isK12Enabled">Download K-12 Crediting Letter PDF</button>
JavaScript
var productViewModel = function (item) {
var self = this;
self.ProductLabelNumber = ko.observable();
self.ProductUrl = ko.observable();
self.ImageUrl = ko.observable();
self.ProductName = ko.observable();
self.GTIN = ko.observable();
self.UnitSize = ko.observable();
self.CaseSize = ko.observable();
self.K12DocumentUrl = ko.observable();
self.IsChecked = ko.observable(false);
if (typeof item !== 'undefined') {
self.ProductLabelNumber(item.ProductLabelNumber);
self.ProductName(item.ProductName);
self.ProductUrl(item.ProductUrl);
self.ImageUrl(item.ImageUrl);
self.GTIN(item.GTIN);
self.UnitSize(item.UnitSize);
self.CaseSize(item.CaseSize);
self.K12DocumentUrl(item.K12DocumentUrl);
self.IsChecked(item.IsChecked);
}
};
var ViewModel = function () {
var self = this;
var jsonData = [{
"ProductLabelNumber": "1",
"ProductName": "Pillsbury® Baked Biscuit Buttermilk 1.1oz",
"ProductUrl": "https://d.generalmillscf.com/products/category/cereal/single-serve/bowlpak/apple-cinnamon-cheerios",
"ImageUrl": "https://d.generalmillscf.com/~/media/images/product/product-detail/cereal/single-serve/bowlpak/31879000-apple-cinnamon-cheerios.ashx",
"GTIN": "10094562062320",
"UnitSize": "1.2 OZ",
"CaseSize": "175",
"K12DocumentUrl": "google.com",
"IsChecked": false
}, {
"ProductLabelNumber": "1",
"ProductName": "Pillsbury® Baked Biscuit Buttermilk 1.2oz","ProductUrl": "https://d.generalmillscf.com/products/category/cereal/single-serve/bowlpak/apple-cinnamon-cheerios",
"ImageUrl":...