diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/TableDataContext.ts b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/TableDataContext.ts index 5ee6751e58..53ecba847b 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/TableDataContext.ts +++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/TableDataContext.ts @@ -38,6 +38,8 @@ export interface ITableData { hasDescription: boolean; columns: Array; columnKeys: IGridColumnKey[]; + visualColumnKeys: IGridColumnKey[]; + visualColumns: Array; rows: IGridRowKey[]; gridDiv: HTMLDivElement | null; inBounds: (position: IGridDataKey) => boolean; @@ -48,6 +50,7 @@ export interface ITableData { getColumnInfo: (key: IGridColumnKey) => SqlResultColumn | undefined; getColumnsInRange: (startIndex: number, endIndex: number) => Array; getColumnIndexFromColumnKey: (column: IGridColumnKey) => number; + getVisualColumnIndexFromColumnKey: (column: IGridColumnKey) => number; getRowIndexFromKey: (row: IGridRowKey) => number; getEditionState: (key: IGridDataKey) => DatabaseEditChangeType | null; isCellEdited: (key: IGridDataKey) => boolean; diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/useGridSelectedCellsCopy.ts b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/useGridSelectedCellsCopy.ts index 40abbdfc52..a56b3fabf6 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/useGridSelectedCellsCopy.ts +++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/useGridSelectedCellsCopy.ts @@ -46,7 +46,7 @@ function getSelectedCellsValue(tableData: ITableData, selectedCells: Map GridDataKeysUtils.isEqual(columnKey, column))) { continue; } diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/useGridSelectedCellsPaste.ts b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/useGridSelectedCellsPaste.ts index f277bacdda..9b83d644c6 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/useGridSelectedCellsPaste.ts +++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/useGridSelectedCellsPaste.ts @@ -79,7 +79,7 @@ export function useGridSelectedCellsPaste( } const getRowIdx = (key: IGridDataKey) => tableData.getRowIndexFromKey(key.row); - const getColIdx = (key: IGridDataKey) => tableData.getColumnIndexFromColumnKey(key.column); + const getColIdx = (key: IGridDataKey) => tableData.getVisualColumnIndexFromColumnKey(key.column); // row-major order (top-to-bottom, left-to-right) const targets = selectedCells.slice().sort((a, b) => { diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/useTableData.tsx b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/useTableData.tsx index 47076302dd..ebfd89d1fc 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/useTableData.tsx +++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/useTableData.tsx @@ -62,20 +62,17 @@ export function useTableData( get columnKeys(): IGridColumnKey[] { return this.view.columnKeys; }, + get visualColumnKeys(): IGridColumnKey[] { + return this.view.visualColumnKeys; + }, get rows(): IGridRowKey[] { return this.view.rowKeys; }, get columns() { - if (this.columnKeys.length === 0) { - return []; - } - - const columns: Array = this.columnKeys.map(col => ({ - key: col, - })); - columns.unshift({ key: null }); - - return columns; + return getColumns(this.columnKeys); + }, + get visualColumns() { + return getColumns(this.visualColumnKeys); }, get hasDescription(): boolean { if (!this.dataGridSettingsService.description) { @@ -103,7 +100,10 @@ export function useTableData( return this.view.getCellHolder(key) as IDatabaseValueHolder; }, getColumnIndexFromColumnKey(columnKey) { - return this.columns.findIndex(column => column.key !== null && GridDataKeysUtils.isEqual(columnKey, column.key)); + return getColumnIndex(columnKey, this.columns); + }, + getVisualColumnIndexFromColumnKey(columnKey) { + return getColumnIndex(columnKey, this.visualColumns); }, getRowIndexFromKey(rowKey) { return this.rows.findIndex(row => GridDataKeysUtils.isEqual(rowKey, row)); @@ -171,6 +171,8 @@ export function useTableData( columns: computed, rows: computed, columnKeys: computed, + visualColumns: computed, + visualColumnKeys: computed, hasDescription: computed, formatting: observable.ref, format: observable.ref, @@ -192,3 +194,21 @@ export function useTableData( }, ); } + +function getColumns(columnKeys: IGridColumnKey[]): IColumnInfo[] { + if (columnKeys.length === 0) { + return []; + } + + const columns: Array = columnKeys.map(col => ({ + key: col, + })); + + columns.unshift({ key: null }); + + return columns; +} + +function getColumnIndex(columnKey: IGridColumnKey, columns: IColumnInfo[]): number { + return columns.findIndex(column => column.key !== null && GridDataKeysUtils.isEqual(column.key, columnKey)); +} diff --git a/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/Grid/GridViewAction.ts b/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/Grid/GridViewAction.ts index 437e9e6eca..365888079b 100644 --- a/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/Grid/GridViewAction.ts +++ b/webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/Grid/GridViewAction.ts @@ -73,6 +73,19 @@ export class GridViewAction< return this.columnsOrder.map(index => ({ index })); } + get visualColumnKeys(): IGridColumnKey[] { + return this.columnKeys.slice().sort((a, b) => { + const aPinned = this.isColumnPinned(a); + const bPinned = this.isColumnPinned(b); + + if (aPinned === bPinned) { + return 0; + } + + return aPinned ? -1 : 1; + }); + } + get rows(): TCell[][] { return this.rowKeys.map(this.mapRow, this); } @@ -81,6 +94,10 @@ export class GridViewAction< return this.columnKeys.map(this.mapColumn, this); } + get visualColumns(): TColumn[] { + return this.visualColumnKeys.map(this.mapColumn, this); + } + get columnsOrder(): number[] { const stored = this.readRefs(COLUMN_ORDER_KEY); if (stored.length === 0) { @@ -124,6 +141,8 @@ export class GridViewAction< rowKeys: computed, columns: computed, columnKeys: computed, + visualColumnKeys: computed, + visualColumns: computed, }); }