Droptables documentation

Introduction

Droptables is a Joomla extension used to manages HTML tables in Joomla with a spreadsheet like interface.

Main features:

• Manage tables like in a spreadsheet
• 6 themes included
• Fully managed from any editor
• Excel and Google Sheets sync
• AJAX automatic saving
•  Sortable data on frontend
• Cell, line, column style editor
• Copy cell with drag'n drop
• Copy the full table in one click
• HTML cells format
• Advanced CSS code editor

I. DROPTABLES INSTALL

1.1 Install

Our component is Joomla 3.x compatible. All the features and 3rd party integrations are included in all memberships.
In order to install our component you have to download the extension .zip file and use standard Joomla installer.

1.2 Update & automatic updater

In order to update the extension you can install a new version over the old one by downloading the ZIP file from JoomUnited or use the automatic updater (recommended).

The automatic updater, which push the update notification, is embedded in the Joomla extension you've installed. So you'll get notified like any other extension in the dashboard or using the menu: Extension > Manage > Update menu.

Login to your account to update

You need to login to your JoomUnited account to update all your JoomUnited Joomla extensions. In order to login access the main configuration of the component then click on the Live update tab. At the bottom, you'll find a login button. 

Enter your JoomUnited credentials, the same you use to login here @ www.joomunited.com

The button will turn orange, congrats! you can now update all the JoomUnited extensions on this website! If your membership is expired you'll get a renew link and a text that explain that.

​

II. MANAGE TABLES

2.1 Manage tables from article or component

When Droptables is installed you have a component entry, menu Components > Droptables and an editor button that is displayed bellow your editor. Click on it to open the main Droptables view.

Table manager interface is opened in a lightbox from the editor:

When you want to insert a table in your editor use the top right button Insert this table to put it in your article. Then, the table will be materialized with a grey area and an Excel like icon.

2.2 Manage tables and categories

Tables are classified into categories. You can have as much tables as you want inside categories. In order to create a table category, click on New table category on the top center. To create a new table just click on the Create table.

The category can be managed by putting your mouse on it, you’ll be able to edit the name, copy or delete the table. 

2.3 Table edition

To add data in tables you have to act like you are in a spreadsheat. Double click on a cell will bring you the possibility to update content, a single click to select one/some cells (and to apply style for example).

To add line or columns, click on the + on the table border:

Or use the right click.

To copy cells you can use CTRL+C / CTRL+V or you can also put your mouse on the bottom right corner of the cell and bring it into the direction you want.

From the right click menu you can undo the latest modifications, all the latest ones since you've reloaded the page. Droptables keeps a backup of the modification you’ve done and is able to restore it.

Cells can also be merged. Select 2 cells or more then do a right click. A menu will allows you to do the merging.

2.4 Advanced content edition

We’ve recently added a new feature in the edition interface. You can now add HTML content with a WYSIWYG editor inside each cell. Select a cell, on the right part, go to the tab Format > HTML

Now when you edit the cell, you’ll have HTML editor inside. It also include all the editor content button, here I used the image button for example. Editor buttons available are configurable as an option.

2.5 Excel and spreadsheet import/export

You can import and export spreadsheets in Droptables by using our dedicated tool. It has to be activated from the configuration: Components > Droptables > Options

The tables can be imported from Excel or Open Office. The format will be detected automatically and imported. Note that only the first Excel page will be imported. The export can be done in Excel 2003 or 2007 format.

You can also import or export table data only or table data + styles. The import data only is pretty handy to preserve your layout on import.

III. STYLING THE TABLES

3.1 Format

The format tab is available at the right of your screen by default. It contains different styling parameters.

• Cell type: default or HTML (with editor). The default type allows you to make calculation with it the HTML inserting HTML content like images.
• The cell background is about defining background color of course
• Border and font options can be applied on single or multiple cells
• The row and column width/height can be defined in pixels. Select column or row anywhere in the table and validate size.
•  

