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 been completed click “Activate Plugin”. You will have a new admin menu item titled “Tables by Supsystic”.
Step 2: Creating Responsive Table
- On the left navigation menu click “Add new table”.
- Enter the title of the table, set the number of Rows and Columns.
- Click “Ok”.
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.
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.
- Signature – add signature under table footer.
- 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.
Important! After changing the settings of plugin don’t forget to click “Save” button.
Learn more about Table elements here.
Here you can activate additional functions to work with the table.
Standard Responsive mode – in this mode if table content doesn’t fit all columns become under each other with one cell per row.
Automatic column hiding – in this mode table columns will collapse from right to left if content does not fit to parent container width.
Horizontal scroll – in this mode scroll bar will be added if table overflows parent container width
Disable Responsivity – default table fluid layout
- Table Information – display information about table entries.
- 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.
- 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.
- Use Editable Fields for Logged In Users Only – allows to use editable fields only for logged in users.
- Front-end Export – allows to print the table or export to PDF, CSV, XLS on frontend.
- PDF Paper Size – choose the paper size for PDF pages
- Export Page Orientation – choose the page orientation for PDF export file: portrait or landscape.
- PDF Export Font – if you use some specific characters (greek, cyrillic etc.) it is better to check this box for PDF export.
- Export Logo – automatically adds selected logo for output PDF or printing.
- Auto-import from Google Sheet – If checked – table data on frontend will be overloaded from selected Google Sheet. Read more about how organize Auto Import form Google Sheets.
Read more about Front-end Editing Feature.
Here you can choose a visual style of the table.
- Auto table width – automatic detection of the cell width. If checked – width of table columns will be calculated automatically for table width 100%.
Otherwise – you can set table width manually: columns width will be get from Fixed Table Width option (toolbar on Editor tab) or calculated depending on the columns width in the table editor.
If you do not want to apply columns width at all – you should uncheck “Auto Table Width” option, set “Fixed Table Width” option to “auto” and check “Compact Table” option.
- Fixed Table Width/ Fixed Table Width (mobile) – Set fixed table width in px or %. Choose “disable” to make table width adjust by table content.
- Compact Table – decrease the amount of white space in the table.
- Align by First Table – if checked , this table will be resized by first Supsystic table on page. Important! This option makes sense only if table is not on responsive mode or responsive mode is disabled. Also if the first table has different count of columns or different settings, their sizes may not be equal.
- Disable Wrapping – disable wrapping of content in the table, so every word in the cells will be in one single line.
- Paragraph Mode – This mode allows you to separate the content into paragraphs. To move to a new line in the cell – please press CTRL + Enter.
- Light box – add light box to images
- 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 in a row) – add row striping to a table, it will display rows background in two similar shades of color to alternately.
You have the ability to display the table or even its individual fields from the database – straight away on the front-end.
Here are the main options providing by Database Source Pro feature:
- Enable the option “Data from Database”.
- Select the table as a data source. In this list, you select the existing tables and views that you want to copy.
- Select the table fields. Only the selected fields will be used to build the table.
- Allow to Edit Data. If it enabled, it allows you edit database table data through the frontend fields.
- Select the fields available for editing. If nothing is selected, all fields will be editable.
- Save Frontend Fields. It allows saving data to the database table through the frontend fields.
- Use it for Logged In Users Only. Allows using frontend fields only for logged in users.
- Allows to use frontend fields only for users with selected roles. If there are no chosen roles – all logged in users will have ability to use the frontend fields.
Step 4: Adding Data to the Tables by Supsystic
- Open “Editor” tab.
- Fill the table.
- 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 media, video, 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:
- insert row or column where you want
- remove row or column
- cancel or restore your actions
- enable “Read only” mode for any cell, row and column and even for the whole table
- set the alignment of text
- merge or unmerge cells
- add or delete comment
- conditional formatting
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.
Diagrams feature (PRO option) allow you to visualize all the necessary information just in few steps with simplest settings.
There are six types of diagrams to choose from:
- Area Chart
- Line Chart
- Pie Chart
- Bar Chart
- Column Chart
- Bubble Chart
Table History (PRO option) lets you create editable tables for your logged in users and easily view the changes.
It is and you can find it on the main settings menu of your Data Tables plugin.
Each of your users will be able to edit your table. Information about table changes will be displayed on History Table tab, where you can select user from available list to check it.
Also here you will find date and time changes.
Step 6: Displaying Tables on the website
- On the left navigation menu click “Tables”.
- Open the table which you need and copy the shortcode.
- Paste the shortcode into your post or page and Datatable plugin by Supsystic will automatically create a table on your page.
Important! Shortcode must be inserted in a text editor page, and not in the visual one.
Also in the left side menu you can make additional settings for Table:
- Include to Global Search – Enable this option if you want to include the tables data to global site search
- Disable WP Footer Fix – Standard WP theme must request the wp_footer() function in site footer (see Theme Development). But sometimes it is not happen in custom themes. In this case our plugin will request its forced function, because it is needed for correct work as many of other plugins. But if you have the problems in your site because of this feature – just enable this option to disable force call of wp_footer() function by our plugin
- Pagination in Editor – add pages to your table in Editor
- Rows Count per Request – set the count of table rows, which will be put into the one saving request. If your table has more rows – as many requests as needed will be sent to completely save all table data. It can be useful if you have a large table and can not improve your server settings to save the table per single request. If you do not have problems with tables saving it is better to leave the default value – 400
- Roles – set the users roles, to add permission to use the plugin. The Administrator role has been set by default
Here is a tutorial How to create Data Table with WordPress
Back to WordPress Data Tables Documentation.
Back to main page of WordPress Data Tables Generator.