component-sort-table
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
template.
Configuration
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
default, <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 rowsortable
- enables sortable columns (only works if table has a header row); by default, all columns will be sortablesortable="Foo,Bar,Baz"
- allows users to specify only certain column headers to be sortableclasses="foo bar,foo,,,bar"
- allows users to include custom styling by adding comma-separated sets of classes to their corresponding columnsstring
class - left aligns column headers and cell text (by default, headers and cell text are right-aligned)mobile-hidden
,tablet-hidden
classes - hide specified columns on mobile devices (480px default breakpoint for mobile, 768px for tablet)- Users are also able to include their own custom classes
Extras
Since <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.