A sortable table vanilla web component
npm i @vanillawc/wc-sortable-table
Then import the index.js
file at the root of the package.
Attributes
src
- load an external source filetheme
- an external theme file
Properties
value
- get/set the table data
<wc-sortable-table src="sample.json"></wc-sortable-table>
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.
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>
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>