derekeder / csv-to-html-table Goto Github PK

Hi There

Great project but how would I set it up so that when someone presses the download button it only downloads the data filtered to a CSV file?

<SCRIPT>
      init_table({
        csv_path: 'data/Acronyms.csv', 
        element: 'table-container', 
        allow_download: true,
        csv_options: {separator: ',', delimiter: '"'},
        datatables_options: {"paging": true}
      });
    </SCRIPT>

Cheers

Is it possible to add image URLs in the fields? I used special character codes and they show OK as text but not as actual images. Anyway to do it?

Thanks for the great work.

It's possible someone won't want to display every column in their CSV. Could handle this by passing in a list of columns to exclude.

The table is sorted by the first column now. But I want it to be sorted on the last column in reverse order.

Help to make this.

Thanks.

Reading DataTables documentation it seems possible to have a double row header, but I cant figure it out how this can be configured from within this great utility. It seems not possible, or I'm missing something?

https://datatables.net/examples/basic_init/complex_header.html

Perhaps we can detect links and automatically add hyperlinks with this thing: https://github.com/SoapBox/jQuery-linkify

Firstly, thanks for this awesome tool.
In one project, i use it for displaying a bit larget data to users with slow internet connection. I need them to see all the data, so i dont want to use pagination. It would be nice if we can add optional placeholder while loading data so they would not assuming that that data isn't loaded and leave the page.

how do i set width of colomn

Im trying to display a 1200 row csv (1200 row x 4 columns) which obviously takes a bit to load. (From almost instant to 5 seconds, depending on the computer). Ive been experimenting with having a loading animation or text to show that it is loading.
Is there a way to use javascript once the table finishes generating to hide the loader?

What needs to be called:
function hideloader(){ document.getElementById('hideme').style.display = 'none'; }

Hi,

Nice tool, i really like it!
I have noticed, that after the csv file has been updated, and in the browser the page has been refreshed, the old csv content is displayed still. Deleting the browser cache seem to solve the issue, however, how could the page (javascript) ensure that always the actual content is displayed?
Thanks.

when i try change destination of csv file with option form i have only error funcion() not found

``

  <h2>Tabele Wydawcow</h2>
  <div class="form-group">
<label for="choose_site">Wybierz strone</label>
<select class="form-control" id="choose_csv">
  <option value="Health Clinics in Chicago.csv" id="Health_Clinics_in_Chicago">Health Clinics in Chicago</option>
  <option value="fatty_acid_profiles.csv" id="fatty_acid_profiles">Fatty acid profiles</option>
</select>
<button onclick="funkcja">Try it</button>

  <div id="table-container"></div>

</div><!-- /.container -->



<script type="text/javascript">

function funkcja(csv)<!-- my function to change csv data-->
{
	var choose_csv = document.getElementById("choose_csv").value;
	var csv = "data/"+choose_csv;
	return csv;
}
  function format_link(link)
  {
    if (link)
      return "<a href='" + link + "' target='_blank'>" + link + "</a>";
    else
      return "";
  }

  CsvToHtmlTable.init(
  {
    csv_path: 'funkcja', <!--default  data/Health Clinics in Chicago.csv-->
    element: 'table-container', 
    allow_download: false,
    csv_options: {separator: ',', delimiter: '"'},
    datatables_options: {"paging": false},
    custom_formatting: [[4, format_link]]
  });
</script>

I am getting this issue with my table which gets updated with latest record frequently.

jquery.dataTables.min.js:90 Uncaught TypeError: Cannot read property 'mData' of undefined
at HTMLTableCellElement. (jquery.dataTables.min.js:90)
at Function.each (jquery.min.js:2)
at HTMLTableElement. (jquery.dataTables.min.js:90)
at Function.each (jquery.min.js:2)
at m.fn.init.each (jquery.min.js:2)
at m.fn.init.m [as dataTable] (jquery.dataTables.min.js:82)
at m.fn.init.O.h.fn.DataTable (jquery.dataTables.min.js:158)
at Object. (csv_to_html_table.js:50)
at Object. (jquery.min.js:2)
at j (jquery.min.js:2)

My CSV doesnt load.
If i load the Site, i doesnt see the table and after a time the browser/site gets crashed.

I think its cause the size is very big. Is there a way to use pagination and that script only loads like 20 rows and that?

Hi everyone,
I created a fork and a Pull request as I did the job to have perfect Bootstrap 4 usage.
Here is my fork for CSV to HTML table with Bootstrap 4 support : https://github.com/djibe/csv-to-html-table

