Art Table
Art Table is a module allowing you to insert sortable, searchable tables, multiple types of data charts for easy data presentation from data sources such as HTML tables, SQL queries and CSV files.
Installation
Install the extension using standard Joomla! installation procedure (Extensions -> Install/Uninstall).
Setup
Create new module from your module manager of type Art Table. The parameters to set up Art Table are explained below.
Parameter | Type | Notes |
---|---|---|
Load jQuery library | select (yes or no) | Load jQuery javascript library in your page. Choose no to not load jQuery from Art Table. |
Table Type | select | The type of table to create. This refers to the feature set of the table. There are 4 types of tables that can be used and one Chart type which can be used to create charts such as line graphs, bar charts and more. The most popular choice for table creation seems to be the Table Sorter. Other choices here include Table Sorter, Sortable, Data Table, HTML Table and Chart. |
Data Table Theme | select | Choose from one of many themes to change the look of your table. The most popular choice amongst users is ui-lightness theme. Other choices include black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks, humanity, le-frog, mint-choc, overcast, pepper-grinder, redmond, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness and vader. |
Table Source | select | This is the data source type for the data you want to load into a table or chart. Choices here include HTML Table, SQL Query and CSV File. |
Title | string | Give your table a title. |
CSS class name | string | Give your table a CSS class name for more control of styling. |
HTML Table | string | Only use this if you have set your Table Source to HTML Table. Enter your raw html and Art Table will transform your plain, basic HTML table into a sortable and searchable table. |
SQL Query | string | Only use this if you have set your Table Source to SQL Query. Enter an SQL Query here and Art Table will run your query and transform your data into a sortable and searchable table. |
Connection String | string | Only use this if you have set your Table Source to SQL Query and you want to connect to databases other than the Joomla default database. Example: mysqli,localhost,db_name,root,pass |
CSV File | string | File path to your CSV file in your server file system. |
CSV Delimiter | string | The character you used to delimit your CSV file. This is most commonly the comma and the comma is set by default. If you wish to use a different delimiter you can change it here. |
Convert Links and Images | select | Toggle between automatically (standard link and image conversion), by pattern (follows the pattern set in Link Conversion Pattern parameter) and no which doesn't convert links and images. The way this works is if your data contains a path to an image or a URL then Art Table will make the image display using HTML img tag or in the case of a URL it will transform the URL into a clickable link. |
Link Conversion Pattern | string | |
Nofollow Links | select (yes or no) | Set your converted links to nofollow easily by setting this to yes. |
Open Links in a New Window | select (yes or no) | Set your converted links to open in a new window easily by setting this to yes. |
Show First Link | select (yes or no) | If true clicking first link will limit table view only to current row |
Search Text | string | Set the text to show inside the search input box. |
Search Input Size | string | Set the size of the search input box. |
Excel File Name | string | Indicate excel file name only if you need to generate an Excel file from your SQL query. |
Chart Type | select | Only use if your Table Type is set to Chart. Chart types include LineChart, AreaChart, BarChart, ColumnChart and PieChart. |
Chart X Axis Title | select | Set a title on the x axis of your chart. |
Chart Y Axis Title | select | Set a title on the y axis of your chart. |
Chart Width | select | Set the width of your chart. |
Chart Height | select | Set the height of your chart. |