wc-sortable-table

KO | EN

gitlite — search

#hacktoberfest #typescript #llm #golang #machine-learning #linux #macos #cli #kubernetes #awesome-list #pytorch #ios #openai #open-source

wc-sortable-table

(★ 16)

A sortable table vanilla web component

wc-sortable-table Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1 align="center">&lt;wc-sortable-table&gt; A HTML Table with Sort</h1>

## Installation

*Installation*
```sh
npm i @vanillawc/wc-sortable-table
```

*Import from NPM*
```html
<script type="module" src="node_modules/@vanillawc/wc-sortable-table/index.js"></script>
```

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

## Demo

Try it on [WebComponents.dev](https://webcomponents.dev/edit/f9IfeJX878gJZibfBcPO?sv=1&pm=1)

## Usage

**Attributes**

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

**Properties**

- `value` - get/set the table data

### Basic Usage

```html
<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.

```html
<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*

```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](https://github.com/vanillawc/vanillawc/blob/main/CONTRIBUTING.md)

wc-sortable-table

wc-sortable-table Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

wc-sortable-table

wc-sortable-table Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README