feat(AdvancedTable): Default column properties

frontend/src/App.vue

@@ -1103,6 +1103,10 @@ img {
 					background-color: var(--light-grey-3);
 					transition: 0.2s;
 					border-radius: 34px;
+
+					&.disabled {
+						cursor: not-allowed;
+					}
 				}
 
 				.slider:before {

frontend/src/components/AdvancedTable.vue

@@ -112,7 +112,13 @@
 												toggleColumnVisibility(column)
 											"
 										/>
-										<span class="slider round"></span>
+										<span
+											:class="{
+												slider: true,
+												round: true,
+												disabled: !column.hidable
+											}"
+										></span>
 									</label>
 									<label :for="index">
 										<span></span>
@@ -342,6 +348,7 @@ export default {
 		width: Width of column, e.g. 100px
 		maxWidth: Maximum width of column, e.g. 150px
 		*/
+		columnDefault: { type: Object, default: () => {} },
 		columns: { type: Array, default: null },
 		filters: { type: Array, default: null },
 		dataAction: { type: String, default: null }
@@ -414,7 +421,10 @@ export default {
 			},
 			...this.columns
 		];
-		this.orderedColumns = columns;
+		this.orderedColumns = columns.map(column => ({
+			...this.columnDefault,
+			...column
+		}));
 		// A column will be shown if the defaultVisibility is set to shown, OR if the defaultVisibility is not set to shown and hidable is false
 		this.shownColumns = columns
 			.filter(column => column.defaultVisibility !== "hidden")

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

@@ -3,6 +3,7 @@
 		<page-metadata title="Admin | Test" />
 		<div class="admin-container">
 			<advanced-table
+				:column-default="columnDefault"
 				:columns="columns"
 				:filters="filters"
 				data-action="songs.getData"
@@ -65,86 +66,61 @@ export default {
 	},
 	data() {
 		return {
+			columnDefault: {
+				sortable: true,
+				hidable: true,
+				defaultVisibility: "shown",
+				draggable: true
+			},
 			columns: [
 				{
 					name: "thumbnailImage",
 					displayName: "Thumb",
 					properties: ["thumbnail"],
-					sortable: false,
-					hidable: true,
-					defaultVisibility: "shown",
-					width: "50px",
-					draggable: true
+					width: "50px"
 				},
 				{
 					name: "_id",
 					displayName: "Musare ID",
 					properties: ["_id"],
-					sortable: true,
-					sortProperty: "_id",
-					hidable: true,
-					defaultVisibility: "shown",
-					draggable: true
+					sortProperty: "_id"
 				},
 				{
 					name: "youtubeId",
 					displayName: "YouTube ID",
 					properties: ["youtubeId"],
-					sortable: true,
-					sortProperty: "youtubeId",
-					hidable: true,
-					defaultVisibility: "shown",
-					draggable: true
+					sortProperty: "youtubeId"
 				},
 				{
 					name: "title",
 					displayName: "Title",
 					properties: ["title"],
-					sortable: true,
-					sortProperty: "title",
-					hidable: true,
-					defaultVisibility: "shown",
-					draggable: true
+					sortProperty: "title"
 				},
 				{
 					name: "artists",
 					displayName: "Artists",
 					properties: ["artists"],
-					sortable: false,
-					sortProperty: "artists",
-					hidable: true,
-					defaultVisibility: "shown",
-					draggable: true
+					sortable: false
 				},
 				{
 					name: "genres",
 					displayName: "Genres",
 					properties: ["genres"],
-					sortable: false,
-					sortProperty: "genres",
-					hidable: true,
-					defaultVisibility: "shown",
-					draggable: true
+					sortable: false
 				},
 				{
 					name: "thumbnailUrl",
 					displayName: "Thumbnail (URL)",
 					properties: ["thumbnail"],
-					sortable: true,
 					sortProperty: "thumbnail",
-					hidable: true,
-					defaultVisibility: "hidden",
-					draggable: true
+					defaultVisibility: "hidden"
 				},
 				{
 					name: "requestedBy",
 					displayName: "Requested By",
 					properties: ["requestedBy"],
-					sortable: true,
-					sortProperty: "requestedBy",
-					hidable: true,
-					defaultVisibility: "shown",
-					draggable: true
+					sortProperty: "requestedBy"
 				}
 			],
 			filters: [