4. Data Table Options

Now that the table has been created, the columns have been added and configured, it’s time to move on to customizing the table options.

To go to the options in the plugin menu, click on the “Options” tab. The main features of the plugin are conveniently grouped here.

On the left is a panel for managing options, on the right you will see all the changes in the preview, while in real-time and a switch between devices.

Table Elements

You can fully customize the next Table elements:

• Caption. Check here if you want to show the name of the table above the table.
• Description. You can add short description to the table between title and table.
• Signature. You can add signature under table footer.

• Header. Enables / disables the header from the table.
• Footer. Enables / disables the footer from the table. If the footer is enabled, configure the following options.
  • Custom footer. If checked – footer will be created from the last table rows. Otherwise – footer will be created from header rows.
    • Count of footer rows. If custom footer enabled. Count of table rows, which will be moved to footer.
• Fixed header. Allows fixing the table’s header during table scrolling.

Important! Header option must be enabled for using this feature. Also, you need to set Fixed Table Height to create a vertical scroll for your table. To see the work of this feature you should not use such Responsive Modes such as Standard and Automatic columns hiding.

• Fixed footer.

Allows fixing the table’s footer during table scrolling.

Important! The footer option must be enabled for using this feature. Also, you need to set Fixed Table Height to create a vertical scroll at the table. To see the work of this feature you should not use such Responsive Modes as Standard and Automatic columns hiding.

• Fixed table height. (in px.) This value must be less than the original table height to create a vertical scroll, otherwise you will not see that the fixed header / footer exists.
• Fixed columns.

Allows fixing columns during table scrolling.

Important! The fixing of columns suggests that the table will have a horizontal scroll type of responsive mode, otherwise you will not see that the fixed columns exist. So this feature is a kind of responsive mode on its own and will not work with such Responsive Modes as Standard and Automatic columns hiding.

• Left and Right columns count. Number of column to fix by left/right side of the table.
• Auto index. Add index (row number) to table. The option has three options, use the first column (attention, the content of the column will be replaced with an index); create a new column (a column on the left will be created for the index); no index (no index will be applied).

Options

• Disable table cache.

This feature is necessary for those cases when the table contains the shortcodes. By checking the box, you can make sure that they will be rendered correctly and won’t be influenced by the cache.

• Disallow indexing.

These options disable the indexing table for search bots.

Data formats

Data Tables comes with built-in functions that allow users to change the format of date, time, and other numeric values. You can modify your format by going to Options » Main in the plugin admin area and scrolling down to the Data formats section. You can fully customize:

• Decimal delimiter. Set decimal delimiter for numbers. (,/.)
• Thousands delimiter. Set thousands delimiter for numbers. (,/.)
• Number. Set default output format for numbers e.g. 1,000.00, 1.00, 1,000
• Currency. Set default output format for currencies. For example: $ 1,000.000; € 1.00
• Percent. Set default output format for percent numbers. For example: 10.00%; 10
• Date. The set default output format for date. For example:

yy-mm-dd – 1991-12-25

dd.mm.y – 25.12.91

• Time / Duration. Set output format for time and duration. For example:

1) time

HH:mm – 18:00

hh:mm a – 9:00 pm

2) duration
hh:mm – 36:40
hh:mm:ss – 36:40:12

Responsive mode

Check out this article for more details.
The plugin provides 4 different modes of Responsive design according to your needs:

• 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 the content does not fit to parent container width.

• Horizontal scroll.

In this mode scroll bar will be added if the table overflows parent container width

• Disable Responsivity.

Default table fluid layout

Sorting

Check out this article for more details.

A table allows you to sort data in the interface and display the data in the exact order you want. You can find the telltale indicators at the top of the column. A colored indicator shows which column is currently being sorted, and an arrow indicates the direction of this sort: ascending or descending. Sorting works for any type of content – numbers, text, dates.
You can also customize which columns can be sorted, sort order, etc.

Just check the box to enable the option and build it.

Note that if there are merged cells in the table sorting will be disabled.

Sorting column. A number of columns to apply for sort order. Set no value to disable table sorting by default.

Sorting order. Set sort order by default. (Ascending/Descending)

Don’t sort the column. If you don’t want to sort a specific column, go to the builder tab-> click on the column setting-> advanced icon and uncheck the sortable checkbox.

Highlight a sorted column. To highlight a sorted column, just in the options tab, check the Highlight the order column option.

Show sorting icon on mouseover. To enable this option go to options-> appearance-> check the box for use custom style and check the box for Show sorting icon on mouseover.

Pagination

Pagination literally means page-by-page navigation. Outputting a dataset with splitting into multiple pages. Pagination allows you to solve several problems:

• Speeds up the loading of pages. An “endless” web page is technically possible, but in practice it will take a very long time to load, putting the user’s patience to the test.
• Makes browsing and searching for the items you need easier and more convenient;
• Gives the website design a neat and finished look.

