svelte-csv

svelte-csv

svelte-csv is the fastest in-browser CSV (or delimited text) parser for Svelte. It is full of useful features such as CSVDownloader, readString, jsonToCSV, readRemoteFile, CSVReader, ... etc.

🔧 Install

svelte-csv is available on npm. It can be installed with the following command:

npm install svelte-csv --save

svelte-csv is available on yarn as well. It can be installed with the following command:

yarn add svelte-csv --save

ℹ️ Note on usage with SvelteKit

If you are using svelte-csv with SvelteKit, you need to configure svelte.config.js as follows:

  kit: {
    // ...
    vite: {
      optimizeDeps: {
        include: ['papaparse']
      }
    }
  }

📚 Useful Features

• CSVDownloader
• readString
• readRemoteFile
• jsonToCSV
• CSVReader

💡 Usage

🎀 CSVDownloader

If you want to open your CSV files in Excel, you might want to set bom={true} or bom, default is false. This option adds the so called BOM byte '\ufeff' to the beginning of your CSV files and tells Excel that the encoding is UTF8.

Link

import { CSVDownloader } from 'svelte-csv';

<CSVDownloader
  data={[
    {
      "Column 1": "1-1",
      "Column 2": "1-2",
      "Column 3": "1-3",
      "Column 4": "1-4",
    },
    {
      "Column 1": "2-1",
      "Column 2": "2-2",
      "Column 3": "2-3",
      "Column 4": "2-4",
    },
    {
      "Column 1": "3-1",
      "Column 2": "3-2",
      "Column 3": "3-3",
      "Column 4": "3-4",
    },
    {
      "Column 1": 4,
      "Column 2": 5,
      "Column 3": 6,
      "Column 4": 7,
    },
  ]}
  filename={'filename'}
  bom={true}
>
  Download
</CSVDownloader>

Link

import { CSVDownloader } from 'svelte-csv';

<CSVDownloader
  data={[
    {
      "Column 1": "1-1",
      "Column 2": "1-2",
      "Column 3": "1-3",
      "Column 4": "1-4",
    },
    {
      "Column 1": "2-1",
      "Column 2": "2-2",
      "Column 3": "2-3",
      "Column 4": "2-4",
    },
    {
      "Column 1": "3-1",
      "Column 2": "3-2",
      "Column 3": "3-3",
      "Column 4": "3-4",
    },
    {
      "Column 1": 4,
      "Column 2": 5,
      "Column 3": 6,
      "Column 4": 7,
    },
  ]}
  type={'button'}
  filename={'filename'}
  bom={true}
>
  Download
</CSVDownloader>

🎀 readString

import { readString } from 'svelte-csv';

const str = `Column 1,Column 2,Column 3,Column 4
1-1,1-2,1-3,1-4
2-1,2-2,2-3,2-4
3-1,3-2,3-3,3-4
4,5,6,7`;

const results = readString(str);

🎀 readRemoteFile

import { readRemoteFile } from 'svelte-csv'

readRemoteFile(
  url,
  {
    complete: (results) => {
      console.log('Results:', results)
    }
  }
);

🎀 jsonToCSV

import { jsonToCSV } from 'svelte-csv';

const jsonData = `[
  {
      "Column 1": "1-1",
      "Column 2": "1-2",
      "Column 3": "1-3",
      "Column 4": "1-4"
  },
  {
      "Column 1": "2-1",
      "Column 2": "2-2",
      "Column 3": "2-3",
      "Column 4": "2-4"
  },
  {
      "Column 1": "3-1",
      "Column 2": "3-2",
      "Column 3": "3-3",
      "Column 4": "3-4"
  },
  {
      "Column 1": 4,
      "Column 2": 5,
      "Column 3": 6,
      "Column 4": 7
  }
]`;

const results = jsonToCSV(jsonData);

📜 Changelog

Latest version 1.2.8 (2022-02-15):

• Fix '/node_modules/papaparse/papaparse.min.js?v=8573111b' does not provide an export named 'default

Details changes for each release are documented in the CHANGELOG.md.

❗ Issues

If you think any of the svelte-csv can be improved, please do open a PR with any updates and submit any issues. Also, I will continue to improve this, so you might want to watch/star this repository to revisit.

🌟 Contribution

We'd love to have your helping hand on contributions to svelte-csv by forking and sending a pull request!

Your contributions are heartily ♡ welcome, recognized and appreciated. (✿◠‿◠)

How to contribute:

• Open pull request with improvements
• Discuss ideas in issues
• Spread the word
• Reach out with any feedback

⚖️ License

The MIT License