Getting Started

Step 1: Installing Data Tables

In WordPress, navigate to Plugins > Add New. Search for “Data Tables Generator by Supsystic” and click install. When the installation has completed click “Activate Plugin”. You will have a new admin menu item titled “Tables by Supsystic”.

Installing Data Tables by Supsystic PRO

In your personal account on the supsystic.com, you will find a unique download link after purchase. After downloading the file (supsystic_data_tables_generator_pro.zip), navigate to Plugins > Add New > Upload and upload the file. When the installation has completed, click “Activate Plugin”. After activation the PRO version, you need to enter the license key (you can find it in your personal account on our site). To do this follow next steps:

  1. Go to the Tables by Supsystic in WordPress navigation menu.
  2. Click License tab on left navigation menu of the plugin.
  3. Enter your email and license key.
  4. Click “Activate” button.

With Data Tables by Supsystic PRO you have such possibilities as –

  • Save Editable Fields
  • Use Editable Fields for Logged In Users Only
  • Use Editable Fields for Current Roles
  • Import / Export tables in CSV, MS Excel 2007 or PDF file
  • Use Diagrams

Step 2: Creating Responsive Data Table

  1. On the left navigation menu click “Add new table”.
  2. Enter the title of the table, set the number of Rows and Columns.
  3. Click “Ok”.

Creating WordPress Data Table

Step 3: Customizing the Data Tables by Supsystic

In order to change the configuration of tables – open the “Settings” tab.

Here you can set all of the options of Data Tables Generator plugin. Simply navigate the corresponding section of properties:

  • Table Elements,
  • Data Formats,
  • Features,
  • Design,
  • Language and Text.

Settings tab in WordPress Data Tables

Important! After changing the settings of plugin don’t forget to click “Save” button.

Table elements

Here you can select the elements of the table that will be displayed on the site page.

  • Caption – display the title of the table.
  • Description – short decsription of the table between title and table.
  • Header – display the first row as a header of a table.  Also you can set amount of rows which will be moved to header.
  • Footer – display the first row as a footer of a table.
  • Fixed Header – allows to fix the table’s header during table scrolling.
  • Fixed Footer – allows to fix the table’s footer during table scrolling.
  • Fixed Table Height – if you check fixed header or fixed footer this option will appear to set table’s height and create a vertical scroll.
  • Fixed Columns – allows to fix columns during table scrolling.
  • Left/Right Columns Count – number of column to fix by left/right side of the table.
  • Auto index – add auto index to your table. Here you can use the first column as an index or create a new column for this purpose.
  • Footer – display the first row as a footer of a table.
  • Auto index – add auto index to your table. Here you can use the first column as an index or create a new column for this purpose.

Learn more about table elements here.

Features

Here you can activate additional functions to work with the table.

  • Auto width – automatic detection of the cell width.
  • Sorting – sort data by ascending or descending.
  • Pagination – enable page control, divide content of the table into discrete pages – lets users tap through a series of related pages.
  • Searching – enable search by the table.
  • Info – display information about table entries.
  • Disallow Indexing – disable table indexing for search bots.

Also with Pro version of plugin you get such options:

  • Save Editable Fields – allows to save data to the table through editable fields. Get more info here.
  • Use Editable Fields for Logged In Users Only – allows to use editable fields only for logged in users.
  • Frontend Export – allow to print the table or export to PDF, CSV, XLS on frontend.
  • Export Page Orientation – choose the page orientation for PDF export file: portrait or landscape.
  • Export Logo – automticaly adds selected logo for output PDF or printing.
  • Logo Position – select logo position – above or below the table.
  • Logo Alignment – set logo alignment to left, right or center.

Read more about table feartures here.

Styling

Here you can choose a visual style of the table.

  • Borders – add borders around cells or rows.
  • Compact – reduce the amount of white space.
  • Highlighting – enable row highlighting on mouse over.
  • Disable wrapping – disable wrapping of content in the table, so all text in the cells will be on a single line.
  • Highlight the order column – highlight the column that the table data is currently ordered on.
  • Row striping – for example – you use a table, but the table’s rows are difficult to separate visually, especially when there are many columns (or multiple lines to a row) – add row striping to a table, it will display rows background in two similar shades of color to alternately.

Find more information about table styling here.

Step 4: Adding Data to the Tables by Supsystic

  1. Open “Editor” tab.
  2. Fill the table.
  3. Customize the data – here you can:
    • insert row and column to the table
    • set the font of text – bold and italic
    • choose text and background color
    • specify horizontal and vertical alignment
    • choose the word wrapping
    • insert functions, pictures or links into your table
    • add a comment to the chosen cell
    • choose the format for a row – it could be currency, percent or date
    • add a diagram or make some fields editable

The following opportunities are available by clicking the right button of mouse (choose the certain cell, column or row and click the right button of mouse)

  • insert row or column where you want
  • remove row or column
  • cancel or restore your actions
  • enable “Read only” mode for any cells, rows and columns and even for the whole table
  • set the alignment of text
  • merge or unmerge cells
  • add or delete comment

Editor of WordPress Data Tables

Step 5: Preview settings

After you change some settings – with responsive data tables plugin, you can immediately see the result – open the “Preview” tab and check the table. Note that the table may have minor changes depending on the style that your theme has.

Step 6: Displaying Tables on the website

  1. On the left navigation menu click “Tables”.
  2. Open the table which you need and copy the shortcode.
  3. Paste the shortcode into your post or page and Data Tables Generator by Supsystic will automatically create a table on your page.

Displaying the WordPress Data Tables on website

There are several ways to add a table to the site content, read more about it here.

Important! Shortcode must be inserted in a text editor page, and not in the visual.

Also on the Settings tab on the left side menu you can set roles of users who can use Data Tables Generator plugin, Administrator is included by default.

Data Tables Settings tab

Back to WordPress Data Tables Documentation.

Back to main page of WordPress Data Tables Generator.

Categories
Latest Articles
Get plugins bundle today and save over 80%