Last active
May 6, 2021 14:50
-
-
Save KinyuaMwaniki/737893738adbcc3aa4c54add6ee184a4 to your computer and use it in GitHub Desktop.
Scrollable html table vue and javascript
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <breeze-authenticated-layout> | |
| <template #header> | |
| <h2 class="font-semibold text-xl text-gray-800 leading-tight"> | |
| Dashboard | |
| </h2> | |
| </template> | |
| <div class="py-12"> | |
| <div class="mb-6 max-w-7xl mx-auto sm:px-6 lg:px-8"> | |
| <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg"> | |
| <div class="flex justify-between p-6 bg-white"> | |
| <h2>Name: {{ selectedUser.name }}</h2> | |
| <h2>Age: {{ selectedUser.age }}</h2> | |
| <h2>Height: {{ selectedUser.height }}</h2> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="max-w-7xl mx-auto sm:px-6 lg:px-8"> | |
| <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg"> | |
| <div class="p-6 bg-white border-b border-gray-200"> | |
| <table id="users-table" class="w-full border-collapse"> | |
| <thead class="bg-blue-300"> | |
| <th | |
| class="py-3 pl-3 text-left border-1 border-gray-400 border-solid" | |
| > | |
| Name | |
| </th> | |
| <th | |
| class="py-3 pl-3 text-left border-1 border-gray-400 border-solid" | |
| > | |
| Age | |
| </th> | |
| <th | |
| class="py-3 pl-3 text-left border-1 border-gray-400 border-solid" | |
| > | |
| Height | |
| </th> | |
| </thead> | |
| <tbody> | |
| <tr | |
| class="hover:bg-blue-100" | |
| v-for="user in users" | |
| :key="user.name" | |
| :data-id="user.name" | |
| > | |
| <td class="py-3 pl-3 border-1 border-gray-400 border-solid"> | |
| {{ user.name }} | |
| </td> | |
| <td class="py-3 pl-3 border-1 border-gray-400 border-solid"> | |
| {{ user.age }} | |
| </td> | |
| <td class="py-3 pl-3 border-1 border-gray-400 border-solid"> | |
| {{ user.height }} | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </breeze-authenticated-layout> | |
| </template> | |
| <script> | |
| import BreezeAuthenticatedLayout from "@/Layouts/Authenticated"; | |
| export default { | |
| data() { | |
| return { | |
| users: [ | |
| { | |
| name: "Felix", | |
| age: 30, | |
| height: 160, | |
| }, | |
| { | |
| name: "Jane", | |
| age: 35, | |
| height: 144, | |
| }, | |
| { | |
| name: "John", | |
| age: 19, | |
| height: 184, | |
| }, | |
| { | |
| name: "Allan", | |
| age: 26, | |
| height: 140, | |
| }, | |
| { | |
| name: "Mike", | |
| age: 31, | |
| height: 190, | |
| }, | |
| ], | |
| highlightedUsername: null, | |
| selectedUser: {}, | |
| }; | |
| }, | |
| components: { | |
| BreezeAuthenticatedLayout, | |
| }, | |
| props: { | |
| auth: Object, | |
| errors: Object, | |
| }, | |
| mounted() { | |
| this.tableRowHandler(); | |
| window.addEventListener("keydown", (event) => { | |
| if (event.key === "ArrowDown") { | |
| if (this.highlightedUsername !== null) { | |
| event.preventDefault(); | |
| this.moveRow("down"); | |
| } | |
| } | |
| if (event.key === "ArrowUp") { | |
| if (this.highlightedUsername !== null) { | |
| event.preventDefault(); | |
| this.moveRow("up"); | |
| } | |
| } | |
| if (event.key === "Enter") { | |
| this.selectUser(); | |
| } | |
| }); | |
| }, | |
| watch: { | |
| highlightedUsername(newValue, oldValue) { | |
| for (const row of this.userTableRows) { | |
| if (row.getAttribute("data-id") === oldValue) { | |
| row.classList.remove("bg-blue-100"); | |
| } else if (row.getAttribute("data-id") === newValue) { | |
| row.classList.add("bg-blue-100"); | |
| } | |
| } | |
| }, | |
| }, | |
| computed: { | |
| userTableRows() { | |
| const table = document.getElementById("users-table"); | |
| return table.getElementsByTagName("tr"); | |
| }, | |
| }, | |
| methods: { | |
| selectUser() { | |
| this.selectedUser = this.users.find((user) => { | |
| return user.name === this.highlightedUsername; | |
| }); | |
| }, | |
| tableRowHandler() { | |
| for (const row of this.userTableRows) { | |
| row.addEventListener("click", () => { | |
| this.highlightedUsername = row.getAttribute("data-id"); | |
| }); | |
| row.addEventListener("dblclick", (event) => { | |
| event.preventDefault(); | |
| this.selectUser(); | |
| }); | |
| } | |
| }, | |
| moveRow(direction) { | |
| let currentRowIndex; | |
| for (let index = 0; index < this.userTableRows.length; index++) { | |
| if ( | |
| this.userTableRows[index].getAttribute("data-id") === | |
| this.highlightedUsername | |
| ) { | |
| currentRowIndex = index; | |
| } | |
| } | |
| if ( | |
| direction === "down" && | |
| currentRowIndex < this.userTableRows.length - 1 | |
| ) { | |
| this.highlightedUsername = this.userTableRows[ | |
| currentRowIndex + 1 | |
| ].getAttribute("data-id"); | |
| } else if (direction === "up" && currentRowIndex !== 0) { | |
| this.highlightedUsername = this.userTableRows[ | |
| currentRowIndex - 1 | |
| ].getAttribute("data-id"); | |
| } | |
| }, | |
| }, | |
| }; | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment