With the help of the Database Source Pro feature, you have the ability to display the table or even its individual fields from the database – straight away on the front-end.
Data Table Generator can display data from any table of WP database or External databases, or select the data, making the Database Query Source. The plugin works on any engine supported by WordPress: MySQL or any other one. It’s very useful, simple and fast in case if you have some table which you want to display on front-end.
Moreover, you have all options to create, manage and embed interactive charts, using data from Databases.
One more amazing feature is an ability to allow users to edit a table, just enable the option of editable fields. Front-end editing is designed to allow editing of individual fields or all of them (optionally) for users in a table. The most common use case is to simply click on the field you want to edit, fill the data and complete.
Also, if you have large databases, Source feature will be a lifesaver, because nothing can be more easy to take data directly from any table in the database for displaying, for example, product catalogue.
Let’s look at how it works:
So, using this option, you will be able to create Data Table based on your data bank, selecting necessary table as a source and importing selected fields, using the “Source” tab in the main menu of the plugin.
To start with, move to Data Tables Generator -> Create a Table and open Source Tab.
Here are the main options providing by Database Source feature:
- Enable the option “Data from Database”.
- Pick the type of Database: WP or External. If this option is enabled, the fields for accessing are displayed. Fill the following fields: Name, Username and Password. After entering the accesses, an external database is imported.
- 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.
- If you want to make the SQL Query, pick this option in list and enter the SQL Query. Here, column1, column2, … are the field names of the table you want to select data from. If you want to select all the fields available in the table, use the following syntax:After it is entered – the plugin sends an Ajax request for its analysis.
Please note, but if you select “SQL Query” the option to edit the fields of table on the front will be unavailable.
- Allow to Edit Data. If enable, let you edit database table data through the front-end fields.
- Select the fields available for editing. If nothing is selected, all fields will be editable.
- Save Frontend Fields. Allows saving data to the database table through the frontend fields.
- Use for Logged In Users Only. Allows using frontend fields only for logged in users.
- Allows using front-end fields only for users with selected roles. If there are no chosen roles – all logged in users will have the ability to use the frontend fields.
- The range for Diagrams. Specify a range for diagram. Set the range in the format A1:C10 as in Excel, where the letter is the column number in alphabetical order, the digit is the row number.
When you made all required setting, click Preview and Table will be created and displayed in this tab.
Each Table receives the same settings and can be customized in Main, Feature, Appearance Tabs.
You can see on an example, that the new Data Table has 3 columns, that we selected, adding to the table. We enabled the option to edit field, added Sorting, Searching and Pagination Features for better navigation, also put a header and selected Standard Responsive Mode.
Please note – Not all Editor tab options will work for a Data Source table.
Please note that tables created using Database Source feature are NOT editable yet. Styles and formatting from the “Editor” tab will be omitted.
For insert the table on a website, you can just copy and paste the data table shortcode you can find it on top of the edit panel.
Now you can try it and look at the great table, which has been built with an amazing Database Source feature: