Other resources

  • jExcel CE
    Jexcel community edition
  • jTools
    Web components, utilities and plugins
  • Headers

    Nested headers

    jExcel spreadsheet implements nested headers natively using the directive nestedHeadrs as shown in the folling example.

    Programmatically header updates

    There are a few options to allow the user to interact with the header titles. Using the contextMenu over the desired header, by pressing an selected header and holding the click for 500ms, or via javascript.



    Source code

    <html>
    <script src="https://jexcel.net/v3/jexcel.js"></script>
    <script src="https://jexcel.net/v3/japp.js"></script>
    <link rel="stylesheet" href="https://jexcel.net/v3/jexcel.css" type="text/css" />
    <link rel="stylesheet" href="https://jexcel.net/v3/japp.css" type="text/css" />
    
    <div id="spreadsheet"></div>
    
    <script>
    var data = [
        ['BR', 'Cheese', 1],
        ['CA', 'Apples', 0],
        ['US', 'Carrots', 1],
        ['GB', 'Oranges', 0],
    ];
    
    table = jexcel(document.getElementById('spreadsheet'), {
        data:data,
        columns: [
            { type: 'autocomplete', title:'Country', width:'300', url:'/v3/countries' },
            { type: 'dropdown', title:'Food', width:'150', source:['Apples','Bananas','Carrots','Oranges','Cheese'] },
            { type: 'checkbox', title:'Stock', width:'100' },
        ],
        nestedHeaders:[
            [
                { title:'Supermarket information', colspan:'3' },
            ],
            [
                { title:'Location', colspan:'1' },
                { title:' Other Information', colspan:'2' }
            ],
        ],
        columnDrag:true
    });
    </script>
    
    <select id='columnNumber'>
    <option value="0">Column 0</option>
    <option value="1">Column 1</option>
    <option value="2">Column 2</option>
    </select>
    
    <input type='button' value='Set' onclick="table.setHeader(document.getElementById('columnNumber').value)" />
    <input type='button' value='Get' onclick="table.getHeader(document.getElementById('columnNumber').value)" />
    
    </html>