Wijmo UI for the Web
Setting Column Header
Wijmo User Guide > Widgets > Grid > Grid Concepts > Columns > Setting Column Header

The headerText option of the wijgrid widget allows you to set the text value of column header. You can add different jQuery icons to customize the header. A complete list of icons is available at jqueryui.com.

Script
Copy Code
<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijgrid"], function () {
    $(document).ready(function () {
        $("#wijgrid").wijgrid({
            cellClicked: function (e, args) {
                alert(args.cell.value());
            },
            allowSorting: true,            
            data: [
                [27, 'Canada', 'Adams, Craig', 'RW'],
                [43, 'Canada', 'Boucher, Philippe', 'D', 'R'],
                [24, 'Canada', 'Cooke, Matt', 'LW', 'L'],
                [87, 'Canada', 'Crosby, Sidney (C)', 'C', 'L'],
                [1, 'United States', 'Curry, John', 'G', 'L'],
            ],
            columns: [
               //add header text and ui icons.
               { headerText: "<span class='ui-icon ui-icon-number'/> Number",dataType:'number'}, 
                { headerText: "<span class='ui-icon ui-icon-flag'/> Country",dataType:'string'},
                {headerText:  "<span class='ui-icon ui-icon-person'/> Player", dataType:'string'},
                {headerText: "<span class='ui-icon ui-icon-star'/> Position", dataType:'string'},
      
            ]
        });
    });
    });
</script>