csv2table

A svelte library for creating a basic table from a CSV file.

light weight
no default styling

Starting 🚀

_ You will need svelte and npm to use this package. Get started by downloading svelte

See ** Deployment ** to learn how to deploy the project.

Installation 🔧

A series of step-by-step examples that tell you what you need to run to have a development environment running

To install using yarn

yarn add csv2table

or npm

npm i csv2table

Usage 📦

basic table without header

<script>
  import {BasicTable} from 'csv2table'
  import csvData from './csvData'
</script>
<BasicTable csv={csvData} csvColumnDelimiter="," hasHeader={false} />

basic table with header


<script>
  import {BasicTable} from 'csv2table'
  import csvData from './csvData'
</script>'
<BasicTable csv={csvData} csvColumnDelimiter="," />

basic table with header and global styles


<script>
  import { BasicTable } from "./table";
  import { TEST_DATA } from "../testData";
</script>

<style>
  :global(table) {
    border-collapse: collapse;
    width: 100%;
  }

  :global(th),
  :global(td) {
    text-align: left;
    padding: 8px;
  }

  :global(tr:nth-child(even)) {
    background-color: #f2f2f2;
  }

  :global(th) {
    background-color: #4caf50;
    color: white;
  }
</style>

<BasicTable csv={TEST_DATA} csvColumnDelimiter="," />

basic table with passed class

<script>
  import { BasicTable } from "./table";
  import { TEST_DATA } from "../testData";
</script>

<style>
  :global(.paleBlueRows) {
    font-family: Tahoma, Geneva, sans-serif;
    border: 1px solid #ffffff;
    width: 350px;
    height: 200px;
    text-align: center;
    border-collapse: collapse;
  }
  :global(.paleBlueRows) td,
  :global(.paleBlueRows) th {
    border: 1px solid #ffffff;
    padding: 3px 2px;
  }
  :global(.paleBlueRows) tbody td {
    font-size: 14px;
    color: #333333;
  }
  :global(.paleBlueRows) tr:nth-child(even) {
    background: #d0e4f5;
  }
  :global(.paleBlueRows) thead {
    background: #0b6fa4;
    border-bottom: 5px solid #ffffff;
  }
  :global(.paleBlueRows) thead th {
    font-size: 17px;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    border-left: 2px solid #ffffff;
  }
  :global(.paleBlueRows) thead th:first-child {
    border-left: none;
  }
</style>

<BasicTable csv={TEST_DATA} csvColumnDelimiter="," tableClass="paleBlueRows" />

Options 🛠️

defaults

csvRowDelimiter default = '\n'
csvColumnDelimiter default = '\t'
hasHeader default = true

styling

tableClass
tableRowClass
tableColumnClass

Versioned 📌

We use SemVer for versioning.

Authors ✒️

** Rod Lewis ** - _ Initial Work _ - StudentOfJS

You can also look at the list of all contributors who have participated in this project.

License 📄

MIT

Expressions of Gratitude 🎁

over 1 billion animals are estimated to have died in the recent and ongoing bushfires in Australia. Many more are displaced and face an uncertain future, even extinction in some cases. If csv2table made your day a little easier and you want to thank me, please consider helping out

RSPCA Australia

⌨️ with ❤️ by StudentOfJS 😊

StudentOfJS / csv2table