Droptables documentation

 

Introduction

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

Droptables-table-extension

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.

image7

 

Then click on Browse > Upload and Install button, component, modules and plugins will be installed activated by default.

 

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).

Droptable-update

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. 

image10

 

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

image11

 

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.

image12

Note: one single login will allow you to update all the JoomUnited extensions (regarding your membership). Login won't expire unless you disconnect it.

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.

droptables-editor

 

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

droptables-lightbox-open

 

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.

table-in-editor

 

If you click on the area then on the Droptables button again the table previously added will be loaded.

 

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.

table-categories

 

Note: a default category and table is already created during component install. You can move tables and tables categories using drag'n drop.

table-move

 

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

table-name

 

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).

edit-cell

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

add-line-table

 

Or use the right click.

right-clic-add

 

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.

copy-cell

 

Note: all modifications are instant saved automatically with a message on the top right. You have an option to disable this feature from the Droptables > Options

save-table

 

 

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.

undo-action

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

html-cell

 

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.

editor-button

 

 

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

excel-import

 

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.

Excel--sheet-import-export

 

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.

 

table-format

  • 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.

row-column-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.

table-cell-tooltip

 

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.

theme-choice

If you already have data in your table and you apply a theme, all data will be removed. If you apply a theme on a new table, example data and style will be added and can be edited.

 

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

two-frame

 

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. 

sortable-and-filter-table

 

  • 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

data-filter

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.

line-freeze

 

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).

responsive-mode

 

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)

responsive-table-scroll

 

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

responsive-table-cololumn-hide

 

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.

table-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.


menu-droptables

 

 

Here is what you can see Droptables Manager from frontend.

Droptables-frontend

 

Note: To display the table manager interface with full screen on frontend, you should choose Template Style > Droptables 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.

frontend-table-edition

 

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.

user-group-acl

 

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.

padding-css

 

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

css-coordinates

 

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

css-custom-table

 

 

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.

Table don't have to be displayed with the chart in your content and you can generate several charts from a single table.

 

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

chart-table

 

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.

generate-chart

 

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.

chart-settings

 

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.

chart-titles

 

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

droptables-paramaters

 

In the options, you can define:
 

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

droptable-settings2

 

  • 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.

access-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
Super admin user will always have all edition permissions for all tables and categories.

 

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.

table-in-module

 

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.

calculate-settings

 

  • 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. 

sync-excel-choice

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).

file-browse-excel

 

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

fetch-excel-data

 

Note: Only the data will be taken from Excel, not the styles, so the global style of your table will remain untouched on import.

 

Warning: depending of your memory available on your server, you won't be able to import very large Excel files (more than 1000 rows for example).

 

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.

publish-to-web

 

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

published-link

 

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

google-sheet-data

 

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.

auto-sync-notification

 

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.

database-config

 

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.

database-selection


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

column-titleandordering


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

database-table-option


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.

database-table-generated

Note: The only difference is that themes cannot be applied on tables but you can customize all the display like in any other table.