Other resources

  • jExcel CE
    Jexcel community edition
  • jTools
    Web components, utilities and plugins
  • Programmatically insert, remove and move columns and rows

    The following example shows how to manage data programmatically in your javascript spreadsheet.



    1. Insert a new blank column at the end of the table
    2. Insert five new blank columns at the beginning of the table
    3. Insert a new column with pre-populated values at the end of the table
    4. Insert a new blank row at the end of the table
    5. Insert a new pre-populated row just after the second row.
    6. Create ten rows at the end of the table
    7. Move the forth row to the first position
    8. Move the first column to the third position


    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 = [
        [ 'Cheese', 10, 1.10, '=B1*C1'],
        [ 'Apples', 30, 0.40, '=B2*C2'],
        [ 'Carrots', 15, 0.45, '=B3*C3'],
        [ 'Oranges', 20, 0.49, '=B4*C4'],
    ];
    
    var table = jexcel(document.getElementById('spreadsheet'), {
        data:data,
        colHeaders: [ 'Product', 'Quantity', 'Price', 'Total' ],
        colWidths: [ 300, 100, 100, 100 ],
        columns: [
            { type: 'autocomplete', source:[ 'Apples','Bananas','Carrots','Oranges','Cheese','Pears' ] },
            { type: 'number' },
            { type: 'number' },
            { type: 'number' },
        ]
    });
    </script>
    
    <br>
    
    <ol class='example'>
        <li><a onclick="table.insertColumn()">Insert a new blank column at the end of the table</a></li>
        <li><a onclick="table.insertColumn(5, 0, 1, null);">Insert five new blank columns at the beginning of the table</a></li>
        <li><a onclick="table.insertColumn([ '0.99', '1.22', '3.11', '2.21' ]);">Insert a new column with pre-populated values at the end of the table</a></li>
        <li><a onclick="table.insertRow()">Insert a new blank row at the end of the table</a></li>
        <li><a onclick="table.insertRow([ 'Pears', 10, 0.59, '=B2*C2' ], 1);">Insert a new pre-populated row just after the second row</a></li>
        <li><a onclick="table.insertRow(10);">Create ten rows at the end of the table</a></li>
        <li><a onclick="table.moveRow(3, 0);">Move the forth row to the first position</a></li>
        <li><a onclick="table.moveColumn(0, 2);">Move the first column to the third position</a></li>
    </ol>
    
    </html>