ARI Data Tables module converts HTML tables into powerful and functional tables with possibilities to sort, filter and paging data.
It can also create different charts based on data from tables. The extension can load data from SQL databases and CSV files.
Main features:
- User friendly interface;
- Can load data from Joomla! database or from external database. Many different database types is supported;
- Can load data from CSV files;
- Provides a variety of widgets to display data: ARI Data Table, ARI Table Sorter, ARI Data Visualiser, ARI MooTable, ARI GChart, ARI Tiny Table;
- Provide possibility to render plain HTML table based on data from CSV file or database. Display of this table can be customized with help CSS;
- Adds filter, sorting, paging functionality to table;
- Can recognize links and converts them to HTML representation;
- Creates charts based on data from table;
- Multiple instances of the module can be used on one page with different settings;
- Highly customizable;
- Works in all modern browsers;
- Can display module in Joomla! articles with help ARI Data Tables plugin.
How to use?
At first choose where you data is located in 'Choose source type' drop-down. The extension can load data from SQL databases and fro, CSV files.
-
SQL data
If you want to load data from Joomla! database, choose '- Joomla! database -' in 'Choose DB type' dropdown. If you need to load data from external
database, choose 'External database' in the drop-down and fill connection's parameters. After this specify SQL query in 'SQL query'. This query
will be used for loading data from database.
-
CSV data
Specify path to CSV file in 'Path to CSV file' text box. For example if your CSV file is located by the following path: [joomla_dir]/data/my_file.csv, fill the field with the next value data/my_file.csv.
If your CSV file is saved in non UTF8 encoding, specify file encoding in 'File encoding' text box or save the file in UTF-8 encoding.
The next step to choose what widget you want to use for showing data. The following widgets can be used:
-
HTML Table
If this type is chosen, the module will display data in plain HTML table. It can be useful, if you want to display simple HTML table based on data from database
or CSV file and add some CSS styles to this table. If 'Advanced styling' parameter is enabled, the following CSS classed will be added:
- ari-tbl-row-{rowIndex} to each row, where {rowIndex} is zero-based row index;
- ari-tbl-col-{colIndex} to each column, where {colIndex} is zero-based column index.
Additional column CSS classed can also be specified in 'Columns settings' parameter.
-
ARI Data Table
This is powerful table widget which is used jQuery javascript library and brings sorting, paging and filtering functionality to plain HTML table with . This widget can use jQuery UI Theme and the module provides possibility to add new theme.
-
ARI Table Sorter
This is a table widget which adds sorting and paging functionality to plain HTML table. It provides multi-sorting, for this press Shift button and click by additional sorting field(s).
-
ARI Data Visualizer
This widget creates various charts. It can be useful for creating charts from CSV file. Sample of CSV file you can find here.
-
ARI GChart
This widget creates various charts using Google Visualization API. It can be useful for creating charts from CSV file. Sample of CSV file you can find here.
-
ARI MooTable
This is a table widget which uses MooTools javascript library and adds sorting, filtering and scrolling functionality to plain HTML table.
-
ARI Tiny Table
This is a lightweight table widget which provides sorting and paging functionality. This widget doesn't use any javascript libraries and weights only 2.5 KB.
How to configure table columns?
Use 'Columns settings' parameter for this purpose. At first specify column ID or index (column index is zero-based) in 'ID' column that indicate what column you want to configure. After this the following parameters can be defined:
- Alias this value will be shown on frontend instead of column ID;
- Align is used that indicate column align;
- Width is used that indicate column width. Use values in the next formats: 50px, 90%;
- CSS Class is used that indicate CSS class for column. I can be useful if you want to add specific CSS styles to this column;
- Format is used that format column value. The next predefined values can be used:
- {$value} is value of current column;
- {$columns:[column_name]} value of specific column from a row where [column_name] is necessary column name;
It can be useful if you want to build link using values from different columns in a row. For example, if row contains the following columns 'ProductId' and 'ProductName', you can type the following that create link to product page: <a href="index.php?option=com_test&product_id={$columns:ProductId}">{$value}</a> ;
- Recognize links is used if a column contains links and you want to convert them to HTML representation.
How to create and add new jQuery UI theme?
Open ThemeRoller application, create your own theme, configure and download it. After this open [joomla_dir]/modules/mod_aridatatables/includes/assets/jui/ folder on your server,
create new folder for your new theme and copy file from 'css/custom-theme/' folder from ThemeRoller archive. At the end rename CSS file to styles.css. That's all.
If you have any questions, feel free to ask them on our forum.