Get plugins bundle today and save over 80%

Getting Started with Data Tables by Supsystic

 

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 –

  • Import / Export tables in CSV, MS Excel 2007 or PDF file

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 “Save”.

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,
  • Features,
  • Styling.

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.

Table elements of WordPress Data Tables

  • Caption – display the title of the table.
  • Header – display the first row as a header of a table.
  • 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.

Features

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

Features of WordPress Data Tables

  • Auto width – automatic detection of the cell width.
  • Sorting – sort the table by the characteristics that you want.
  • 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 indexing table for search bots.
  • Frontend Export – allow to export table to pdf, csv, xls on frontend.

Styling

Here you can choose a visual style of the table.

Styling feature of WordPress Data Tables

  • Borders:
    • Cell – adds border around all four sides of each cells;
    • Row – adds border only above and under each row.
  • 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.

Step 4: Adding Data to the Tables by Supsystic

  1. Open “Editor” tab.
  2. Fill the table.
  3. Editor tab in WordPress Data Tables

    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)

    • cancel or restore your actions
    • insert row or column where you want
    • remove row or column
    • enable “Read only” mode for any cells, rows and columns and even for the whole table
    • set the alignment of text
    • merge the chosen cells
    • add or delete a 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 the Tables on website

    1. On the left navigation menu click “Tables”.
    2. Find 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

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

    Back to WordPress Data Tables Documentation .

    Back to main page of WordPress Data Tables Generator .