Step 1: Creating Responsive Data Table
- On the left navigation menu click “Add new table”.
- Enter the title of table, set the number of Rows and Columns.
- Click “OK”.
Step 2: Adding data to the Tables by Supsystic
- Click “Editor” button.
- 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
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
Also you have the ability to change the column / row width – use your mouse, move the cursor on right side of the column boundary / (bottom side of the row boundary) you want until it becomes a resize cursor, and then drag the boundary.
Step 3: Customizing of Data Tables by Supsystic
In order to return to configuration of tables – click the “Settings” button.
Here you can set all the options of Data Tables Generator plugin. Simply navigate the corresponding section of properties – Table Elements, Features, Styling.
Important! After changing the settings of plugin don’t forget to click “Save” button.
- 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 width
- Ordering – 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.
- State saving – restore table state on page reload.
- Borders – you can select “Cell” border – adds border around all four sides of each cells or “Row”border – 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 ofdered 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: Preview settings
After you change some settings – with responsive data tables plugin, you can immediately see the result – click the “Preview” button and check the table. Note that the table may be minor changes to the style that has your theme.
Step 5: Displaying the Tables on website
- On the left navigation menu click “Tables”.
- Find the table which you need and copy the shortcode.
- Paste the shortcode into your post or page and Data Tables Generator by Supsystic will automatically create table on your page.
Important! Shortcode must be inserted in a text editor page, and not in the visual.