add table vue component

2020-10-14 12:51:17 +02:00 · 2020-10-14 12:51:17 +02:00 · 3b302b45d3
commit 3b302b45d3
parent 46ae9a6f23
4 changed files with 325 additions and 89 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -2900,9 +2900,9 @@
 			"dev": true
 		},
 		"acorn-jsx": {
-			"version": "5.2.0",
-			"resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.2.0.tgz",
-			"integrity": "sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==",
+			"version": "5.3.1",
+			"resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz",
+			"integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==",
 			"dev": true
 		},
 		"ajv": {
@ -4942,23 +4942,31 @@
 					"integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
 					"dev": true
 				},
-				"debug": {
-					"version": "4.1.1",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
-					"integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+				"eslint-scope": {
+					"version": "5.1.1",
+					"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+					"integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
 					"dev": true,
 					"requires": {
-						"ms": "^2.1.1"
+						"esrecurse": "^4.3.0",
+						"estraverse": "^4.1.1"
 					}
 				},
-				"eslint-scope": {
-					"version": "5.1.0",
-					"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.0.tgz",
-					"integrity": "sha512-iiGRvtxWqgtx5m8EyQUJihBloE4EnYeGE/bz1wSPwJE6tZuJUtHlhqDM4Xj2ukE8Dyy1+HCZ4hE0fzIVMzb58w==",
+				"esrecurse": {
+					"version": "4.3.0",
+					"resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+					"integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
 					"dev": true,
 					"requires": {
-						"esrecurse": "^4.1.0",
-						"estraverse": "^4.1.1"
+						"estraverse": "^5.2.0"
+					},
+					"dependencies": {
+						"estraverse": {
+							"version": "5.2.0",
+							"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
+							"integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
+							"dev": true
+						}
 					}
 				},
 				"glob-parent": {
@ -4979,28 +4987,6 @@
 						"type-fest": "^0.8.1"
 					}
 				},
-				"import-fresh": {
-					"version": "3.2.1",
-					"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz",
-					"integrity": "sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==",
-					"dev": true,
-					"requires": {
-						"parent-module": "^1.0.0",
-						"resolve-from": "^4.0.0"
-					}
-				},
-				"ms": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-					"dev": true
-				},
-				"resolve-from": {
-					"version": "4.0.0",
-					"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
-					"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-					"dev": true
-				},
 				"semver": {
 					"version": "6.3.0",
 					"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
@ -5015,12 +5001,6 @@
 					"requires": {
 						"ansi-regex": "^4.1.0"
 					}
-				},
-				"strip-json-comments": {
-					"version": "3.1.0",
-					"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.0.tgz",
-					"integrity": "sha512-e6/d0eBu7gHtdCqFt0xJr642LdToM5/cN4Qb9DbHjVx1CP5RyeM+zH7pbecEmDv/lBqb0QH+6Uqq75rxFPkM0w==",
-					"dev": true
 				}
 			}
 		},
@ -5298,6 +5278,72 @@
 				}
 			}
 		},
