Droptables: Styling Table

1. Format tab

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.




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.




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




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




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.




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.




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!