<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<link rel="shortcut icon" type="image/png" href="/favicon.png"/>

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

<link rel="preload" href="/assets/css/styles.css" as="style" >

<link rel="stylesheet" href="/assets/css/styles.css" >

<link rel="preload" href="/assets/css/doo/doo-flex-form.css" as="style" >

<link rel="stylesheet" href="/assets/css/doo/doo-flex-form.css" >

<title>Doo HTML</title>

<!-- <script src="https://cdn.jsdelivr.net/gh/hman61/doo.ui@latest/dist/doo.mock.min.js"></script> -->

<!-- <script src="https://cdn.jsdelivr.net/gh/hman61/doo.ui@latest/dist/doo.html.min.js"></script> -->

<script src="/dist/doo.html.min.js"></script>

<!-- <script type="module" src="/dist/js/doo.html.js"></script> -->

<doo-bind>

<data name="athletes" data-fetch="https://raw.githubusercontent.com/ag-grid/ag-grid-docs/master/src/olympicWinnersSmall.json" />

</doo-bind>

</head>

<body>

<div class="flex flex-1 justify-evenly">

<a class="doo-logo flex flex-1" href="/"> | tables </a>

</div>

<doo-html

class="flex justify-evenly w-full"

link="styles"

bind="athletes"

template="/doodads/table/table-3.html"

data-map="athlete|sport|country"

data-map-label="Athlete|Sport|Country"

></doo-html>

<doo-html

class="mt-2 flex justify-evenly w-full bg-gray-500"

link="styles"

bind="athletes"

data-src="https://raw.githubusercontent.com/ag-grid/ag-grid-docs/master/src/olympicWinnersSmall.json"

template="/doodads/table/table-3.html"

data-map="athlete|gold|date"

data-map-label="Athlete|Gold|Date"

></doo-html>

</body>

</html>