I'll close this issue when @derekeder will merge my Pull request.
Enjoy.

Hi,
that's more of a question rather than an issue.

Looking at your code example, is it possible to listen to changes for 'data/Health Clinics in Chicago.csv' and refresh the view?
The CSV I am using changes every 5min and I would like to keep the list view updated by adding a listener or hopefully setting some attribute/parameter/configuration.
Thanks

It would be very useful to have the page update if the underlying data changes. I am not sure the best way to do it.

How can you show up more then 1 csv file from the data folder ?
Thanks in advance !

Is there a way to have it auto fit the column widths based on the data in the columns?

Currently having an issue since I removed columns due to only having data in A and B, column A is taking over half the table width.

Thanks for the excellent plugin. It works super well. Just wanted to check if there is some code that I can alter so that some formatting can be done? For example my datetime string is in unix / epoch time format and I want to display this in more user readable / friendly manner. Is there a way that I could access the rows when they are being processed so that I can transform the data? Thanks a ton

French speaking people often prefer semicolon delimited files to comma separated files. See for instance this file on DataGouvFr.

Is it possible to adapt the tool to semicolon delimited files ?

Hi, when loading a CSV file with 30000 rows, the browser wil crash!
PLS check.

Thanks for the great tool.

We use this to display the total download counts of free ebooks on the site http://FreeTamilEbooks.com

http://freetamilebooks.com/htmlbooks/download-report.html

We want to display the total downloads from the site. i.e to show the sum of the last column.

How to show the total ?

Thanks.

Hi,
I am checking if there is any conditional phrase so that we can display a message if file is empty or not found?

Hi There

Fantastic project! , I have one problem I have a table with two colums Date and Name in the csv are order by date correctly but when i run it I have a problem for example We have dates with differents months for example 1/11/2016 and 26/10/2016 appear before 1/11/2016 than 26/10/2016 I think that it only consider the day and not the month, could I fix it change some paramets?

Thanks

Hi Derek,
Great project. Congratulations.
Since I have a long csv, I would like to defer the rendering for additional speed of initialization.
I'm not being able to use the "deferRender" feature (https://datatables.net/reference/option/deferRender)

By default, when DataTables loads data from an Ajax or Javascript data source (ajax and data respectively) it will create all HTML elements needed up-front. When working with large data sets, this operation can take a not-insignificant amount of time, particularly in older browsers such as IE6-8. This option allows DataTables to create the nodes (rows and cells in the table body) only when they are needed for a draw.

inside the datatables_options.
I suppose that this is linked to how csv-to-html-table is loading the DataTables.

Would it be easy to use a workaround so that the "deferRender" feature works?

Regards,
jm

How to include quotation marks in the CSV?

I could change the delimiter but is there a way to escape quotation marks and have them be interpreted correctly?

This fails....
name,title
Mike,"CEO \"sales\""

*edit - getting quotes to show correctly on github. :)

I noticed that csv-to-html-table doesn't support Unicode UTF-8 Charset .
example:
Accéssorius (true display)
Acc�ssorius (wrong display)

Hope this will be fixed ASAP!
Thanks !

Hello, thank you for nice work!

I have a csv with below heads:
Title,Rating,Price,Thumbnail,URL

It's possible show custom HTML for rows?

Title: Text
Rating: images like STAR/S
Price: Text
Thumbnail: Image
URL: Button Link

thank you!

With your script i was able to create static pages but ran into issues when we started using hashes to contain everything in a single page and use hashes to load the content.

Below you will find the script we leveraged to allow for this. On mac no issues however on windows we run into the requested unknown parameter from all browsers.

<script>
  $(document).ready(function() {
    var descriptions = {
      "HostGeneralInfo.csv": "<h3> Description </h3> <p>This report is utilized to understand what type of physical hosts are in your environment. "

    }
    $('.nav .dropdown-menu a').click(function(event) {
      event.preventDefault();
      location.hash = $(this).attr('href');
      var description = descriptions[$(this).attr('href')];
      $('#description').html(description);

      init_table({
        csv_path: '../rawdata/' + $(this).attr('href'),
        element: 'table-container',
        allow_download: true,
        csv_options: {
          separator: ',',
          delimiter: '"'
        },
        datatables_options: {
          "paging": true,
          "deferRender": true,
          "searching": true
        }
      });

    });


    if (window.location.hash) {
      $('a[href="' + window.location.hash.substring(1) + '"]').click();

    }

  });

</script>

