diff --git a/packages/datalib/src/GridConfig.ts b/packages/datalib/src/GridConfig.ts index 71ce638f2..6bee44f54 100644 --- a/packages/datalib/src/GridConfig.ts +++ b/packages/datalib/src/GridConfig.ts @@ -5,6 +5,7 @@ export interface GridConfigColumns { hiddenColumns: string[]; expandedColumns: string[]; addedColumns: string[]; + focusedColumn?: string; } export interface GridConfig extends GridConfigColumns { @@ -27,6 +28,7 @@ export function createGridConfig(): GridConfig { addedColumns: [], filters: {}, sort: [], + focusedColumn: null, }; } diff --git a/packages/datalib/src/GridDisplay.ts b/packages/datalib/src/GridDisplay.ts index 533776a05..f98aa1762 100644 --- a/packages/datalib/src/GridDisplay.ts +++ b/packages/datalib/src/GridDisplay.ts @@ -65,6 +65,17 @@ export abstract class GridDisplay { } } + focusColumn(uniqueName: string) { + this.setConfig({ + ...this.config, + focusedColumn: uniqueName, + }); + } + + get focusedColumn() { + return this.config.focusedColumn; + } + get engine() { return this.driver?.engine; } @@ -142,7 +153,7 @@ export abstract class GridDisplay { continue; } } - + if (conditions.length > 0) { select.where = { conditionType: 'and', diff --git a/packages/web/src/datagrid/ColumnManager.js b/packages/web/src/datagrid/ColumnManager.js index 87316a6df..f869bded0 100644 --- a/packages/web/src/datagrid/ColumnManager.js +++ b/packages/web/src/datagrid/ColumnManager.js @@ -54,7 +54,11 @@ function ColumnManagerRow(props) { const { display, column } = props; const [isHover, setIsHover] = React.useState(false); return ( - setIsHover(true)} onMouseLeave={() => setIsHover(false)}> + setIsHover(true)} + onMouseLeave={() => setIsHover(false)} + onClick={() => display.focusColumn(column.uniqueName)} + > - setColumnFilter(e.target.value)} /> + setColumnFilter(e.target.value)} + /> display.hideAllColumns()}>Hide display.showAllColumns()}>Show {display .getColumns(columnFilter) - .filter(column => filterName(columnFilter, column.columnName)) - .map(column => ( + .filter((column) => filterName(columnFilter, column.columnName)) + .map((column) => ( ))} diff --git a/packages/web/src/datagrid/DataGridCore.js b/packages/web/src/datagrid/DataGridCore.js index 6a5983b66..7b2b9b623 100644 --- a/packages/web/src/datagrid/DataGridCore.js +++ b/packages/web/src/datagrid/DataGridCore.js @@ -414,6 +414,16 @@ export default function DataGridCore(props) { [columnSizes, columns] ); + React.useEffect(() => { + if (display && display.focusedColumn) { + const invMap = _.invert(realColumnUniqueNames); + const colIndex = invMap[display.focusedColumn]; + if (colIndex) { + scrollIntoView([currentCell[0], colIndex]); + } + } + }, [display && display.focusedColumn]); + if (!loadedRows || !columns) return null; const insertedRows = getChangeSetInsertedRows(changeSet, display.baseTable); const rowCountNewIncluded = loadedRows.length + insertedRows.length; @@ -468,6 +478,8 @@ export default function DataGridCore(props) { dispatchInsplaceEditor({ type: 'close' }); } } + + if (display.focusedColumn) display.focusColumn(null); } function handleCopy(event) { @@ -1025,6 +1037,7 @@ export default function DataGridCore(props) { setChangeSet={setChangeSet} display={display} row={row} + focusedColumn={display.focusedColumn} /> ))} diff --git a/packages/web/src/datagrid/DataGridRow.js b/packages/web/src/datagrid/DataGridRow.js index a6d4f5cee..d984abd9f 100644 --- a/packages/web/src/datagrid/DataGridRow.js +++ b/packages/web/src/datagrid/DataGridRow.js @@ -18,6 +18,7 @@ const TableBodyCell = styled.td` ${(props) => props.isSelected && !props.isAutofillSelected && + !props.isFocusedColumn && ` background: initial; background-color: deepskyblue; @@ -25,6 +26,7 @@ const TableBodyCell = styled.td` ${(props) => props.isAutofillSelected && + !props.isFocusedColumn && ` background: initial; background-color: magenta; @@ -36,12 +38,14 @@ const TableBodyCell = styled.td` !props.isSelected && !props.isAutofillSelected && !props.isModifiedCell && + !props.isFocusedColumn && ` background-color: #FFFFDB;`} ${(props) => !props.isSelected && !props.isAutofillSelected && !props.isInsertedRow && + !props.isFocusedColumn && props.isModifiedCell && ` background-color: bisque;`} @@ -49,6 +53,7 @@ const TableBodyCell = styled.td` ${(props) => !props.isSelected && !props.isAutofillSelected && + !props.isFocusedColumn && props.isInsertedRow && ` background-color: #DBFFDB;`} @@ -56,11 +61,19 @@ const TableBodyCell = styled.td` ${(props) => !props.isSelected && !props.isAutofillSelected && + !props.isFocusedColumn && props.isDeletedRow && ` background-color: #FFDBFF; `} + ${(props) => + props.isFocusedColumn + && + ` + background-color: lightgoldenrodyellow; + `} + ${(props) => props.isDeletedRow && ` @@ -132,6 +145,7 @@ function DataGridRow({ autofillMarkerCell, selectedCells, autofillSelectedCells, + focusedColumn, }) { // usePropsCompare({ // rowHeight, @@ -181,6 +195,7 @@ function DataGridRow({ isSelected={cellIsSelected(rowIndex, col.colIndex, selectedCells)} isAutofillSelected={cellIsSelected(rowIndex, col.colIndex, autofillSelectedCells)} isModifiedRow={!!matchedChangeSetItem} + isFocusedColumn={col.uniqueName == focusedColumn} isModifiedCell={ matchedChangeSetItem && matchedField == 'updates' && col.uniqueName in matchedChangeSetItem.fields }