Table JX

In the Administration page click Extensions and then under Install hit button Browse and select com_grid.zip (this is the file you have already downloaded via Download button). After the successful installation go to the next step.

Install

2. Creating grid

In this step we are creating one grid that will be later shown in the content page. So, go to the Components and hit the Grid. The mask is shown below.

Table Title - the name of the grid in the content page. The name can be whatever you want or just the name of the table in the database.
Select connection - you have two options, Same as Joomla's or Other. If you select the first option, you will be using connection for the database that Joomla is using. Tipiclly that is MySql database. In the second option, Other, you specify connection with your own database.
Database Type - You can use mysql, mysqli, oracle, mssql
Database Host - enter localhost for local network or IP address or domain name for remote database
Database User - enter the database user that can read from the database
Password - this is the password that coresponds to already entered user
Database Name - the name of the database, e.g. Northwind

Conn

Hit the button Check and List Tables. You can se if the connection with the database is established. If not, you have to check above parameters again.

Table name in Database - in the drop-down box select the table
Columns - in this section are the columns of the selected table automatically displayed. Select the columns you want to display. If you enter new name of the column in the Column Caption fields, the column will be renamed, otherwise will be used default name from the table in the database.

Columns

Don't forget to click Save or Apply.

3. Using grid in the content page

Now when we already have configured the grid, we can put it in our content page. We can do that with the button Insert Grid, which is highlited in the picture below. If we know the grid's ID, we can just write text in curly braces with that ID.

Using

Now we Save or Apply our content page and see the result on the page. Simple, isn't it?

Since second release:

Table Settings

Column Order

Since third release:

Color picker

Advanced

Advanced section

Advanced

Since 4th release:

User specific data - create filter to show user's specific data to currently logged in user

You can create content page with access level Registered. Create grid - in advanced section under WHERE id=@user_id. Id is the name of the column where joomla ID's are stored.

navodila

New external DB handling (supported MySQL, MySQLi, Oracle, MS-SQL)

You can now test connection and list tables (if everything goes ok) with Check and List Tables button. It is possible to fetch data from localhost or even remotely if your database exists on different location (e.g. other part of the world).

shema

Some specifics for some DB' types:

for MySQL

* everything works by default

Other DBs:

Get correct libraries and copy/paste them to apache/bin folder.

Be sure that you have proper php.ini (uncomment right extensions in php.ini file).

for MS-SQL

* Database host: is the same as Server name in Microsoft SQL Server Management Studio (if you are connecting remotely write also port number)

e.g. Database host: yourdomain.com:1433

PHP manuals for MS-SQL (linux or windows)

for Oracle

* if standard port is used (e.g. 1521) do not need to specify the port in Database host

e.g. Database host: yourdomain.com

else (non-standard port 1522)

e.g. Database host: yourdomain.com:1522

PHP manuals for Oracle (linux or windows)

Measure time with 'Query took' (enable/disable in admin)

Query

Different types DB grids on the same content page

Content page

New settings

Since 5th release:

Search engine friendly (SEO)

On TableJX was made a great effort to be as much search engine friendly as possible. This functionality enables that records in a grid are indexed by search engines, like Google, Yahoo, Bing, etc... If you have some, let's say, products in a grid, search engine finds them easily. This could be a great benefit for your business. If you put a grid inside of the registered area, then it will be safe, if you don't want to show to the rest of the world what is inside of your grid.

Linkable content

Linkable content enables that you just click on a value in a grid and this action opens specific URL or specific joomla Article, Category or even Section. You can very easily show content that is specific for this value in a grid. If you are more creative, you can put even another grid in an article and show some specifics. Example: You have grid full with products. If you click on a specific product, this can open another article with pics of this product or even detailed specifications in the another TableJX grid. Further, you can create again links on specifications grid and show another article with even more detailed information. At the end you can have the whole chain of linkable grids.

Second order by

If you are not familiar with SQL or you just don't have time to create an sql view an show it in TableJX grid, you can in admin section with few clicks create a grid with data as you wish. See documentation above. In the 5th minor release, you can find new functionality, so called Second order by. In the demo, in Customers grid, you can see first order by on Customers Titel column and second order by on the Surname column.

Adjustable row height and column width

Well, really nothing specific to say here. If your data doesn't fit in your page you can adjust these two settings.

Encoding support

Doesn't matter if your language has β, Č, Ð, Ë, Õ or other letters or specific signs, TableJX will show them without any problem. If you have some specific rule to order these letters or signs, we can provide instructions how to set up databases correctly.

New layout option - Table or Card

Since version 1.5 you can find in admin area also layout option Table or Card. When you purchase and install Table JX only Table can be checked If you purchase and install Card View JX, you can choose then between Table or Card display in front-end.

Displaying sql view also for external databases

Since version 1.5 is also available to display besides SQL Tables also SQL views for other (external) databases. This brings you the ability to display any SQL query (table joins, filters, calculations, groupings, ...) or in other words, whatever you can do with SQL.

