Sortable Table

This Web Component adds sort functionality to all table heads. The table can then be sorted ascending and descending and sorting can be reset to the original state.

Table examples taken from https://www.w3.org/WAI/tutorials/tables/.

Source code

Examples

Columns

Date	Event	Venue
12 February	Waltz with Strauss	Main Hall
24 March	The Obelisks	West Wing
14 April	The What	Main Hall

Rows

Date	12 February	24 March	14 April
Event	Waltz with Strauss	The Obelisks	The What
Venue	Main Hall	West Wing	Main Hall

Columns & Rows

	Monday	Tuesday	Wednesday	Thursday	Friday
09:00 – 11:00	Closed	Open	Open	Closed	Closed
11:00 – 13:00	Open	Open	Closed	Closed	Closed
13:00 – 15:00	Open	Open	Open	Closed	Closed
15:00 – 17:00	Closed	Closed	Closed	Open	Open

Usage

<sortable-table>
	<table>
		<thead>
			<tr>
				<th>Date</th>
				<th>Event</th>
				<th>Venue</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>12 February</td>
				<td>Waltz with Strauss</td>
				<td>Main Hall</td>
			</tr>
			<tr>
				<td>24 March</td>
				<td>The Obelisks</td>
				<td>West Wing</td>
			</tr>
			<tr>
				<td>14 April</td>
				<td>The What</td>
				<td>Main Hall</td>
			</tr>
		</tbody>
	</table>
</sortable-table>