Installation

VJ Responsive Table is installed using standard Joomla! installation procedure in Joomla! back-end: Extensions -> Extension Manager -> Upload Package File.

VJ Responsive Table module can be configured in Extensions -> Module Manager -> VJ Responsive Table and can be used to place responsive table in module positions or articles.


Module Usage


Displaying module

Module Class Suffix indicates specifies CSS class to be applied to this module instance.
Module Assignment in Menu Assignment tab allows to assign module to the pages to be displayed on.
Position in Details tab allows to set module position to render module in.
To place the module in an article assign some unique position to it like pos1, publish module and assign it to all pages. Then place {loadposition pos1} code into article to show the module in it.


It's possible to create many instances of the module in Module Manager by copying it or creating new one.



Module options

Load jQuery option specifies whether jQuery javascript library should be loaded or not. If you use other jQuery instance on the site please turn this off.
Table Source option specifies where table data should come from: HTML table (table constructed in 'HTML Table' text area, SQL query (query indicated in 'SQL Query' field), CSV file (path indicated in 'CSV file' field)).
Theme drop-down allows to choose the theme table will use.
Title - title to display above the table.
CSS class name - CSS class name to apply to the table.
Which columns to hide on mobiles - comma-separated column numbers to hide on mobile screens (small screens). When viewed on mobile screen or - on large screens - when browser window is resized to be small - first row will become toggler column and columns indicated in this field will be hidden and can be displayed when toggler column in expaneded. Example: 1,3
Which columns to hide on tablets - comma-separated column numbers to hide on tablet screens (medium screens). When viewed on tablet screen or - on large screens - when browser window is resized to be medium - first row will become toggler column and columns indicated in this field will be hidden and can be displayed when toggler column in expaneded. Example: 2,4




When constructing tables form CSV or SQL, Which columns to hide on mobiles and Which columns to hide on tablets columns are hidden.
If you use custom HTML table please add data-hide attribute to TH elements (except first TH):

data-hide="phone" - will be hidden on small screens only
data-hide="tablet" - will be hidden on medium-sized screens
data-hide="all" - will be always hidden


Which columns to hide always - comma-separated column numbers to hide always. Example: 2,4
Column types - it's possible to explicitly specify cilumn types.
Pagination, Rows per page - turn pagination on/off, set number of rows per page.
CSS styles - custom CSS styles to add to this module.
Text above table, Text below table - specify formatted text to show above and below the table.
Phone breakpoint, Tablet breakpoint - browser window width considered as phone and tablet screens respectively. These control the size of window browser when indicated columns should be displayed/hidden.
HTML Table - HTML table to use when Table Source option is set to 'HTML Table'.
SQL Query - SQL Query to use when Table Source option is set to 'SQL Query'. Example: select id, title from mytable.

Connection string - When using database other than Joomla! database it's needed to indicate connection string. If not specified, Joomla! database is used. If using different database, connectionString should be specified in format: database_type,host,database_name,user,password. Supported database types: fbsql, gladius, maxdb, msql, mssql, mssqlpro, mysql, mysqli, mysqlt, odbc, postgres, postgres64, postgres7, postgres8, sqlite, sqlitepro, sybase, sybase_ace. To work with some databasee appropriate php extension may need to be installed and enabled.

CSV file - CSV file to use when Table Source option is set to 'CSV file'. Example: docs/file.csv.
CSV delimiter - Delimiter to use with CSV file. Default: ,
Inline header CSS styles, Inline cell CSS styles - CSS styles to apply to headers or columns respectively. Style for each header/cell should be indicates on a new line.


Displaying module on front-end

Module is displayed on front-end using specified module position and chosen menu items.