focused column & scroll focused column in view

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,
   };
 }
 

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',

packages/web/src/datagrid/ColumnManager.js

@@ -54,7 +54,11 @@ function ColumnManagerRow(props) {
   const { display, column } = props;
   const [isHover, setIsHover] = React.useState(false);
   return (
-    <Row onMouseEnter={() => setIsHover(true)} onMouseLeave={() => setIsHover(false)}>
+    <Row
+      onMouseEnter={() => setIsHover(true)}
+      onMouseLeave={() => setIsHover(false)}
+      onClick={() => display.focusColumn(column.uniqueName)}
+    >
       <ExpandIcon
         isBlank={!column.foreignKey}
         isExpanded={column.foreignKey && display.isExpandedColumn(column.uniqueName)}
@@ -79,14 +83,19 @@ export default function ColumnManager(props) {
   return (
     <Wrapper>
       <SearchBoxWrapper>
-        <Input type="text" placeholder="Search" value={columnFilter} onChange={e => setColumnFilter(e.target.value)} />
+        <Input
+          type="text"
+          placeholder="Search"
+          value={columnFilter}
+          onChange={(e) => setColumnFilter(e.target.value)}
+        />
         <InlineButton onClick={() => display.hideAllColumns()}>Hide</InlineButton>
         <InlineButton onClick={() => display.showAllColumns()}>Show</InlineButton>
       </SearchBoxWrapper>
       {display
         .getColumns(columnFilter)
-        .filter(column => filterName(columnFilter, column.columnName))
+        .filter((column) => filterName(columnFilter, column.columnName))
-        .map(column => (
+        .map((column) => (
           <ColumnManagerRow key={column.uniqueName} display={display} column={column} />
         ))}
     </Wrapper>

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}
               />
             ))}
         </TableBody>

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
           }