It is very easy to enable pagination, just check the pagination option. Now you can proceed to set it up:

Pagination menu. Check the option to show the drop-down list to select the number of rows on the page.

Pagination list content. Here you can set the number of rows to display on one Pagination page. Establish several numbers separated by a comma to let users choose them personally. The first number will be displayed by default. Since that the number of Pagination Pages will be recounted also.

Pagination size. (small; medium; large)

Scroll top by pagination. Check this option to scroll the user to the top of the table after changing pagination.

Server-side processing. This option is recommended for a large table that cannot be processed in a conventional way. The table will be sequentially loaded by ajax on a per-page basis, all filtering, ordering, and search clauses are server-side implemented too.

Searching

The ability to search, especially in large tables, is one of the most important options and you can add it without coding, just check the box in the function tab. In addition, you can customize the search to suit your content perfectly.

You can also customize separately:

• Search by columns. Add search by table columns. Use a semicolon as a separator for selecting any of the values.
  • Location of search fields. Specify where exactly the search fields will be displayed: above or below the table.

• Search by hidden fields. Let’s search by fields, marked as hidden (see appropriate button on Extended builder toolbar).
• Show Only Search Results.Hide table by default and show only if search has a result.
  • Show Empty Table. Table will not be hidden by default, but will be empty.
• Strict Matching. Display only entries with matching characters in the beginning of words.
• Minimum characters. Set minimum count of characters to start search in Search field. Set 0 to make search in any case.

Users will be able to instantly filter the table according to the search query and find the information they need.

Frontend Fields

Check out this article for more details.

This option allows your site users to edit the table data. You can fully customize the following options:

• Save frontend fields. Save table data entered through frontend fields. Refer to the buttons on Extended builder toolbar.
• Mark last edited cell. Adds a symbol ✓ to last edited cell.

• Use for logged in users only. Allows to use frontend fields only for logged in users.
  • Use for current roles only. 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.
• Allow these file extensions. Select the file extension that will be available for upload.

Export

Check out this article for more details.

Your users can import a table directly from the frontend by clicking on the button above the table. You can choose in which format users can import data and fully customize it.

• Frontend export. Allows to export table in pdf, csv, xls formats from the front-end. Choose needed formats.
• Export links position. Select position of export links around of table. (before/after)
• Export only visible. Allows you to export only visible data: filtered rows with sorting.
• PDF paper size. Choose the paper size for PDF pages. (A4; A3; A5; Letter; Legal; Tabloid)
• PDF page orientation. Choose the orientation for PDF pages. (Portrait/Landscape)
• Export Logo. Automatically appends selected logo for output pdf or printing.
  • Logo position. Select position of table logotype.(above/below)
  • Logo alignment. Select alignment of table logotype. (left/center/right)

Appearance

You can fully customize:

• Auto / Fixed table width.

If checked Auto – the width of table columns will be calculated automatically for table width 100%.

Otherwise – you can set table width manually: columns width will get from the “Fixed table width” option (toolbar on Extended builder tab) or calculated depending on the width of the column in the table editor.

If you do not want to apply columns width at all – you should uncheck the “Auto table width” option, set the “Fixed table width” option to “auto” and check the “Compact Table” option.

• Compact table. Decrease the amount of whitespace in the table.
• 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.
• Lightbox. Add Lightbox for images.

• Borders. Cell – adds border around all four sides of each cell, Row – adds border only over and under each row. (i.e. only for the rows).

• Row striping. Add automatic highlight for table odd rows.

• Highlighting by mouse hover. Row highlighting by mouse hover.

• Highlight the order column. If checked – the current sorted column will be highlighted.

• Table loader. Enable / disable table loader icon before table will be completely loaded.

Table Styling (pro)

Choose your custom table styles below. Any settings you leave blank will default to your theme styles.

• Color
• Font
• Size Font
• Width

For:

• Columns
• Borders
• Background
• Cell

As well as:

• Vertical alignment. Set vertical alignment of table cell contents.
• Horizontal alignment. Set horizontal alignment of table cell contents.
• Pagination position. Set horizontal pagination buttons position.

• Show sorting icon on mouse over. To enable this option go to options-> appearance-> check the box for use custom style and check the box for Show sorting icon on mouseover.
• Fixed layout. Set all columns of the same width.

Overwrite Table Text

Here you can change the settings of service text in your table:

• Empty table.
• Table info text.
• Empty info text.
• Filtered info text.
• Length text.
• Search label.
• Zero records.

Table Language

Table Language. You can select the language that is used in the Data Table.

CSS и JS editor

CSS editor. You can also manually add your own CSS for the current table.

JS editor. You can add custom JavaScript which will be executed when the table is initialized.