Embed Details
Add this style information to the head of your file.
<![CDATA[<link rel="stylesheet" href="//d1o40k53wiknb7.cloudfront.net/css/table-head-start-city-council.css" type="text/css">]]>
Add this html where you need the graph to appear
<![CDATA[<div class="use_tailwind">
<section id="table-head-start-city-council">
<h3></h3>
<div x-data="headStartCC">
<section id="cc-filter" aria-labelledby="select-cc-district-label">
<label id="select-cc-district-label" for="select-cc-district">Filter By District</label>
<div>
<select x-model="currentDistrict" id="select-cc-district">
<option value="" x-bind:selected="!currentDistrict">All Council Districts</option>
<template x-for="item in data" :key="item.district_number">
<option
x-bind:value="item.district_number"
x-text="`District ${item.district_number}`"
x-bind:selected="item.district_number === parseInt(currentDistrict)"
></option>
</template>
</select>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
</svg>
</div>
</section>
<table>
<thead>
<tr>
<th>District Number</th>
<th>Member Name</th>
<th>Website</th>
<th>Borough</th>
<th>Providers</th>
<th>Head Start Capacity Total</th>
<th>Head Start Capacity 4s</th>
<th>Head Start Capacity 3s</th>
</tr>
</thead>
<tbody>
<template x-for="item in filteredData" :key="item.district_number">
<tr>
<template x-for="key in Object.keys(item)" :key="key">
<td class="px-4 py-2 border-b" x-text="item[key]"></td>
</template>
</tr>
</template>
</tbody>
</table>
</div>
</section>
</div>
]]>
Add this before the closing body tag
<![CDATA[<script src="//d1o40k53wiknb7.cloudfront.net/js/table-head-start-city-council.js"></script>]]>