diff --git a/src/assets/styles/tables.css b/src/assets/styles/tables.css index 59d1d69..758b10c 100644 --- a/src/assets/styles/tables.css +++ b/src/assets/styles/tables.css @@ -77,6 +77,10 @@ table.sqliteviz-table { border-bottom: 1px solid var(--color-border-light); border-right: 1px solid var(--color-border-light); } +.sqliteviz-table tbody td:focus { + outline: none; + box-shadow:inset 0 0 0 1px var(--color-accent); +} .sqliteviz-table td, .sqliteviz-table th, .fixed-header { diff --git a/src/components/SqlTable/index.vue b/src/components/SqlTable/index.vue index 908ac4d..6872d17 100644 --- a/src/components/SqlTable/index.vue +++ b/src/components/SqlTable/index.vue @@ -18,7 +18,11 @@ ref="table-container" @scroll="onScrollTable" > -
| @@ -28,7 +32,13 @@ | |
|---|---|
| + |
{{ dataSet.values[col][rowIndex - 1 + currentPageData.start] }}
@@ -110,6 +120,55 @@ export default {
},
onScrollTable () {
this.$refs['header-container'].scrollLeft = this.$refs['table-container'].scrollLeft
+ },
+ onTableKeydown (e) {
+ const keyCodeMap = {
+ 37: 'left',
+ 39: 'right',
+ 38: 'up',
+ 40: 'down'
+ }
+
+ if (!Object.keys(keyCodeMap).includes(e.keyCode.toString())) {
+ return
+ }
+
+ this.moveFocusInTable(e.target, keyCodeMap[e.keyCode])
+ },
+ moveFocusInTable (initialCell, direction) {
+ const currentRowIndex = +initialCell.dataset.row
+ const currentColIndex = +initialCell.dataset.col
+ let newRowIndex, newColIndex
+
+ if (direction === 'right') {
+ if (currentColIndex === this.columns.length - 1) {
+ newRowIndex = currentRowIndex + 1
+ newColIndex = 0
+ } else {
+ newRowIndex = currentRowIndex
+ newColIndex = currentColIndex + 1
+ }
+ } else if (direction === 'left') {
+ if (currentColIndex === 0) {
+ newRowIndex = currentRowIndex - 1
+ newColIndex = this.columns.length - 1
+ } else {
+ newRowIndex = currentRowIndex
+ newColIndex = currentColIndex - 1
+ }
+ } else if (direction === 'up') {
+ newRowIndex = currentRowIndex - 1
+ newColIndex = currentColIndex
+ } else if (direction === 'down') {
+ newRowIndex = currentRowIndex + 1
+ newColIndex = currentColIndex
+ }
+
+ const newCell = this.$refs.table
+ .querySelector(`td[data-col="${newColIndex}"][data-row="${newRowIndex}"]`)
+ if (newCell) {
+ newCell.focus()
+ }
}
},
mounted () {
|