Giter VIP home page Giter VIP logo

csv-reader's Introduction

CSV Reader

๐Ÿšง Work in Progress... ๐Ÿšง

What is this?

A browser extension.

It will transform raw csv data into a simple html table, and show it online in the same tab.

Available free for Chrome and Firefox.

What problem does this solve?

When quickly looking through csv data files online, you either have to:

  • Open them with Excel, Numbers, etc.
  • Try to skim through the data in its raw state.

CSV Reader allows you to look at the data formatted as a table, so you can make decisions faster.

Features

CSV Reader detects if the current tab is a .csv page (correctly most of the time).

It transforms the raw csv data into a table, nicely formatted so it's easy to scan (see images below).

It allows the user to input some settings:

Feature Default Type Result
Separator , String New column when this value is found
Title row false Boolean Use the first line as the table header
Skip at the top 0 Number Number of text lines to leave untouched at the top
Links in text false Boolean Look for links in data and make them clickable

How to use

  1. Install the extension (in Chrome or Firefox).
  2. Head to any .csv data page.
  3. Click on the extension icon, fill the form:
    1. Choose the separator.
    2. Check if there is a title row for the data. This will format a header row in the table.
    3. Input the number of lines to skip at the top. Some csv pages have a few lines with info, we don't want to format those.
    4. Check if there are links in the data. They will be formatted as clickable links.
  4. Done, enjoy the table!

Example

Visit a .csv data file online. You can try this csv sample dataset or this other example.

Click on the CSV Reader extension icon.

In the popup, input the config options: separator, title row, etc. (In the example dataset, | (pipe) as the separator, and check the title line option)

Start

Click "Convert":

Converted

To go back to the raw data, click the "Reset" button on the extension popup:

Reset

Help this project!

If this extension was useful to you in any way, please consider leaving a โญ 5-star review.

๐Ÿ‘จโ€๐Ÿ’ป It will take you less than a minute, and will greatly help reach new audiences.

๐Ÿ™ Thank you very much!

Some kind of roadmap...

Some features I'd like to work on (help appreciated):

  • Chrome version.
  • Improve the browser icons (dark/light, design).
  • Style the table row on hover.
  • Show progress: while the content is being processed, hide it and show a loading component.
  • Add option to just rainbow-code csv (like the vscode plugin) instead of making a table.
  • If separator is also in text, between "", detect and don't use as separator.
  • Add <a> tags to links if they are links (regex) and the config option is checked in the popup.
  • Detect if text looks like a link.
  • Try to auto-detect separator.
  • Update README and Firefox page with images and examples of usage.
  • Add some useful data in the result page (number of rows and columns, etc.).
  • Ask users in the result page to leave a 5โญ review please.
  • Make table header sticky, so it stays at the top while scrolling.
  • Remove "" from the strings if they are at begining and end of string.
  • 'Doesn't work here' message: add 'if you feel this is an error please report it'.
  • Try to stop .csv files from downloading, and instead open them in browser so thay can be converted.
  • Make columns hideable.
  • Maybe add the reset button at the top of the table instead of having to open the popup again.
  • Add an initial check to see if content is too big. If it is, change the parse method to a lighter but less precise one.
  • If there is a title line, add option to transform data into JSON and export.

csv-reader's People

Contributors

rubenvar avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.