JSFiddle - React, Tailwind, and code Playground
by justinwinter
HTML
<script src="https://www.tablefilter.com/tablefilter/tablefilter.js"></script>
<link rel="stylesheet" href="https://www.tablefilter.com/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="https://www.tablefilter.com/assets/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://www.tablefilter.com/assets/css/theme.css">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<table id="demo" class="MLA">
<thead>
<tr>
<th>From</th>
<th>Destination</th>
<th>Road Distance (km)</th>
<th>By Air (hrs)</th>
<th>By Rail (hrs)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sydney</td>
<td>Adelaide</td>
<td>1412</td>
<td>1.4</td>
<td>25.3</td>
</tr>
<tr>
<td>Sydney</td>
<td>Brisbane</td>
<td>982</td>
<td>1.5</td>
<td>16</td>
</tr>
<tr>
<td>Sydney</td>
<td>Canberra</td>
<td>286</td>
<td>.6</td>
<td>4.3</td>
</tr>
<tr>
<td>Sydney</td>
<td>Melbourne</td>
<td>872</td>
<td>1.1</td>
<td>10.5</td>
</tr>
<tr>
<td>Adelaide</td>
<td>Perth</td>
<td>2781</td>
<td>3.1</td>
<td>38</td>
</tr>
<tr>
<td>Adelaide</td>
<td>Alice Springs</td>
<td>1533</td>
<td>2</td>
<td>20.25</td>
</tr>
<tr>
<td>Adelaide</td>
<td>Brisbane</td>
<td>2045</td>
<td>2.15</td>
<td>40</td>
</tr>
</tbody>
</table>
<script data-config>
var tf = new TableFilter('demo', {
base_path: 'tablefilter/',
alternate_rows: true,
...