feat(AdvancedTable): Toggle pinned column logic

frontend/src/components/AdvancedTable.vue

@@ -201,7 +201,7 @@
 											{{ column.displayName }}
 										</span>
 										<span
-											v-if="column.draggable"
+											v-if="column.pinable"
 											content="Toggle Pinned Column"
 											v-tippy
 											@click="togglePinnedColumn(column)"
@@ -209,7 +209,10 @@
 											<span
 												:class="{
 													'material-icons': true,
-													active: false
+													active:
+														pinnedColumns.indexOf(
+															column.name
+														) !== -1
 												}"
 											>
 												push_pin
@@ -450,6 +453,7 @@ export default {
 			sort: {},
 			orderedColumns: [],
 			shownColumns: [],
+			pinnedColumns: ["select"],
 			columnDragOptions() {
 				return {
 					animation: 200,
@@ -618,6 +622,16 @@ export default {
 			}
 			return this.getData();
 		},
+		togglePinnedColumn(column) {
+			if (this.pinnedColumns.indexOf(column.name) !== -1) {
+				this.pinnedColumns.splice(
+					this.pinnedColumns.indexOf(column.name),
+					1
+				);
+			} else {
+				this.pinnedColumns.push(column.name);
+			}
+		},
 		clickItem(itemIndex, event) {
 			const { shiftKey, ctrlKey } = event;
 			// Shift was pressed, so attempt to select all items between the clicked item and last clicked item

frontend/src/pages/Admin/tabs/Test.vue

@@ -86,6 +86,7 @@ export default {
 				defaultVisibility: "shown",
 				draggable: true,
 				resizable: true,
+				pinable: true,
 				minWidth: 200,
 				maxWidth: 600
 			},