Make it possible to hide columns (closes #1058)

Hide new overview page columns by default

changelog/60_UNRELEASED_2020-xx-xx.md

@@ -94,6 +94,35 @@
 - New Userfield type "File" to attach any file, will be rendered as a link to the file in tables (if enabled) (thanks @fipwmaqzufheoxq92ebc)
 - New Userfield type "Picture" to attach a picture, the picture will be rendered (small) in tables (if enabled) (thanks @fipwmaqzufheoxq92ebc)
 
+### General & other improvements/fixes
+- UI refresh / style improvements (thanks @zsarnett for the idea and initial work on this)
+- Improved mobile views (thanks @4lloyd for the idea and initial work on this)
+  - The buttons on the top of each page and the filter row is now collapsed (use the ellipsis/filter button to show them, this also superseded the shopping list compact view)
+  - Tables are horizontally scrollable (instead of collapsing columns which don't fit)
+- Table columns can now be shown/hidden (new little eye icon on the top left corner on each table)
+  - There are also new columns on some pages, hidden by default
+- Dialogs are now used everywhere where appropriate instead of jumping between pages (for exampel when adding/editing shopping list items)
+- Added a "Clear filter"-button on all pages (with filters) to quickly reset applied filters
+- The data path (previously fixed to the `data` folder) is now configurable, making it possible to run multiple grocy instances from the same directory (with different `config.php` files / different database, etc.) (thanks @fgrsnau)
+  - Via an environment variable `GROCY_DATAPATH` (higher priority)
+  - Via an FastCGI parameter `GROCY_DATAPATH` (lower priority)
+- The language can now be set per user (see the new user settings page / top right corner settings menu) (thanks @fipwmaqzufheoxq92ebc)
+  - Additionally, the language is now also auto-guessed based on the browser locale (HTTP-Header `Accept-Language`)
+  - The `config.php` option `CULTURE` was renamed to `DEFAULT_LOCALE`
+  - So the used language is based on (in that order)
+    - The user setting
+    - If not set, then based on browser locale
+    - If no matching localizaton was found, `DEFAULT_LOCALE` from `config.php` is used
+- Performance improvements (page loading time) of the stock overview page (thanks @fipwmaqzufheoxq92ebc)
+- The prerequisites checker now also checks for the minimum required SQLite version (thanks @Forceu)
+- Replaced (again, added before in v2.7.0, then reverted in v2.7.1 due to some problems) [QuaggaJS](https://github.com/serratus/quaggaJS) (seems to be unmaintained) by [Quagga2](https://github.com/ericblade/quagga2)
+- More `config.php` settings (see the section `Component configuration for Quagga2`) to tweak Quagga2 (this is the component used for device camera for barcode scanning) (thanks @andrelam)
+- Some localization string fixes (thanks @duckfullstop)
+- Fixed that XSS / HTML injection was possible through some user input fields (low severity / not really a problem as this could not be abused unauthenticated)
+- New translations: (thanks all the translators)
+  - Greek (demo available at https://el.demo.grocy.info)
+  - Korean (demo available at https://ko.demo.grocy.info)
+
 ### API improvements/fixes
 - Breaking changes:
   - All prices are now related to the products **stock** quantity unit (instead of the purchase QU)
@@ -133,30 +162,3 @@
 - Fixed that the endpoint `/stock/consume` returned the response code `200` and an empty response body when `stock_entry_id` was set (consuming a specific stock entry) but invalid (now returns the response code `400`) (thanks @fipwmaqzufheoxq92ebc)
 - Endpoint `/calendar/ical`: Fixed that "Track date only"-chores were always set to happen at 12am (are treated as all-day events now)
 - Fixed (again) that CORS was broken
-
-### General & other improvements/fixes
-- UI refresh / style improvements (thanks @zsarnett for the idea and initial work on this)
-- Improved mobile views (thanks @4lloyd for the idea and initial work on this)
-  - The buttons on the top of each page and the filter row is now collapsed (use the ellipsis/filter button to show them, this also superseded the shopping list compact view)
-  - Tables are horizontally scrollable (instead of collapsing columns which don't fit)
-- Dialogs are now used everywhere where appropriate instead of jumping between pages (for exampel when adding/editing shopping list items)
-- Added a "Clear filter"-button on all pages (with filters) to quickly reset applied filters
-- The data path (previously fixed to the `data` folder) is now configurable, making it possible to run multiple grocy instances from the same directory (with different `config.php` files / different database, etc.) (thanks @fgrsnau)
-  - Via an environment variable `GROCY_DATAPATH` (higher priority)
-  - Via an FastCGI parameter `GROCY_DATAPATH` (lower priority)
-- The language can now be set per user (see the new user settings page / top right corner settings menu) (thanks @fipwmaqzufheoxq92ebc)
-  - Additionally, the language is now also auto-guessed based on the browser locale (HTTP-Header `Accept-Language`)
-  - The `config.php` option `CULTURE` was renamed to `DEFAULT_LOCALE`
-  - So the used language is based on (in that order)
-    - The user setting
-    - If not set, then based on browser locale
-    - If no matching localizaton was found, `DEFAULT_LOCALE` from `config.php` is used
-- Performance improvements (page loading time) of the stock overview page (thanks @fipwmaqzufheoxq92ebc)
-- The prerequisites checker now also checks for the minimum required SQLite version (thanks @Forceu)
-- Replaced (again, added before in v2.7.0, then reverted in v2.7.1 due to some problems) [QuaggaJS](https://github.com/serratus/quaggaJS) (seems to be unmaintained) by [Quagga2](https://github.com/ericblade/quagga2)
-- More `config.php` settings (see the section `Component configuration for Quagga2`) to tweak Quagga2 (this is the component used for device camera for barcode scanning) (thanks @andrelam)
-- Some localization string fixes (thanks @duckfullstop)
-- Fixed that XSS / HTML injection was possible through some user input fields (low severity / not really a problem as this could not be abused unauthenticated)
-- New translations: (thanks all the translators)
-  - Greek (demo available at https://el.demo.grocy.info)
-  - Korean (demo available at https://ko.demo.grocy.info)

localization/strings.pot

@@ -1942,3 +1942,6 @@ msgstr ""
 
 msgid "Price per stock unit"
 msgstr ""
+
+msgid "Hide/view columns"
+msgstr ""

public/js/grocy.js

@@ -661,6 +661,16 @@ $.extend(true, $.fn.dataTable.defaults, {
 		{
 			column.search.search = "";
 		});
+	},
+	'stateSaveCallback': function(settings, data)
+	{
+		// TODO: Save/load this server side
+		localStorage.setItem('datatables_state_' + settings.sTableId, JSON.stringify(data));
+	},
+	'stateLoadCallback': function(settings, data)
+	{
+		// TODO: Save/load this server side
+		return JSON.parse(localStorage.getItem('datatables_state_' + settings.sTableId));
 	}
 });
 
@@ -751,3 +761,67 @@ $(window).on("message", function(e)
 		window.location.reload();
 	}
 });
+
+$("#change-table-columns-visibility").on("click", function(e)
+{
+	var dataTableSelector = $(e.currentTarget).attr("data-table-selector");
+	var dataTable = $(dataTableSelector).DataTable();
+
+	var columnCheckBoxesHtml = "";
+	dataTable.columns().every(function()
+	{
+		var index = this.index();
+		var title = $(this.header()).text();
+		var visible = this.visible();
+
+		if (title.isEmpty() || title.startsWith("Hidden"))
+		{
+			return;
+		}
+
+		var checked = "checked";
+		if (!visible)
+		{
+			checked = "";
+		}
+
+		columnCheckBoxesHtml += '<div class="form-group"> \
+			<div class="custom-control custom-checkbox"> \
+				<input ' + checked + ' class="form-check-input custom-control-input change-table-columns-visibility-toggle" \
+					type="checkbox" \
+					id="column-' + index.toString() + '" \
+					data-table-selector="' + dataTableSelector + '" \
+					data-column-index="' + index.toString() + '" \
+					value="1"> \
+				<label class="form-check-label custom-control-label" \
+					for="column-' + index.toString() + '">' + title + ' \
+				</label> \
+			</div> \
+		</div>'
+	});
+
+	bootbox.dialog({
+		message: '<div class="text-center"><h5>' + __t('Hide/view columns') + '</h5><hr><div class="text-left">' + columnCheckBoxesHtml + '</div></div>',
+		size: 'small',
+		backdrop: true,
+		closeButton: false,
+		buttons: {
+			cancel: {
+				label: __t('OK'),
+				className: 'btn-primary responsive-button',
+				callback: function()
+				{
+					bootbox.hideAll();
+				}
+			}
+		}
+	});
+});
+$(document).on("click", ".change-table-columns-visibility-toggle", function()
+{
+	var dataTableSelector = $(this).attr("data-table-selector");
+	var columnIndex = $(this).attr("data-column-index");
+	var dataTable = $(dataTableSelector).DataTable();
+
+	dataTable.columns(columnIndex).visible(this.checked);
+});

public/viewjs/stockoverview.js

@@ -7,7 +7,9 @@
 		{ 'searchable': false, "targets": 0 },
 		{ 'visible': false, 'targets': 6 },
 		{ 'visible': false, 'targets': 7 },
-		{ 'visible': false, 'targets': 8 }
+		{ 'visible': false, 'targets': 8 },
+		{ 'visible': false, 'targets': 2 },
+		{ 'visible': false, 'targets': 4 }
 	],
 });
 

views/batteries.blade.php

@@ -70,7 +70,13 @@
 			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
-					<th class="border-right"></th>
+					<th class="border-right"><a id="change-table-columns-visibility"
+							class="text-muted"
+							data-toggle="tooltip"
+							title="{{ $__t('Hide/view columns') }}"
+							data-table-selector="#batteries-table"
+							href="#"><i class="fas fa-eye"></i></a>
+					</th>
 					<th>{{ $__t('Name') }}</th>
 					<th>{{ $__t('Description') }}</th>
 					<th>{{ $__t('Used in') }}</th>

views/batteriesjournal.blade.php

@@ -65,7 +65,13 @@
 			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
-					<th class="border-right"></th>
+					<th class="border-right"><a id="change-table-columns-visibility"
+							class="text-muted"
+							data-toggle="tooltip"
+							title="{{ $__t('Hide/view columns') }}"
+							data-table-selector="#batteries-journal-table"
+							href="#"><i class="fas fa-eye"></i></a>
+					</th>
 					<th>{{ $__t('Battery') }}</th>
 					<th>{{ $__t('Tracked time') }}</th>
 				</tr>

views/batteriesoverview.blade.php

@@ -87,7 +87,13 @@
 			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
-					<th class="border-right"></th>
+					<th class="border-right"><a id="change-table-columns-visibility"
+							class="text-muted"
+							data-toggle="tooltip"
+							title="{{ $__t('Hide/view columns') }}"
+							data-table-selector="#batteries-overview-table"
+							href="#"><i class="fas fa-eye"></i></a>
+					</th>
 					<th>{{ $__t('Battery') }}</th>
 					<th>{{ $__t('Used in') }}</th>
 					<th>{{ $__t('Last charged') }}</th>

views/chores.blade.php

@@ -70,7 +70,13 @@
 			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
-					<th class="border-right"></th>
+					<th class="border-right"><a id="change-table-columns-visibility"
+							class="text-muted"
+							data-toggle="tooltip"
+							title="{{ $__t('Hide/view columns') }}"
+							data-table-selector="#chores-table"
+							href="#"><i class="fas fa-eye"></i></a>
+					</th>
 					<th>{{ $__t('Name') }}</th>
 					<th>{{ $__t('Period type') }}</th>
 					<th>{{ $__t('Description') }}</th>

views/choresjournal.blade.php

@@ -65,7 +65,13 @@
 			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
-					<th class="border-right"></th>
+					<th class="border-right"><a id="change-table-columns-visibility"
+							class="text-muted"
+							data-toggle="tooltip"
+							title="{{ $__t('Hide/view columns') }}"
+							data-table-selector="#chores-journal-table"
+							href="#"><i class="fas fa-eye"></i></a>
+					</th>
 					<th>{{ $__t('Chore') }}</th>
 					<th>{{ $__t('Tracked time') }}</th>
 					@if(GROCY_FEATURE_FLAG_CHORES_ASSIGNMENTS)

views/choresoverview.blade.php

@@ -109,7 +109,13 @@
 			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
-					<th class="border-right"></th>
+					<th class="border-right"><a id="change-table-columns-visibility"
+							class="text-muted"
+							data-toggle="tooltip"
+							title="{{ $__t('Hide/view columns') }}"
+							data-table-selector="#chores-overview-table"
+							href="#"><i class="fas fa-eye"></i></a>
+					</th>
 					<th>{{ $__t('Chore') }}</th>
 					<th>{{ $__t('Next estimated tracking') }}</th>
 					<th>{{ $__t('Last tracked') }}</th>

views/equipment.blade.php

@@ -61,7 +61,13 @@
 			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
-					<th class="border-right"></th>
+					<th class="border-right"><a id="change-table-columns-visibility"
+							class="text-muted"
+							data-toggle="tooltip"
+							title="{{ $__t('Hide/view columns') }}"
+							data-table-selector="#equipment-table"
+							href="#"><i class="fas fa-eye"></i></a>
+					</th>
 					<th>{{ $__t('Name') }}</th>
 
 					@include('components.userfields_thead', array(

views/locations.blade.php

@@ -70,7 +70,13 @@
 			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
-					<th class="border-right"></th>
+					<th class="border-right"><a id="change-table-columns-visibility"
+							class="text-muted"
+							data-toggle="tooltip"
+							title="{{ $__t('Hide/view columns') }}"
+							data-table-selector="#locations-table"
+							href="#"><i class="fas fa-eye"></i></a>
+					</th>
 					<th>{{ $__t('Name') }}</th>
 					<th>{{ $__t('Description') }}</th>
 

views/manageapikeys.blade.php

@@ -75,7 +75,13 @@
 			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
-					<th class="border-right"></th>
+					<th class="border-right"><a id="change-table-columns-visibility"
+							class="text-muted"
+							data-toggle="tooltip"
+							title="{{ $__t('Hide/view columns') }}"
+							data-table-selector="#apikeys-table"
+							href="#"><i class="fas fa-eye"></i></a>
+					</th>
 					<th>{{ $__t('API key') }}</th>
 					<th>{{ $__t('User') }}</th>
 					<th>{{ $__t('Expires') }}</th>

views/productform.blade.php

@@ -393,7 +393,13 @@
 					class="table table-sm table-striped nowrap w-100">
 					<thead>
 						<tr>
-							<th class="border-right"></th>
+							<th class="border-right"><a id="change-table-columns-visibility"
+									class="text-muted"
+									data-toggle="tooltip"
+									title="{{ $__t('Hide/view columns') }}"
+									data-table-selector="#barcode-table"
+									href="#"><i class="fas fa-eye"></i></a>
+							</th>
 							<th>{{ $__t('Barcode') }}</th>
 							@if(GROCY_FEATURE_FLAG_STOCK_PRICE_TRACKING)
 							<th>{{ $__t('Store') }}</th>
@@ -478,7 +484,13 @@
 					class="table table-sm table-striped nowrap w-100">
 					<thead>
 						<tr>
-							<th class="border-right"></th>
+							<th class="border-right"><a id="change-table-columns-visibility"
+									class="text-muted"
+									data-toggle="tooltip"
+									title="{{ $__t('Hide/view columns') }}"
+									data-table-selector="#qu-conversion-table"
+									href="#"><i class="fas fa-eye"></i></a>
+							</th>
 							<th>{{ $__t('Quantity unit from') }}</th>
 							<th>{{ $__t('Quantity unit to') }}</th>
 							<th>{{ $__t('Factor') }}</th>

views/productgroups.blade.php

@@ -70,7 +70,13 @@
 			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
-					<th class="border-right"></th>
+					<th class="border-right"><a id="change-table-columns-visibility"
+							class="text-muted"
+							data-toggle="tooltip"
+							title="{{ $__t('Hide/view columns') }}"
+							data-table-selector="#productgroups-table"
+							href="#"><i class="fas fa-eye"></i></a>
+					</th>
 					<th>{{ $__t('Name') }}</th>
 					<th>{{ $__t('Description') }}</th>
 					<th>{{ $__t('Product count') }}</th>

views/products.blade.php

@@ -88,7 +88,13 @@
 			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
-					<th class="border-right"></th>
+					<th class="border-right"><a id="change-table-columns-visibility"
+							class="text-muted"
+							data-toggle="tooltip"
+							title="{{ $__t('Hide/view columns') }}"
+							data-table-selector="#products-table"
+							href="#"><i class="fas fa-eye"></i></a>
+					</th>
 					<th>{{ $__t('Name') }}</th>
 					<th class="@if(!GROCY_FEATURE_FLAG_STOCK_LOCATION_TRACKING) d-none @endif">{{ $__t('Location') }}</th>
 					<th>{{ $__t('Min. stock amount') }}</th>

views/quantityunitform.blade.php

@@ -126,7 +126,13 @@
 					class="table table-sm table-striped nowrap w-100">
 					<thead>
 						<tr>
-							<th class="border-right"></th>
+							<th class="border-right"><a id="change-table-columns-visibility"
+									class="text-muted"
+									data-toggle="tooltip"
+									title="{{ $__t('Hide/view columns') }}"
+									data-table-selector="#qu-conversions-table"
+									href="#"><i class="fas fa-eye"></i></a>
+							</th>
 							<th>{{ $__t('Factor') }}</th>
 							<th>{{ $__t('Unit') }}</th>
 						</tr>

views/quantityunits.blade.php

@@ -70,7 +70,13 @@
 			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
-					<th class="border-right"></th>
+					<th class="border-right"><a id="change-table-columns-visibility"
+							class="text-muted"
+							data-toggle="tooltip"
+							title="{{ $__t('Hide/view columns') }}"
+							data-table-selector="#quantityunits-table"
+							href="#"><i class="fas fa-eye"></i></a>
+					</th>
 					<th>{{ $__t('Name') }}</th>
 					<th>{{ $__t('Description') }}</th>
 

views/recipeform.blade.php

@@ -145,11 +145,17 @@
 					class="table table-sm table-striped nowrap w-100">
 					<thead>
 						<tr>
-							<th class="border-right"></th>
+							<th class="border-right"><a id="change-table-columns-visibility"
+									class="text-muted"
+									data-toggle="tooltip"
+									title="{{ $__t('Hide/view columns') }}"
+									data-table-selector="#recipes-pos-table"
+									href="#"><i class="fas fa-eye"></i></a>
+							</th>
 							<th>{{ $__t('Product') }}</th>
 							<th>{{ $__t('Amount') }}</th>
 							<th class="fit-content">{{ $__t('Note') }}</th>
-							<th class="d-none">Hiden ingredient group</th>
+							<th class="d-none">Hidden ingredient group</th>
 						</tr>
 					</thead>
 					<tbody class="d-none">
@@ -242,7 +248,13 @@
 					class="table table-sm table-striped nowrap w-100">
 					<thead>
 						<tr>
-							<th class="border-right"></th>
+							<th class="border-right"><a id="change-table-columns-visibility"
+									class="text-muted"
+									data-toggle="tooltip"
+									title="{{ $__t('Hide/view columns') }}"
+									data-table-selector="#recipes-includes-table"
+									href="#"><i class="fas fa-eye"></i></a>
+							</th>
 							<th>{{ $__t('Recipe') }}</th>
 							<th>{{ $__t('Servings') }}</th>
 						</tr>

views/recipes.blade.php

@@ -99,7 +99,13 @@
 					class="table table-sm table-striped nowrap w-100">
 					<thead>
 						<tr>
-							<th class="border-right"></th>
+							<th class="border-right"><a id="change-table-columns-visibility"
+									class="text-muted"
+									data-toggle="tooltip"
+									title="{{ $__t('Hide/view columns') }}"
+									data-table-selector="#recipes-table"
+									href="#"><i class="fas fa-eye"></i></a>
+							</th>
 							<th>{{ $__t('Name') }}</th>
 							<th>{{ $__t('Desired servings') }}</th>
 							<th>{{ $__t('Requirements fulfilled') }}</th>

views/shoppinglist.blade.php

@@ -175,10 +175,16 @@
 			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
-					<th class="border-right"></th>
+					<th class="border-right"><a id="change-table-columns-visibility"
+							class="text-muted"
+							data-toggle="tooltip"
+							title="{{ $__t('Hide/view columns') }}"
+							data-table-selector="#shoppinglist-table"
+							href="#"><i class="fas fa-eye"></i></a>
+					</th>
 					<th>{{ $__t('Product') }} / <em>{{ $__t('Note') }}</em></th>
 					<th>{{ $__t('Amount') }}</th>
-					<th class="d-none">Hiden product group</th>
+					<th class="d-none">Hidden product group</th>
 					<th class="d-none">Hidden status</th>
 
 					@include('components.userfields_thead', array(

views/shoppinglocations.blade.php

@@ -70,7 +70,13 @@
 			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
-					<th class="border-right"></th>
+					<th class="border-right"><a id="change-table-columns-visibility"
+							class="text-muted"
+							data-toggle="tooltip"
+							title="{{ $__t('Hide/view columns') }}"
+							data-table-selector="#shoppinglocations-table"
+							href="#"><i class="fas fa-eye"></i></a>
+					</th>
 					<th>{{ $__t('Name') }}</th>
 					<th>{{ $__t('Description') }}</th>
 

views/stockentries.blade.php

@@ -36,7 +36,13 @@
 			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
-					<th class="border-right"></th>
+					<th class="border-right"><a id="change-table-columns-visibility"
+							class="text-muted"
+							data-toggle="tooltip"
+							title="{{ $__t('Hide/view columns') }}"
+							data-table-selector="#stockentries-table"
+							href="#"><i class="fas fa-eye"></i></a>
+					</th>
 					<th class="d-none">product_id</th> <!-- This must be in the first column for searching -->
 					<th>{{ $__t('Product') }}</th>
 					<th>{{ $__t('Amount') }}</th>

views/stockjournal.blade.php

@@ -76,7 +76,13 @@
 			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
-					<th class="border-right"></th>
+					<th class="border-right"><a id="change-table-columns-visibility"
+							class="text-muted"
+							data-toggle="tooltip"
+							title="{{ $__t('Hide/view columns') }}"
+							data-table-selector="#stock-journal-table"
+							href="#"><i class="fas fa-eye"></i></a>
+					</th>
 					<th>{{ $__t('Product') }}</th>
 					<th>{{ $__t('Amount') }}</th>
 					<th>{{ $__t('Booking time') }}</th>

views/stockoverview.blade.php

@@ -145,7 +145,13 @@
 			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
-					<th class="border-right"></th>
+					<th class="border-right"><a id="change-table-columns-visibility"
+							class="text-muted"
+							data-toggle="tooltip"
+							title="{{ $__t('Hide/view columns') }}"
+							data-table-selector="#stock-overview-table"
+							href="#"><i class="fas fa-eye"></i></a>
+					</th>
 					<th>{{ $__t('Product') }}</th>
 					<th>{{ $__t('Product group') }}</th>
 					<th>{{ $__t('Amount') }}</th>

views/taskcategories.blade.php

@@ -70,7 +70,13 @@
 			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
-					<th class="border-right"></th>
+					<th class="border-right"><a id="change-table-columns-visibility"
+							class="text-muted"
+							data-toggle="tooltip"
+							title="{{ $__t('Hide/view columns') }}"
+							data-table-selector="#taskcategories-table"
+							href="#"><i class="fas fa-eye"></i></a>
+					</th>
 					<th>{{ $__t('Name') }}</th>
 					<th>{{ $__t('Description') }}</th>
 

views/tasks.blade.php

@@ -105,7 +105,13 @@
 			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
-					<th class="border-right"></th>
+					<th class="border-right"><a id="change-table-columns-visibility"
+							class="text-muted"
+							data-toggle="tooltip"
+							title="{{ $__t('Hide/view columns') }}"
+							data-table-selector="#tasks-table"
+							href="#"><i class="fas fa-eye"></i></a>
+					</th>
 					<th>{{ $__t('Task') }}</th>
 					<th>{{ $__t('Due') }}</th>
 					<th class="d-none">Hidden category</th>

views/userentities.blade.php

@@ -66,7 +66,13 @@
 			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
-					<th class="border-right"></th>
+					<th class="border-right"><a id="change-table-columns-visibility"
+							class="text-muted"
+							data-toggle="tooltip"
+							title="{{ $__t('Hide/view columns') }}"
+							data-table-selector="#userentities-table"
+							href="#"><i class="fas fa-eye"></i></a>
+					</th>
 					<th>{{ $__t('Name') }}</th>
 					<th>{{ $__t('Caption') }}</th>
 				</tr>

views/userfields.blade.php

@@ -80,7 +80,13 @@
 			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
-					<th class="border-right"></th>
+					<th class="border-right"><a id="change-table-columns-visibility"
+							class="text-muted"
+							data-toggle="tooltip"
+							title="{{ $__t('Hide/view columns') }}"
+							data-table-selector="#userfields-table"
+							href="#"><i class="fas fa-eye"></i></a>
+					</th>
 					<th>{{ $__t('Entity') }}</th>
 					<th>{{ $__t('Name') }}</th>
 					<th>{{ $__t('Caption') }}</th>

views/users.blade.php

@@ -66,7 +66,13 @@
 			class="table table-sm table-striped nowrap w-100">
 			<thead>
 				<tr>
-					<th class="border-right"></th>
+					<th class="border-right"><a id="change-table-columns-visibility"
+							class="text-muted"
+							data-toggle="tooltip"
+							title="{{ $__t('Hide/view columns') }}"
+							data-table-selector="#users-table"
+							href="#"><i class="fas fa-eye"></i></a>
+					</th>
 					<th>{{ $__t('Username') }}</th>
 					<th>{{ $__t('First name') }}</th>
 					<th>{{ $__t('Last name') }}</th>