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

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.

This format will work only up to a certain limit (no exact limit, but 3000-5000 cells is a good example). If you have a larger file, the page load time will increase. For large data sets it makes sense to import the data to MySQL, you can use “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.

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.

2. Set a name for your new wpDataTable that will help you to find the table later.
3. Choose CSV file as the Input data source type.
4. Click Browse… The WordPress Media Library pop-up will appear near the Input file.

5. Upload the CSV file you prepared in the Step 1, and click the Use selected file button.
6. Click Save Changes, so wpDataTables will read the CSV file you uploaded, and initialize the columns’ metadata.

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

(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.