viewof PopulateTableExample2 = {
let produceList = [
{"name": "banana", "minCost": 0.23, "maxCost": 4.89, "averageCost": 1.6083333333333332},
{"name": "apple", "minCost": 2.43, "maxCost": 6.89, "averageCost": 4.1575},
{"name": "celery", "minCost": 1.99, "maxCost": 6.89, "averageCost": 4.733333333333333},
{"name": "zebra", "minCost": 12399.99, "maxCost": 39999.99, "averageCost": 26199.989999999998}
];
let drawTable = (containerId) => {
let rowSelect = d3.select('#' + containerId)
.selectAll('tr')
.data(produceList)
.join('tr');
let cellSelect = rowSelect.selectAll('td')
.data(d => [d.name, d.minCost, d.averageCost, d.maxCost])
.join('td')
.text(d => d);
}
drawTable('tableBody-example2');
d3.select('#sort-product')
.on('click', () =>
{
produceList.sort((a, b) =>
{
if (a.name > b.name)
{
return 1;
}
else if (a.name < b.name) {
return -1;
}
return 0;
});
drawTable('tableBody-example2');
});
}