Skip to main content
Version: 5.2 (Current)

Hide Table Columns

User-defined Hide Table Columns​

All the core components have a button that lets the user decide which columns of a table to display.

Adding Hide Table Columns to your component​

Adding this functionality to your own component is very simple and is usually a simple case of adding the code below to the tmpl file for the table.

Check if you are you using WebAssetManager​

Look for this line of code in the php block at the top of your tmpl file.

$wa = $this->document->getWebAssetManager();

Already using WebAssetManager​

Add the following line to your existing code.

useScript('table.columns')

Note the line ending. Your final code will look similar to this example

/** @var \Joomla\CMS\WebAsset\WebAssetManager $wa */
$wa = $this->document->getWebAssetManager();
$wa->useScript('table.columns')
    ->useScript('multiselect');

Not using WebAssetManager (yet)​

Add the following code anywhere in the php block at the top of your tmpl file.

/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */
$wa = $this->document->getWebAssetManager();
$wa->useScript('table.columns');

Notes​

Your table will need to be a valid html table with a <thead> and each column a <th>.

Your table can not include <tfoot> or <colgroup> or <colspan> elements. These will cause the table to display empty columns at the end of the row and will break any classes or styles applied in the <colgroup>. (Tracking Issue)

If you have multiple tables on the page and you want to prevent the script loading on one of those tables then you can add the class "columns-order-ignore" to the table.