New personal file download page in Customer Area - using Table JX

We have changed file download page to more user friendlier as one before. The download page is using Table JX and it presents user specific data or files that can be downloaded or purchased.

Bug fixes

- typing mistakes

- loading image path

- vulnerabilities fixes

You can find Customer Area here.

Quick Start Guide

With Table JX a database table can be easily inserted into Joomla! article. This can be done by just a few clicks. Check also the demo page, to see how the results look like.

Three steps to display your data in an article.

1. Installation

Installation is not different from any other Joomla extension. Go to Extension Manager (Extensions > Extension Manager). Find and select the installation package from your computer by clicking the "Browse" button and click "Upload & Install" to install the extension on your site. During the installation the main component and two plugins will be installed and enabled.

Extension Manager

2. Creating a grid

Installed component should appear under the Components menu. After clicking on Tools JX in the menu an emtpty list should appear. To add a new grid hit the "New" button.

A form appears where you can define all kinds of settings. Since this is a quick guide, let's take a look at the basic settings only. If the data that you want to display is stored in the database where your Joomla site stores its data, you do not need to fill in the connection data. Among the Table Settings a dropdown list appears where you are able to pick a table from your database.

After selecting the table a list of columns from this table appears below. Select the columns that you want to display on your page and use the ">>" button. The columns move from the left to the right where you are able to set a display names for them and do some additional adjustments. If you change your mind and you want to remove one or more columns, you can select them on the right list by using checkboxes and then use the "<<" button to move them back to the Unused Columns.

Do not forget to save your settings by clicking on "Save" or "Save & Close" button. The button "To Article Manager" also stores your settings and redirects you to the Article manager.

3. Using the grid in an article

Navigate to the Article Manager (Content > Article Manager) and crate new article or open an article where you want to display the grid. Below the text editor you wil find a button "Insert Grid". Place the cursor where you want your grid to be inserted, and press Insert Grid button.

A popup window apears and you are able to select the grid that you want to insert into the current article.

A code gets inserted into an article. If you check now this article on the frontend you will see that the code was replaced with an actual grid. If you are for some reason unable to use the "Insert Grid" button, you can write this code by yourself. Just replace the number (1) with the id of the grid that you want to be inserted into the article.

Download Table JX

{loadmodule mod_custom,TableJX-product}

Key features

Key features:

Sortable grid with pagination
AJAX driven
Adjustable search form
Table selection
Column selection, renaming and sorting
Dimension and color adjustment
Remote database connection
MySQL, Oracle and Microsoft SQL database support
Many filtering options incl. dynamic according to user or article
...

See the demo page for more examples. Check out the Quick Start Guide for more information about backend.

Demo

Here you can see Table JX in action! There are a few examples where it is shown what can be achieved with Table JX. It is possible to show as many grids on the same page as you wish. Using some creativity, you can bring viewers of your page great experience and personal touch with your data. See also the Quick Start Guide to learn more about the backend interface.

Basic example

Here is an example which shows what you get by using only basic configuration. See how easy it is to look inside Northwind's data? Searching, sorting, viewing page by page. The grid can fit in any Joomla template.

{insertgrid ID = 2_uu}

Real Time Data

The table below shows real-time data about the number purchases of from our website. A database view was used for the calculation of percentage and range definition. A secondary order by option makes it possible sort countries within ranges. This example shows how easy it is to show any kind of data. If you create an article and do some access control to that article, you will be able to show table(s) only to the users who are able to view your article. You can also use a backend options to filter the data and show each user his/her data.

{insertgrid ID = 5_fn}

Links, Search and Display Options

Next example is a linkable table where the records are linked to the articles on this website. Links can point to any address. They can be either defined in your database, or you can define a link template using a special parameter, which is then replaced for every record with the data from your database. The administration interface is very intuitive. Beside that you can also see on this example how you are able to give your users some more options for viewing and searching through the data and if you want you can also display line numbers...

{insertgrid ID = 6_qf}

Styles, Advances Search Form, All kinds of options

Styles of the grid are inherited from page template, however with a simple color selector you can colorify your table to suit your mood. If you want to get more advanced there are also some CSS classes defined which you can use to grab the grid and modify its styles using CSS.

This example also represents the advanced Search Form where you can use search conditions for each field. In the backend there is an option where you can select weather to use AND or OR operator between the search constraints.

As you see also a simple performance information can be displayed at the bottom of the grid.

{insertgrid ID = 7_vg}

There is more...

There are also some more display and search options available in the backend. For example the line height and column width can be adjusted. Additional where condition can also be defined if you want to filter your data before the appear on the website. Some dynamic parameters are also available, so that it is possible to filter the data according to the logged in user, user group, or the article where the grid appears in. The backend interface is simple and very intuitive and all the options are listed clearly on one single page, so you can quickly find, access and change the options however you like. See also the Quick Start Guide to learn more about the backend.

Documentation

Quick Start Guide