How to create a table from CSV data

Table of Contents

Video tutorial

Example of a CSV-based table

Please note: From version 5.1 you are able to create CSV tables linked to an external source from any domain! Click here to read more about using the URL for generating linked CSV tables.

The CSV, or “comma-separated-values” format is widely used; it’s simple, lightweight, almost any software can generate it, and users can even create it manually. Basically, it’s just a text file, where cells are separated with commas, rows are separated with new lines, and the first line contains table headers. CSV has been supported by wpDataTables since its first release.

You can download the file that was used to generate this table from this link. The table rendered from this file is below.

See the step-by-step tutorial below the table.

Please note: Once you create a table from a CSV file, changes in this file like:

Changing the column’s name,
Changing the column’s order,
Deleting the column, and
Adding a new column.

are highly not recommended, because the table in the wpDataTable plugin will not work, at the moment. If you make any of these changes, please recreate the table again.

Show

entries

Country	Region	Grape	Size	Sweetness	Colour	Food match
Afghanistan	Saxony	Petit Verdot	75CL	Dry	White wine	Duck
Afghanistan	Gelderland	Avanà	75CL	Semi-sweet	Yellow	Fish
Anguilla	OK	Aleatico	1L	Dry	White wine	Vegetarian
Antarctica	Ist	Garanoir	75CL	Very sweet	Yellow	Fish
Antarctica	Andalucía	Agiorgitiko	75CL	Very sweet	Rosé	Pork
Argentina	Akwa Ibom	Aleatico	75CL	Bone dry	Gray	Fish
Armenia	Vienna	AglianiconeAlbaranzeuli nero	75CL	Very sweet	Rosé	Beef
Aruba	II	Garanoir	1L	Dry	Red wine	Cheese
Aruba	Nord-Pas-de-Calais	Petit Verdot	1L	Semi-sweet	Tawny	Vegetarian
Aruba	Stockholms län	Petit Verdot	1L	Dry	Rosé	Duck
Start typing a search query	Start typing a search query	Agiorgitiko Aglianico AglianiconeAlbaranzeuli nero Aleatico Aragónez Avanà Baga Blauburger Cinsaut Dureza Gaglioppo Garanoir Helfensteiner Lagrein Manseng noir Mujuretuli Petit Verdot		Bone dry Dry Semi-sweet Sweet Very sweet	Start typing a search query

Showing 1 to 10 of 100 entries

First Previous1 2 3 4 5…10Next Last

By default, this format will work only up to a certain limit (no exact limit, but 3.000 – 5.000 cells is a good example). If you have a larger file, the page load time will increase.

However, with the new caching option that was implemented in wpDataTables 5.0, this issue is resolved for large tables linked to an existing data source.

For really large data sets, it also makes sense to import the data to MySQL, you can use the “Create a table by importing data from data source” option to do this.

Tables linked to an existing CSV file are not editable, nor are they saved in the database.

Please note that the default CSV delimiter is comma ( , ) but in wpDataTables settings, you can change it to:

colon ( : )
semi-colon ( ; )
pipe ( | )
TAB

Instructions to create the table from CSV

The first thing you will need to do to create a CSV-based table in WordPress is to create the CSV file with your data set in your favorite software e.g., MS Excel, OpenOffice, LibreOffice, Numbers, Google Spreadsheet, or any other.

Save the file at a location where you can easily find it later.

Create a wpDataTable and upload your CSV file

After you saved the CSV file with your data, the next step is to go to your WordPress admin and create a new wpDataTable from the CSV data source.

Please open your WordPress admin, and:

1. Go to wpDataTables -> Create a Table, and choose Create a table linked to an existing data source option.

2. Provide a name for the new wpDataTable in the “Table title” input to help you identify it.
3. Select “CSV file” as the Input data source type.
4. The WordPressMedia Library will automatically be selected as the File location and it is used when you’re creating a table by uploading a CSV file.
5. Click on the Browse button to open the WordPress media library.

6. Upload the CSV file that you prepared (or select one of the CSV files you previously uploaded into your Media Library); then click Use selected file.
6. Click Save Changes, so wpDataTables reads the CSV file you uploaded and initializes the columns’ metadata.

Please note that your CSV file should be on the same domain as WordPress.

URL from any domain

Creating a table linked to a CSV file by providing its URL is pretty much the same as it is for creating a table by uploading a CSV file. The only difference is that you would choose the URL from any domain option instead of the WordPress Media Library option under File location when creating the table.

That is it, everything else is the same as when you’re creating a table linked to an uploaded Excel file.

Please note: The file needs to be accessible online in order to create a table from it.

Define additional column and table settings (Optional)

At this point table is already prepared. But to improve its usability, we need to define several additional settings for the table and its columns. For this case, we define these settings:

1. Enabled Limit table width checkbox and disable Table title checkbox on “Display” tab.
2. Set the Filter type for “Country“, “Region” and “Color” columns as “Select box”.
3. Set the Filter type for “Grape” and “Sweetness” columns as “Checkbox“.

You can dynamically filter the table by using placeholders as predefined filtering values.

Insert the wpDataTable in your page or post

When the configuration of your CSV-based wpDataTable is complete, you simply need to insert it to your post or page.

Open (or create a new) a WordPress post or page, place the cursor in the position where you want to insert your table, click the “Insert a wpDataTable” button in the MCE editor panel, and choose the CSV-based table that you prepared.

Or, if you prefer to do things manually, you can simply copy&paste the wpDataTable shortcode (you can find it on the wpDataTables browse page, or in the wpDataTable edit page).

If you are using Gutenberg editor, Elementor, or WPBakery page builder, you can check out the section for Adding wpDataTables shortcodes on the page.