<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Formats</title>
    <link href="../dist/css/tableexport.min.css" rel="stylesheet">
    <link href="./examples.css" rel="stylesheet">
</head>
<body id="formats">

<iframe src="./default.html" frameborder="0" width="100%" scrolling="no" onload="this.height=screen.height/3;"></iframe>

<main>
    <h1>Formats
        <code class="small">formats: ['xlsx']</code>
    </h1>
    <p>list of available formats:</p>
    <ul>
        <li><code>xlsx</code>: Open XML spreadsheet</li>
        <li><code>xls</code>: Binary spreadsheet</li>
        <li><code>csv</code>: comma separated value</li>
        <li><code>txt</code>: plain text</li>
    </ul>
    <table id="formats-table">
        <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Age</th>
            <th>Salary</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Thor Walton</td>
            <td>Regional Director</td>
            <td>45</td>
            <td>$98,540</td>
        </tr>
        <tr>
            <td>Travis Clarke</td>
            <td>Software Engineer</td>
            <td>30</td>
            <td>$275,000</td>
        </tr>
        <tr>
            <td>Suki Burks</td>
            <td>Office Manager</td>
            <td>22</td>
            <td>$67,670</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td class="disabled"></td>
            <td class="disabled"></td>
            <td class="disabled"></td>
            <th>$441,210</th>
        </tr>
        </tfoot>
    </table>

    <p class="info">Highlighted in <span class="target">yellow</span>, you will notice that <code>formats: ['xlsx']</code> <i>limits the exportable filetypes to those listed in the formats array</i>.</p>
</main>

<script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../bower_components/js-xlsx/dist/xlsx.core.min.js"></script>
<script type="text/javascript" src="../bower_components/blobjs/Blob.min.js"></script>
<script type="text/javascript" src="../bower_components/file-saverjs/FileSaver.min.js"></script>
<script type="text/javascript" src="../dist/js/tableexport.min.js"></script>
<script type="text/javascript" src="../assets/js/analytics.js"></script>
<script>

    var FormatsTable = document.getElementById('formats-table');
    new TableExport(FormatsTable, {
        formats: ['xlsx']
    });
    // **** jQuery **************************
    //    $(FormatsTable).tableExport({
    //        formats: ['xlsx']
    //    });
    // **************************************


    // **** Configuration **************************
    // TableExport.prototype. {{ PROPERTY BELOW }}

/*        xlsx: {
            defaultClass: 'xlsx',
                buttonContent: 'Export to xlsx',
                mimeType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
                fileExtension: '.xlsx'
        },*/
    /**
     * XLS (Binary spreadsheet) file extension configuration
     * @memberof TableExport.prototype
     */
/*        xls: {
            defaultClass: 'xls',
                buttonContent: 'Export to xls',
                separator: '\t',
                mimeType: 'application/vnd.ms-excel',
                fileExtension: '.xls'
        },*/
    /**
     * CSV (Comma Separated Values) file extension configuration
     * @memberof TableExport.prototype
     */
/*        csv: {
            defaultClass: 'csv',
                buttonContent: 'Export to csv',
                separator: ',',
                mimeType: 'text/csv',
                fileExtension: '.csv'
        },*/
    /**
     * TXT (Plain Text) file extension configuration
     * @memberof TableExport.prototype
     */
/*        txt: {
            defaultClass: 'txt',
                buttonContent: 'Export to txt',
                separator: '  ',
                mimeType: 'text/plain',
                fileExtension: '.txt'
        },*/


</script>

</body>
</html>