pwfoo / wc-sortable-table

A sortable table vanilla web component

<wc-sortable-table> A HTML Table with Sort

Installation

Installation

npm i @vanillawc/wc-sortable-table

Import from NPM

<script type="module" src="node_modules/@vanillawc/wc-sortable-table/index.js"></script>

Import from CDN

<script type="module" src="https://cdn.jsdelivr.net/gh/vanillawc/wc-sortable-table@1/index.js"></script>

Demo

Try it on WebComponents.dev

Usage

Attributes

• src - load an external source file
• theme - an external theme file

Properties

• value - get/set the table data

Basic Usage

<wc-sortable-table src="sample.json"></wc-sortable-table>

Styling

By default, <wc-sortable-table> contains an un-styled <table> element in the lightDOM. That means, it will inherit any global CSS styles present on the site and can be styled directly using CSS.

When a sort is applied, the <th> element selected receives either a .asc or .desc class depending on the direction of the sort.

Theming

Alternatively, a theme for <wc-sortable-table> can be specified. This will encapsulate the element in a shadowDOM -- to prevent style bleed -- and apply the style provided.

<wc-sortable-table src="sample.json" theme="assets/example-theme.html"></wc-sortable-table>

Creating Themes

A theme contains a <style> element with the CSS that will be applied to the element.

example-theme.html

<style>
  table, th, td {
    border: 1px solid black;
  }
  
  .asc:after {
    content: "▲";
    color: red;
    font-size: .75rem;
    vertical-align: text-top;
    text-align:right;
  }
  
  .desc:after {
    content: "▼";
    color: red;
    font-size: .75rem;
    vertical-align: text-top;
    text-align: right;
  }
</style>

Contributing

See CONTRIBUTING.md