<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Export Table Demo | DataFormsJS Framework</title>

<link rel="stylesheet" href="https://d2xbd92kui7v97.cloudfront.net/site/css/getting-started.css">

<style>

body { padding: 40px; }

button { padding: 0.5em 1em; margin: 10px; }

td { white-space: pre; vertical-align: top; }

input[type="radio"] {

width: initial;

margin-left: 20px;

border: initial;

box-shadow: initial;

width: 18px;

height: 18px;

margin-top: 0;

}

.form-controls {

margin-top: 20px;

display: flex;

align-items: center;

justify-content: center;

}

label { padding-left: 5px; }

</style>

</head>

<body>

<h1>Export Table Demo | DataFormsJS Framework</h1>

<section>

<input

data-filter-selector="table"

data-filter-results-text-selector="#record-count"

data-filter-results-text-all="Showing {totalCount} Total Records"

data-filter-results-text-filtered="Showing {displayCount} of {totalCount} Records"

placeholder="Enter filter">

<div id="record-count" style="padding-top: 10px;"></div>

<div class="form-controls">

<button type="button"

data-export-excel-selector="table"

data-export-file-name="Log-Report.xlsx"

data-worksheet-name="Log Report">Export to Excel</button>

<button type="button"

data-export-csv-selector="table"

data-export-file-name="Log-Report.csv">Export to CSV</button>

</div>

<div class="form-controls">

<input type="radio" name="export-all" id="export-visible" value="filtered" checked>

<label for="export-visible">Export Visible (Default)</label>

<input type="radio" name="export-all" id="export-all" value="all">

<label for="export-all">Export All</label>

</div>

</section>

<section>

<data-table

data-bind="window.records"

data-table-attr="

class=click-to-highlight,

data-sort,

data-sort-class-odd=row-odd,

data-sort-class-even=row-even">

</data-table>

</section>

<!-- DataFormsJS -->

<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/DataFormsJS.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/controls/data-table.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/dataBind.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/filter.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/sort.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/clickToHighlight.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/exportToCsv.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/exportToExcel.min.js"></script>

<!-- Code for this Page -->

<script src="export-table-records.js"></script>

<script>

// Setup Export Options once page is loaded.

// This could also be handled from a Plugin.

document.addEventListener('DOMContentLoaded', function() {

function setExportAll(exportAll) {

var csvExport = document.querySelector('[data-export-csv-selector]');

var excelExport = document.querySelector('[data-export-excel-selector]');

if (exportAll) {

// Define HTML attribute

csvExport.setAttribute('data-export-all', '');

excelExport.setAttribute('data-export-all', '');

} else {

csvExport.removeAttribute('data-export-all');

excelExport.removeAttribute('data-export-all');

}

}

document.getElementById('export-visible').onchange = function() { setExportAll(false); };

document.getElementById('export-all').onchange = function() { setExportAll(true); };

});

</script>

</body>

</html>