+		"eslint-plugin-html": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-html/-/eslint-plugin-html-6.1.0.tgz",
+			"integrity": "sha512-xcqithhnjUxoEDRL0hYci4RSS8EZ1NGr3/H8x3BxJvxgbu4R3YaEUea9i93j95NuAgoAbOUfNmybta8fqi4UbA==",
+			"dev": true,
+			"requires": {
+				"htmlparser2": "^4.1.0"
+			},
+			"dependencies": {
+				"dom-serializer": {
+					"version": "1.1.0",
+					"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.1.0.tgz",
+					"integrity": "sha512-ox7bvGXt2n+uLWtCRLybYx60IrOlWL/aCebWJk1T0d4m3y2tzf4U3ij9wBMUb6YJZpz06HCCYuyCDveE2xXmzQ==",
+					"dev": true,
+					"requires": {
+						"domelementtype": "^2.0.1",
+						"domhandler": "^3.0.0",
+						"entities": "^2.0.0"
+					}
+				},
+				"domelementtype": {
+					"version": "2.0.2",
+					"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.2.tgz",
+					"integrity": "sha512-wFwTwCVebUrMgGeAwRL/NhZtHAUyT9n9yg4IMDwf10+6iCMxSkVq9MGCVEH+QZWo1nNidy8kNvwmv4zWHDTqvA==",
+					"dev": true
+				},
+				"domhandler": {
+					"version": "3.3.0",
+					"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-3.3.0.tgz",
+					"integrity": "sha512-J1C5rIANUbuYK+FuFL98650rihynUOEzRLxW+90bKZRWB6A1X1Tf82GxR1qAWLyfNPRvjqfip3Q5tdYlmAa9lA==",
+					"dev": true,
+					"requires": {
+						"domelementtype": "^2.0.1"
+					}
+				},
+				"domutils": {
+					"version": "2.4.2",
+					"resolved": "https://registry.npmjs.org/domutils/-/domutils-2.4.2.tgz",
+					"integrity": "sha512-NKbgaM8ZJOecTZsIzW5gSuplsX2IWW2mIK7xVr8hTQF2v1CJWTmLZ1HOCh5sH+IzVPAGE5IucooOkvwBRAdowA==",
+					"dev": true,
+					"requires": {
+						"dom-serializer": "^1.0.1",
+						"domelementtype": "^2.0.1",
+						"domhandler": "^3.3.0"
+					}
+				},
+				"entities": {
+					"version": "2.0.3",
+					"resolved": "https://registry.npmjs.org/entities/-/entities-2.0.3.tgz",
+					"integrity": "sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ==",
+					"dev": true
+				},
+				"htmlparser2": {
+					"version": "4.1.0",
+					"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-4.1.0.tgz",
+					"integrity": "sha512-4zDq1a1zhE4gQso/c5LP1OtrhYTncXNSpvJYtWJBtXAETPlMfi3IFNjGuQbYLuVY4ZR0QMqRVvo4Pdy9KLyP8Q==",
+					"dev": true,
+					"requires": {
+						"domelementtype": "^2.0.1",
+						"domhandler": "^3.0.0",
+						"domutils": "^2.0.0",
+						"entities": "^2.0.0"
+					}
+				}
+			}
+		},
 		"eslint-plugin-import": {
 			"version": "2.22.1",
 			"resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.22.1.tgz",
@ -5446,9 +5492,9 @@
 			},
 			"dependencies": {
 				"acorn": {
-					"version": "7.3.1",
-					"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.3.1.tgz",
-					"integrity": "sha512-tLc0wSnatxAQHVHUapaHdz72pi9KUyHjq5KyHjGg9Y8Ifdc79pTh2XvI6I1/chZbnM7QtNKzh66ooDogPZSleA==",
+					"version": "7.4.1",
+					"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+					"integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
 					"dev": true
 				}
 			}
@ -5469,9 +5515,9 @@
 			},
 			"dependencies": {
 				"estraverse": {
-					"version": "5.1.0",
-					"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.1.0.tgz",
-					"integrity": "sha512-FyohXK+R0vE+y1nHLoBM7ZTyqRpqAlhdZHCWIWEviFLiGB8b04H6bQs8G+XTthacvT8VuwvteiP7RJSxMs8UEw==",
+					"version": "5.2.0",
+					"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
+					"integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
 					"dev": true
 				}
 			}
