Please wait...

Creating editable tables from Excel, CSV or Google Spreadsheets with Table Constructor

Video versionA video overview of editable wpDataTables created from CSV

Imported table examplewpDataTable created by importing CSV using Table Constructor

In many cases you might have an initial file with the table data, but this table needs to be regularly updated (e.g. if this is a price list, or a catalog, etc.). wpDataTables has two options here for you:

  1.  Creating tables from data source, which means you will upload the file, initialize the table, and then it will be read every time on page load. Then you can overwrite this file to update the data. Such tables won’t be editable within WordPress and if they are large (larger then 3000-5000 rows) the page load and generation time will be slow.
  2. Importing table data to WordPress through table constructor. Initial data will be read and imported from the provided file or Google Spreadsheet, you can choose to skip certain columns, or to add some columns, you can edit both the structure and the data within the table at an any point later, but the table won’t be synched with the source file as with the first option, e.g. if you change something in CSV or in source Google Spreadsheet, your wpDataTable data will stay the same because the data will be already imported to the database.

In this tutorial we will learn how to create an editable wpDataTable from an Excel or CSV file, or from a Google Spreadsheet. Let’s see a live demo of the imported table first, and then go through the steps needed to create it.

Demo CSV import

wdt_IDCompanyPhone numberCreation dateSector
1 Cursus In Incorporated (002) 45726441 25 Nov 2003 IT
2 Adipiscing Company (00606) 7742008 22 Sep 2005 IT
3 Adipiscing Lacus Corporation (05646) 4683131 08 Jul 2008 IT
4 Pede Company (04752) 4145339 24 Dec 2007 IT
5 Ut Cursus Luctus Institute (068) 40241523 02 Jan 2002 IT
6 Felis Limited (001) 91497961 13 Jul 2004 IT
7 Sit Amet Industries (087) 17370346 15 Jan 2013 IT
8 Non Arcu Vivamus Associates (0406) 82754651 21 May 2015 IT
9 Blandit Congue In Limited (07333) 6155072 02 Aug 2010 IT
10 Tortor Company (035889) 956803 04 Apr 2008 IT
wdt_IDCompanyPhone numberCreation dateSector


Constructor stepsStep-by-step guide for importing tables

To start creating a new editable table out of initial file, go to your WordPress admin panel, open wpDataTables -> wpDataTable constructor,  choose the option “I would like to read the initial table data from an input file or Google Spreadsheet” and click “Next“:

File uploadUploading the file for import

Next step will be to browse for the file for the import using WordPress Media Library. Click on the “Upload” button to open the Media Library if you want to use a CSV or Excel file:

We will use this CSV file to create an editable table, you can download it and use it as well. Excel files are also supported (XLS, XLSX).

You can either upload the file using the WP Media Library, or browse to the file that was previously uploaded. When you selected the file that you need click “Choose file”

Google Spreadsheet configurationPreparing Google Spreadsheet to be used in wpDataTables

Google recently changed something about their Sheets service so please use the URL from the address line (URL from the browser), not the URL from the Publish popup.

If you want to use a Google Spreadsheet,(go to “File -> Publish to the web -> Entire document” in Google Spreadsheets) then just copy&paste the link from the browser to the upload field.

wpDataTable configConfiguring wpDataTable after import

Now wpDataTables needs to “take a look” at the source to initialize the table structure before we create the actual wpDataTable. To do this just click “Next”. wpDataTables will initialize the column metadata and show you the pre-import table setup screen:

In this screen you can choose which columns to import, reorder the columns, ignore some columns during the import, change the data type that wpDataTables detected, and even add more columns.

The table name input will be used for wpDataTable name that will help you to identify it later, and optionally will be displayed in the page above the table.

To reorder the columns during the import just drag&drop the column blocks with the mouse.

To remove (ignore) some columns during the import just click on the “X” (“close“) button in the top right of the column block.

To add a column, click the “+” button after the column blocks.

For each column you can redefine/define:

 

Column header – this is a header that will be shown above each column.

Type – this is a single selectbox that defines at the same time the column data type, editor input type for the back-end (and front-end) editor, and the filter type. Possible options:

  • One-line string. This is the most “simple” text type, suitable for short strings, the generated column will have a “string” (“text”) data type, one-line text input filter type, and one-line text input editor input type in the editor.
  • Multi-line string. This is another option for a text type, suitable for longer strings, the generated column will have a string data type, one-line text input filter type, and multi-line editor (“memo”) input type.
  • One-line selectbox. This is an option for columns, where cells can have one of several possible options as a value at a time (e.g. colors: “red”, “green”, “blue”). The generated column will have a string data type, a select box filter, a select box editor input.
  • Multi-line selectbox. This is an option for columns, where cells can have several of possible options as a value at a time (e.g. purchased modules: module 1, module 2, module 3). The generated columns will have a string data type, a select box filter, a multi-selectbox editor input.
  • Integer. This is an option for integer numeric columns. The generated column will have an integer data type, a number filter, and a text/numeric editor input.
  • Float. This is an option for float numeric columns. The generated column will have a float data type, a number filter, and a masked text/numeric editor input.
  • Date. This is an option for date columns. The generated columns will have a date data type, a date range filter, and a datepicker editor input.
  • URL link. This is an option for URL link columns. The generated columns will have an URL link data type, a text filter, and a text editor input with URL validation.
  • E-mail link. This is an option for E-mail columns. The generated columns will have an e-mail link data type, a text filter and a text editor input type with E-mail address validation.
  • Image. This is an option for image columns. The generated columns will have an Image data type, no filter, and a text editor input.
  • Attachment. This is an option for attachment columns. The generated columns will have a “URL link data type”, no filter, an a “Browse media library” input to attach files.

Default value. This is an optional input, here you can define a default value of the column which will be pre-filled in the editor inputs, and in the filter inputs (this can be disabled). If the column type is One-line selectbox, or Multi-line selectbox, and some possible values are defined (see point #7), this input will become a dropdown of the possible values.

Possible values. This is a “taggable” input, which appears only for One-line selectbox and Multi-line selectbox types. Here you can define all the possible values, separating them with a comma.

Data preview shows the data preview (first 4 cells) for the initialized columns. Does not show up for manually added column blocks.

For the table in the demo, we removed the “Yearly revenue” columns, moved the “Phone” column to be the second one, and added one column manually, called it “Sector”, defined the type as “One-line selectbox”, added possible values for it as “IT, Construction, Industry, Broadcast”, and set the default to “IT”.

To create the wpDataTable just click “Create the table and open in editor” button, the wpDataTable will be generated, and you will be redirected to the back-end editor.

You can read more about how to use the back-end editor here.

Never miss new features!

Join 2000+ newsletter subscribers

Never miss notifications about new cool features, promotions, giveaways or freebies - subscribe to our newsletter! We send about one mail per month, and do our best to keep our announcements interesting.

We never spam or disclose your address to anyone.