A custom element for quickly generating HTML tables with sortable columns:
<sort-table sortable classes="string"> District,Population,Households,White,Hispanic,Black One,91678,41195,62989,8979,6094 Two,92281,34401,28556,8667,18388 Three,91197,46839,62237,5926,9596 Four,93874,39907,68570,4648,2194 Five,90114,41744,61893,6587,5092 Six,88763,42240,74044,4267,1444 Seven,86024,50112,64780,4949,3662 </sort-table>
<sort-table> was built using the Seattle Times' web component
In its simplest form,
<sort-table> can be used to feed CSV-formatted
data to a static table by wrapping the data in a custom element tag. By
<sort-table> will generate a static (non-sortable) table with
the first row of data formatted as a header row.
Or feed data from a Google Spreadsheet by specifying the sheet ID:
<sort-table sortable sheet="[GOOGLE_SHEET_ID]"> </sort-table>
(While using a Google Sheet is helpful when dealing with frequently changing data, we recommend including data inline for long-term use.)
The table can be further configured with several custom attributes:
noheader- for tables that do not have a header row
sortable- enables sortable columns (only works if table has a header row); by default, all columns will be sortable
sortable="Foo,Bar,Baz"- allows users to specify only certain column headers to be sortable
classes="foo bar,foo,,,bar"- allows users to include custom styling by adding comma-separated sets of classes to their corresponding columns
stringclass - left aligns column headers and cell text (by default, headers and cell text are right-aligned)
tablet-hiddenclasses - hide specified columns on mobile devices (480px default breakpoint for mobile, 768px for tablet)
<sort-table> is built to read CSV-formatted data, raw data should not include commas (unless stringified). Numbers are automatically formatted during processing.
Users should be aware that
<sort-table> does not sanitize its data. This means that table cells can be further customized by passing in HTML as raw data.