Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Tabulator version update #1975

Merged
merged 5 commits into from
Mar 8, 2024
Merged

Tabulator version update #1975

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1eef3f8
update tabulator version
azmy60 Feb 23, 2024
6a2c56f
hide row header from data export
azmy60 Feb 23, 2024
53a25a5
Merge branch 'master' into tabulator-update
azmy60 Mar 7, 2024
1734b7a
unable to right click column headers and resize them
azmy60 Mar 7, 2024
f318729
Merge branch 'master' into tabulator-update
azmy60 Mar 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/studio/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@
"sql-formatter": "~10.7.2",
"sql-query-identifier": "^2.6.0",
"ssh2": "^1.14.0",
"tabulator-tables": "beekeeper-studio/tabulator#93b922ff4cc9bec5485fa546527eda702ad17f1b",
"tabulator-tables": "beekeeper-studio/tabulator#a00978c782ead8470fa0b099f0a082911039906c",
"tinyduration": "^3.2.4",
"typeface-roboto": "^0.0.75",
"typeface-source-code-pro": "^1.1.3",
Expand Down
29 changes: 15 additions & 14 deletions apps/studio/src/assets/styles/app/vendor/tabulator.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,14 +110,14 @@ $columnResizeGuideColor: mix($query-editor-bg, $theme-base, 80%);
&.tabulator-row-odd {
background-color: rgba($theme-base, 0.015);
}
&.tabulator-spreadsheet-selected.tabulator-row-even:hover {
&.tabulator-range-selected.tabulator-row-even:hover {
background-color: transparent;
}
&.tabulator-spreadsheet-highlight .tabulator-cell.tabulator-frozen.tabulator-spreadsheet-row-header {
&.tabulator-range-highlight .tabulator-cell.tabulator-frozen.tabulator-range-row-header {
background-color: $header-highlight !important;
color: $text-dark;
}
&.tabulator-spreadsheet-selected .tabulator-cell.tabulator-frozen.tabulator-spreadsheet-row-header {
&.tabulator-range-selected .tabulator-cell.tabulator-frozen.tabulator-range-row-header {
background-color: $header-selected !important;
color: black;
font-weight: bold;
Expand Down Expand Up @@ -149,7 +149,7 @@ $columnResizeGuideColor: mix($query-editor-bg, $theme-base, 80%);
height: $row-height;
line-height: $row-height;
cursor: default;
&:not(.tabulator-spreadsheet-row-header) {
&:not(.tabulator-range-row-header) {
border-radius: $cell-radius;
}
&:first-of-type {
Expand All @@ -158,7 +158,7 @@ $columnResizeGuideColor: mix($query-editor-bg, $theme-base, 80%);
&:last-of-type {
padding-right: $cell-padding * 1.5;
}
&.tabulator-frozen.tabulator-spreadsheet-row-header {
&.tabulator-frozen.tabulator-range-row-header {
padding: 0;
background-color: $query-editor-bg;
border-right: 0 !important;
Expand Down Expand Up @@ -320,11 +320,11 @@ $columnResizeGuideColor: mix($query-editor-bg, $theme-base, 80%);
&:hover {
background-color: rgba($theme-base, 0.05);
cursor: default;
&.tabulator-spreadsheet-selected:not(.tabulator-spreadsheet-only-cell-selected) {
&.tabulator-range-selected:not(.tabulator-range-only-cell-selected) {
background-color: rgba($theme-base, 0.05);
}
}
&.tabulator-spreadsheet-selected:not(.tabulator-spreadsheet-only-cell-selected) {
&.tabulator-range-selected:not(.tabulator-range-only-cell-selected) {
background-color: rgba($theme-base, 0.05);
}
}
Expand Down Expand Up @@ -422,18 +422,18 @@ $columnResizeGuideColor: mix($query-editor-bg, $theme-base, 80%);
font-size: 90%;
line-height: 1;
flex-direction: row;
&:not(.tabulator-spreadsheet-row-header):not(.tabulator-spreadsheet-selected) {
&:not(.tabulator-range-row-header):not(.tabulator-range-selected) {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
&.tabulator-spreadsheet-highlight {
&.tabulator-range-highlight {
background-color: $header-highlight;
}
&.tabulator-spreadsheet-selected {
&.tabulator-range-selected {
background-color: $header-selected;
color: black;
}
&.tabulator-spreadsheet-row-header {
&.tabulator-range-row-header {
background-color: transparent;
border: none;
}
Expand Down Expand Up @@ -736,6 +736,7 @@ $columnResizeGuideColor: mix($query-editor-bg, $theme-base, 80%);
padding: 0.3rem 0;

.tabulator-menu-item {
// TODO this might not be used
&:hover, &.tabulator-spreadsheet-menu-item-focused {
background: rgba($theme-base, 0.05);
}
Expand Down Expand Up @@ -772,7 +773,7 @@ $columnResizeGuideColor: mix($query-editor-bg, $theme-base, 80%);

@import './tabulator/magics.scss';

.tabulator-range-overlay {
.tabulator .tabulator-tableholder .tabulator-range-overlay {
.tabulator-range, .tabulator-range-cell-active {
border-color: darken($theme-primary, 20%);
border-width: 1px;
Expand All @@ -790,11 +791,11 @@ $columnResizeGuideColor: mix($query-editor-bg, $theme-base, 80%);
outline: none;
.tabulator-col {

&:hover:not(.tabulator-spreadsheet-selected) {
&:hover:not(.tabulator-range-selected) {
background: rgba($theme-base, 0.035);
}

&.tabulator-spreadsheet-selected {
&.tabulator-range-selected {
&.primary-key:before {
color: black;
}
Expand Down
72 changes: 53 additions & 19 deletions apps/studio/src/components/editor/ResultTable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
import { markdownTable } from 'markdown-table'
import * as intervalParse from 'postgres-interval'
import * as td from 'tinyduration'
import { copyRange, copyActionsMenu, commonColumnMenu } from '@/lib/menu/tableMenu';
import { copyRange, copyActionsMenu, commonColumnMenu, resizeAllColumnsToFitContent, resizeAllColumnsToFixedWidth } from '@/lib/menu/tableMenu';

export default {
mixins: [Converter, Mutators],
Expand Down Expand Up @@ -71,19 +71,19 @@
tableColumns() {
const columnWidth = this.result.fields.length > 30 ? globals.bigTableColumnWidth : undefined

const cellMenu = (_, cell) => {
const cellMenu = (_e, cell) => {
return copyActionsMenu({
range: cell.getRange(),
range: _.last(cell.getRanges()),
connection: this.connection,
table: 'mytable',
schema: this.connection.defaultSchema(),
})
}

const columnMenu = (_, column) => {
const columnMenu = (_e, column) => {
return [
...copyActionsMenu({
range: column.getRange(),
range: _.last(range.getRanges()),
connection: this.connection,
table: 'mytable',
schema: this.connection.defaultSchema(),
Expand All @@ -93,7 +93,7 @@
]
}

return this.result.fields.map((column, index) => {
const columns = this.result.fields.map((column, index) => {
const title = column.name || `Result ${index}`
const result = {
title,
Expand All @@ -111,13 +111,55 @@
contextMenu: cellMenu,
headerContextMenu: columnMenu,
headerMenu: columnMenu,
resizable: 'header',
}
if (column.dataType === 'INTERVAL') {
// add interval sorter
result['sorter'] = this.intervalSorter;
}
return result;
})

const rowHeader = {
field: '--row-header--bks',
resizable: false,
frozen: true,
headerSort: false,
editor: false,
htmlOutput: false,
print: false,
clipboard: false,
download: false,
width: 40,
hozAlign: 'center',
formatter: 'rownum',
formatterParams: { relativeToPage: true },
contextMenu: (_e, cell) => {
return copyActionsMenu({
range: _.last(cell.getRanges()),
connection: this.connection,
table: 'mytable',
schema: this.connection.defaultSchema(),
})
},
headerContextMenu: () => {
return [
...copyActionsMenu({
range: _.last(range.getRanges()),
connection: this.connection,
table: 'mytable',
schema: this.connection.defaultSchema(),
}),
{ separator: true },
resizeAllColumnsToFitContent,
resizeAllColumnsToFixedWidth,
]
},
}

columns.unshift(rowHeader)

return columns
},
columnIdTitleMap() {
const result = {}
Expand All @@ -141,32 +183,24 @@
this.tabulator.destroy()
}
this.tabulator = new TabulatorFull(this.$refs.tabulator, {
spreadsheet: true,
selectableRange: true,
selectableRangeColumns: true,
selectableRangeRows: true,
resizableColumnGuide: true,
data: this.tableData, //link data to table
reactiveData: true,
renderHorizontal: 'virtual',
columns: this.tableColumns, //define table columns
height: this.actualTableHeight,
nestedFieldSeparator: false,
spreadsheetRowHeader: {
field: '--row-header--bks',
contextMenu: (_, cell) => {
return copyActionsMenu({
range: cell.getRange(),
connection: this.connection,
table: 'mytable',
schema: this.connection.defaultSchema(),
})
}
},
downloadConfig: {
columnHeaders: true
},
});
},
copySelection() {
if (!document.activeElement.classList.contains('tabulator-tableholder')) return
copyRange({ range: this.tabulator.getActiveRange(), type: 'plain' })
copyRange({ range: _.last(this.tabulator.getRanges()), type: 'plain' })
},
dataToJson(rawData, firstObjectOnly) {
const rows = _.isArray(rawData) ? rawData : [rawData]
Expand Down