@vanillawc/wc-csv-table

A vanilla web component to present CSV as a HTML table

Usage no npm install needed!

<script type="module">
  import vanillawcWcCsvTable from 'https://cdn.skypack.dev/@vanillawc/wc-csv-table';
</script>

README

<wc-csv-table> CSV -> HTML Table

GitHub Releases NPM Releases Bundlephobia Latest Status Release Status

Discord Published on WebComponents.org

Installation

Installation

npm i @vanillawc/wc-csv-table

Import from NPM

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

Import from CDN

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

Demo

Try it on WebComponents.dev

Usage

Attributes

  • src - load an external CSV file
  • no-headers - there is no header row

Properties

  • value - get/set the editor's contents
  • noHeaders - no-headers as a property

Basic Usage

<wc-csv-table src="sample.csv"></wc-csv-table>

'no-headers' Attribute

Use no-headers if your data doesn't contain row headers

<wc-csv-table src="sample2.csv" no-headers></wc-csv-table>

Styling

By default, <wc-csv-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.

Contributing

See CONTRIBUTING.md