CSV to html

Description

CSV to html is a highly configurable plugin that makes it easy to fetch content from file(s) (.csv,.xlsx, .json and .ods) and put content from that file/those files and display the html(table) on a page with a single shortcode. If using more then one file, content from all files are mixed into one single table instead of creating two tables.

The plugin fetches the actual content directly from the file(s) without having to import/export any file(s) manually. So any changes in the file(s) will be updated when you view your table(s). CSV to HTML is able to fetch both local and external files.

Get started with the plugin by moving on to the Installation tab. There’s a 4 step guide how you could start using the plugin. Good luck!

Screenshots

  • Screenshot - file structure with folder nordic in upload-folder
  • Screenshot - [csvtohtml_create path="nordic" source_files="denmark" source_type="guess" debug_mode="no"] OR [csvtohtml_create path="nordic" source_files="denmark.csv" source_type="guess" debug_mode="no"]
  • Screenshot - [csvtohtml_create path="nordic" source_files="*.csv" source_type="guess" debug_mode="no"]
  • Screenshot - [csvtohtml_create path="nordic" source_files="*.csv" source_type="guess" debug_mode="no" filter_data="2010" filter_col="1"]
  • Screenshot - [csvtohtml_create path="nordic" source_files="denmark;iceland" source_type="guess" debug_mode="no"]
  • Screenshot - [csvtohtml_create path="nordic" source_files="denmark;iceland" source_type="guess" debug_mode="no"] with css. CSS .csvtohtml tr.rowset-7 .colset-2 { background: #27b399; color: #fff; font-weight:600; }
  • Screenshot - [csvtohtml_create path="nordic" source_files="denmark;iceland" source_type="guess" title="Nordic growth" debug_mode="no"]
  • Screenshot - [csvtohtml_create path="nordic" source_files="denmark" source_type="guess" debug_mode="no" sort_cols="2" sort_cols_order="asc"] AND [csvtohtml_create path="nordic" source_files="iceland" source_type="guess" debug_mode="no" sort_cols="1,2" sort_cols_order="desc,asc"]
  • Screenshot - [csvtohtml_create path="nordic" source_files="nordic.csv" source_type="guess" debug_mode="no" sort_cols="1" sort_cols_order="asc" title="Year"] original csv (nordic.csv): ,Finland,Iceland,Denmark 2013,"10.2%","7.2%","1.4%" 2014,"11.0%","11.0%","1.9%" 2010,"2.5%","2.3%","2.8%" 2011,"-16.6%","6.6%","-6.6%" 2012,"-14.2%","6.2%","1.2%" 2015,"13.2%","16.2%","2.0%"

  • Screenshot - [csvtohtml_create path="nordic" source_files="nordic.csv" source_type="guess" debug_mode="no" sort_cols="1" sort_cols_order="asc" title="Year" exclude_cols="3"]

  • Screenshot - [csvtohtml_create path="nordic" source_files="nordic.csv" source_type="guess" debug_mode="no" sort_cols="1" sort_cols_order="asc" title="Year" exclude_cols="2,4"]
  • Screenshot - [csvtohtml_create path="nordic" source_files="nordic.csv" source_type="guess" debug_mode="no" sort_cols="1" sort_cols_order="asc" title="Year" include_cols="1,3-4"]
  • Screenshot - [csvtohtml_create path="nordic" source_files="nordic.csv" source_type="guess" debug_mode="no" sort_cols="1" sort_cols_order="asc" title="Year" include_cols="1,3-4" fetch_lastheaders="2"]
  • Screenshot - [csvtohtml_create path="nordic" source_files="nordic.csv" source_type="guess" debug_mode="no" sort_cols="1" sort_cols_order="asc" title="Year" table_in_cell_cols="2,3,4"]
  • Screenshot - [csvtohtml_create path="nordic" source_files="nordic.csv" source_type="guess" debug_mode="no" sort_cols="1" sort_cols_order="asc" title="Year" table_in_cell_cols="2,3,4" include_cols="1" table_in_cell_header="Countries"]
  • Screenshot - [csvtohtml_create path="nordic" source_files="nordic.csv" source_type="guess" debug_mode="no" sort_cols="1" sort_cols_order="asc" title="Year" table_in_cell_cols="2,3,4" include_cols="1" table_in_cell_header="Countries"] CSS .csvtohtml .extra-data::before {content: "Hover here for more info";} .csvtohtml .extra-data table {visibility:hidden;} .csvtohtml .extra-data:hover table {visibility:visible;}

  • Screenshot - Same as 16 but when hovered on a specific row(year)

Installation

This section describes how to install the plugin and get it working.

Look at inspirational examples of what you can do with the plugin here: http://wibergsweb.se/plugins/csvtohtml/

But FIRST, go through below steps!

STEP1 – INSTALLATION
1. Upload the plugin folder csvtohtml to the `/wp-content/plugins/’ directory, or install the plugin through the WordPress plugins screen directly.
2. Activate the plugin through the ‘Plugins’ screen in WordPress

STEP2 – PREPARATION
The plugin can either fetch files locally from your server (or from an external resource). The plugin supports csv-files, Excel(xlsx-files only), ods-files (spreadsheet) and json-files. If using a json-file then you should set source type to JSON. In most cases the source type should be set to guess if not using JSON.

Local fetch

  1. Create a folder called csvtohtmlfiles in your wp-content/uploads/ manually (e.g. wp-content/uploads/csvtohtmlfiles should be created)
  2. Upload/copy your file to this created folder (e.g. wp-content/uploads/csvtohtmlfiles/testfile.csv). This cannotbe done from media-upload (Use ftp, ssh or directly on your os to copy files to the webserver).

External fetch

  1. Have an uri to your csv-file available/accessible from your computer (eg. https://[domain]/testfile.csv).

STEP3 – SHORTCODE GENERATOR
1. Begin to understand what you are able to to do with the plugin. Do this by playing around with the CSV to HTML shortcode generator. This is accessible in the admin dashboard – Tools/CSV to HTML. Do this on a desktop computer for easiest management.
2. Try and click/modify settings and see the preview of the table to the right. This preview only shows how it would look like, but functionality such as search and pagination etc isn’t going to work.
3. If you want to see the current output based on applied settings, then you should click the update/preview – button.
4. Settings are splitted into different sections in the shortcode generator page.
5. The section "Debugging" shows known errors and gives warnings depending on your settings. It turns into red when there are any errors or warnings. This doesn’t necessarily mean it won’t work but can be an indicator of somethings you must adjust.
6. You should see the "General" section as a starting point for your settings. By default all csv files that exists in wp-content/uploads are used to generate a table (*.csv).
7. Change *.csv to the name of the file you prepared in STEP2.

Local fetch

  1. Set Path(local) to csvtohtmlfiles or click on the button with three dots and select csvtohtmlfiles (if you have done previous steps you should see your folder csvtohtmlfiles here). In File(s) combined to this table type the file that you put into wp-content/uploads/csvtohtmlfiles
  2. If an Excel-file is selected for fetch, then it is converted to a csv-file and the Excel-file remains intact (so there are two files that has identical data in the same folder). This may seem redudantant, but this is because the plugin fetches data from the csv-file and not from the Excel-file directly.

External fetch

  1. In File(s) combined to this table put in your url that you prepared in STEP2. If your external file is a google spreadsheet, make sure it’s publicy available for download and that you have the full uri to your googlesheets workbook. Also set "add extension automatically" to no.
  2. If you have more files you want to combine, then just add a semicolon (;) and add filename (local or external)

STEP4 – MAKE IT WORK
10. Play around with settings until you’re satisfied. In very few cases you should change character encodings but if you’re having issues with encoding, you could try and change these settings.
11. Copy generated shortcode (above General section) and put the shortcode in a wordpress page or post to display table with the functionality you have set in the shortcode generator page.
12. If you don’t like the default design of the table(s), use your theme’s css to change the layout of your site/table etc.

If having issues that you cannot solve please send a mail to info@wibergsweb.se.
If you like the plugin, please consider donating. Please donate to paypal info@wibergsweb.se. Amount does not matter. I like coffee! 🙂

SHORTCODE
If you feel comfortable by modifying settings directly in your shortcode: Down below are settings available and what they are intended for. Value within parenthesis show the default value for the setting, so if that setting/attribute is not included in the shortcode, the default value for the setting will be applied.
The shortcode should always start with [csvtohtml_create followed by settings/attributes below. Every setting must have a space between and ] must be set at the end of the shortcode.

Another option is to go into the shortcode generator again and repeat previous steps (from STEP2).

SHORTCODE SETTINGS/ATTRIBUTES

add_ext_auto (yes) – Add fileextension .csv to file (if it’s not specified in the source_files). Set to no if you don’t want a file extension to be added automatically. A common use for this is to set this setting to no , so google documents could be accessed (they don’t have .csv at the end).

api_cdn (yes) – (Applicable when fetching json) Set this to no if you want to use wordpress api (wordpress core api could fail with cloudflare for unknown reason)

editable (no)– yes/no – The default is no. If set to yes file(s), the logged in user may edit values directly in the table (through changing values in input-fields) if logged in. Some attributes are temporarily disabled when editing but when set to no or logged out, these attributes are restored.

convert_encoding_from – When converting character encoding, define what current characterencoding that csv file has. (Not required and use only when having issues with encoding)

convert_encoding_to – When converting character encoding, define what characterencoding that csv should be encoded to. (Not required and use only when having issues with encoding)

css_max_width (760) – media query css rules/breakpoint. This is only applied when responsive is set to yes.

css_min_devicewidth (768) – media query css rules/breakpoint. This is only applied when responsive is set to yes.

css_max_devicewidth (1024) – media query css rules/breakpoint. This is only applied when responsive is set to yes.

csv_delimiter (,) – what delimiter to use in each line of csv (comma, semicolon etc)

debug_mode (no) – If set to yes then header-values and row-values would be output to screen and files like "file not found" will be displayed (otherwise it would be "silent errors")

design_template (outofthebox1) – What template from builtin templates to use in table. Possible values are: outofthebox1, nolines, clean, funky, thick, pyjamas, pyjamascols, thinlines

downloadable (no) – If set to yes, a button is shown that creates a download of a csv

downloadable_filename (export_csvtohtml.csv) – What filename to use when downloading

downloadable_text (Download as csv) – What text to show on downloadable button

eol_detection (cr/lf) – CR = Carriage return, LF = Line feed, CR/LF = Carriage line and line feed, auto = autodetect. Only applied to external files. When using local files, new lines are automatically autodeteced.

exclude_cols – What columns to exclude in final html table (1,2,3,10-15 would exclude columns 1,2,3,10,11,12,13,14 and 15). If you want to remove the last column, then simply type last instead of entering a number.

fetch_interval – Set to daily, hourly or weekly. This is how often the actual fetch from source is done. It’s only done when requesting the page with this shortcode on. This would make sense to use for external files even if it’s possible to use with local files as well. For this to work you must specify a html_id!

fetch_lastheaders (0) – Number of specific headers (e.g. columns) to retrieve (from the end)

filter_data – What data to filter in table (specific string), e.g. FSC

filter_data_ucfirst (no) – If set to yes, first letter will be uppercase (applies only to a-z)

filter_operator (equals) – Tell how to apply the filter
filter_operators (equals) – Works exactly as filter_operator
between >= value1 and <= value2
isempty or is_empty – this is an empty value
equals (=)
equals_caseinsensitive (equals with case insensitive filter
urlequals equals case insensitive and search both with hypens/spaces and underscores
less <
lequal <=
more >
mequal >=
wildcard any
newdates from specific date or from todays date

filter_removechars – If having more characters than just numbers in the (cell)values, remove that/those characters so comparision will be done for numbers only (e.g. 567 will be used for comparision if $567 is displayed)

filter_col– What column(s) to use filter on (Several columns work)

filter_cols – Same as filter_col but this name makes more sense now when you can choose several columns to filter on.

filter_criterias – Specify which columns to create a filter for based on AND/OR – logic.

fixed_leftcol (no) – Use fixed left column (or not). Use in combination with fixed or sticky header

float_divider (.) – If fetching float values from csv use this character to display another "float-divider chacter" than dot (e.g. 6,3 instead of 6.3, 1,2 instead of 1.2 etc)

header_backgroundcolor – background color of header

FAQ

Is your tables responsive?

The short answer is yes. From v1.60 the tables are responsive as default. If you want more advanced responsivity you have to modify css yourself.

Why don’t you include any css for the plugin?

From v1.60 there are som basic css to make responsive table. It’s possible to turn this css off if having issue though.
The goal is to make the plugin work as fast as possible as expected. By not supplying a lot of css the developer has full control over the design. If you know css, it’s easy to apply your style on all tables / invidual tables etc. From version 1.6 there are also some templates to use.

Is the plugin totally free?

Yes it is. If you feel bad about using this plugin for free, please write a review and/or give a donation to PayPal info@wibergsweb.se.

Is there a premium/pro version of the plugin available?

No there’s no need. This plugin offers a lot totally free. The plugin’s existence depends on donations only.If you like the plugin, please consider donating. Please donate to paypal info@wibergsweb.se. Amount does not matter. I like coffee! 🙂

Reviews

Oktober 29, 2023 1 reply
Free plugin that offers sticky and fixed headers only available in premium versions of other plugins. Developer extremely responsive and tolerant of novices, particularly those with very limited CSS and HTML knowledge!
Juli 13, 2023 3 replies
Great tool to use with minimalistic design, easy to use and extremely helpful (and don't forget fast to respond) developer! One critique would be the documentation could be more in depth, but you get the point pretty quickly. Can't recommend enough!
Januari 18, 2023 1 reply
Very good simple extension, powerful and effective. Opens possibilities of dynamic wordpress pages, with simple and effective updates. Bravo !
Maret 29, 2022 1 reply
Perfect solution in displaying (and fetching) csv files into your wordpress pages and posts. Thanks wibergsweb
Read all 18 reviews

Contributors & Developers

“CSV to html” is open source software. The following people have contributed to this plugin.

Contributors

“CSV to html” has been translated into 1 locale. Thank you to the translators for their contributions.

Translate “CSV to html” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

2.72

Bugfix search (ordinay search). Searches in all columns as default (as it did before introduction of multi-filters)

2.70

Multi filters introduced! You’re now able to combine different logics to filter the data you need.
(using filter_criterias and filter_data and filter_operators in combination)
is_empty is a new operator that can be used to filter based on if a column is empty

2.62

Now it’s possible to filter one or more sheets when fetching content from an excel-file (selected_sheets).

2.61

IMPORTANT! Table layout defaults to NOT fixed (it’s too hard to get a table looking good without this default setting, therefore this is a new default setting)
Support for more graphic format (webp, jpeg (jpg)) when autoconverting into html
When searching and highlight/autoconversion is active:
* Keeping format of links and images
* Alt values with spaces are now handled correctly
* Image is showing instead of the actual path to the image.
* If something in image-name is found a border/background is set with the highlight color.

2.55

Bugfix when changing order of displayed columns and using merge and column-names
Update of shortcode-generator to handle hide-columns attribute

2.53

Bugfix when using merging columns into links in combination with inclusion or exclusion of columns.
Added attribute hide_cols which make it possible to hide column(s) (but still including them in the result). Useful when mergin two columns (you may not want one of the original columns to display but it must be included in the table)
Ignores spaces in beginning of search-field (e.g. ” crowbar” is equal to “crowbar”)

2.50

Alt-value (htmltags_autoconvert_imagealt) now support to combine columns and other text (e.g. “This is a profile image of”,First Name”)

2.49

Bugfix generating correct alt-value for specific row(s)
Alt-value now support for several columns (e.g. htmltags_autoconvert_imagealt=”First Name,Last Name”)

2.47

Added possibility to use fixed width of images when converted into images
htmltags_autoconvert_imagealt support for specifying column as name instead of number

2.45

Bugfix: When using sticky header, the top left header is not fixed anymore when fixed_leftcol is set to no.
Added header_textcolor and header_textcolor_left
%userid and %userlogin – special variables for filter by userid or username in filter_data
%userid – special variable for use within path

2.40

Specify column name(s) instead of column numbers when specifying columns in any kind of filtering attribute:e.g. exclude_cols, include_cols, sort_cols,filter_col etc.
Show columns in which order you want to (doesn’t have to be in the same order as the file(s) has)
The plugin identifys whatever column-name you have (even if it’s numbers or contains spaces).
(e.g. type include_cols=”my age, gender” instead of include_cols=”4,3″).,
Speed improvement on rendering, especially when there are a more than one table on the page

2.22

fixed_leftcol can now be used without header sticky or fixed.

2.21

Pointing to correct templates css. Small but import update!

2.20

Minor changes regarding to the outofthebox1 design template and processor-indicator when user is sorting a column

2.19

Table width is now possible to set even if no header type (sticky/fixed is set
Added vw as a possible unit when using table_width
(Although it is possible. Using CSS in the wordpress child’s theme is a far better option)
Bugfix regarding to searching when having htmltags_autoconvert set to yes, having images and doing a search.
Slightly faster rendering when using htmltags_autoconvert
Possible to use different background colors on the fixed left column and header row of the table
Bug regarding to usage of “grab_content…” and htmltags_autoconvert from another column and create link now fixed.
New attribute added grabcontent_col_tolink_addhttps – this adds https instead of a link (instead of google.se it would be https://www.google.se/)
Outofthebox1 template changed input width to auto, so the input would not automatically be 100% (or whatever is set in the theme’s css) of it’s parent
Duplicate values of some settings created in the shortcode generator (now fixed)

2.11

Now correct js and css included!!! (UPDATE to this if you just updated to 2.1)

2.1

Outofthebox1 is a new design template designed for a ready to use table. This is default now. If you don’t want to use any design template, simply do design_template=””
Sorting is now done on all of the file( or combined files) that occurs in the table (even those rows that arent visible)
Bugfix pagination: If user were “to quick when clicking previous or next or first or last” then it could mess up order of the rows in the table
Fixed table-layout for any csvtohtml-table is now default for faster rendering (width of first rows are used, other rows = no need for calculation)

2.0.64

Bugfix responsive table ( when responsive is set to default(yes) ) when using fixed and sticky columns. Now displaying all columns and values when minimized.

2.0.63

Bugfix sorting on first column when using fixed left column.

2.0.62

Bugfixes regarding to combining fixed_leftcol and user sorting.
Now sorting on correct column (when user sorting is active) and fixed_leftcol is set to “yes”

2.0.61

Bugfix: arrow not shown now on the left column when using fixed left col

2.0.6

Sticky top header and left column (at the same time) working on several themes (not just default WordPress themes)

2.0.5

Sticky and fixed headers improved
Table width are now possible to specify
Table height and width as support for all standard units css (%, em, rem, px, vw (width), vh (height))
Fixed left column introduced (fixed_leftcol)
Offset of header introduced (table_offset_header)

2.0

Search and filter functionality improved
– Filtering can now be done on one ore unlimit number of columns (e.g. filter_col = “1-2, 5-10, 13 etc but still same filter_data)
– Searches with match(es) display rows from all columns and not just one (Before all columns were searched but only one column was filtered out)
– It’s possible to search in the whole file(s) when doing a search (search_excludedrows = “yes”) even if include_rows is set (e.g. search on data in all 20 rows would the attribute ignore include_rows=”1-5″)

New attribute that returns how many visible rows are returned on search programmatically: return_found (yes/no) (advanced programmers)

Bugfix in shortgenerator regarding to search in columns-functionality
Bugfix in shortgenerator regarding to inclusion of columns and html conversions

Some explainatory guidelines added in shortcode generator

1.9.9

Bugfixes regarding to sort_cols_userclick and sort_cols_userclick_arrows

1.9.8

Search highlighting (search_highlight=”yes”) – new feature (yellow default color, can be changed by using search_highlightcolor)

1.9.7

Fixed headers (requires height of table) – new feature
Sticky headers (fixed on scroll) – new feature
Table height (set fixed height) – new feature
It’s now possible to change background-color of header through attributes (looks better with a solid background color when using a header type) – new feature
Fixed some spelling in the shortcode tool area
Some minor related deprecated issues fixed for PHP 8.1.

1.9.1

Specific autodetection (ini_set()) syntax of line-endings removed because this is deprecated from PHP 8.1. PHP should be able to handle this by it’s own.
Other PHP 8.1 related deprecated issues fixed.
Attribute added (large_files) to use less memory when loading csv-file(s).

1.8.8

Now it’s possible to fetch content(link) from a specific column and use this link as a wrapper for another columns content.
Bugfix – get_defaults() generating an error in console when user not logged in

1.8.6

Grouping is now done after sorting, so grouper heading is not included when sorting is applied
Groupheading class is added on the tablerow for each groupheader section

1.8.4

It’s now possible to group by values based on a specific column
The possiblity to add a header or not for each grouping section

1.8.2

Shortcode generator bugfix

1.8.1

Exact match searching is now available
Case insensitive search and filtering is now possible
Possible to search in given columns only

1.7.8

Added possibility to have arrows in header columns.

1.7.7

Bugfix using external files with parameters (such as google documents) for searching/pagination fixed.

1.7.6

Bugfix sortable user click: Now it works if you have setting sort_cols_userclick="yes" on serveral tables on the same page. It also trims text so sorting is more accurate.

1.7.5

Files with .xlsx (Excel) and .ods are now to supported (to load from / source_files) with help from Spout library.
It’s now possible to have autosort for user (user clicks on a column and sort the column ascending or descending)
You can now tell what row in file(s) to start from (where headers should start)
It’s now possible to filter rows that has same date as today or newer (filter_operator = newdates). It’s also possible to filter dates from a specific date.
Shortcode generator (located in Tools/CSV to HTML) is updated with above functionality

1.7

Renamed css-rules for shortcut …