Hello people, is it possible to get the search box from the right to the middle of the table?

Where can I change that:
<div class="col-md-6"><div id="table-container-table_filter" class="dataTables_filter"><label>Suche:<input class="form-control input-sm" placeholder="" aria-controls="table-container-table" type="search"></label></div></div>

i think "col-md-6" to "col-md-12" would help me and then continue in the css

JavaScript console complains

https://derekeder.github.io/csv-to-html-table/fonts/glyphicons-halflings-regular.woff2 Failed to load resource: the server responded with a status of 404 (Not Found)

Looks like the glyphicons-halflings-regular.woff2 file from the Bootstrap distribution is missing.

Hi,

I periodically export a CSV from MS SQL directly to a web server folder to use with csv-to-html-table.

I always receive the following when the page loads.
"DataTables warning: table id=my-table - Requested unknown parameter '1' for row 0"

If I open the CSV in Excel and re-save as CSV then the page loads without errors. Any ideas?

I thought it may have something to do with encoding of the CSV from SQL?

Thanks,
John

May it open external cvs ?
For example Google Sheet (publish file)

I know you'll run into a CORS issue if you try to use a http link for the datasource, but why not rejigger this into a browser extension that can be used to browse CSVs without having to use Excel?

or, a webapp for datafiles that are <5mb?

Nice tool. Any plans to make this responsive?

i would like to list only 100 entries per page and a next button to go for next page when i am listing the csv content to table format.

rgarimella

hello i am testing it locally (XAMP) but, below error showing in console, any help?

Uncaught TypeError: Cannot read property 'mData' of undefined
at HTMLTableCellElement. (jquery.dataTables.min.js:90)
at Function.each (jquery.min.js:2)
at HTMLTableElement. (jquery.dataTables.min.js:90)
at Function.each (jquery.min.js:2)
at m.fn.init.each (jquery.min.js:2)
at m.fn.init.m [as dataTable] (jquery.dataTables.min.js:82)
at m.fn.init.O.h.fn.DataTable (jquery.dataTables.min.js:158)
at Object. (csv_to_html_table.js:50)
at Object. (jquery.min.js:2)
at j (jquery.min.js:2)

Ive tried doing [[2 format_dollar],[3, format_dollar]] which was suggested in a different issue thread, but that fails to load, I have also tried [[2,3, format_dollar]] which fails for obvious reasons and [[[2, 3], format_dollar]] which displays but doesnt do anything.

Is there a way?

Hi, I've really tried everything I can think of to make multiple columns (as opposed to just one) use the format_link function.

I've tried

      custom_formatting: [[0,8, format_link]],

And many other permutations. I want Column 0 and 8 to use the link function. Is this possible?

This is a great feature!
I downloaded it, but when I view the index page the table does not show up - is there anything else that needs to be done?

Hey, Congratulation for nice effort,

I want to sort by default on particular column (Need to display sorted column by default). Is there any way, we can get this.

Thanks.

There are a few rows I'd like to hide from showing up, but leaving it intact on the original csv file. I noticed a few examples on datatables.net, but I can't figure out how to add them to the index.html file within the datatables_options area.

From what I could gather, I can use something like:

row().remove()
https://datatables.net/reference/api/row().remove()

But I don't think that would be the best way to do so. Are there any other methods?

From what I can gather on google, most of my search results ends up showing up a button to either show or hide it. but what if I wish to completely hide it with no button to show it?

Regards,
Skyrider

export.zip

Hi derekeder ,

Nice for you to share the project, I met an issue that the attached csv files cannot be parsed by using the code. Pls help! I'm not very sure whether it is a bug. Very thanks

Firebug says :

No Javascript on this page

If <script> tags have a "type" attribute, it should equal "text/javascript" or "application/javascript". Also scripts must be parsable (syntactically correct).

Hi,
i test csvtohtmltable with only unzip the file and open the html file.
do you know why with only unzip the file they have some problem only with firefox and not IE ?

with the web, there is no problem.
Nonetheless i have changed the function link to use the link behind the value row, and so not display the link.
If you are interested i will send the function.

Regards
NaltaP

Is it possible to use this and get multiple csv's into separate tables on the same page? I can't get that to work.

Hello , I am trying to implement this script in play Framework project. but the script is not loading csv table

Is there any way to enable Scroller extension?

Hi, Thanks for this awesome script. Will you be able to guide me how can I skip first 3 rows from the csv generated table.

Let's use tabletop.js for loading from Google Sheets as a data source: https://github.com/jsoma/tabletop

Related to #25