Skip to content

Commit

Permalink
deploy: 98c9722
Browse files Browse the repository at this point in the history
  • Loading branch information
nabobalis committed Aug 20, 2024
0 parents commit 102dec8
Show file tree
Hide file tree
Showing 12 changed files with 10,279 additions and 0 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
.DS_Store
Empty file added .nojekyll
Empty file.
21 changes: 21 additions & 0 deletions LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
The MIT License (MIT)

Copyright (c) 2018 Derek Eder

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
154 changes: 154 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
# CSV to HTML Table

Display any CSV file as a searchable, filterable, pretty [HTML table](https://www.scaler.com/topics/html/tables-in-html/). Done in 100% JavaScript.

Check out the working demo: https://csv-to-html-table.netlify.app/

![Screen Shot 2021-03-26 at 4 53 39 PM](https://user-images.githubusercontent.com/919583/112696463-d7ddd000-8e53-11eb-8f0e-084794450943.png)

## Usage

#### 1. Clone this repository (in the command line)

``` bash
git clone git@github.com:derekeder/csv-to-html-table.git
cd csv-to-html-table
```

#### 2. Add your CSV file to the `data/` folder

#### 3. In `index.html` set your options in the `CsvToHtmlTable.init()` function

``` html
<script>
CsvToHtmlTable.init({
csv_path: 'data/Health Clinics in Chicago.csv',
element: 'table-container',
allow_download: true,
csv_options: {separator: ',', delimiter: '"'},
datatables_options: {"paging": false}
});
</script>
```

##### Available options

* `csv_path` Path to your CSV file.
* `element` The HTML element to render your table to. Defaults to `table-container`
* `allow_download` if true, shows a link to download the CSV file. Defaults to `false`
* `csv_options` jQuery CSV configuration. Use this if you want to use a custom `delimiter` or `separator` in your input file. See [their documentation](https://code.google.com/p/jquery-csv/wiki/API#$.csv.toArrays%28%29).
* `datatables_options` DataTables configuration. See [their documentation](http://datatables.net/reference/option/).
* `custom_formatting` **New!** A list of column indexes and custom functions to format your data (see below)


##### Custom formatting
If you want to do custom formatting for one or more column, you can pass in an array of arrays containing the index of the column and a custom function for formatting it. You can pass in multiple formatters and they will be executed in order.

The custom functions must take in one parameter (the value in the cell) and return a HTML string:

Example:

``` html
<script>
//my custom function that creates a hyperlink
function format_link(link){
if (link)
return "<a href='" + link + "' target='_blank'>" + link + "</a>";
else
return "";
}
//initializing the table
CsvToHtmlTable.init({
csv_path: 'data/Health Clinics in Chicago.csv',
element: 'table-container',
allow_download: true,
csv_options: {separator: ',', delimiter: '"'},
datatables_options: {"paging": false},
custom_formatting: [[4, format_link]] //execute the function on the 4th column of every row
});
</script>
```

Note that you should take care about HTML escaping to avoid [XSS](https://www.owasp.org/index.php/Cross-site_Scripting_(XSS)) or broken layout.
jQuery has a nice function [text()](https://api.jquery.com/text/) which safely escapes HTML from value.

#### 4. Run it

You can run this locally using this handy python command:

```bash
python -m SimpleHTTPServer
```

...or with Python 3:

```bash
python -m http.server
```

navigate to http://localhost:8000/

#### 5. Deploy it

**GitHub pages** You can host your table on GitHub pages for free! Once you've made all your changes and committed them, push everything in the `master` branch to `gh-pages` which automatically enables GitHub pages.
```bash
git push origin master:gh-pages
```

Then navigate to http://your-github-username.github.io/csv-to-html-table/

Read more on working with [GitHub pages projects](https://help.github.com/articles/user-organization-and-project-pages/#project-pages).

**Web server** This project should work on any web server. Upload this entire project (including all the `css`, `data`, `fonts` and `js` folders) to a public folder on your server using FTP.

#### 6. iframe it (optional)

Want to embed your nifty table on your website? You can use an [iframe](http://www.w3schools.com/tags/tag_iframe.asp). Once you've deployed your table (above in step 5) you can link to it in an iframe right in your HTML.

```html
<iframe style="border-style: none;" src="http://derekeder.github.io/csv-to-html-table/" height="950" width="600"></iframe>
```

## Dependencies

* [Bootstrap 4](http://getbootstrap.com/) - Responsive HTML, CSS and Javascript framework
* [jQuery](https://jquery.com/) - a fast, small, and feature-rich JavaScript library
* [jQuery CSV](https://github.com/evanplaice/jquery-csv/) - Parse CSV (Comma Separated Values) to Javascript arrays or dictionaries.
* [DataTables](http://datatables.net/) - add advanced interaction controls to any HTML table.

## Common issues/troubleshooting

If your table isn't displaying any data, try the following:

1. Use the [Chrome developer console](https://developers.google.com/chrome-developer-tools/docs/console) or install [Firebug](http://getfirebug.com/) for FireFox. This will allow you to debug your javascript.
1. Open your table in the browser and open the javascript console
* Chrome developer console on a Mac: Option+Command+J
* Chrome developer console on a PC: Control+Shift+J
* Firebug in Firefox: Tools => Web Developer => Firebug => Open Firebug)
1. If you do see javascript errors, the error will tell you what line it is failing on. Best to start by going there!

## Errors / Bugs

If something is not behaving intuitively, it is a bug, and should be reported.
Report it here: https://github.com/derekeder/csv-to-html-table/issues


## Contributors

* [Derek Eder](http://derekeder.com) - primary contributor
* [ychaouche](https://github.com/ychaouche) - [javascript tag fixes](https://github.com/derekeder/csv-to-html-table/pull/30)
* [Freddy Martinez](https://github.com/b-meson) - [localized javascript libraries](https://github.com/derekeder/csv-to-html-table/pull/17)
* [Sergey Ponomarev](https://github.com/stokito) - [CSV escaped in HTML output](https://github.com/derekeder/csv-to-html-table/pull/60)
* [djibe](https://github.com/djibe) - [Bootstrap 4 and latest DataTables](https://github.com/djibe/csv-to-html-table)

## Note on Patches/Pull Requests

* Fork the project.
* Make your feature addition or bug fix.
* Send a pull request. Bonus points for topic branches.

## Copyright

Copyright (c) 2018 Derek Eder. Released under the [MIT License](https://github.com/derekeder/csv-to-html-table/blob/master/LICENSE).
105 changes: 105 additions & 0 deletions css/custom.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
/* Custom styles */
/*
DePaul IHS
*/

@font-face {
font-family: 'GibsonSemiBold';
src: url('/css/fonts/gibson-semibold-webfont.eot');
src: url('/css/fonts/gibson-semibold-webfont.eot?#iefix') format('embedded-opentype'),
url('/css/fonts/gibson-semibold-webfont.woff') format('woff'),
url('/css/fonts/gibson-semibold-webfont.ttf') format('truetype'),
url('/css/fonts/gibson-semibold-webfont.svg#GibsonSemiBold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'GibsonBold';
src: url('/css/fonts/gibson-bold-webfont.eot');
src: url('/css/fonts/gibson-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('/css/fonts/gibson-bold-webfont.woff') format('woff'),
url('/css/fonts/gibson-bold-webfont.ttf') format('truetype'),
url('/css/fonts/gibson-bold-webfont.svg#GibsonBold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'ColaborateThinRegular';
src: url('/css/fonts/ColabThi-webfont.eot');
src: url('/css/fonts/ColabThi-webfont.eot?#iefix') format('embedded-opentype'),
url('/css/fonts/ColabThi-webfont.woff') format('woff'),
url('/css/fonts/ColabThi-webfont.ttf') format('truetype'),
url('/css/fonts/ColabThi-webfont.svg#ColaborateThinRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'ColaborateRegRegular';
src: url('http://www.housingstudies.org/static/css/fonts/ColabReg-webfont.eot');
src: url('http://www.housingstudies.org/static/css/fonts/ColabReg-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.housingstudies.org/static/css/fonts/ColabReg-webfont.woff') format('woff'),
url('http://www.housingstudies.org/static/css/fonts/ColabReg-webfont.ttf') format('truetype'),
url('http://www.housingstudies.org/static/css/fonts/ColabReg-webfont.svg#ColaborateRegRegular') format('svg');
font-weight: normal;
font-style: normal;

}
@font-face {
font-family: 'AlegreyaBold';
src: url('http://www.housingstudies.org/static/css/fonts/Alegreya-Bold-webfont.eot');
src: url('http://www.housingstudies.org/static/css/fonts/Alegreya-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.housingstudies.org/static/css/fonts/Alegreya-Bold-webfont.woff') format('woff'),
url('http://www.housingstudies.org/static/css/fonts/Alegreya-Bold-webfont.ttf') format('truetype'),
url('http://www.housingstudies.org/static/css/fonts/Alegreya-Bold-webfont.svg#AlegreyaBold') format('svg');
font-weight: normal;
font-style: normal;
}


body {
font: 18px/1.3em 'ColaborateThinRegular', sans-serif;
}

h1 {
font: 32px/1em 'GibsonBold', serif;
text-transform: uppercase;
color: #827E7E;
}

h2 {
font: 22px/1em 'GibsonBold', serif;
text-transform: uppercase;
color: #827E7E;
}

#logo {
margin-top: 20px;
}

#logo img { width: 170px; }

.info {
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255,255,255,0.8);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
}
.info h4 {
margin: 0 0 5px;
color: #777;
}

.legend {
text-align: left;
line-height: 18px;
color: #555;
}
.legend i {
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
opacity: 0.7;
}
30 changes: 30 additions & 0 deletions data/Health Clinics in Chicago.csv
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
"SITE NAME","Location","HOURS OF OPERATION","PHONE","WEBSITE","SERVICES","Type","Status"
"Auburn Gresham Mental Health Clinic","1140 W. 79th St Chicago, IL 60620"," ","(312) 747-0881","http://www.cityofchicago.org/content/city/en/depts/cdph/provdrs/clinic/svcs/find_counseling_therapy.html","Mental Health","MHC","Closed on April 30, 2012"
"Lawndale Mental Health Clinic","1201 S. Campbell St Chicago, IL 60608","Mon - Fri: 8:30 am – 4:30 pm","(312) 746-5905","http://www.cityofchicago.org/content/city/en/depts/cdph/provdrs/clinic/svcs/find_counseling_therapy.html","Mental Health","MHC","Open"
"Northtown Rogers Park","1607 W. Howard St Chicago, IL 60626"," ","(312) 744-7617","http://www.cityofchicago.org/content/city/en/depts/cdph/provdrs/clinic/svcs/find_counseling_therapy.html","Mental Health","MHC","Closed on April 9, 2012"
"Lower West Side Neighborhood Health Clinic","1643 W. Cermak St. Chicago, IL 60608"," ","(312) 747-1650","http://www.cityofchicago.org/content/city/en/depts/cdph/provdrs/clinic/svcs/apply_for_wic_.html","WIC","WIC","Open"
"Erie Health Center","1701 W. Superior St. Chicago, IL 60610"," ","(312) 432-7372","http://www.cityofchicago.org/content/city/en/depts/cdph/provdrs/clinic/svcs/apply_for_wic_.html","WIC","WIC","Open"
"Lower West Neighborhood Health Clinic","1713 S. Ashland Ave. Chicago, IL 60608","Mon - Fri: 8:00 am – 4:00 pm.","(312) 746-5157","http://www.cityofchicago.org/content/city/en/depts/cdph/provdrs/clinic/svcs/find_a_clinic.html","Adults, Children, Family Case Management, Immigration Physicals, Medication Assistance, Pregnancy Testing, Pregnant Women, Women seeking Birth Control","NHC","Open"
"Beverly Morgan Park Mental Health Clinic","1987 W. 111th St Chicago, IL 60643"," ","(312) 747-1100","http://www.cityofchicago.org/content/city/en/depts/cdph/provdrs/clinic/svcs/find_counseling_therapy.html","Mental Health","MHC","Closed on April 30, 2012"
"Roseland Neighborhood Health Clinic","200 E. 115th St. Chicago, IL 60628","Mon, Wed, Fri: 8:00 am – 4:00 pm; Tue, and Thurs: 9:00 am - 5:00pm","Main: (312) 747-9500 WIC: (312) 747-0054 MHC: (312) 747-7320","http://www.cityofchicago.org/content/city/en/depts/cdph/provdrs/clinic/svcs/find_a_clinic.html","WIC, Mental Health, Adults, Family Case Management, Medication Assistance","NHC, WIC, MHC","Open"
"Near West","2310 W. Roosevelt Rd. Chicago, IL 60608"," ","(312) 746-8990","http://www.cityofchicago.org/content/city/en/depts/cdph/provdrs/clinic/svcs/apply_for_wic_.html","WIC","WIC","Open"
"Northwest Mental Health Clinic","2354 N. Milwaukee Chicago, IL 60647"," ","(312) 744-0993","http://www.cityofchicago.org/content/city/en/depts/cdph/provdrs/clinic/svcs/find_counseling_therapy.html","Mental Health","MHC","Closed on April 9, 2012"
"Alivio Medical Center","2355 S. Western Ave. Chicago, IL 60608","9:00 am - 5:00 pm","(773) 843-4220","http://www.cityofchicago.org/content/city/en/depts/cdph/provdrs/clinic/svcs/apply_for_wic_.html","WIC","WIC","Open"
"Westside Health Partnership","2400 S. Kedzie Ave. Chicago, IL 60623"," ","(773) 522-0716","http://www.cityofchicago.org/content/city/en/depts/cdph/provdrs/clinic/svcs/apply_for_wic_.html","WIC","WIC","Open"
"West Town Neighborhood Health Center","2418 W. Division St. Chicago, IL 60622","Mon, Wed, Fri: 8:00 am – 4:00 pm; Tue, and Thurs: 10:00 am - 6:00pm","Main: (312) 744-0943 WIC: (312) 744-8118","http://www.cityofchicago.org/content/city/en/depts/cdph/provdrs/clinic/svcs/find_a_clinic.html","WIC, Adult, Children, Family Case Management, Immigration Physicals, Medication Assistance, Pregnancy Testing, Pregnant Women, Women seeking Birth Control","NHC, WIC","Open"
"Asian Human Services Family Health Center, Inc.","2424 W. Peterson Ave. Chicago, IL 60659"," ","(773) 761-0011 ext. 116","http://www.cityofchicago.org/content/city/en/depts/cdph/provdrs/clinic/svcs/apply_for_wic_.html","WIC","WIC","Open"
"Logan Square Women & Children Health Center","2840 W. Fullerton Ave. Chicago, IL 60647","Tuesday, Thursday and Friday","(773) 782-8902","http://www.cityofchicago.org/content/city/en/depts/cdph/provdrs/clinic/svcs/apply_for_wic_.html","WIC","WIC","Open"
"Lakeview Neighborhood Health Clinic","2849 N. Clark St. Chicago, IL 60657"," ","(312) 744-1027","http://www.cityofchicago.org/content/city/en/depts/cdph/provdrs/clinic/svcs/apply_for_wic_.html","WIC","WIC","Open"
"Henry Booth House","2850 S. Michigan Ave. Chicago, IL 60616","9:00 AM - 5:00 PM","(312) 225-1982","http://www.cityofchicago.org/content/city/en/depts/cdph/provdrs/clinic/svcs/apply_for_wic_.html","WIC","WIC","Open"
"South Chicago Women & Children Health Center","2938 E. 89th St. Chicago, IL 60617","Mon - Fri: 8:00 am – 4:00 pm.","Main: (312) 747-5285 WIC: (312) 747-7969","http://www.cityofchicago.org/content/city/en/depts/cdph/provdrs/clinic/svcs/find_a_clinic.html","WIC, Children, Family Case Management, Pregnancy Testing, Pregnant Women, Women seeking Birth Control","NHC, WIC","Open"
"South Lawndale Women & Children Health Center","3059 W. 26th St. Chicago, IL 60623","Mon - Fri: 8:00 am – 4:00 pm.","Main: (312) 747-0066 WIC: (312) 747-8126","http://www.cityofchicago.org/content/city/en/depts/cdph/provdrs/clinic/svcs/find_a_clinic.html","WIC, Children, Family Case Management, Pregnancy Testing, Pregnant Women, Women seeking Birth Control","NHC, WIC","Open"
"Women & Children Health Center Main Office","333 S. State St., 2nd Floor Chicago, IL 60604"," ","(312) 747-9140","http://www.cityofchicago.org/content/city/en/depts/cdph/provdrs/clinic/svcs/apply_for_wic_.html","WIC","WIC","Open"
"Greater Lawn Health Center","4150 W. 55th St. Chicago, IL 60632","Mon - Fri: 8:30 am – 4:30 pm","MHC: (312) 747-5415 WIC: (312) 747-1020","http://www.cityofchicago.org/content/city/en/depts/cdph/provdrs/clinic/svcs/apply_for_wic_.html","WIC, Mental Health","WIC, MHC","Open"
"Back of the Yards Mental Health Clinic","4313 S. Ashland Chicago, IL 60609"," ","(312) 747-3560","http://www.cityofchicago.org/content/city/en/depts/cdph/provdrs/clinic/svcs/find_counseling_therapy.html","Mental Health","MHC","Closed on April 30, 2012"
"Greater Grand/MID-South Mental Health Clinic","4314 S. Cottage Grove Chicago, IL 60653","Mon - Fri: 8:30 am – 4:30 pm","(312) 747-0036","http://www.cityofchicago.org/content/city/en/depts/cdph/provdrs/clinic/svcs/find_counseling_therapy.html","Mental Health","MHC","Open"
"Austin Clinic","4909 W. Division St. Chicago, IL 60651"," ","(312) 746-4797","http://www.cityofchicago.org/content/city/en/depts/cdph/provdrs/clinic/svcs/apply_for_wic_.html","WIC","WIC","Open"
"North River Mental Health Clinic","5801 N. Pulaski Road Chicago, IL 60646","Mon - Fri: 8:30 am – 4:30 pm","(312) 744-1906","http://www.cityofchicago.org/content/city/en/depts/cdph/provdrs/clinic/svcs/find_counseling_therapy.html","Mental Health","MHC","Open"
"Woodlawn Mental Health Clinic","6337 S. Woodlawn Ave Chicago, IL 60637"," ","(312) 747-0059","http://www.cityofchicago.org/content/city/en/depts/cdph/provdrs/clinic/svcs/find_counseling_therapy.html","Mental Health","MHC","Closed on April 30, 2012"
"Englewood Neighborhood Health Clinic","641 W. 63rd St. Chicago, IL 60621","Mon, Wed, Fri: 8:00 am – 4:00 pm; Tue, and Thurs: 10:00 am - 6:00pm","Main: (312) 747-7831 WIC: (312) 747-4814 MHC: (312) 747-7496","http://www.cityofchicago.org/content/city/en/depts/cdph/provdrs/clinic/svcs/find_a_clinic.html","WIC, Mental Health, Adults, Children, Family Case Management, Medication Assistance, Pregnancy Testing, Pregnant Women, Women seeking Birth Control","NHC, WIC, MHC","Open"
"Friend Family Health Center Inc.","800 E. 55th St. Chicago, IL 60615"," ","(773) 702-3719","http://www.cityofchicago.org/content/city/en/depts/cdph/provdrs/clinic/svcs/apply_for_wic_.html","WIC","WIC","Open"
"Uptown Neighborhood Health Center","845 W. Wilson Ave. Chicago, IL 60640","Mon, Wed, Fri: 8:00 am – 4:00 pm; Tue, and Thurs: 10:00 am - 6:00pm","Main: (312) 744-1938 WIC: (312) 744-0073","http://www.cityofchicago.org/content/city/en/depts/cdph/provdrs/clinic/svcs/find_a_clinic.html","WIC, Adult, Children, Family Case Management, Immigration Physicals, Medication Assistance, Pregnancy Testing, Pregnant Women, Refugee, Women seeking Birth Control","NHC","Open"
4 changes: 4 additions & 0 deletions data/colon_separator_example.csv
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Name:Year:Number
Item1:2010:60
Item2:2012:60
Item3:2014:126
Loading

0 comments on commit 102dec8

Please sign in to comment.