A tooltip on cell mouse hover is also available (needs to be activated from component options). On click on the tooltip button you can edit the content visible on cell mouse hover on frontend.

3.2 Theme and sorting options

On the table tab, still on the right part, you have a thumbnail theme chooser. Just click on a theme to apply it. We highly recommend to apply themes on fresh tables, it’s really easier to change data then.

Still in the table right column tab, the 2 frame parameter is here to define the color of alternative lines (line1, line2, line1, line2...)

The sortable parameter allows you to make AJAX data sorting on frontend. Note that if you enable the filter tool, a data sort tool will be enabled by default. 

• Use sortable table: Yes/No
• Align table: Center/Right/Left/None
• Responsive Type: Scrolling/Hiding Cols
• Enable filters: Yes/No
• Enable pagination: Yes/No
• Number rows per page: 10, 20, ...
• Sort a cloumn by default: select cloumn A, B or C, ...
• Order sort a column by default: ASC/DESC

Data filter and sort on frontend

The table align is about align the div that contain the whole table, center all the table for example. The column and line freezing options will freeze the selection and enable a scroll on the rest.

Make my tables responsive or use the scroll on small devices?

Droptables handle the responsive design with a priority tool, as an option. By default the responsive feature is disabled, there will be an overflow (witch is working great on mobile though).

The responsive mode is advanced, you can define a priority for hiding columns on mobile sizes. When columns are hidden, a mobile menu with check box will be displayed to force the display/hide of columns. 
The column size is fixed during the table edition. If the size of all the columns is too large for the container you'll have an overflow and you'll be able to easily scroll on mobile devices.

Table with a scroll (better for a small amount of columns)

Table with column hidden (better for a big amount of columns)

A cell hightlight is also available as an option. You can enable this feature in the configuration. It is disabled by default. You can adjust color and opacity of highlighting.

3.3 ACL and Frontend administration

It is possible to manage your tables from the Joomla frontend. From the Joomla menu manager, add a New Menu item and select as type Manage Tables and select Droptables frontend as template.

Here is what you can see Droptables Manager from frontend.

You can use the Joomla User Group ACL to control the table edition actions. First, to setup who is allowed to view tables you need to enable Enable table access (ACL) feature in Droptables configuration.

Plus, you can control the table frontend visibity for each table from the table settings (More tab). Pickup a Joomla user group to allow a group to view the table on frontend.

3.4 Custom CSS

Let’s go one step beyond. If you’re a webdesigner with CSS edition skills, you’ll be able to add css from the right More tab.

You can add padding and border radius on cell.

Cells, line, columns have coordinates to identify each one and apply custom css on it. R is row, C is column. Here it's row 1 (r1), column 4 (c4) = dtr1 dtc4

The CSS code is colored using code mirror. The css code can be less code, it works too!

IV. CHART FROM TABLES

4.1 Create a table with data

You can generate charts from table data, inside your content. First create a table with data to generate chart.

Then make you selection in order to generate chart. Here, all the table is selected.

Then click on add a new chart. A chart will be generated, respecting the data range you’ve selected. On the right part you can select the chart type.

The graph will be dynamically updated regarding the data change in the table, you don't need to regenerate it.

4.2 Graph parameters

Once your graph is added you have some options on the right column.

The Switch row/column is only available is you have selected only numbers in the dataset. You’ll be allowed to switch data from columns to row.

The Use first row/column as labels parameter allows you to add label to your graph.

Then you have options to set width/height, align, color of your chart.

V. DROPTABLES PARAMETERS & TRICKS

5.1 Parameters

To access the Droptables global parameters, go in Component > Droptables > Options

In the options, you can define:
 

• The table categories accordion auto-close
• Enable the Excel import/export
• Choose the export format

