@ctrl/ngx-csv

Easily generate a CSV download in the browser with Angular

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
310Jul 13, 2020Mar 17, 2018Minified + gzip package size for @ctrl/ngx-csv in KB

Readme

@ctrl/ngx-csv

npm CircleCI coverage

Easily generate a CSV download in the browser with Angular

Demo: https://ngx-csv.vercel.app

Install

npm install @ctrl/ngx-csv

Dependencies

Latest version available for each version of Angular

ngx-trend Angular
2.1.1 8.x
3.0.1 9.x
current >= 10.x

Import

import { CsvModule } from '@ctrl/ngx-csv';

Use

Add the csvLink directive to your <a> tag

<a csvLink [data]="data">Download</a>

Input

  • data: The body of the csv
  • headers: Set the first line of the csv
  • delimiter: Set the seperator between values. Default ','
  • filename: Set the filename of the csv. Default data.csv
  • uFEFF: Adds a Byte order mark to setup the csv as UTF-8. Default true
  • target: Element target. Default `_blank

Accepted Data Formats

Array of objects

keys are used as the column headers

const data = [
  { firstname: 'Ahmed', lastname: 'Tomi', email: 'ah@smthing.co.com' },
  { firstname: 'Raed', lastname: 'Labes', email: 'rl@smthing.co.com' },
  { firstname: 'Yezzi', lastname: 'Min l3b', email: 'ymin@cocococo.com' },
];
Array of strings

first line used as headers if not supplied

const data = [
  ['firstname', 'lastname', 'email'],
  ['Ahmed', 'Tomi', 'ah@smthing.co.com'],
  ['Raed', 'Labes', 'rl@smthing.co.com'],
  ['Yezzi', 'Min l3b', 'ymin@cocococo.com'],
];
String

An already formatted csv from an outside source

const data = `firstname,lastname
Ahmed,Tomi
Raed,Labes
Yezzi,Min l3b
`;
Array of objects with custom headers

provided headers

const headers = [
  { label: 'First Name', key: 'firstname' },
  { label: 'Last Name', key: 'lastname' },
  { label: 'Email', key: 'email' },
];

const data = [
  { firstname: 'Ahmed', lastname: 'Tomi', email: 'ah@smthing.co.com' },
  { firstname: 'Raed', lastname: 'Labes', email: 'rl@smthing.co.com' },
  { firstname: 'Yezzi', lastname: 'Min l3b', email: 'ymin@cocococo.com' },
];

See Also

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.