How to create a table from CSV data

Video versionA video overview of CSV-based wpDataTables

Example of a CSV-based tablewpDataTables can be a WordPress CSV importer as well

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.

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

Creating Tables in WordPress from CSV files instructions

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:

Create data table from source

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

2nd-step-linked-csv

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.

csv-file-from-any-url

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.

(Optional) - Define additional column and table settings

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

wpDataTable shortcode

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.