A custom element for creating sortable tables.
JavaScript HTML CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
tasks
.bowerrc
.gitignore
Gruntfile.js
bower.json
package.json
project.json
readme.md

readme.md

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

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.