- Added new protected method getPostJSON to FHC_Controller to get POSTed JSON

- application/controllers/components/Filter.php now makes use of getPostJSON from the FHC_Controller
- RESTClient now POST a JSON request
- public/js/components/filter/Filter.js improvements

application/controllers/components/Filter.php

@@ -4,16 +4,17 @@ if (! defined('BASEPATH')) exit('No direct script access allowed');
 
 /**
  * This controller operates between (interface) the JS (GUI) and the FilterCmptLib (back-end)
- * Provides data to the ajax get calls about the filter cmpt
- * Accepts ajax post calls to change the filter data
+ * Provides data to the ajax get calls about the filter component
+ * Listens to ajax post calls to change the filter data
  * This controller works with JSON calls on the HTTP GET or POST and the output is always JSON
  * NOTE: extends the FHC_Controller instead of the Auth_Controller because the FilterCmpt has its
- * 		own permissions check
+ * 	own permissions check
  */
 class Filter extends FHC_Controller
 {
-	const FILTER_UNIQUE_ID = 'filterUniqueId'; // Name of the filter cmpt unique id
-	const FILTER_TYPE = 'filterType'; // 
+	const FILTER_UNIQUE_ID = 'filterUniqueId'; // Name of the filter cmpt unique id (mandatory)
+	const FILTER_TYPE = 'filterType'; // The filter type (PHP filter definition) used (mandatory)
+	const FILTER_ID = 'filterId'; // The id of the used filter (optional)
 
 	/**
 	 * Calls the parent's constructor and loads the FilterCmptLib
@@ -46,11 +47,12 @@ class Filter extends FHC_Controller
 	 */
 	public function sortSelectedFields()
 	{
-		$selectedFields = $this->input->post('selectedFields');
+		$request = $this->getPostJSON();
 
-		if ($this->filtercmptlib->sortSelectedFields($selectedFields) == true)
+		if (property_exists($request, 'selectedFields')
+			&& $this->filtercmptlib->sortSelectedFields($request->selectedFields) == true)
 		{
-			$this->getFilter();
+			$this->outputJsonSuccess('Fields sorted');
 		}
 		else
 		{
@@ -64,9 +66,10 @@ class Filter extends FHC_Controller
 	 */
 	public function removeSelectedField()
 	{
-		$selectedField = $this->input->post('selectedField');
+		$request = $this->getPostJSON();
 
-		if ($this->filtercmptlib->removeSelectedField($selectedField) == true)
+		if (property_exists($request, 'selectedField')
+			&& $this->filtercmptlib->removeSelectedField($request->selectedField) == true)
 		{
 			$this->outputJsonSuccess('Field removed');
 		}
@@ -81,9 +84,10 @@ class Filter extends FHC_Controller
 	 */
 	public function addSelectedField()
 	{
-		$selectedField = $this->input->post('selectedField');
+		$request = $this->getPostJSON();
 
-		if ($this->filtercmptlib->addSelectedField($selectedField) == true)
+		if (property_exists($request, 'selectedField')
+			&& $this->filtercmptlib->addSelectedField($request->selectedField) == true)
 		{
 			$this->outputJsonSuccess('Field added');
 		}
@@ -98,9 +102,10 @@ class Filter extends FHC_Controller
 	 */
 	public function removeFilterField()
 	{
-		$appliedFilter = $this->input->post('filterField');
+		$request = $this->getPostJSON();
 
-		if ($this->filtercmptlib->removeFilterField($appliedFilter) == true)
+		if (property_exists($request, 'filterField')
+			&& $this->filtercmptlib->removeFilterField($request->filterField) == true)
 		{
 			$this->outputJsonSuccess('Field removed');
 		}
@@ -115,9 +120,10 @@ class Filter extends FHC_Controller
 	 */
 	public function addFilterField()
 	{
-		$filterField = $this->input->post('filterField');
+		$request = $this->getPostJSON();
 
-		if ($this->filtercmptlib->addFilterField($filterField) == true)
+		if (property_exists($request, 'filterField')
+			&& $this->filtercmptlib->addFilterField($request->filterField) == true)
 		{
 			$this->outputJsonSuccess('Field added');
 		}
@@ -132,9 +138,10 @@ class Filter extends FHC_Controller
 	 */
 	public function applyFilterFields()
 	{
-		$filterFields = $this->input->post('filterFields');
+		$request = $this->getPostJSON();
 
-		if ($this->filtercmptlib->applyFilterFields($filterFields) == true)
+		if (property_exists($request, 'filterFields')
+			&& $this->filtercmptlib->applyFilterFields($request->filterFields) == true)
 		{
 			$this->outputJsonSuccess('Applied');
 		}
@@ -149,9 +156,10 @@ class Filter extends FHC_Controller
 	 */
 	public function saveCustomFilter()
 	{
-		$customFilterName = $this->input->post('customFilterName');
+		$request = $this->getPostJSON();
 
-		if ($this->filtercmptlib->saveCustomFilter($customFilterName) == true)
+		if (property_exists($request, 'customFilterName')
+			&& $this->filtercmptlib->saveCustomFilter($request->customFilterName) == true)
 		{
 			$this->outputJsonSuccess('Saved');
 		}
@@ -166,9 +174,10 @@ class Filter extends FHC_Controller
 	 */
 	public function removeCustomFilter()
 	{
-		$filterId = $this->input->post('filterId');
+		$request = $this->getPostJSON();
 
-		if ($this->filtercmptlib->removeCustomFilter($filterId) == true)
+		if (property_exists($request, 'filterId')
+			&& $this->filtercmptlib->removeCustomFilter($request->filterId) == true)
 		{
 			$this->outputJsonSuccess('Removed');
 		}
@@ -200,42 +209,42 @@ class Filter extends FHC_Controller
 	{
 		$filterUniqueId = null;
 		$filterType = null;
+		$filterId = null;
 
-		// If the parameter FILTER_UNIQUE_ID is present in the HTTP GET or POST
-		if (isset($_GET[self::FILTER_UNIQUE_ID]) || isset($_POST[self::FILTER_UNIQUE_ID]))
+		// Try to get the POSTed JSON
+		$postJSON = $this->getPostJSON();
+
+		// POSTed JSON
+		if ($postJSON != null)
 		{
-			// If it is present in the HTTP GET
-			if (isset($_GET[self::FILTER_UNIQUE_ID]))
+			// If the mandatory parameters FILTER_UNIQUE_ID and FILTER_TYPE have been provided
+			if (property_exists($postJSON, self::FILTER_UNIQUE_ID) && property_exists($postJSON, self::FILTER_TYPE))
 			{
-				$filterUniqueId = $this->input->get(self::FILTER_UNIQUE_ID); // is retrieved from the HTTP GET
-			}
-			elseif (isset($_POST[self::FILTER_UNIQUE_ID])) // Else if it is present in the HTTP POST
-			{
-				$filterUniqueId = $this->input->post(self::FILTER_UNIQUE_ID); // is retrieved from the HTTP POST
+				// Retrives them from the POSTed JSON
+				$filterUniqueId = $postJSON->{self::FILTER_UNIQUE_ID};
+				$filterType = $postJSON->{self::FILTER_TYPE};
 			}
+
+			// If the optional parameter FILTER_ID has been provided
+			if (property_exists($postJSON, self::FILTER_ID)) $filterId = $postJSON->{self::FILTER_ID};
 		}
-		else // Otherwise an error will be written in the output
+		else // otherwise it is an HTTP GET call
 		{
-			$this->terminateWithJsonError('Parameter "'.self::FILTER_UNIQUE_ID.'" not provided!');
+			// If the mandatory parameters FILTER_UNIQUE_ID and FILTER_TYPE have been provided
+			if (isset($_GET[self::FILTER_UNIQUE_ID]) && isset($_GET[self::FILTER_TYPE]))
+			{
+				// Retrives them from the HTTP GET
+				$filterUniqueId = $this->input->get(self::FILTER_UNIQUE_ID);
+				$filterType = $this->input->get(self::FILTER_TYPE);
+			}
+
+			// If the optional parameter FILTER_ID has been provided
+			if (isset($_GET[self::FILTER_ID])) $filterId = $filterId = $this->input->get(self::FILTER_ID);
 		}
 
-		// If the parameter FILTER_TYPE is present in the HTTP GET or POST
-		if (isset($_GET[self::FILTER_TYPE]) || isset($_POST[self::FILTER_TYPE]))
-		{
-			// If it is present in the HTTP GET
-			if (isset($_GET[self::FILTER_TYPE]))
-			{
-				$filterType = $this->input->get(self::FILTER_TYPE); // is retrieved from the HTTP GET
-			}
-			elseif (isset($_POST[self::FILTER_TYPE])) // Else if it is present in the HTTP POST
-			{
-				$filterType = $this->input->post(self::FILTER_TYPE); // is retrieved from the HTTP POST
-			}
-		}
-		else // Otherwise an error will be written in the output
-		{
-			$this->terminateWithJsonError('Parameter "'.self::FILTER_TYPE.'" not provided!');
-		}
+		// If the mandatory parameters have _not_ been provided, then terminate the execution and return an error
+		if ($filterUniqueId == null) $this->terminateWithJsonError('Parameter "'.self::FILTER_UNIQUE_ID.'" not provided!');
+		if ($filterType == null) $this->terminateWithJsonError('Parameter "'.self::FILTER_TYPE.'" not provided!');
 
 		// Loads the FilterCmptLib that contains all the used logic
 		$this->load->library(
@@ -243,11 +252,11 @@ class Filter extends FHC_Controller
 			array(
 				'filterUniqueId' => $filterUniqueId,
 				'filterType' => $filterType,
-				'filterId' => $this->input->get('filterId')
+				'filterId' => $filterId
 			)
 		);
 
-		// 
+		// Start the component
 		$this->filtercmptlib->start();
 	}
 }

application/controllers/system/Navigation.php

@@ -1,4 +1,20 @@
 <?php
+/**
+ * Copyright (C) 2022 fhcomplete.org
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
 
 if (! defined('BASEPATH')) exit('No direct script access allowed');
 

application/core/FHC_Controller.php

@@ -159,6 +159,15 @@ abstract class FHC_Controller extends CI_Controller
 		return false;
 	}
 
+	/**
+	 * Return the JSON decoded HTTP POST request
+	 * If the request is not in JSON format then a null value is returned
+	 */
+	protected function getPostJSON()
+	{
+		return json_decode($this->input->raw_input_stream);
+	}
+
 	//------------------------------------------------------------------------------------------------------------------
 	// Private methods
 
@@ -175,3 +184,4 @@ abstract class FHC_Controller extends CI_Controller
 		}
 	}
 }
+

application/libraries/FilterCmptLib.php

@@ -1,4 +1,20 @@
 <?php
+/**
+ * Copyright (C) 2022 fhcomplete.org
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
 
 if (! defined('BASEPATH')) exit('No direct script access allowed');
 

application/libraries/NavigationLib.php

@@ -1,4 +1,20 @@
 <?php
+/**
+ * Copyright (C) 2022 fhcomplete.org
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
 
 if (! defined('BASEPATH')) exit('No direct script access allowed');
 

application/libraries/SearchBarLib.php

@@ -1,4 +1,20 @@
 <?php
+/**
+ * Copyright (C) 2022 fhcomplete.org
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
 
 if (! defined('BASEPATH')) exit('No direct script access allowed');
 

public/js/RESTClient.js

@@ -1,12 +1,18 @@
 /**
- * FH-Complete
+ * Copyright (C) 2022 fhcomplete.org
  *
- * @package	FHC-Helper
- * @author	FHC-Team
- * @copyright	Copyright (c) 2022 fhcomplete.net
- * @license	GPLv3
- * @link	https://fhcomplete.net
- * @since	Version 1.0.0
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
 //--------------------------------------------------------------------------------------------------------------------
@@ -198,14 +204,14 @@ export const CoreRESTClient = {
 			timeout: CORE_REST_CLIENT_TIMEOUT // default time out
 		};
 
-		//
+		// The ajax call is HTTP GET
 		if (type == CRC_HTTP_GET_METHOD)
 		{
 			axiosCallObj.params = wsParameters;
 		}
+		// The ajax call is HTTP POST
 		else
 		{
-			axiosCallObj.headers = { "Content-Type": "multipart/form-data" };
 			axiosCallObj.data = wsParameters;
 		}
 
@@ -213,7 +219,7 @@ export const CoreRESTClient = {
 		if (typeof axiosParameters === "object")
 		{
 			// And then copies the its properties into axiosCallObj
-	                for (var prop in axiosParameters) axiosCallObj[prop] = axiosParameters[prop];
+			for (var prop in axiosParameters) axiosCallObj[prop] = axiosParameters[prop];
 		}
 
 		// Perform the ajax call via axios

public/js/apps/LogsViewer.js

@@ -1,3 +1,20 @@
+/**
+ * Copyright (C) 2022 fhcomplete.org
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
 import {CoreFilterCmpt} from '../components/filter/Filter.js';
 import {CoreNavigationCmpt} from '../components/navigation/Navigation.js';
 

public/js/components/filter/Filter.js

@@ -15,482 +15,484 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
- import {CoreFilterAPIs} from './API.js';
- import {CoreRESTClient} from '../../RESTClient.js';
- import {CoreFetchCmpt} from '../../components/Fetch.js';
- 
+import {CoreFilterAPIs} from './API.js';
+import {CoreRESTClient} from '../../RESTClient.js';
+import {CoreFetchCmpt} from '../../components/Fetch.js';
+
  /**
   *
   */
- export const CoreFilterCmpt = {
-	 emits: ['nwNewEntry','selectRecord'],
-	 components: {
-		 CoreFetchCmpt
-	 },
-	 props: {
-		 filterType: {
-			 type: String,
-			 required: true
-		 }
-	 },
-	 data() {
-		 return {
-			 // FilterCmpt properties
-			 fields: null,
-			 fieldsToDisplay: null,
-			 dataset: null,
-			 selectedFields: null,
-			 notSelectedFields: null,
-			 filterFields: null,
-			 notFilterFields: null,
+export const CoreFilterCmpt = {
+	emits: ['nwNewEntry','selectRecord'],
+	components: {
+	        CoreFetchCmpt
+	},
+	props: {
+	        filterType: {
+	       	 type: String,
+	       	 required: true
+	        }
+	},
+	data() {
+	        return {
+	       	 // FilterCmpt properties
+	       	 fields: null,
+	       	 fieldsToDisplay: null,
+	       	 dataset: null,
+	       	 selectedFields: null,
+	       	 notSelectedFields: null,
+	       	 filterFields: null,
+	       	 notFilterFields: null,
  
-			 // FetchCmpt binded properties
-			 fetchCmptRefresh: false,
-			 fetchCmptApiFunction: null,
-			 fetchCmptApiFunctionParams: null,
-			 fetchCmptDataFetched: null
-		 };
-	 },
-	 created() {
-		 this.getFilter(); // get the filter data
-	 },
-	 updated() {
-		 let filterCmptTablesorter = $("#filterTableDataset");
+	       	 // FetchCmpt binded properties
+	       	 fetchCmptRefresh: false,
+	       	 fetchCmptApiFunction: null,
+	       	 fetchCmptApiFunctionParams: null,
+	       	 fetchCmptDataFetched: null
+	        };
+	},
+	created() {
+	        this.getFilter(); // get the filter data
+	},
+	updated() {
+	        let filterCmptTablesorter = $("#filterTableDataset");
  
-		 // Checks if the table contains data records
-		 if (filterCmptTablesorter.find("tbody:empty").length == 0
-			 && filterCmptTablesorter.find("tr:empty").length == 0)
-		 {
-			 filterCmptTablesorter.tablesorter({
-				 dateFormat: "ddmmyyyy",
-				 widgets: ["zebra", "filter"],
-				 widgetOptions: {
-					 filter_saveFilters : true
-				 }
-			 });
+	        // Checks if the table contains data records
+	        if (filterCmptTablesorter.find("tbody:empty").length == 0
+	       	 && filterCmptTablesorter.find("tr:empty").length == 0)
+	        {
+	       	 filterCmptTablesorter.tablesorter({
+	       		 dateFormat: "ddmmyyyy",
+	       		 widgets: ["zebra", "filter"],
+	       		 widgetOptions: {
+	       			 filter_saveFilters : true
+	       		 }
+	       	 });
  
-			 $.tablesorter.updateAll(filterCmptTablesorter[0].config, true, null);
-		 }
-	 },
-	 methods: {
-		selectRecord(r) {
-			this.$emit(
-				'selectRecord',
-				r
-			);
-		},
-		 /**
-		  *
-		  */
-		 getFilter: function() {
-			 //
-			 this.startFetchCmpt(CoreFilterAPIs.getFilter, null, this.render);
-		 },
-		 /**
-		  *
-		  */
-		 render: function(response) {
+	       	 $.tablesorter.updateAll(filterCmptTablesorter[0].config, true, null);
+	        }
+	},
+	methods: {
+	       selectRecord(r) {
+	       	this.$emit(
+	       		'selectRecord',
+	       		r
+	       	);
+	       },
+	        /**
+	         *
+	         */
+	        getFilter: function() {
+	       	 //
+	       	 this.startFetchCmpt(CoreFilterAPIs.getFilter, null, this.render);
+	        },
+	        /**
+	         *
+	         */
+	        render: function(response) {
  
-			 if (CoreRESTClient.hasData(response))
-			 {
-				 let data = CoreRESTClient.getData(response);
-				 this.dataset = data.dataset;
-				 this.fields = data.fields;
-				 this.selectedFields = data.selectedFields;
-				 this.notSelectedFields = this.fields.filter(x => this.selectedFields.indexOf(x) === -1);
+	       	 if (CoreRESTClient.hasData(response))
+	       	 {
+	       		 let data = CoreRESTClient.getData(response);
+	       		 this.dataset = data.dataset;
+	       		 this.fields = data.fields;
+	       		 this.selectedFields = data.selectedFields;
+	       		 this.notSelectedFields = this.fields.filter(x => this.selectedFields.indexOf(x) === -1);
  
-				 this.filterFields = [];
-				 let tmpFilterFields = [];
-				 for (let i = 0; i < data.datasetMetadata.length; i++)
-				 {
-					 for (let j = 0; j < data.filters.length; j++)
-					 {
-						 if (data.datasetMetadata[i].name == data.filters[j].name)
-						 {
-							 let filter = data.filters[j];
-							 filter.type = data.datasetMetadata[i].type;
+	       		 this.filterFields = [];
+	       		 let tmpFilterFields = [];
+	       		 for (let i = 0; i < data.datasetMetadata.length; i++)
+	       		 {
+	       			 for (let j = 0; j < data.filters.length; j++)
+	       			 {
+	       				 if (data.datasetMetadata[i].name == data.filters[j].name)
+	       				 {
+	       					 let filter = data.filters[j];
+	       					 filter.type = data.datasetMetadata[i].type;
  
-							 this.filterFields.push(filter);
-							 tmpFilterFields.push(filter.name);
-							 break;
-						 }
-					 }
-				 }
+	       					 this.filterFields.push(filter);
+	       					 tmpFilterFields.push(filter.name);
+	       					 break;
+	       				 }
+	       			 }
+	       		 }
  
-				 this.notFilterFields = this.fields.filter(x => tmpFilterFields.indexOf(x) === -1);
-				 this.setFieldsToDisplay(data);
-				 this.setSideMenu(data);
-			 }
-			 else
-			 {
-				 console.error(CoreRESTClient.getError(response));
-			 }
-		 },
-		 /**
-		  *
-		  */
-		 setFieldsToDisplay: function(data) {
+	       		 this.notFilterFields = this.fields.filter(x => tmpFilterFields.indexOf(x) === -1);
+	       		 this.setFieldsToDisplay(data);
+	       		 this.setSideMenu(data);
+	       	 }
+	       	 else
+	       	 {
+	       		 console.error(CoreRESTClient.getError(response));
+	       	 }
+	        },
+	        /**
+	         *
+	         */
+	        setFieldsToDisplay: function(data) {
  
-			 let arrayFieldsToDisplay = [];
-	 
-			 if (data.hasOwnProperty("selectedFields") && $.isArray(data.selectedFields))
-			 {
-				 if (data.hasOwnProperty("columnsAliases") && $.isArray(data.columnsAliases))
-				 {
-					 for (let sfc = 0; sfc < data.selectedFields.length; sfc++)
-					 {
-						 for (let fc = 0; fc < data.fields.length; fc++)
-						 {
-							 if (data.selectedFields[sfc] == data.fields[fc])
-							 {
-								 arrayFieldsToDisplay[sfc] = data.columnsAliases[fc];
-							 }
-						 }
-					 }
-				 }
-				 else
-				 {
-					 arrayFieldsToDisplay = data.selectedFields;
-				 }
-			 }
-	 
-			 this.fieldsToDisplay = arrayFieldsToDisplay;
-		 },
-		 /**
-		  *
-		  */
-		 setSideMenu: function(data) {
-			 // Set the menu
-			 let filters = data.sideMenu.filters;
-			 let personalFilters = data.sideMenu.personalFilters;
-			 let filtersArray = [];
+	       	 let arrayFieldsToDisplay = [];
+	
+	       	 if (data.hasOwnProperty("selectedFields") && $.isArray(data.selectedFields))
+	       	 {
+	       		 if (data.hasOwnProperty("columnsAliases") && $.isArray(data.columnsAliases))
+	       		 {
+	       			 for (let sfc = 0; sfc < data.selectedFields.length; sfc++)
+	       			 {
+	       				 for (let fc = 0; fc < data.fields.length; fc++)
+	       				 {
+	       					 if (data.selectedFields[sfc] == data.fields[fc])
+	       					 {
+	       						 arrayFieldsToDisplay[sfc] = data.columnsAliases[fc];
+	       					 }
+	       				 }
+	       			 }
+	       		 }
+	       		 else
+	       		 {
+	       			 arrayFieldsToDisplay = data.selectedFields;
+	       		 }
+	       	 }
+	
+	       	 this.fieldsToDisplay = arrayFieldsToDisplay;
+	        },
+	        /**
+	         *
+	         */
+	        setSideMenu: function(data) {
+	       	 // Set the menu
+	       	 let filters = data.sideMenu.filters;
+	       	 let personalFilters = data.sideMenu.personalFilters;
+	       	 let filtersArray = [];
  
-			 for (let filtersCount = 0; filtersCount < filters.length; filtersCount++)
-			 {
-				 let link = filters[filtersCount].link;
+	       	 for (let filtersCount = 0; filtersCount < filters.length; filtersCount++)
+	       	 {
+	       		 let link = filters[filtersCount].link;
  
-				 if (link == null) link = '#';
+	       		 if (link == null) link = '#';
  
-				 filtersArray[filtersArray.length] = {
-					 link: link + filters[filtersCount].filterId,
-									 description: filters[filtersCount].desc,
-									 sort: filtersCount,
-					 onClickCall: this.handlerGetFilterById
-				 };
-			 }
+	       		 filtersArray[filtersArray.length] = {
+	       			 link: link + filters[filtersCount].filterId,
+	       							 description: filters[filtersCount].desc,
+	       							 sort: filtersCount,
+	       			 onClickCall: this.handlerGetFilterById
+	       		 };
+	       	 }
  
-			 this.$emit(
-				 'nwNewEntry',
-				 [{
-					 link: "#",
-					 description: "Filters",
-					 icon: "filter",
-					 children: filtersArray
-				 }]
-			 );
-		 },
-		 /**
-		  * Used to start/refresh the FetchCmpt
-		  */
-		 startFetchCmpt: function(apiFunction, apiFunctionParameters, dataFetchedCallback) {
-			 // Assign the function api of the FetchCmpt binded property
-			 this.fetchCmptApiFunction = apiFunction;
+	       	 this.$emit(
+	       		 'nwNewEntry',
+	       		 [{
+	       			 link: "#",
+	       			 description: "Filters",
+	       			 icon: "filter",
+	       			 children: filtersArray
+	       		 }]
+	       	 );
+	        },
+	        /**
+	         * Used to start/refresh the FetchCmpt
+	         */
+	        startFetchCmpt: function(apiFunction, apiFunctionParameters, dataFetchedCallback) {
+	       	 // Assign the function api of the FetchCmpt binded property
+	       	 this.fetchCmptApiFunction = apiFunction;
  
-			 // In case a null value is provided set the parameters as an empty object
-			 if (apiFunctionParameters == null) apiFunctionParameters = {};
-			 
-			 // Always needed parameters
-			 apiFunctionParameters.filterUniqueId = FHC_JS_DATA_STORAGE_OBJECT.called_path + "/" + FHC_JS_DATA_STORAGE_OBJECT.called_method;
-			 apiFunctionParameters.filterType = this.filterType;
+	       	 // In case a null value is provided set the parameters as an empty object
+	       	 if (apiFunctionParameters == null) apiFunctionParameters = {};
+	       	 
+	       	 // Always needed parameters
+	       	 apiFunctionParameters.filterUniqueId = FHC_JS_DATA_STORAGE_OBJECT.called_path + "/" + FHC_JS_DATA_STORAGE_OBJECT.called_method;
+	       	 apiFunctionParameters.filterType = this.filterType;
  
-			 // Assign parameters to the FetchCmpt binded properties
-			 this.fetchCmptApiFunctionParams = apiFunctionParameters;
-			 // Assign data fetch callback to the FetchCmpt binded properties
-			 this.fetchCmptDataFetched = dataFetchedCallback;
-			 // Set the FetchCmpt binded property refresh to have the component to refresh
-			 // NOTE: this should be the last one to be called because it triggers the FetchCmpt to start to refresh
-			 this.fetchCmptRefresh === true ? this.fetchCmptRefresh = false : this.fetchCmptRefresh = true;
-		 },
+	       	 // Assign parameters to the FetchCmpt binded properties
+	       	 this.fetchCmptApiFunctionParams = apiFunctionParameters;
+	       	 // Assign data fetch callback to the FetchCmpt binded properties
+	       	 this.fetchCmptDataFetched = dataFetchedCallback;
+	       	 // Set the FetchCmpt binded property refresh to have the component to refresh
+	       	 // NOTE: this should be the last one to be called because it triggers the FetchCmpt to start to refresh
+	       	 this.fetchCmptRefresh === true ? this.fetchCmptRefresh = false : this.fetchCmptRefresh = true;
+	        },
  
-		 // ------------------------------------------------------------------------------------------------------------------
-		 // Event handlers
+	        // ------------------------------------------------------------------------------------------------------------------
+	        // Event handlers
  
-		 /**
-		  *
-		  */
-		 handlerSaveCustomFilter: function(event) {
-			 //
-			 this.startFetchCmpt(
-				 CoreFilterAPIs.saveCustomFilter,
-				 {
-					 customFilterName: document.getElementById('customFilterName').value
-				 },
-				 this.getFilter
-			 );
-		 },
-		 /**
-		  *
-		  */
-		 handlerApplyFilterFields: function(event) {
-			 let filterFields = [];
-			 let filterFieldDivs = document.getElementById('filterFields').getElementsByTagName('div');
+	        /**
+	         *
+	         */
+	        handlerSaveCustomFilter: function(event) {
+	       	 //
+	       	 this.startFetchCmpt(
+	       		 CoreFilterAPIs.saveCustomFilter,
+	       		 {
+	       			 customFilterName: document.getElementById('customFilterName').value
+	       		 },
+	       		 this.getFilter
+	       	 );
+	        },
+	        /**
+	         *
+	         */
+	        handlerApplyFilterFields: function(event) {
+	       	 let filterFields = [];
+	       	 let filterFieldDivs = document.getElementById('filterFields').getElementsByTagName('div');
  
-			 for (let i = 0; i < filterFieldDivs.length; i++)
-			 {
-				 let filterField = {};
+	       	 for (let i = 0; i < filterFieldDivs.length; i++)
+	       	 {
+	       		 let filterField = {};
  
-				 for (let j = 0; j < filterFieldDivs[i].children.length; j++)
-				 {
-					 if (filterFieldDivs[i].children[j].name != null)
-					 {
-						 // Name
-						 if (filterFieldDivs[i].children[j].name == 'fieldName')
-						 {
-							 filterField.name = filterFieldDivs[i].children[j].value;
-						 }
-						 // Operation
-						 if (filterFieldDivs[i].children[j].name == 'operation')
-						 {
-							 filterField.operation = filterFieldDivs[i].children[j].value;
-						 }
-						 // Condition
-						 if (filterFieldDivs[i].children[j].name == 'condition')
-						 {
-							 filterField.condition = filterFieldDivs[i].children[j].value;
-						 }
-						 // Option
-						 if (filterFieldDivs[i].children[j].name == 'option')
-						 {
-							 filterField.option = filterFieldDivs[i].children[j].value;
-						 }
-					 }
-				 }
+	       		 for (let j = 0; j < filterFieldDivs[i].children.length; j++)
+	       		 {
+	       			 if (filterFieldDivs[i].children[j].name != null)
+	       			 {
+	       				 // Name
+	       				 if (filterFieldDivs[i].children[j].name == 'fieldName')
+	       				 {
+	       					 filterField.name = filterFieldDivs[i].children[j].value;
+	       				 }
+	       				 // Operation
+	       				 if (filterFieldDivs[i].children[j].name == 'operation')
+	       				 {
+	       					 filterField.operation = filterFieldDivs[i].children[j].value;
+	       				 }
+	       				 // Condition
+	       				 if (filterFieldDivs[i].children[j].name == 'condition')
+	       				 {
+	       					 filterField.condition = filterFieldDivs[i].children[j].value;
+	       				 }
+	       				 // Option
+	       				 if (filterFieldDivs[i].children[j].name == 'option')
+	       				 {
+	       					 filterField.option = filterFieldDivs[i].children[j].value;
+	       				 }
+	       			 }
+	       		 }
  
-				 filterFields.push(filterField);
-			 }
+	       		 filterFields.push(filterField);
+	       	 }
  
-			 //
-			 this.startFetchCmpt(
-				 CoreFilterAPIs.applyFilterFields,
-				 {
-					 filterFields: filterFields
-				 },
-				 this.getFilter
-			 );
-		 },
-		 /**
-		  *
-		  */
-		 handlerAddFilterField: function(event) {
-			 //
-			 this.startFetchCmpt(
-				 CoreFilterAPIs.addFilterField,
-				 {
-					 selectedField: event.currentTarget.value
-				 },
-				 this.getFilter
-			 );
-		 },
-		 /**
-		  *
-		  */
-		 handlerAddSelectedField: function(event) {
-			 //
-			 this.startFetchCmpt(
-				 CoreFilterAPIs.addSelectedField,
-				 {
-					 selectedField: event.currentTarget.value
-				 },
-				 this.getFilter
-			 );
-		 },
-		 /**
-		  *
-		  */
-		 handlerRemoveSelectedField: function(event) {
-			 //
-			 this.startFetchCmpt(
-				 CoreFilterAPIs.removeSelectedField,
-				 {
-					 selectedField: event.currentTarget.getAttribute('field-to-remove')
-				 },
-				 this.getFilter
-			 );
-		 },
-		 /**
-		  *
-		  */
-		 handlerRemoveFilterField: function(event) {
-			 //
-			 this.startFetchCmpt(
-				 CoreFilterAPIs.removeFilterField,
-				 {
-					 selectedField: event.currentTarget.getAttribute('field-to-remove')
-				 },
-				 this.getFilter
-			 );
-		 },
-		 /**
-		  *
-		  */
-		 handlerGetFilterById: function(event) {
-			 //
-			 this.startFetchCmpt(
-				 CoreFilterAPIs.getFilterById,
-				 {
-					 filterId: event.currentTarget.getAttribute("href").substring(1)
-				 },
-				 this.render
-			 );
-		 }
-	 },
-	 template: `
-		 <!-- Load filter data -->
-				 <core-fetch-cmpt
-			 v-bind:api-function="fetchCmptApiFunction"
-			 v-bind:api-function-parameters="fetchCmptApiFunctionParams"
-			 v-bind:refresh="fetchCmptRefresh"
-			 @data-fetched="fetchCmptDataFetched">
-		 </core-fetch-cmpt>
-		 <div class="card filter-filter-options">
-			 <div class="card-header filter-header-title" data-bs-toggle="collapse" data-bs-target="#collapseFilterHeader">
-				 Filter options
-			 </div>
-			 <div id="collapseFilterHeader" class="card-body collapse">
-				 <!-- Filter fields options -->
-				 <div class="filter-options-div">
-					 <div class="filter-dnd-area">
-						 <template v-for="fieldToDisplay in fieldsToDisplay">
-							 <span class="filter-dnd-object">
-								 {{ fieldToDisplay }}
-								 <button
-									 type="button"
-									 class="btn-close"
-									 v-bind:field-to-remove="fieldToDisplay"
-									 @click=handlerRemoveSelectedField>
-								 </button>
-							 </span>
-						 </template>
-					 </div>
-					 <select class="form-select form-select-sm" @change=handlerAddSelectedField>
-						 <option value="">Select a field to be displayed...</option>
-						 <template v-for="hiddenField in notSelectedFields">
-							 <option v-bind:value="hiddenField">{{ hiddenField }}</option>
-						 </template>
-					 </select>
-				 </div>
-				 <!-- Filter options -->
-				 <div class="filter-options-div">
-					 <div>
-						 <select class="form-select form-select-sm" @change=handlerAddFilterField>
-							 <option value="">Add a field to the filter...</option>
-							 <template v-for="notFilterField in notFilterFields">
-								 <option v-bind:value="notFilterField">{{ notFilterField }}</option>
-							 </template>
-						 </select>
-					 </div>
-					 <div id="filterFields" class="filter-filter-fields">
-						 <template v-for="filterField in filterFields">
-							 <!-- Numeric -->
-							 <div v-if="filterField.type.toLowerCase().indexOf('int') >= 0" class="input-group mb-3">
-								 <input type="hidden" name="fieldName" v-bind:value="filterField.name">
-								 <span class="input-group-text">{{ filterField.name }}</span>
-								 <select class="form-select form-select-sm" name="operation">
-									 <option value="equal">Equal</option>
-									 <option value="nequal">Not equal</option>
-									 <option value="gt">Greater then</option>
-									 <option value="lt">Less then</option>
-								 </select>
-								 <input type="number" class="form-control" v-bind:value="filterField.condition" name="condition">
-								 <button
-									 class="btn btn-sm btn-outline-dark"
-									 type="button"
-									 v-bind:field-to-remove="filterField.name"
-									 @click=handlerRemoveFilterField>
-									 &emsp;X&emsp;
-								 </button>
-							 </div>
-							 <!-- Text -->
-							 <div
-								 v-if="filterField.type.toLowerCase().indexOf('varchar') >= 0
-									 || filterField.type.toLowerCase().indexOf('text') >= 0
-									 || filterField.type.toLowerCase().indexOf('bpchar') >= 0"
-								 class="input-group mb-3">
-								 <input type="hidden" name="fieldName" v-bind:value="filterField.name">
-								 <span class="input-group-text">{{ filterField.name }}</span>
-								 <select class="form-select form-select-sm" name="operation">
-									 <option value="contains">Conrains</option>
-									 <option value="ncontains">Does not contain</option>
-								 </select>
-								 <input type="text" class="form-control" v-bind:value="filterField.condition" name="condition">
-								 <button
-									 class="btn btn-sm btn-outline-dark"
-									 type="button"
-									 v-bind:field-to-remove="filterField.name"
-									 @click=handlerRemoveFilterField>
-									 &emsp;X&emsp;
-								 </button>
-							 </div>
-							 <!-- Timestamp and date -->
-							 <div
-								 v-if="filterField.type.toLowerCase().indexOf('timestamp') >= 0
-									 || filterField.type.toLowerCase().indexOf('date') >= 0"
-								 class="input-group mb-3">
-								 <input type="hidden" name="fieldName" v-bind:value="filterField.name">
-								 <span class="input-group-text">{{ filterField.name }}</span>
-								 <select class="form-select form-select-sm" name="operation">
-									 <option value="gt">Greater then</option>
-									 <option value="lt">Less then</option>
-									 <option value="set">Is set</option>
-									 <option value="nset">Is not set</option>
-								 </select>
-								 <input type="number" class="form-control" v-bind:value="filterField.condition" name="condition">
-								 <select class="form-select form-select-sm" name="option">
-									 <option value="minutes">Minutes</option>
-									 <option value="hours">Hours</option>
-									 <option value="days">Days</option>
-									 <option value="months">Months</option>
-								 </select>
-								 <button
-									 class="btn btn-sm btn-outline-dark"
-									 type="button"
-									 v-bind:field-to-remove="filterField.name"
-									 @click=handlerRemoveFilterField>
-									 &emsp;X&emsp;
-								 </button>
-							 </div>
-						 </template>
-					 </div>
-					 <div>
-						 <button type="button" class="btn btn-sm btn-outline-dark" @click=handlerApplyFilterFields>Apply changes</button> 
-					 </div>
-				 </div>
-				 <!-- Filter save options -->
-				 <div class="input-group">
-					 <input type="text" class="form-control" placeholder="Custom filter name" id="customFilterName">
-					 <button type="button" class="btn btn-outline-secondary" @click=handlerSaveCustomFilter>Save</button>
-				 </div>
-			 </div>
-		 </div>
-		 <table class="tablesorter table-bordered table-responsive" id="filterTableDataset">
-			 <thead>
-				 <tr>
-					 <template v-for="fieldToDisplay in fieldsToDisplay">
-						 <th title='{{ fieldToDisplay }}'>{{ fieldToDisplay }}</th>
-					 </template>
-				 </tr>
-			 </thead>
-			 <tbody>
-				 <template v-for="record in dataset">
-					 <tr class="" @click="selectRecord(record)">
-						 <template v-for="(value, property) in record">
-							 <template v-if="selectedFields.includes(property)">
-								 <td>{{ value }}</td>
-							 </template>
-						 </template>
-					 </tr>
-				 </template>
-			 </tbody>
-		 </table>
-	 `
- };
+	       	 //
+	       	 this.startFetchCmpt(
+	       		 CoreFilterAPIs.applyFilterFields,
+	       		 {
+	       			 filterFields: filterFields
+	       		 },
+	       		 this.getFilter
+	       	 );
+	        },
+	        /**
+	         *
+	         */
+	        handlerAddFilterField: function(event) {
+	       	 //
+	       	 this.startFetchCmpt(
+	       		 CoreFilterAPIs.addFilterField,
+	       		 {
+	       			 filterField: event.currentTarget.value
+	       		 },
+	       		 this.getFilter
+	       	 );
+	        },
+	        /**
+	         *
+	         */
+	        handlerAddSelectedField: function(event) {
+	       	 //
+	       	 this.startFetchCmpt(
+	       		 CoreFilterAPIs.addSelectedField,
+	       		 {
+	       			 selectedField: event.currentTarget.value
+	       		 },
+	       		 this.getFilter
+	       	 );
+	        },
+	        /**
+	         *
+	         */
+	        handlerRemoveSelectedField: function(event) {
+	       	 //
+	       	 this.startFetchCmpt(
+	       		 CoreFilterAPIs.removeSelectedField,
+	       		 {
+	       			 selectedField: event.currentTarget.getAttribute('field-to-remove')
+	       		 },
+	       		 this.getFilter
+	       	 );
+	        },
+	        /**
+	         *
+	         */
+	        handlerRemoveFilterField: function(event) {
+	       	 //
+	       	 this.startFetchCmpt(
+	       		 CoreFilterAPIs.removeFilterField,
+	       		 {
+	       			 selectedField: event.currentTarget.getAttribute('field-to-remove')
+	       		 },
+	       		 this.getFilter
+	       	 );
+	        },
+	        /**
+	         *
+	         */
+	        handlerGetFilterById: function(event) {
+	       	 //
+	       	 this.startFetchCmpt(
+	       		 CoreFilterAPIs.getFilterById,
+	       		 {
+	       			 filterId: event.currentTarget.getAttribute("href").substring(1)
+	       		 },
+	       		 this.render
+	       	 );
+	        }
+	},
+	template: `
+	        <!-- Load filter data -->
+	        <core-fetch-cmpt
+	       	 v-bind:api-function="fetchCmptApiFunction"
+	       	 v-bind:api-function-parameters="fetchCmptApiFunctionParams"
+	       	 v-bind:refresh="fetchCmptRefresh"
+	       	 @data-fetched="fetchCmptDataFetched">
+	        </core-fetch-cmpt>
+
+	        <div class="card filter-filter-options">
+	       	 <div class="card-header filter-header-title" data-bs-toggle="collapse" data-bs-target="#collapseFilterHeader">
+	       		 Filter options
+	       	 </div>
+	       	 <div id="collapseFilterHeader" class="card-body collapse">
+	       		 <!-- Filter fields options -->
+	       		 <div class="filter-options-div">
+	       			 <div class="filter-dnd-area">
+	       				 <template v-for="fieldToDisplay in fieldsToDisplay">
+	       					 <span class="filter-dnd-object">
+	       						 {{ fieldToDisplay }}
+	       						 <button
+	       							 type="button"
+	       							 class="btn-close"
+	       							 v-bind:field-to-remove="fieldToDisplay"
+	       							 @click=handlerRemoveSelectedField>
+	       						 </button>
+	       					 </span>
+	       				 </template>
+	       			 </div>
+	       			 <select class="form-select form-select-sm" @change=handlerAddSelectedField>
+	       				 <option value="">Select a field to be displayed...</option>
+	       				 <template v-for="hiddenField in notSelectedFields">
+	       					 <option v-bind:value="hiddenField">{{ hiddenField }}</option>
+	       				 </template>
+	       			 </select>
+	       		 </div>
+	       		 <!-- Filter options -->
+	       		 <div class="filter-options-div">
+	       			 <div>
+	       				 <select class="form-select form-select-sm" @change=handlerAddFilterField>
+	       					 <option value="">Add a field to the filter...</option>
+	       					 <template v-for="notFilterField in notFilterFields">
+	       						 <option v-bind:value="notFilterField">{{ notFilterField }}</option>
+	       					 </template>
+	       				 </select>
+	       			 </div>
+	       			 <div id="filterFields" class="filter-filter-fields">
+	       				 <template v-for="filterField in filterFields">
+	       					 <!-- Numeric -->
+	       					 <div v-if="filterField.type.toLowerCase().indexOf('int') >= 0" class="input-group mb-3">
+	       						 <input type="hidden" name="fieldName" v-bind:value="filterField.name">
+	       						 <span class="input-group-text">{{ filterField.name }}</span>
+	       						 <select class="form-select form-select-sm" name="operation">
+	       							 <option value="equal">Equal</option>
+	       							 <option value="nequal">Not equal</option>
+	       							 <option value="gt">Greater then</option>
+	       							 <option value="lt">Less then</option>
+	       						 </select>
+	       						 <input type="number" class="form-control" v-bind:value="filterField.condition" name="condition">
+	       						 <button
+	       							 class="btn btn-sm btn-outline-dark"
+	       							 type="button"
+	       							 v-bind:field-to-remove="filterField.name"
+	       							 @click=handlerRemoveFilterField>
+	       							 &emsp;X&emsp;
+	       						 </button>
+	       					 </div>
+	       					 <!-- Text -->
+	       					 <div
+	       						 v-if="filterField.type.toLowerCase().indexOf('varchar') >= 0
+	       							 || filterField.type.toLowerCase().indexOf('text') >= 0
+	       							 || filterField.type.toLowerCase().indexOf('bpchar') >= 0"
+	       						 class="input-group mb-3">
+	       						 <input type="hidden" name="fieldName" v-bind:value="filterField.name">
+	       						 <span class="input-group-text">{{ filterField.name }}</span>
+	       						 <select class="form-select form-select-sm" name="operation">
+	       							 <option value="contains">Conrains</option>
+	       							 <option value="ncontains">Does not contain</option>
+	       						 </select>
+	       						 <input type="text" class="form-control" v-bind:value="filterField.condition" name="condition">
+	       						 <button
+	       							 class="btn btn-sm btn-outline-dark"
+	       							 type="button"
+	       							 v-bind:field-to-remove="filterField.name"
+	       							 @click=handlerRemoveFilterField>
+	       							 &emsp;X&emsp;
+	       						 </button>
+	       					 </div>
+	       					 <!-- Timestamp and date -->
+	       					 <div
+	       						 v-if="filterField.type.toLowerCase().indexOf('timestamp') >= 0
+	       							 || filterField.type.toLowerCase().indexOf('date') >= 0"
+	       						 class="input-group mb-3">
+	       						 <input type="hidden" name="fieldName" v-bind:value="filterField.name">
+	       						 <span class="input-group-text">{{ filterField.name }}</span>
+	       						 <select class="form-select form-select-sm" name="operation">
+	       							 <option value="gt">Greater then</option>
+	       							 <option value="lt">Less then</option>
+	       							 <option value="set">Is set</option>
+	       							 <option value="nset">Is not set</option>
+	       						 </select>
+	       						 <input type="number" class="form-control" v-bind:value="filterField.condition" name="condition">
+	       						 <select class="form-select form-select-sm" name="option">
+	       							 <option value="minutes">Minutes</option>
+	       							 <option value="hours">Hours</option>
+	       							 <option value="days">Days</option>
+	       							 <option value="months">Months</option>
+	       						 </select>
+	       						 <button
+	       							 class="btn btn-sm btn-outline-dark"
+	       							 type="button"
+	       							 v-bind:field-to-remove="filterField.name"
+	       							 @click=handlerRemoveFilterField>
+	       							 &emsp;X&emsp;
+	       						 </button>
+	       					 </div>
+	       				 </template>
+	       			 </div>
+	       			 <div>
+	       				 <button type="button" class="btn btn-sm btn-outline-dark" @click=handlerApplyFilterFields>Apply changes</button> 
+	       			 </div>
+	       		 </div>
+	       		 <!-- Filter save options -->
+	       		 <div class="input-group">
+	       			 <input type="text" class="form-control" placeholder="Custom filter name" id="customFilterName">
+	       			 <button type="button" class="btn btn-outline-secondary" @click=handlerSaveCustomFilter>Save</button>
+	       		 </div>
+	       	 </div>
+	        </div>
+	        <table class="tablesorter table-bordered table-responsive" id="filterTableDataset">
+	       	 <thead>
+	       		 <tr>
+	       			 <template v-for="fieldToDisplay in fieldsToDisplay">
+	       				 <th title='{{ fieldToDisplay }}'>{{ fieldToDisplay }}</th>
+	       			 </template>
+	       		 </tr>
+	       	 </thead>
+	       	 <tbody>
+	       		 <template v-for="record in dataset">
+	       			 <tr class="" @click="selectRecord(record)">
+	       				 <template v-for="(value, property) in record">
+	       					 <template v-if="selectedFields.includes(property)">
+	       						 <td>{{ value }}</td>
+	       					 </template>
+	       				 </template>
+	       			 </tr>
+	       		 </template>
+	       	 </tbody>
+	        </table>
+	`
+};
+