• Enable the tooltip on cells
• Enable the auto save in AJAX, otherwise you'll have a Save Modifications button
• Enable table access: Enable table access limitation (ACL). Allows you to limit table editon permission based on Joomla user groups
• Cell highlighting: Activate a color on cell mouse over to see on a first sight a cell content (Line Only/Column Only/Both)
• Highlighting color: The cell highlighting hover color
• Highlight font color: The cell highlighting font hover color
• Highlighting opacity: The cell highlighting opacity level
• Enable hidden right panel: Yes/No
• Table sync periodicity: Table automatic synchronization delay for Excel file or Google Sheets
• Enable database table: Yes/No

5.2 ACL permission

A Joomla ACL integration is available. You can now restrict access to action or table for table editors. This restrictions applies on all the tables.

For example if you want an administrator user to access and edit only their own tables, set “edit” to denied and edit own to “Allowed”. You can also restrict:

• The global configuration
• The interface access
• The tables creation
• The tables deletion
• Edition/own edition

5.3 Load tables in a HTML custom module

Droptables is built to be used in every WYSIWYG editor field, you just need to have the content plugin to be called. Most of the time it’s activated by default.

If it’s not the case, like in the Joomla HTML custom module, you need to activate it like above.

In the option tab you need to set the option Prepare content to: Yes

5.4 Calculation

You have a basic calculation implementation in Droptables. Elements available are:

• SUM, COUNT, CONCAT
• MIN, MAX, AVG  
• DATE, DAY, DAYS, DAYS360
• OR, XOR, AND

To make a sum, type like this in a cell (UPPERCASE is mandatory): =SUM(A1;B2) or =SUM(A1:B2)

And you can configure the symbol for the cells calculation on number, money or date.

• Date formats: Set date format for date calculations
• Symbol position: In order to make cell calculation on money, define the default position of the currency symbol
• Currency symbol(s): In order to make cell calculation on money, define the default currency symbol
• Decimal symbol: In order to make cell calculation, define the default decimal symbol
• Decimal count: Number of digit after the decimal symbol
• Thousand symbol: In order to make cell calculation, define the default thousand symbol

VI. EXCEL AND GOOGLE SHEETS SYNC

6.1 Excel file synchronization

It is possible to run a synchronization between a table you've created and an Excel file located on your server (anywhere). From the right tab named "Table", at the bottom you got a block to link an Excel file to the table. 

On click on the Browse button, you'll be able to select an Excel anywhere on your server, here it's a file uploaded through the media manager (/images folder).

Once your Excel file is linked to the table, you can hit the Fetch data button to import data from the Excel file.

6.2 Synchronization with Google Sheets

Droptables offers a Google Sheets synchronization possibility. Your Google Sheets need to be "published to the web" to be synchronized. First, open your sheet from Google Drive and publish it as web page using the File menu.

Then, you will get access to Google Sheets file link, copy this link.

And paste it into Droptables “Table” tab. You're done! you can now fetch data from your Google Sheets.

6.3 Automatic Excel and Google Sheets sync

Above the file link you can also activate an automatic data synchronization. Droptables will fetch the data automatically at a regular interval.

Once it's activated a notification is displayed after the table title.

The synchronization delay can be set in the Droptables configuration.

VII. TABLES FROM DATABASE

Droptables allows you create tables from your database tables. From the settings of the component, you should Enable database table.

Back to dashboard, firstly, you choose Table from database category and then click Create table , then all tables in your database will be listed below. Next, you'll be able to select tables and columns from your database. By hitting control you can select several tables, columns.

On column selection you can define a custom title and a default order for your data in the table, when displayed on public side.

Then you got some options and filter to apply to your tables:

• A pagination default level (to be used with a large amount of data)
• Number of rows for the pagination
• Apply some filter to your data ie. a column can be equal, different... from a defined value
• The possibility to group some values in the columns

Finally, you can preview and generate your table like any other table. When your table is generated you will still have access to the table Database source and you can for example add a column in your table.