<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

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

<title>Log Table Demo | Web Components</title>

<link rel="stylesheet" href="css/log-table.css" data-css-vars-ponyfill>

<link rel="canonical" href="https://www.dataformsjs.com/examples/log-table-hbs.htm">

</head>

<body>

<div id="view" class="pt10"></div>

<show-errors-service></show-errors-service>

<url-router view-selector="#view">

<url-route path="/" redirect="/10"></url-route>

<url-route path="/:count">

<template>

<json-data url="https://www.dataformsjs.com/data/example/log-table/:count?format=list" url-params>

<is-loading>

<h3 class="loading">Loading...</h3>

</is-loading>

<has-error>

<h3 class="error" data-bind="errorMessage"></h3>

</has-error>

<is-loaded>

<div class="flex pt10">

<h2></h2>

<button data-filter-clear-all>Clear Filter</button>

</div>

<nav>

<a href="#/10">10 Records</a>

<a href="#/100">100 Records</a>

<a href="#/200">200 Records</a>

<a href="#/error">Error Example</a>

</nav>

<div>

<input type="text" class="large form-control medium-margin-right"

data-filter-selector="table"

data-filter-results-text-selector="h2"

data-filter-results-text-all="{totalCount} Log Example Records"

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

data-filter-class-odd="row-odd"

data-filter-class-even="row-even"

placeholder="Enter Filter">

<button type="button"

data-export-csv-selector="table"

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

<button type="button"

data-export-excel-selector="table"

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

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

</div>

<div class="highlighter" style="display:none;">

<ul>

<li class="info">Click or Tap to Filter</li>

<li class="log-error"

data-highlight-selector="table tbody tr td:nth-child(1)"

data-highlight-value="ERROR"

data-highlight-operator="==="

data-highlight-class="log-error"

data-filter-selector="table"

data-filter-column="Log Level"

data-filter-operator="==="

data-filter-value="ERROR"></li>

<li class="log-warning"

data-highlight-selector="table tbody tr td:nth-child(1)"

data-highlight-value="WARNING"

data-highlight-operator="==="

data-highlight-class="log-warning"

data-filter-selector="table"

data-filter-column="Log Level"

data-filter-operator="==="

data-filter-value="WARNING"></li>

</ul>

</div>

<data-table

data-bind="records"

table-attr="class=click-to-highlight,

data-sort,

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

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

</data-table>

</is-loaded>

</json-data>

</template>

</url-route>

</url-router>

<!-- DataFormsJS Web Components -->

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

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

<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/show-errors-service.min.js"></script>

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

<!-- DataFormsJS Standard Plugins -->

<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/web-components/jsPlugins.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/highlighter.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>

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

<!--

Refresh Plugins after page content is ready (each URL #hash change)

-->

<script>

document.addEventListener('app:contentReady', function() {

app.refreshPlugins();

});

</script>

</body>

</html>