JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.loader.js"></script>
<script src="http://igniteui.com/js/external/FileSaver.js"></script>
<script src="http://igniteui.com/js/external/Blob.js"></script>
<div class="selectionOptions">
Data Export Mode: 
<select id="dataExportMode">
<option value="allRows">All Rows</option>
<option value="expandedRows">Expanded Rows</option>
</select>
</div>
<table id="hierarchicalGrid"></table><br />
<input type="button" id="exportButton" class="button-style" value="Export"></input>
CSS
.selectionOptions
{
margin-bottom: 10px;
}
input.button-style
{
margin-top: 10px;
}
JavaScript
$(function () {
$.ig.loader({
scriptPath: "http://cdn-na.infragistics.com/igniteui/latest/js/",
cssPath: "http://cdn-na.infragistics.com/igniteui/latest/css/",
resources: 'igHierarchicalGrid,'+
'modules/infragistics.documents.core.js,' +
'modules/infragistics.excel.js,' +
'modules/infragistics.gridexcelexporter.js'
});
$(function () {
var data = [
{
Name: "Food",
Products: [
{ Name: "Bread", Quantity: 3 },
{ Name: "Pizza", Quantity: 4 }
]
},
{
Name: "Beverages",
Products: [
{ Name: "Milk", Quantity: 1 },
{ Name: "Fruit punch", Quantity: 4 }
]
}
];
$("#hierarchicalGrid").igHierarchicalGrid({
width: "400px",
dataSource: data, //Array of objects defined above
autoGenerateColumns: true,
autoGenerateLayouts: true
});
$("#exportButton").igButton({ labelText: "Export" });
$("#exportButton").on("igbuttonclick", function () {
$.ig.GridExcelExporter.exportGrid($("#hierarchicalGrid"), {
dataExportMode: $("#dataExportMode").val(),
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
});
})
});
});