Header of the Table Settings block in the table configuration page contains the following tools and buttons:
- Table name input – you can change the name of wpDataTable here.
- Table shortcode button – when the table is saved, a shortcode is generated. You can click this button to copy the table shortcode.
- Collapse table settings button – by clicking this button you can show or hide the table settings block. Useful when you are editing table data, so that the table settings block would not get in your way.
- Cancel button – by clicking this button you can cancel all unsaved changes and redirect to the Browse Tables page.
- Apply button – by clicking this button you can apply all changes and see how they affect the table.
The Data source tab of the Table Configuration page contains the settings which allow you to define where the data will be read from (MySQL query, Excel file, CSV file, Google Spreadsheet, URL for JSON, XML or Serialized PHP array), and some additional attributes where applicable.
- Data source type selector – using this selectbox you can choose which kind of data source you want to use for this table.
- MySQL query (for MySQL-based tables) – the field where you can enter the query which returns the data that you want to display in wpDataTable. You can read full instructions on creating MySQL-based tables here.
- Server-Side Processing, or Lazy Loading – this switches defines whether complete table data will be included in the page at once, or if it will be loaded on request and sorting/filtering processed by server. You can read more information about this feature here and here.
- Auto-refresh interval – if set to a value different from 0, tables will auto-refresh after each XX seconds.
- Cancel changes and close – By clicking this button you can cancel all the unsaved changes and go to Browse Tables page.
- Apply – This button applies all changes, refreshes the table preview – or shows it if you are creating the table initially.
For non-MySQL table types the only difference is that on the righthand side you will get an input for the file upload, or URL to paste.
Excel or CSV files should be uploaded to the server, JSON, XML, Google Spreadsheet and Serialized PHP arrays require remote URL in this field.
The Display tab of the table settings block allows to define all the parameters related to the looks of the table. You can hover above the help icon near the elements to get inline help and illustration of every feature.
- Show table title – if this is turned on, the table title will appear above the table in a H3 element.
- Default rows per page – defines how many rows will be visible in the table by default.
- Info block – defines whether the information about the amount of entries will be shown below the table.
- Responsiveness – defines whether the table will be responsive. If turned on, defining which columns will be collapsed on mobiles and tablets is needed. Read here about the responsive feature.
- Rows per page – defines whether the control for changing the number of rows per page will be shown above the table.
- Limit table width – if this is turned on, the table width will be limited to the container width. Otherwise it will stretch outside of the container.
- Hide until loaded – defines whether to show the table data while the front-end page is still initializing.
- Scrollable – defines whether to add a scrollbar in the container, useful for large tables with many columns. Disables the “Limit table width” switch.
- Word Wrap (appears when “Limit table width” is on) – defines whether to show all words in cells in one line, or to wrap to multiple lines.
Table Settings - Sorting and FilteringConfiguring the sorting and filtering parameters for the table
Sorting and Filtering tab contains the settings related to the search, global sort, and advanced per-column filters.
- Advanced column filters – enables or disabled per-column filters that can appear in the table header, footer or in a form above the table. If this is enabled you can configure filters per column in the column settings. Read more about advanced filtering here.
- Filters in form (appears if ‘Advanced column filters’ is turned on) – if this is enabled, filter will appear in a form above the table, not integrated in the table itself which is the default behaviour.
- Sorting – defines whether sorting will work for the table globally. If sorting is enabled, you can still disable sorting for individual columns. If disabled, no columns will be sortable.
- Clear filters button – if this is enabled, a ‘Clear filters’ button will be added in the Table Tools block, or in the filtering form.
- Main search block – defines whether the ‘global’ search block, which searches the whole table, will appear on the top right above the table.
On the Editing tab you can enable front-end editing and configure the relevant parameters. Please note that this tab appears only for MySQL-based tables and for tables created manually from wpDataTables.
- Allow editing – Enables or disables front-end editing for the table. If this is disabled no other controls will be visibile on this tab.
- Popover edit block – by default the editing buttons (New, Edit, Delete) appear in the Table Tools block above the table. If ‘Popover edit block’ switch is enabled, the buttons will not appear there, but will popover above any row when you click it.
- In-line editing – if this is enabled, you will be able to edit the table not only with a popup editor, but also by double-clicking any cell, and editing the data inline.
- MySQL table name for editing – the name of the table on MySQL side, which will be altered by the MySQL server when you edit the table in front-end. wpDataTables ‘guesses’ the name of the table by default – but make sure to double check if it is guessed correctly.
- ID Column for editing – defines which column values will be used as a unique identifier of the row. Should be an auto-increment integer on MySQL side.
- Editor roles – you can choose here which WordPress user roles will be allowed to edit this table.
- Users see and edit only their own data – if this is enabled every user will see only the rows that he entered. Read here full information about this feature.
- User ID column (appears if the previous one is enabled) – defines which column will store the User ID to distinguish the row owners.
Read here more info about editable tables in wpDataTables.
Table Tools tab alows you to configure the Table export tools block, the ‘toolbar’ on the top right of the table.
- Enable Table Tools – This switch enables or disables the Table Tools block for a table.
- Table Tools selector – Here you can pick which buttons will and won’t appear in the Table Tools block.
You can read here full manual on how the Table Tools work.
Placeholders tab allows you to configure dynamic variables that can be used in MySQL queries to build the tables, and adjusted from shortcodes, to use same table in different pages to present different data. You can read full tutorial on using placeholders here.
- %VAR1%, %VAR2%, %VAR3% – custom dynamic variables that you can use in the WHERE clause of your query. You can define the defaults here, which will be used when no other values are provided in the shortcode, and at the moment of initial table creation.
- %CURRENT_USER_ID% – when used in the query, at the moment of table generation it will be always replaced with the ID of currently logged in user (0 for logged out users). You can override your current ID here for the table generation if necessary (e.g. your ID is 1 and there are no entries in this table where USER_ID = 1).
- %CURRENT_USER_LOGIN% – when used in the query, at the moment of table generation it will be always replaced with the Login of currently logged in user (empty string for logged out users). You can override your current login here for the table generation if necessary (e.g. your login is ‘admin’ and there are no entries in this table where user_login = ‘admin’).
- %WPDB% – will be replaced by the prefix of currently used database, by default ‘wp_’. You can override the default here.
- %CURRENT_POST_ID% – when used in the query will be always replaced by the ID of post or page where the table is inserted. You can set the default one here.
Table Settings - Table Preview and Column SettingsPreview how the table will look and work on front-end, edit the table data, change the column settings
The Table Preview and Column Settings block is the section of the Table Configuration page where you can see a realtime live preview of how the table will look and function in front-end, and also edit the table data. Every change you make to the table settings or column settings will be reflected here after you click “Apply“. Let’s go through all the elements of this section in detail:
- Delete column button. Available only in manually created tables or imported tables. If you click this button you will see a dialog where you can choose a column and delete it. Please note that deleting a column cannot be undone.
- Add a column button. Available only in manually created tables or imported tables.
- Complete Columns List button. By clicking on this button you can open a dialog (Complete Columns List popup) with full list of the columns that exist in the table, including the invisible columns. In this dialog you can quickly toggle the column visibility, rename columns, go to the column settings, and toggle the configuration for responsiveness – whether each column will be shown or collapsed on tablets and mobiles. Also you can easily change the column order by dragging and dropping the column blocks in this dialog.
- Add a formula column button. By clicking this button you can open a formula generator dialog, in which you can configure a formula (calculated) columns. Read here full information about this type of columns.
- Editor type switch. Available only in manually created or imported columns. Here you can change the style of how the table editor will be displayed: the standard (DataTables-based) look, or “Excel-like”/Spreadsheet style (Handsontable-based). Read here full information about the Excel-like editor.
- Table preview section. Here you will see the table preview (with editing capabilities for tables which support this), close to how it will appear in the site’s front-end.
- Column settings button. This button is rendered for all the columns (only in the preview, it doesn’t appear on the site’s front-end), it opens the column settings sidebar for the column.
- Documentation button. Opens related documentation in a new tab.
- Cancel button. Resets all unsaved changes and redirects to the browse tab.
- Apply button. Saves all changes and refreshes the table preview.
The Display tab of the Column Settings sliding panel contains all the settings that are relevant to the basic visual attributes of the column and is same for all column types.
- Displayed header – here you can redefine the header of the current column which will be shown to the user (original header from the data source is always visible in the label in the very top of the panel). You can also change it from the Columns List Popup.
- Column position – shows the current position of the column in the table (including the hidden columns). It can be changed here (all other column indexes will be altered by that as well), but the easier way of reordering columns is by dragging&dropping the column blocks in the Columns List Popup.
- Cell content prefix (or ‘Display text before’) – any text entered in here will be shown before the content of every non-empty cell in this column (e.g. $ sign). Does not influence sorting and filtering.
- Cell content suffix (or ‘Display text after’) – any text entered in here will be shown after the content of every non-empty cell in this column (e.g. % sign). Does not influence sorting and filtering.
- Hide on mobiles (only for tables where Responsiveness is enabled) – defines whether this column will be collapsed on Mobile devices. Can be also easily toggled in the Complete Columns List popup. Read more about Responsive features here.
- Hide on tablets (only for tables where Responsiveness is enabled) – defines whether this column will be collapsed on Tablet devices. Can be also easily toggled in the Complete Columns List popup. Read more about Responsive features here.
- CSS class(es) – if you would like to add some additional CSS styling to the cells in this column, you can define an additional class here (e.g. ‘my-class’) and it will be added to all the cells in this column, so you will be able to style them (e.g. by using the selector ‘table td.my-class, table th.my-class’.
- Visible on front-end – toggles the column visibility in the front-end (invisible columns are still present on the page). This can also easily be toggled in the Complete Columns List popup.
- Column color – here you can choose the color for the column. Please note that if you want to color the cells, rows or columns based on values you should use the Conditional formatting feature.
- Documentation button – opens the related documentation section.
- Cancel button – resets all unsaved settings and closes the column settings sliding panel.
- Apply button – applies all changes, closes the column settings panel and refreshes the table preview.
The Data tab of the column settings block contains the config controls related to the ways how the data is displayed and/or transformed if necessary. The controls present on this page depend on the column type that you choose.
- Column type selectbox – here you can choose which type of data will be displayed in this column. Column type defines the rules of sorting, filtering, data display and storage; different column types are compatible with different filter and editor inputs. You can read more about String, Integer, Float, Date, DateTime, Time, Image, URL Link, E-mail link, Currency/price, and Formula (calculated) columns on the provided links.
- Possible values for column – this input defines how the possible values for this column will be listed. Possible values are used in the filters (selectbox, checkbox) and in the editor inputs for editable tables. The options are:
- Read from table on page load (default) – possible values will be fetched from the table every time the table is open in front-end. Works fine if all the values are already there, but may be not a good solution for tables which aren’t filled in yet, also may work slow for large tables, as it performs a full table read every time.
- Define values list – opens an additional tag-like input where you can enter manually all the possible values for this column, separated by comma or Enter. This input also allows reading the existing values from the table.
- Use values from another table (Foreign key) – allows configuring a relation to another wpDataTable, for example to show user names from a users table, instead of user ids. Please read the full tutorial on configuring table relations / foreign keys to see how this works.
- Allow empty value – if this is turned on, an empty field will be added to the possible value list – if you want to allow blank cells in this column.
- Skip thousands separator (Integer columns only) – if this is enabled, thousands separator will be omitted for the cells in this column, i.e. it will show 1000 instead of 1.000, 1000000 instead of 1.000.000, etc. Useful when the integer is referring to years, IDs, SKUs and other values where no formatting is needed.
- Calculate total (Integer and Float columns only) – if this is enabled, a total value for all the cells in this column will be calculated and shown in the column’s footer. Totals will be re-calculated every time you filter the table to show correct values. It is possible to show the totals outside of the table by placing a shortcode which is shown under the switch, you can click to copy it. Read here full documentation about using calculation functions.
- Calculate average (Integer and Float columns only) – if this is enabled, an average value for all the cells in this column will be calculated and shown in the column’s footer. Average value will be re-calculated every time you filter the table to show correct values. It is possible to show the average value outside of the table by placing a shortcode which is shown under the switch, you can click to copy it. Read here full documentation about using calculation functions.
- Calculate MIN (Integer and Float columns only) – if this is enabled, a minimum within all the cells in this column will be found and shown in the column’s footer. Minimums will be re-calculated every time you filter the table to show correct values. It is possible to show the minimums outside of the table by placing a shortcode which is shown under the switch, you can click to copy it. Read here full documentation about using calculation functions.
- Calculate MAX (Integer and Float columns only) – if this is enabled, a maximum within all the cells in this column will be found and shown in the column’s footer. Maximums will be re-calculated every time you filter the table to show correct values. It is possible to show the maximums outside of the table by placing a shortcode which is shown under the switch, you can click to copy it. Read here full documentation about using calculation functions.
For Float columns the only setting which is different from Integer columns (except for the ‘skip thousands separator’ which isn’t available here) is the ‘Decimal places‘ setting. It allows to configure on column level how many decimal places will be shown for the floats in this table, overriding the default value which can be set in the global plugin settings.
The Sorting tab of the column settings block is available is sorting is allowed globally for this table, and allows to configure the sorting parameters for a specific column. Read more about sorting in wpDataTables here.
- Allow sorting – if this is disabled, sorting will not be accessible for this column, and clicking on the column header will not sort it.
- Use as default sorting column – if this is enabled, the table will be sorted by this column on load. Note that turning this on will disable this for any other column where it was enabled.
- Default sorting direction – this switch allows to define whether the default sorting will be done ascending (A, B, C) or descending (C, B, A).
The Filtering tab of the column settings block is visible if Advanced Filtering is enabled globally for this table. It allows to configure parameters related to the filtering rules and behavior for a specific column.
- Allow filtering – if this is disabled, filter for this column will not appear in the advanced filter (whether it is rendered above the table or inside).
- Filter type – here you can choose one of the possible filtering inputs for this column: Text, Number, Number range, Date range, DateTime range, Time range, Selectbox or Checkbox. Read full information about advanced filtering, and the differences between different filter types here.
- Filter label – Using this input you can redefine the default label for filtering input.
- Exact filtering – if this is enabled, filter will always look for an exact search – e.g. if ‘valid’ is entered in the filter, only rows which have exactly ‘valid’ in this column will be shown. If disabled, a ‘fuzzy’/partial match will be used, so e.g. also rows that have ‘invalid’ in this column will show up. Different use cases require different rules.
- Predefined value(s) – here you can input a value, or 2 values in case of range filters, which will be pre-set in the filter every time you open the page. Useful if you want to initially show some default ‘narrowed’ dataset.
The Editing tab of the column settings block is visible if the table is editable. It allows to configure the editing logic for this specific column. You can read full instructions about using editing here.
- Editor input type – allows to choose which editor input will be rendered for this column – None (no editing), One-line editor, Multi-line editor, HTML editor, Single-value selectbox, Multi-value selectbox, Date, DateTime, Time, URL Link, E-mail link, attachment.
- Column cannot be empty – if this switch is enabled, editor will not allow a blank value in this cell.
- Predefined value(s) – here a default pre-selected value for the editor can be defined (or several values if the editor input type is a multi-value selectbox). Useful if in most of the cases the cell should have some default value.
The Conditional Formatting tab of the column settings block allows to configure the conditional formatting rules for this specific column (e.g. to color cells, rows depending on the cell value). Read here the full tutorial on how to use Conditional Formatting in wpDataTables.
- Conditional formatting rule – the rule which will be applied to the column – value, comparison operator, action.
- Delete rule button – by clicking this button you can remove the conditional formatting rule.
- Add rule button – by clicking this you can add another conditional formatting rule. You can add unlimited number of rules, but please note that having a lot of these can slow down the table.