diff --git a/src/components/SqlTable/index.vue b/src/components/SqlTable/index.vue index c8306bf..3ff73d7 100644 --- a/src/components/SqlTable/index.vue +++ b/src/components/SqlTable/index.vue @@ -37,6 +37,7 @@ v-for="(col, colIndex) in columns" :data-col="colIndex" :data-row="rowIndex - 1" + :data-record="pageSize * (currentPage - 1) + rowIndex - 1" :key="colIndex" :aria-selected="false" @click="onCellClick" @@ -74,13 +75,18 @@ export default { type: Number, default: 20 }, - preview: Boolean + page: { + type: Number, + default: 1 + }, + preview: Boolean, + selectedCellCoordinates: Object }, data () { return { header: null, tableWidth: null, - currentPage: 1, + currentPage: this.page, resizeObserver: null, selectedCellElement: null } @@ -112,6 +118,20 @@ export default { } } }, + mounted () { + this.resizeObserver = new ResizeObserver(this.calculateHeadersWidth) + this.resizeObserver.observe(this.$refs.table) + this.calculateHeadersWidth() + + if (this.selectedCellCoordinates) { + const { row, col } = this.selectedCellCoordinates + const cell = this.$refs.table + .querySelector(`td[data-col="${col}"][data-row="${row}"]`) + if (cell) { + this.selectCell(cell) + } + } + }, methods: { calculateHeadersWidth () { this.tableWidth = this.$refs['table-container'].offsetWidth @@ -132,7 +152,10 @@ export default { 40: 'down' } - if (!Object.keys(keyCodeMap).includes(e.keyCode.toString())) { + if ( + !this.selectedCellElement || + !Object.keys(keyCodeMap).includes(e.keyCode.toString()) + ) { return } e.preventDefault() @@ -192,11 +215,6 @@ export default { } } }, - mounted () { - this.resizeObserver = new ResizeObserver(this.calculateHeadersWidth) - this.resizeObserver.observe(this.$refs.table) - this.calculateHeadersWidth() - }, beforeDestroy () { this.resizeObserver.unobserve(this.$refs.table) }, diff --git a/src/views/Main/Workspace/Tabs/Tab/RunResult/Record/index.vue b/src/views/Main/Workspace/Tabs/Tab/RunResult/Record/index.vue index 16f1e24..31832b3 100644 --- a/src/views/Main/Workspace/Tabs/Tab/RunResult/Record/index.vue +++ b/src/views/Main/Workspace/Tabs/Tab/RunResult/Record/index.vue @@ -54,15 +54,11 @@ export default { props: { dataSet: Object, time: String, - pageSize: { - type: Number, - default: 20 - }, - rowIndex: { type: Number, default: 0 } + rowIndex: { type: Number, default: 0 }, + selectedColumnIndex: Number }, data () { return { - currentPage: 1, selectedCellElement: null, currentRowIndex: this.rowIndex } @@ -73,21 +69,13 @@ export default { }, rowCount () { return this.dataSet.values[this.columns[0]].length - }, - pageCount () { - return Math.ceil(this.rowCount / this.pageSize) - }, - currentPageData () { - const start = (this.currentPage - 1) * this.pageSize - let end = start + this.pageSize - if (end > this.rowCount - 1) { - end = this.rowCount - 1 - } - return { - start, - end, - count: end - start + 1 - } + } + }, + mounted () { + const cell = this.$refs.table + .querySelector(`td[data-col="1"][data-row="${this.selectedColumnIndex}"]`) + if (cell) { + this.selectCell(cell) } }, methods: { @@ -97,7 +85,10 @@ export default { 40: 'down' } - if (!Object.keys(keyCodeMap).includes(e.keyCode.toString())) { + if ( + !this.selectedCellElement || + !Object.keys(keyCodeMap).includes(e.keyCode.toString()) + ) { return } e.preventDefault() @@ -133,11 +124,6 @@ export default { this.selectCell(newCell) } } - }, - watch: { - dataSet () { - this.currentPage = 1 - } } } @@ -169,4 +155,8 @@ table.sqliteviz-table { overflow: hidden; text-overflow: ellipsis; } + +.table-footer { + align-items: center; +} diff --git a/src/views/Main/Workspace/Tabs/Tab/RunResult/index.vue b/src/views/Main/Workspace/Tabs/Tab/RunResult/index.vue index 3c3a4be..2a8f469 100644 --- a/src/views/Main/Workspace/Tabs/Tab/RunResult/index.vue +++ b/src/views/Main/Workspace/Tabs/Tab/RunResult/index.vue @@ -1,5 +1,5 @@