@ -6503,9 +6549,9 @@
 			"dev": true
 		},
 		"inquirer": {
-			"version": "7.3.0",
-			"resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.3.0.tgz",
-			"integrity": "sha512-K+LZp6L/6eE5swqIcVXrxl21aGDU4S50gKH0/d96OMQnSBCyGyZl/oZhbkVmdp5sBoINHd4xZvFSARh2dk6DWA==",
+			"version": "7.3.3",
+			"resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.3.3.tgz",
+			"integrity": "sha512-JG3eIAj5V9CwcGvuOmoo6LB9kbAYT8HXffUl6memuszlwDC/qvFAJw49XJ5NROSFNPxp3iQg1GqkFhaY/CR0IA==",
 			"dev": true,
 			"requires": {
 				"ansi-escapes": "^4.2.1",
@ -6514,7 +6560,7 @@
 				"cli-width": "^3.0.0",
 				"external-editor": "^3.0.3",
 				"figures": "^3.0.0",
-				"lodash": "^4.17.15",
+				"lodash": "^4.17.19",
 				"mute-stream": "0.0.8",
 				"run-async": "^2.4.0",
 				"rxjs": "^6.6.0",
@ -6530,12 +6576,11 @@
 					"dev": true
 				},
 				"ansi-styles": {
-					"version": "4.2.1",
-					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
-					"integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+					"version": "4.3.0",
+					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+					"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
 					"dev": true,
 					"requires": {
-						"@types/color-name": "^1.1.1",
 						"color-convert": "^2.0.1"
 					}
 				},
@ -6603,9 +6648,9 @@
 					}
 				},
 				"supports-color": {
-					"version": "7.1.0",
-					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
-					"integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+					"version": "7.2.0",
+					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+					"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
 					"dev": true,
 					"requires": {
 						"has-flag": "^4.0.0"
@ -6943,9 +6988,9 @@
 			"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
 		},
 		"js-yaml": {
-			"version": "3.13.1",
-			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
-			"integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
+			"version": "3.14.0",
+			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.0.tgz",
+			"integrity": "sha512-/4IbIeHcD9VMHFqDR/gQ7EdZdLimOvW2DdcxFjdyyZ9NsbS+ccrXqVWDtab/lRl5AlUqmpBx8EhPaWR+OtY17A==",
 			"dev": true,
 			"requires": {
 				"argparse": "^1.0.7",
@ -8018,9 +8063,9 @@
 			}
 		},
 		"onetime": {
-			"version": "5.1.0",
-			"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.0.tgz",
-			"integrity": "sha512-5NcSkPHhwTVFIQN+TUqXoS5+dlElHXdpAWu9I0HP20YOtIi+aZ0Ct82jdlILDxjLEAWwvm+qj1m6aEtsDVmm6Q==",
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+			"integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
 			"dev": true,
 			"requires": {
 				"mimic-fn": "^2.1.0"
@ -9049,9 +9094,9 @@
 			}
 		},
 		"rxjs": {
-			"version": "6.6.0",
-			"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.0.tgz",
-			"integrity": "sha512-3HMA8z/Oz61DUHe+SdOiQyzIf4tOx5oQHmMir7IZEu6TMqCLHT4LRcmNaUS0NwOz8VLvmmBduMsoaUvMaIiqzg==",
+			"version": "6.6.3",
+			"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.3.tgz",
+			"integrity": "sha512-trsQc+xYYXZ3urjOiJOuCOa5N3jAZ3eiSpQB5hIT8zGlL2QfnHLJ2r7GMkBGuIausdJN1OneaI6gQlsqNHHmZQ==",
 			"dev": true,
 			"requires": {
 				"tslib": "^1.9.0"
@ -9655,6 +9700,12 @@
 				"get-stdin": "^4.0.1"
 			}
 		},
+		"strip-json-comments": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+			"integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+			"dev": true
+		},
 		"style-search": {
 			"version": "0.1.0",
 			"resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz",
@ -10940,9 +10991,9 @@
 			}
 		},
 		"vue-eslint-parser": {
-			"version": "7.1.0",
-			"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.1.0.tgz",
-			"integrity": "sha512-Kr21uPfthDc63nDl27AGQEhtt9VrZ9nkYk/NTftJ2ws9XiJwzJJCnCr3AITQ2jpRMA0XPGDECxYH8E027qMK9Q==",
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.1.1.tgz",
+			"integrity": "sha512-8FdXi0gieEwh1IprIBafpiJWcApwrU+l2FEj8c1HtHFdNXMd0+2jUSjBVmcQYohf/E72irwAXEXLga6TQcB3FA==",
 			"dev": true,
 			"requires": {
 				"debug": "^4.1.1",
@ -10953,32 +11004,34 @@
 				"lodash": "^4.17.15"
 			},
 			"dependencies": {
-				"debug": {
-					"version": "4.1.1",
-					"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
-					"integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
-					"dev": true,
-					"requires": {
-						"ms": "^2.1.1"
-					}
-				},
 				"eslint-scope": {
-					"version": "5.1.0",
-					"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.0.tgz",
-					"integrity": "sha512-iiGRvtxWqgtx5m8EyQUJihBloE4EnYeGE/bz1wSPwJE6tZuJUtHlhqDM4Xj2ukE8Dyy1+HCZ4hE0fzIVMzb58w==",
+					"version": "5.1.1",
+					"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+					"integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
 					"dev": true,
 					"requires": {
-						"esrecurse": "^4.1.0",
+						"esrecurse": "^4.3.0",
 						"estraverse": "^4.1.1"
 					}
 				},
-				"ms": {
-					"version": "2.1.2",
-					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+				"esrecurse": {
+					"version": "4.3.0",
+					"resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+					"integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+					"dev": true,
+					"requires": {
+						"estraverse": "^5.2.0"
+					},
+					"dependencies": {
+						"estraverse": {
+							"version": "5.2.0",
+							"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
+							"integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
 							"dev": true
 						}
 					}
+				}
+			}
 		},
 		"vue-hot-reload-api": {
 			"version": "2.3.4",
--- a/package.json
+++ b/package.json
@ -58,6 +58,7 @@
 		"eslint-config-standard": "^14.1.1",
 		"eslint-import-resolver-webpack": "^0.13.0",
 		"eslint-loader": "^4.0.2",
+		"eslint-plugin-html": "^6.1.0",
 		"eslint-plugin-import": "^2.22.1",
 		"eslint-plugin-node": "^11.1.0",
 		"eslint-plugin-promise": "^4.2.1",
--- a/src/App.vue
+++ b/src/App.vue
@ -16,6 +16,7 @@
 				<Breadcrumb title="Home" href="/" />
 				<Breadcrumb title="Top" href="/Top" />
 			</Breadcrumbs>
+			<Table />
 		</AppContent>
 	</Content>
 </template>
@ -27,6 +28,7 @@ import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation'
 import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
 import Breadcrumbs from '@nextcloud/vue/dist/Components/Breadcrumbs'
 import Breadcrumb from '@nextcloud/vue/dist/Components/Breadcrumb'
+import Table from './components/Table/Table'

 export default {
 	name: 'App',
@ -37,6 +39,7 @@ export default {
 		AppNavigationItem,
 		Breadcrumbs,
 		Breadcrumb,
+		Table,
 	},
 	data() {
 		return {
--- a/src/components/Table/Table.vue
+++ b/src/components/Table/Table.vue
@ -0,0 +1,179 @@
+<template>
+	<table id="table">
+		<thead>
+			<tr>
+				<th>Icon</th>
+				<th id="headerName" class="hidden column-name">
+					<div id="headerName-container">
+						<a class="name sort columntitle" data-sort="name">
+							<span>Name</span>
+							<span class="sort-indicator" />
+
+						</a>
+						<span id="selectedActionsList" class="selectedActions">
+							<a href="" class="actions-selected">
+								<span class="icon icon-more" />
+								<span>Actions</span>
+							</a>
+						</span>
+					</div>
+				</th>
+				<th>Options</th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr>
+				<td>
+					Icon
+				</td>
+				<td class="filename ui-draggable ui-draggable-handle">
+					<a class="name" href="/index.php/apps/files?dir=/&amp;openfile=24">
+						<div class="thumbnail-wrapper">
+							<div class="thumbnail" style="background-image:url(/apps/theming/img/core/filetypes/application-pdf.svg?v=0);">
+								<div class="favorite-mark ">
+									<span class="icon icon-star" />
+									<span class="hidden-visually">Not favorited</span>
+								</div>
+							</div>
+						</div>
+						<span class="nametext">
+							<span class="innernametext">Reasons to use Nextcloud</span>
+						</span>
+						<span class="fileactions">
+							<a class="action action-share permanent"
+								href="#"
+								data-action="Share"
+								data-original-title=""
+								title="">
+								<span class="icon icon-shared" />
+								<span> Share</span>
+							</a>
+							<a class="action action-menu permanent"
+								href="#"
+								data-action="menu"
+								data-original-title=""
+								title="">
+								<span class="icon icon-more" />
+								<span class="hidden-visually">Actions</span>
+							</a>
+						</span>
+					</a>
+				</td>
+				<td>
+					Options
+				</td>
+			</tr>
+		</tbody>
+	</table>
+</template>
+
+<style lang="scss">
+table {
+	position: relative;
+	width: 100%;
+	min-width: 250px;
+	display: block;
+	flex-direction: column;
+
+	thead {
+		position: -webkit-sticky;
+		position: sticky;
+		//@include position('sticky');
+		// header + breadcrumbs
+		//top: $header-height;
+		// under breadcrumbs, over file list
+		z-index: 60;
+		display: block;
+		background-color: var(--color-main-background-translucent);
+	}
+
+	tbody {
+		display: table;
+		width: 100%;
+
+		tr {
+			height: 51px;
+			background-color: var(--color-background-dark);
+
+			td.filename .nametext .innernametext {
+				color: var(--color-text-maxcontrast);
+			}
+
+			tr:hover, tr:focus, tr:hover .filename form, tr.mouseOver td {
+				background-color: var(--color-background-hover);
+			}
+
+			tr:active, tr.highlighted, tr.highlighted .name:focus, tr.selected,
+			tr.searchresult {
+				background-color: var(--color-primary-light);
+			}
+
+		}
+
+		a { color: var(--color-main-text); }
+	}
+
+}
+
+table th, table th a {
+	color: var(--color-text-maxcontrast);
+}
+
+table th .columntitle {
+	display: block;
+	padding: 15px;
+	height: 50px;
+	box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	vertical-align: middle;
+}
+
+table th .columntitle.name {
+	padding-left: 0;
+	margin-left: 50px;
+}
+
+table th,
+table td {
+	border-bottom: 1px solid var(--color-border);
+	text-align: left;
+	font-weight: normal;
+}
+
+table td {
+	padding: 0 15px;
+	font-style: normal;
+	background-position: 8px center;
+	background-repeat: no-repeat;
+}
+
+table th#headerName {
+	position: relative;
+	width: 9999px; /* not really sure why this works better than 100% … table styling */
+	padding: 0;
+}
+
+#headerName-container {
+	position: relative;
+	height: 50px;
+}
+
+table th#headerSize, table td.filesize {
+	text-align: right;
+}
+
+table th#headerDate, table td.date,
+table th.column-last, table td.column-last {
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+	position: relative;
+	/* this can not be just width, both need to be set … table styling */
+	min-width: 130px;
+	max-width: 130px;
+}
+
+#app-content-files thead {
+	top: 94px;
+}
+
+</style>