node package manager



A custom element for quickly generating HTML tables with sortable columns:

<sort-table sortable classes="string">

<sort-table> was built using the Seattle Times' web component template.


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]">

(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
    • string 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


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.