Build a jQuery Handsontable.js Excel-Like Data Grid Table Editor in Browser Using HTML5 & Javascript Full Project For Beginners

 

 

 

index.html`

 

 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.36.0/handsontable.full.css"/>
<p>
  Demo of <a href="https://docs.handsontable.com/0.36.0/tutorial-introduction.html" target="_blank">Handsontable CE</a>   
<h1> Copy from this table</h1>
<div id="example1"></div>

<h1> Paste to this table</h1>
<div id="example2"></div>

 <p>
    <h2>Featuring:</h2>
    <ul>
        <li> <a href="https://docs.handsontable.com/0.16.0/demo-copy-paste.html" target="_blank">Copy and Paste</a> (Using keyboard and right click context menu)
            <ul class="small">
                <li> Grid to Grid </li>
                <li> Grid to Excel </li>
                <li> Excel to Grid </li>
            </ul>
        </li>
        <li> <a href="https://docs.handsontable.com/0.16.0/demo-data-validation.html" target="_blank">Input Validation</a>
            <ul class="small">
                <li> <strong>Numeric (Age and Balance)</strong></br>
                    Try putting in non-numeric characters for age or an invalid USD amount</li>
                <li> <strong>Autocomplete (Company)</strong></br>
                    Suggestions based on source/drop down selection, but also allows other entires</li>
                <li> <strong>Select Types (Eye Color)</strong></br>
                    Only choose from the selection</li>
                <li> <strong>Add your own validator with JS</strong> </li>
            </ul>
        </li>
        <li> <a href="https://docs.handsontable.com/0.16.0/demo-sorting.html" target="_blank">Sorting </a></li>
        <li> <a href="https://docs.handsontable.com/0.16.0/UndoRedo.html" target="_blank"> Undo/Redo</a>
            <ul class="small">
                <li> Right click to undo copy and paste actions</li>
                <li> Right click to redo copy and paste actions</li>
            </ul>
        </li>
        <li> <a href="https://docs.handsontable.com/0.16.0/demo-read-only.html" target="_blank">Read-Only</a> (Latitude and Longitude)
            <ul class="small">
                <li> Cannot paste or modify these cells </li>
                <li> Still able to copy these cells </li>
                <li>Paste functionality just ignores these cells and functions as expected</li>
            </ul>
        </li>
    </ul>
    </p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.36.0/handsontable.full.js"></script>

<style>
  body {
            margin: 0; padding: 0;
            width:100%; height:100%;
            font-family: 'Calibri', sans-serif;

            background-color: white;
        }

        #tables {
            clear:both;
            margin: 0 0 1em 0;
            width: 98%;
            padding: 1%;
            overflow: auto;
        }
        #table1 {
            clear: left;
            float: left;
            overflow: hidden;
            width: 62%;
            border: 0px solid black;
        }
        #table2 {
            clear: right;
            float: right;
            overflow: hidden;
            width: 35%;
            border: 0px solid black;
        }

        #example1, #example2 {
            width: 100%;
            margin: 0; padding: 0;
            border:0px solid black;
        }

        .small {
            font-size:90%;
        }

        .block {
            clear:both;
            width: 98%;
            padding: 1%;
            margin: 0;
        }

        h1, h2, p {
            margin:0;
        }

        a, a:visited, a:active {
            color: blue;
        }

        .red {color:red;}
  
  
</style>

<script>
  
  // create the variables
    var clipboardCache = '';
    var data = retrieveData(),
        container1 = document.getElementById('example1'),
        container2 = document.getElementById('example2'),
        hot1, hot2,height=500;

    // create the main table
    hot1 = new Handsontable(container1, getConfigurationTable1());
    hot1.updateSettings(copyPasteSettings());

    // Add a 2nd table to copy/paste into
    hot2 = new Handsontable(container2, getConfigurationTable2());

    // configurations for the tables
    function getConfigurationTable1() {
        return {
            data: data,
            height: height,
            colHeaders: ['Longitude', 'Latitude', 'Registered', 'Phone', 'Company', 'Eye Color', 'Age', 'Balance', 'isActive', 'guid', 'index', '_id'],
            columns: [
                {data: 'longitude', readOnly: true},
                {data: 'latitude', readOnly: true},
                {data: 'registered'},
                {data: 'phone'},
                {
                    data: 'company',
                    type: 'autocomplete',
                    source: ['APEXIA', 'SUPPORTAL', 'FROSNEX', 'EQUITAX', 'XYMONK', 'ZILLACOM','CYTRAK','PETICULAR','QUILCH','DAYCORE','APPLIDEC'],
                    strict: false
                },
                {
                    data: 'eyeColor',
                    editor: 'select',
                    selectOptions: ['blue', 'brown', 'black', 'green', 'hazel', 'other'],
                    strict: true
                },
                {data: 'age', type: 'numeric'},
                {
                    data: 'balance',
                    type: 'numeric',
                    numericFormat: {
                        pattern: '$0,0.00',
                        culture: 'en-US' // this is the default culture, set up for USD
                    },
                    allowEmpty: false
                },
                {data: 'isActive'},
                {data: 'guid'},
                {data: 'index', type: 'numeric'},
                {data: '_id'}
            ],
            rowHeaders: false,
            fixedColumnsLeft: 2,  // Longitude & latitude are fixed
            manualColumnResize: true,// resize like in excel
            manualRowResize: true, // resize like in excel
            columnSorting: true, //generic sort
            sortIndicator: true, //shows the up/down sort arrow
            sortEmptyCells: false, // false so empty cells show up at the bottom
        }
    }

    function getConfigurationTable2() {
        return {
            data: Handsontable.helper.createEmptySpreadsheetData(10,3),
            height: height,
            rowHeaders: true,
            colHeaders: true,
            afterCopy: function(changes) {
                clipboardCache = SheetClip.stringify(changes);
            },
            afterCut: function(changes) {
                clipboardCache = SheetClip.stringify(changes);
            },
            afterPaste: function(changes) {
                // we want to be sure that our cache is up to date, even if someone pastes data from another source than our tables.
                clipboardCache = SheetClip.stringify(changes);
            },
            contextMenu: [
                'row_above',
                'row_below',
                'col_left',
                'col_right',
                '---------',
                'copy',
                'cut',
                {
                    key: 'paste',
                        name: 'Paste',
                        disabled: function () {
                        return clipboardCache.length === 0;
                    },
                    callback: function () {
                        var plugin = this.getPlugin('copyPaste');

                        this.listen();
                        plugin.paste(clipboardCache);
                    }
                },
                '---------',
                'undo',
                'redo',
                '---------',
                'remove_row',
                'remove_col',
            ],
        }
    }

    function copyPasteSettings() {
        return {
            afterCopy: function(changes) {
                clipboardCache = SheetClip.stringify(changes);
            },
            afterCut: function(changes) {
                clipboardCache = SheetClip.stringify(changes);
            },
            afterPaste: function(changes) {
                // we want to be sure that our cache is up to date, even if someone pastes data from another source than our tables.
                clipboardCache = SheetClip.stringify(changes);
            },
          contextMenu: [
                'copy',
                'cut',
                {
                    key: 'paste',
                        name: 'Paste',
                        disabled: function () {
                        return clipboardCache.length === 0;
                    },
                    callback: function () {
                        var plugin = this.getPlugin('copyPaste');

                        this.listen();
                        plugin.paste(clipboardCache);
                    }
                },
                '---------',
                'undo',
                'redo',
             ],
        }
    }

    function retrieveData() {
        return [
            {
                "longitude": "63.925275",
                "latitude": "-18.892685",
                "registered": "Sunday, November 1, 2015 7:53 PM",
                "phone": "+1 (955) 593-3852",
                "company": "APEXIA",
                "eyeColor": "brown",
                "age": 32,
                "balance": "$2,135.70",
                "isActive": true,
                "guid": "faf3b841-6d03-4bd2-af85-554b24180101",
                "index": 0,
                "_id": "5769acab28c0cede724e73c2"
            },
            {
                "longitude": "-115.441167",
                "latitude": "48.542019",
                "registered": "Monday, March 24, 2014 5:07 AM",
                "phone": "+1 (829) 515-2199",
                "company": "SUPPORTAL",
                "eyeColor": "green",
                "age": 39,
                "balance": "$2,903.14",
                "isActive": false,
                "guid": "d8ff9d39-4582-4a7b-b787-952e75240b30",
                "index": 1,
                "_id": "5769acab417c656d212d3c6f"
            },
            {
                "longitude": "12.519564",
                "latitude": "-14.184896",
                "registered": "Wednesday, June 3, 2015 12:58 AM",
                "phone": "+1 (982) 586-2622",
                "company": "FROSNEX",
                "eyeColor": "",
                "age": 32,
                "balance": "$1,682.22",
                "isActive": true,
                "guid": "fed30236-ab34-46e0-b02a-6ba723ad0cba",
                "index": 2,
                "_id": "5769acabf5ba5031de46c495"
            },
            {
                "longitude": "130.69211",
                "latitude": "67.814344",
                "registered": "Saturday, October 17, 2015 11:51 AM",
                "phone": "+1 (881) 587-2508",
                "company": "XYMONK",
                "eyeColor": "",
                "age": 29,
                "balance": "$1,330.55",
                "isActive": false,
                "guid": "365e3971-d057-425d-9057-1c220bee489c",
                "index": 3,
                "_id": "5769acab0865945bbd78c43d"
            },
            {
                "longitude": "-3.612016",
                "latitude": "-63.260306",
                "registered": "Sunday, March 29, 2015 1:29 PM",
                "phone": "+1 (889) 503-2458",
                "company": "EQUITAX",
                "eyeColor": "",
                "age": 32,
                "balance": "$3,563.21",
                "isActive": false,
                "guid": "312cf50f-2a16-42ff-aa43-985e9c228d8d",
                "index": 4,
                "_id": "5769acab3708ff69518ce9bd"
            },
            {
                "longitude": "-8.136013",
                "latitude": "-30.605803",
                "registered": "Wednesday, September 9, 2015 1:27 PM",
                "phone": "+1 (995) 530-2904",
                "company": "CYTRAK",
                "eyeColor": "green",
                "age": 22,
                "balance": "$3,382.43",
                "isActive": false,
                "guid": "7545dfb0-f387-425d-b403-9d9b99e30bc8",
                "index": 5,
                "_id": "5769acab16e9250fcc48e4cc"
            },
            {
                "longitude": "-138.193511",
                "latitude": "28.859307",
                "registered": "Saturday, February 15, 2014 12:57 AM",
                "phone": "+1 (907) 539-3328",
                "company": "PETICULAR",
                "eyeColor": "brown",
                "age": 33,
                "balance": "$3,521.00",
                "isActive": true,
                "guid": "9275f020-54b8-4bad-92c1-b89a43271d71",
                "index": 6,
                "_id": "5769acab6586dd8f46a82856"
            },
            {
                "longitude": "-66.553024",
                "latitude": "-35.77806",
                "registered": "Monday, June 23, 2014 2:22 AM",
                "phone": "+1 (824) 547-3136",
                "company": "QUILCH",
                "eyeColor": "green",
                "age": 36,
                "balance": "$1,791.77",
                "isActive": true,
                "guid": "029c174d-e5f7-42de-8ae3-50b5d3ee0272",
                "index": 7,
                "_id": "5769acab08ae78bd45e3dfeb"
            },
            {
                "longitude": "133.844533",
                "latitude": "43.838827",
                "registered": "Monday, July 28, 2014 3:27 AM",
                "phone": "+1 (946) 515-3957",
                "company": "DAYCORE",
                "eyeColor": "blue",
                "age": 34,
                "balance": "$3,930.15",
                "isActive": true,
                "guid": "1189a9b1-6122-4c14-9c1c-f40e1e4f4219",
                "index": 8,
                "_id": "5769acab528ae53517e6ea21"
            },
            {
                "longitude": "-8.832659",
                "latitude": "-60.186345",
                "registered": "Thursday, January 29, 2015 12:32 AM",
                "phone": "+1 (928) 456-3130",
                "company": "APPLIDEC",
                "eyeColor": "green",
                "age": 24,
                "balance": "$3,539.70",
                "isActive": false,
                "guid": "b32b8cd2-50f8-4a53-8f5b-904a7e1d433d",
                "index": 9,
                "_id": "5769acab426f2da8184cb542"
            },
            {
                "longitude": "-170.549555",
                "latitude": "-41.113128",
                "registered": "Thursday, February 18, 2016 6:39 PM",
                "phone": "+1 (992) 458-3404",
                "company": "NETERIA",
                "eyeColor": "brown",
                "age": 40,
                "balance": "$2,600.53",
                "isActive": true,
                "guid": "faa283dc-119e-42a3-a6aa-9eea4f6b61c2",
                "index": 10,
                "_id": "5769acab380ecf47c7f908d6"
            },
            {
                "longitude": "57.777118",
                "latitude": "-62.39373",
                "registered": "Friday, October 16, 2015 10:46 PM",
                "phone": "+1 (907) 497-3590",
                "company": "ZILLACOM",
                "eyeColor": "green",
                "age": 30,
                "balance": "$2,514.11",
                "isActive": true,
                "guid": "86e18b30-b1de-4e04-973a-d963b4bda84f",
                "index": 11,
                "_id": "5769acabad339a28a8b04167"
            },
            {
                "longitude": "27.030477",
                "latitude": "7.298125",
                "registered": "Wednesday, February 17, 2016 12:14 PM",
                "phone": "+1 (861) 407-2835",
                "company": "KANGLE",
                "eyeColor": "brown",
                "age": 20,
                "balance": "$3,371.06",
                "isActive": false,
                "guid": "38ab5f9f-9604-4db0-b69d-e81353b14556",
                "index": 12,
                "_id": "5769acab3b27243623ab4ca2"
            },
            {
                "longitude": "6.80464",
                "latitude": "1.072771",
                "registered": "Friday, June 17, 2016 9:44 PM",
                "phone": "+1 (896) 562-2617",
                "company": "ELECTONIC",
                "eyeColor": "brown",
                "age": 26,
                "balance": "$2,665.12",
                "isActive": false,
                "guid": "d7e90cce-755d-43dd-983c-6539e989563e",
                "index": 13,
                "_id": "5769acab7052ec5769a29f82"
            },
            {
                "longitude": "-167.038863",
                "latitude": "58.329587",
                "registered": "Thursday, May 14, 2015 4:45 AM",
                "phone": "+1 (956) 442-3971",
                "company": "PANZENT",
                "eyeColor": "brown",
                "age": 40,
                "balance": "$3,953.50",
                "isActive": true,
                "guid": "49449ad3-f9c0-4c9b-8682-c416927831aa",
                "index": 14,
                "_id": "5769acabd53e7b258058ad20"
            },
            {
                "longitude": "165.150996",
                "latitude": "-7.067444",
                "registered": "Wednesday, May 6, 2015 2:00 AM",
                "phone": "+1 (928) 566-2995",
                "company": "WAAB",
                "eyeColor": "blue",
                "age": 36,
                "balance": "$2,338.49",
                "isActive": true,
                "guid": "ccbd62d3-8b2a-4157-b614-4db65678f1b1",
                "index": 15,
                "_id": "5769acabf76c1df1d66fd68d"
            },
            {
                "longitude": "-13.22813",
                "latitude": "-37.717275",
                "registered": "Sunday, June 15, 2014 8:09 PM",
                "phone": "+1 (899) 600-2629",
                "company": "ARTWORLDS",
                "eyeColor": "blue",
                "age": 32,
                "balance": "$1,688.95",
                "isActive": true,
                "guid": "b41bfbb4-0c45-4e72-b5d5-90065c23f2a9",
                "index": 16,
                "_id": "5769acab35b2a6549370c9c2"
            },
            {
                "longitude": "-83.524802",
                "latitude": "66.133232",
                "registered": "Friday, March 11, 2016 4:34 PM",
                "phone": "+1 (894) 405-3311",
                "company": "UNCORP",
                "eyeColor": "blue",
                "age": 23,
                "balance": "$2,691.87",
                "isActive": false,
                "guid": "61509cac-db6d-4450-812c-7f9e2f81b0e2",
                "index": 17,
                "_id": "5769acabef9f2cda871d6527"
            },
            {
                "longitude": "132.571069",
                "latitude": "3.944043",
                "registered": "Saturday, April 9, 2016 1:03 AM",
                "phone": "+1 (863) 477-2127",
                "company": "MELBACOR",
                "eyeColor": "green",
                "age": 22,
                "balance": "$3,071.29",
                "isActive": true,
                "guid": "baf1a275-27fb-4150-a12d-8e54ea6f3019",
                "index": 18,
                "_id": "5769acabfb40be36f689ff31"
            },
            {
                "longitude": "109.485628",
                "latitude": "20.158749",
                "registered": "Friday, February 21, 2014 10:11 AM",
                "phone": "+1 (869) 437-2296",
                "company": "COFINE",
                "eyeColor": "green",
                "age": 23,
                "balance": "$2,915.63",
                "isActive": true,
                "guid": "588e2a50-5de3-4aed-ae37-54ff7c4b376a",
                "index": 19,
                "_id": "5769acab8ef560406ff92fd9"
            },
            {
                "longitude": "168.379336",
                "latitude": "-4.623982",
                "registered": "Thursday, January 23, 2014 10:33 PM",
                "phone": "+1 (972) 403-3669",
                "company": "ZENTHALL",
                "eyeColor": "blue",
                "age": 36,
                "balance": "$3,482.65",
                "isActive": false,
                "guid": "38cb7636-326f-4bdd-9d2d-769c435b761d",
                "index": 20,
                "_id": "5769acabe420308950ca9922"
            },
            {
                "longitude": "62.075556",
                "latitude": "-62.539909",
                "registered": "Wednesday, May 25, 2016 12:14 PM",
                "phone": "+1 (929) 500-3259",
                "company": "INTERLOO",
                "eyeColor": "brown",
                "age": 26,
                "balance": "$2,844.57",
                "isActive": false,
                "guid": "feee4da3-0565-421f-8902-956f4e3aa921",
                "index": 21,
                "_id": "5769acab20719ef987004d58"
            },
            {
                "longitude": "-102.799243",
                "latitude": "-29.927341",
                "registered": "Monday, July 7, 2014 4:14 PM",
                "phone": "+1 (877) 552-3400",
                "company": "ENDICIL",
                "eyeColor": "brown",
                "age": 22,
                "balance": "$2,201.49",
                "isActive": false,
                "guid": "c739ffd7-cfce-460d-9f30-de44d6c2bccd",
                "index": 22,
                "_id": "5769acab413692ea12662385"
            },
            {
                "longitude": "20.820062",
                "latitude": "1.243",
                "registered": "Sunday, April 6, 2014 9:19 AM",
                "phone": "+1 (871) 532-3502",
                "company": "QOT",
                "eyeColor": "blue",
                "age": 33,
                "balance": "$1,764.04",
                "isActive": false,
                "guid": "1cbfd5d1-d400-4e24-8612-8065f6f47409",
                "index": 23,
                "_id": "5769acab636fe753ee0aa1bf"
            },
            {
                "longitude": "75.639995",
                "latitude": "-37.389834",
                "registered": "Sunday, January 18, 2015 4:47 AM",
                "phone": "+1 (895) 571-3155",
                "company": "GRONK",
                "eyeColor": "blue",
                "age": 25,
                "balance": "$3,574.02",
                "isActive": false,
                "guid": "437e3c78-e0c4-4359-9f9d-ee5602089dd5",
                "index": 24,
                "_id": "5769acab60edf2904afaad1d"
            },
            {
                "longitude": "156.352881",
                "latitude": "71.046437",
                "registered": "Thursday, November 13, 2014 11:34 AM",
                "phone": "+1 (994) 510-2229",
                "company": "OPPORTECH",
                "eyeColor": "brown",
                "age": 39,
                "balance": "$3,647.84",
                "isActive": true,
                "guid": "9a180b78-598b-449a-8cfe-e080c29b369a",
                "index": 25,
                "_id": "5769acabb22390a948522e6d"
            },
            {
                "longitude": "132.101837",
                "latitude": "51.699084",
                "registered": "Friday, August 1, 2014 8:32 AM",
                "phone": "+1 (963) 534-3974",
                "company": "ZIORE",
                "eyeColor": "green",
                "age": 37,
                "balance": "$2,595.77",
                "isActive": false,
                "guid": "bccf34b4-4c1f-459b-92f5-7aeace6e2cf6",
                "index": 26,
                "_id": "5769acabe322e8372ac6553b"
            },
            {
                "longitude": "-76.215902",
                "latitude": "52.097239",
                "registered": "Sunday, July 6, 2014 1:29 AM",
                "phone": "+1 (800) 486-3961",
                "company": "IZZBY",
                "eyeColor": "blue",
                "age": 34,
                "balance": "$2,225.37",
                "isActive": false,
                "guid": "9383ed13-8a66-4937-b3e0-61de19fa12be",
                "index": 27,
                "_id": "5769acabe04123c6f3428a75"
            },
            {
                "longitude": "32.807705",
                "latitude": "59.005309",
                "registered": "Monday, January 19, 2015 3:07 AM",
                "phone": "+1 (850) 437-2109",
                "company": "DEEPENDS",
                "eyeColor": "brown",
                "age": 35,
                "balance": "$1,774.18",
                "isActive": true,
                "guid": "e1c65c67-1c8c-41d4-a6c9-7a129b867575",
                "index": 28,
                "_id": "5769acab081401c02dc86fbb"
            },
            {
                "longitude": "-166.471259",
                "latitude": "44.80635",
                "registered": "Tuesday, September 30, 2014 5:44 AM",
                "phone": "+1 (876) 453-3360",
                "company": "KATAKANA",
                "eyeColor": "brown",
                "age": 40,
                "balance": "$3,589.42",
                "isActive": false,
                "guid": "7063466d-2b15-43a5-a788-2204bdfccc38",
                "index": 29,
                "_id": "5769acabd252f1afda8ff056"
            },
            {
                "longitude": "-30.898776",
                "latitude": "80.813271",
                "registered": "Tuesday, September 16, 2014 11:04 PM",
                "phone": "+1 (981) 439-3261",
                "company": "NSPIRE",
                "eyeColor": "blue",
                "age": 36,
                "balance": "$1,844.63",
                "isActive": true,
                "guid": "6f2ebca0-3181-42cd-85f2-8d469cce5218",
                "index": 30,
                "_id": "5769acaba5d785d3a6a785f0"
            },
            {
                "longitude": "-110.001368",
                "latitude": "-73.066395",
                "registered": "Saturday, March 5, 2016 1:51 PM",
                "phone": "+1 (819) 431-3487",
                "company": "GUSHKOOL",
                "eyeColor": "blue",
                "age": 37,
                "balance": "$3,549.30",
                "isActive": false,
                "guid": "8601afef-a6fb-4f47-b062-5a03c3448aa4",
                "index": 31,
                "_id": "5769acab67474902d06273fd"
            },
            {
                "longitude": "-61.305405",
                "latitude": "-81.673259",
                "registered": "Thursday, November 26, 2015 9:47 PM",
                "phone": "+1 (845) 457-3228",
                "company": "ENTHAZE",
                "eyeColor": "blue",
                "age": 20,
                "balance": "$1,610.24",
                "isActive": false,
                "guid": "ed48f702-5752-4c44-88e6-f14174e50c4b",
                "index": 32,
                "_id": "5769acabc09583fba206150a"
            },
            {
                "longitude": "68.018285",
                "latitude": "-30.378546",
                "registered": "Wednesday, April 20, 2016 1:16 PM",
                "phone": "+1 (939) 447-2065",
                "company": "UPDAT",
                "eyeColor": "blue",
                "age": 22,
                "balance": "$1,009.37",
                "isActive": true,
                "guid": "65b58f08-ed32-491a-9756-ee51fa8cc88f",
                "index": 33,
                "_id": "5769acab8b4f26b5eeecf446"
            },
            {
                "longitude": "121.99876",
                "latitude": "28.077691",
                "registered": "Thursday, October 15, 2015 9:37 AM",
                "phone": "+1 (943) 498-3659",
                "company": "NEOCENT",
                "eyeColor": "blue",
                "age": 29,
                "balance": "$1,736.43",
                "isActive": false,
                "guid": "27895d82-78d4-4aa4-ab4b-1b74c8bd04a4",
                "index": 34,
                "_id": "5769acabf76452ef56bc2537"
            },
            {
                "longitude": "-59.615584",
                "latitude": "-33.630087",
                "registered": "Wednesday, April 16, 2014 4:07 AM",
                "phone": "+1 (875) 550-2363",
                "company": "COMSTRUCT",
                "eyeColor": "brown",
                "age": 39,
                "balance": "$3,218.67",
                "isActive": true,
                "guid": "f7337609-7234-46b8-a032-e282a00b4ec5",
                "index": 35,
                "_id": "5769acab199e19b31103d9f0"
            },
            {
                "longitude": "124.180241",
                "latitude": "74.984705",
                "registered": "Tuesday, July 21, 2015 1:04 PM",
                "phone": "+1 (899) 592-2876",
                "company": "TUBESYS",
                "eyeColor": "green",
                "age": 37,
                "balance": "$3,640.28",
                "isActive": false,
                "guid": "4ff660f0-514e-4ef3-9564-c07c6da642cf",
                "index": 36,
                "_id": "5769acab8964382d4dcb755a"
            },
            {
                "longitude": "142.791297",
                "latitude": "23.547822",
                "registered": "Friday, May 9, 2014 5:54 PM",
                "phone": "+1 (814) 544-2157",
                "company": "VIRXO",
                "eyeColor": "green",
                "age": 29,
                "balance": "$2,662.51",
                "isActive": false,
                "guid": "e17aa3f5-a217-4ca5-885f-06ad5b922c98",
                "index": 37,
                "_id": "5769acabdce63b9012aba56f"
            },
            {
                "longitude": "5.807364",
                "latitude": "-9.447073",
                "registered": "Monday, July 6, 2015 2:24 AM",
                "phone": "+1 (901) 410-3540",
                "company": "ISOTRACK",
                "eyeColor": "blue",
                "age": 38,
                "balance": "$2,023.62",
                "isActive": false,
                "guid": "74d9a922-47d6-4b12-8c7b-11493188aff9",
                "index": 38,
                "_id": "5769acab67a8a4427ae5cd09"
            },
            {
                "longitude": "-6.391802",
                "latitude": "-88.263645",
                "registered": "Monday, May 9, 2016 10:34 PM",
                "phone": "+1 (890) 424-2743",
                "company": "COMVEYOR",
                "eyeColor": "brown",
                "age": 26,
                "balance": "$1,723.86",
                "isActive": true,
                "guid": "05559daa-a976-4d79-8b44-1ee84cdeb10e",
                "index": 39,
                "_id": "5769acab5e597883cc0f979b"
            },
            {
                "longitude": "-6.293476",
                "latitude": "48.595113",
                "registered": "Friday, April 11, 2014 3:13 AM",
                "phone": "+1 (925) 470-3996",
                "company": "ISOPOP",
                "eyeColor": "brown",
                "age": 27,
                "balance": "$3,086.41",
                "isActive": false,
                "guid": "8040b29b-cfe8-4de9-bd02-196a9130853d",
                "index": 40,
                "_id": "5769acabfebc7db47ed2b5a6"
            },
            {
                "longitude": "-139.723968",
                "latitude": "-58.172268",
                "registered": "Monday, November 24, 2014 7:25 AM",
                "phone": "+1 (818) 511-3137",
                "company": "GEEKNET",
                "eyeColor": "brown",
                "age": 33,
                "balance": "$3,056.75",
                "isActive": false,
                "guid": "11df945c-962c-4291-8bde-c8605aa40ae7",
                "index": 41,
                "_id": "5769acab2b7d9531699456e8"
            },
            {
                "longitude": "179.933626",
                "latitude": "34.313386",
                "registered": "Tuesday, May 12, 2015 7:35 PM",
                "phone": "+1 (889) 442-2170",
                "company": "OVOLO",
                "eyeColor": "brown",
                "age": 21,
                "balance": "$2,518.48",
                "isActive": true,
                "guid": "76c97355-e072-4bdf-b554-000a5126e4a0",
                "index": 42,
                "_id": "5769acab68d93b5ec9d55ca4"
            },
            {
                "longitude": "103.846586",
                "latitude": "78.681138",
                "registered": "Saturday, November 22, 2014 1:45 AM",
                "phone": "+1 (994) 466-2633",
                "company": "GOGOL",
                "eyeColor": "blue",
                "age": 32,
                "balance": "$3,041.77",
                "isActive": true,
                "guid": "c71d793c-443f-4d1b-a718-2afd68d09397",
                "index": 43,
                "_id": "5769acab9676ae450244130a"
            },
            {
                "longitude": "141.074575",
                "latitude": "-15.853465",
                "registered": "Friday, May 16, 2014 9:47 PM",
                "phone": "+1 (843) 528-2670",
                "company": "FITCORE",
                "eyeColor": "blue",
                "age": 31,
                "balance": "$1,868.75",
                "isActive": false,
                "guid": "904d02ff-c8ca-498c-8bb0-e35f482540f2",
                "index": 44,
                "_id": "5769acabaee5e5ba45ab3892"
            },
            {
                "longitude": "-102.206204",
                "latitude": "52.640519",
                "registered": "Friday, July 4, 2014 10:28 AM",
                "phone": "+1 (981) 400-3274",
                "company": "QUAREX",
                "eyeColor": "green",
                "age": 28,
                "balance": "$3,050.61",
                "isActive": true,
                "guid": "dafeecac-6720-4cff-825d-d6f5583899d1",
                "index": 45,
                "_id": "5769acab1620f48267960b2a"
            },
            {
                "longitude": "130.182282",
                "latitude": "2.781827",
                "registered": "Monday, September 14, 2015 7:33 AM",
                "phone": "+1 (887) 521-2842",
                "company": "DEVILTOE",
                "eyeColor": "blue",
                "age": 31,
                "balance": "$3,559.11",
                "isActive": true,
                "guid": "60c3c699-3575-4dfb-a988-a4852eb89c3d",
                "index": 46,
                "_id": "5769acabab0ff1b7fa05e313"
            },
            {
                "longitude": "174.11505",
                "latitude": "45.35697",
                "registered": "Monday, May 9, 2016 8:14 AM",
                "phone": "+1 (990) 512-2819",
                "company": "DOGSPA",
                "eyeColor": "brown",
                "age": 24,
                "balance": "$3,599.10",
                "isActive": true,
                "guid": "2c7f5c75-5b6e-42c7-947e-63089dc0ec01",
                "index": 47,
                "_id": "5769acab3818ac7fa20d2274"
            },
            {
                "longitude": "87.50083",
                "latitude": "-60.246167",
                "registered": "Tuesday, March 1, 2016 11:36 PM",
                "phone": "+1 (942) 560-2369",
                "company": "ECOLIGHT",
                "eyeColor": "brown",
                "age": 31,
                "balance": "$1,696.51",
                "isActive": true,
                "guid": "8f7394cb-ad8a-4dca-a545-8c40c8fdd0bc",
                "index": 48,
                "_id": "5769acab4cc20f9e456f7427"
            },
            {
                "longitude": "-0.407418",
                "latitude": "-65.545085",
                "registered": "Thursday, February 26, 2015 6:46 AM",
                "phone": "+1 (888) 492-3866",
                "company": "NEXGENE",
                "eyeColor": "green",
                "age": 26,
                "balance": "$2,785.49",
                "isActive": false,
                "guid": "510d8081-604d-4cd1-8a65-298f8a90b8ba",
                "index": 49,
                "_id": "5769acabe802ac61d0193926"
            }
        ];
    }


// insert for SheetClip dependency 
/**
 * SheetClip - Spreadsheet Clipboard Parser
 * version 0.2
 *
 * This tiny library transforms JavaScript arrays to strings that are pasteable by LibreOffice, OpenOffice,
 * Google Docs and Microsoft Excel.
 *
 * Copyright 2012, Marcin Warpechowski
 * Licensed under the MIT license.
 * http://github.com/warpech/sheetclip/
 */
/*jslint white: true*/
(function (global) {
  "use strict";

  function countQuotes(str) {
    return str.split('"').length - 1;
  }

  var SheetClip = {
    /**
     * Decode spreadsheet string into array
     *
     * @param {String} str
     * @returns {Array}
     */
    parse: function (str) {
      var r, rLen, rows, arr = [], a = 0, c, cLen, multiline, last;

      rows = str.split('\n');

      if (rows.length > 1 && rows[rows.length - 1] === '') {
        rows.pop();
      }
      for (r = 0, rLen = rows.length; r < rLen; r += 1) {
        rows[r] = rows[r].split('\t');

        for (c = 0, cLen = rows[r].length; c < cLen; c += 1) {
          if (!arr[a]) {
            arr[a] = [];
          }
          if (multiline && c === 0) {
            last = arr[a].length - 1;
            arr[a][last] = arr[a][last] + '\n' + rows[r][0];

            if (multiline && (countQuotes(rows[r][0]) & 1)) { //& 1 is a bitwise way of performing mod 2
              multiline = false;
              arr[a][last] = arr[a][last].substring(0, arr[a][last].length - 1).replace(/""/g, '"');
            }
          }
          else {
            if (c === cLen - 1 && rows[r][c].indexOf('"') === 0 && (countQuotes(rows[r][c]) & 1)) {
              arr[a].push(rows[r][c].substring(1).replace(/""/g, '"'));
              multiline = true;
            }
            else {
              arr[a].push(rows[r][c].replace(/""/g, '"'));
              multiline = false;
            }
          }
        }
        if (!multiline) {
          a += 1;
        }
      }

      return arr;
    },

    /**
     * Encode array into valid spreadsheet string
     *
     * @param arr
     * @returns {String}
     */
    stringify: function (arr) {
      var r, rLen, c, cLen, str = '', val;

      for (r = 0, rLen = arr.length; r < rLen; r += 1) {
        cLen = arr[r].length;

        for (c = 0; c < cLen; c += 1) {
          if (c > 0) {
            str += '\t';
          }
          val = arr[r][c];

          if (typeof val === 'string') {
            if (val.indexOf('\n') > -1) {
              str += '"' + val.replace(/"/g, '""') + '"';
            }
            else {
              str += val;
            }
          }
          else if (val === null || val === void 0) { // void 0 resolves to undefined
            str += '';
          }
          else {
            str += val;
          }
        }

        if (r !== rLen - 1) {
          str += '\n';
        }
      }

      return str;
    }
  };

  if (typeof exports !== 'undefined') {
    exports.parse = SheetClip.parse;
    exports.stringify = SheetClip.stringify;
  } else {
    global.SheetClip = SheetClip;
  }
}(window));

  
</script>

Leave a Reply