<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

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

<title>Export Table Demo | Web Components</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>

<export-to-csv-service></export-to-csv-service>

<export-to-excel-service></export-to-excel-service>

<highlighter-service></highlighter-service>

<h1>Export Table Demo | Web Components</h1>

<section>

<input

is="input-filter"

filter-selector="table"

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

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

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

highlight-class="highlight"

table-attr="is=sortable-table,

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

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

</data-table>

</section>

<!-- DataFormsJS Web Components -->

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

<script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/web-components/input-filter.min.js"></script>

<script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/web-components/sortable-table.min.js"></script>

<script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/web-components/export-to-csv-service.min.js"></script>

<script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/web-components/export-to-excel-service.min.js"></script>

<script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/web-components/highlighter-service.min.js"></script>

<script nomodule src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/web-components/polyfill.min.js"></script>

<!-- Code for this Page -->

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

<script>

// All Browsers

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

// Setup Export Options

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>

<script type="module">

// Modern Browsers use Web Components

(async () => {

await window.customElements.whenDefined('data-table');

document.querySelector('data-table').value = window.records;

})();

</script>

<script nomodule>

// IE and old mobile devices use DataFormsJS Framework from Polyfill.

// The framework will automatically bind data if the attribute is set.

document.querySelector('data-table').setAttribute('data-bind', 'window.records');

</script>

</body>

</html>