Droptables: Styling Table

1. Format in table

On the toolbar, you can set style for cell such as: font, font size, text style, background color for cell, text color, cell horizontal and vertical alignment,... It can be applied to a single cell or multi cells.

The row height and column width can be defined in pixels. Please go to Menu Format > Apply column/line size, then select Resize column / Resize row. On the popup window, you can select range and set px for columns or rows. Click on Done button to finish.

2. Theme and sorting options

In each table, you can find Theme selection option at Menu Theme. Just click on a theme to apply it.

On the same Menu Theme > Alternate colors, the "Automatic styling" feature helps you color the line on your table with Header styling and Footer styling options. You can select the template styles or make your own at plugin settings.

The sortable parameter allows you to make AJAX data sorting on frontend. You can see on Menu Format > Sort.

The table alignment is about aligning the div that contains the whole table, center all the table for example. You can find at Menu Format > Table align.

A cell highlight is also available as an option. You can enable Line, Column or Both options in the configuration. It is disabled by default. You can adjust color and opacity of highlighting.

3. Add tooltip on cells

A tooltip on cell mouse hover is also available (needs to be activated from component options). On each cell on a table, you can see the Tooltip option when doing a right click on it.

You can set the tooltip width in pixels. It will bring you to a tooltip with an editor to edit.

Add content and save, you’re done, the tooltip will be displayed on public side on mouse hover.

4. 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 - Default as a 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 should go to User Roles tab in Droptables configuration.

You can set owner for a table from Menu Table > Table access.

5. Row and column freezing

Column freezing

Column freezing is available in the Menu Format > Responsive options. You can freeze up to 5 columns. It's counted from the first col.

To make col/row freezing there’s an additional option that lets you fix the height of the table (because your table container may have an infinite height).

When you have chosen the column to freeze, you’ll be able to scroll on your table and always display the fixed column.

Row freezing

You can find it at Menu Format > Table header, from here you can turn on option and set rows to freeze (up to 5 rows).

If you want to set the table height, please turn back to Responsive options.

Then the first row will be frozen on frontend following the setting.

6. Filtering column data

A filtering option is available at Menu Format > Filters. You can activate it by clicking to enable public data filtering fields.

Example of filters:

7. Cell padding and border radius

You can find the border icon on the toolbar that helps adjust padding and border radius on the cell.

8. Custom CSS

Let’s go one step beyond. If you’re a web designer with CSS edition skills, you’ll be able to add CSS at Menu Format > Custom CSS. 

Cells, rows, columns have coordinates to identify each one and apply custom CSS to 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!

9. Responsive Joomla Tables

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

Hiding Cols

Droptables handle the responsive design with a priority tool, as an option. By default, the responsive feature is disabled, there will be an overflow (which is working great on mobile though). In order to use Hiding Cols option, you should go to Menu Format > Responsive options.

The responsive mode is advanced, you can define a priority for hiding columns on mobile sizes. When columns are hidden, a mobile menu with a checkbox 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)

Repeated header

This is another option if you want to insert a table in a small area on your site. You should navigate to Menu Format > Responsive options.  Then select Responsive Type > Repeated header.

There will be options to customize following your demand:

• Responsive breakpoint (px): Select a breakpoint value in pixel to define when the table will toggle to this responsive mode
• Responsive max-height (px): When the responsive mode is activated, depending on the breakpoint value, define a max-height to avoid a very-long table
• Responsive mode styling: Apply a default styling for this responsive mode or use the table colors

After that, you can see how the table will look like on frontend.

10. Download table

In order to share your table with the public, navigate to Menu Table, and tick on the Export Excel button option. The file type will be  *.xlsx when downloading on frontend.

11. Pagination

You can find this feature at Menu Format > Pagination in each table edition. Use the toggle button to enable and pick the number of rows to display on a page. 

12. Format for single cells 

You can set format: Date time, Currencies, Number for single-cell(s) in Droptables. First, you should select a/multi cell(s). Then go to Menu Format > Date time.

After that, the Currencies and Number can be done in the same way.

13. Print table on frontend

Sometimes, you need to print your table. So in order to show Print button on the frontend, first, you should navigate to Menu Table and tick on Print button option.