feat: Add column freezing in data browser

src/components/BrowserCell/BrowserCell.react.js

@@ -632,11 +632,19 @@ export default class BrowserCell extends Component {
       classes.push(styles.selected);
     }
 
+    const style = { width };
+    if (this.props.stickyLeft !== undefined) {
+      style.position = 'sticky';
+      style.left = this.props.stickyLeft;
+      style.zIndex = 1;
+      style.background = this.props.rowBackground;
+    }
+
     return (
       <span
         ref={this.cellRef}
         className={classes.join(' ')}
-        style={{ width }}
+        style={style}
         onClick={e => {
           if (e.metaKey === true && type === 'Pointer') {
             onPointerCmdClick(value);

src/components/BrowserRow/BrowserRow.react.js

@@ -51,6 +51,8 @@ export default class BrowserRow extends Component {
       onMouseUpRowCheckBox,
       onMouseOverRowCheckBox,
       onMouseOverRow,
+      stickyLefts,
+      freezeIndex,
     } = this.props;
     const attributes = obj.attributes;
     let requiredCols = [];
@@ -69,12 +71,19 @@ export default class BrowserRow extends Component {
     } else if (obj.className === '_User' && obj.get('authData') !== undefined) {
       requiredCols = ['authData'];
     }
+    const rowBackground = row % 2 ? '#F4F5F7' : '#FFFFFF';
+    const rowStyle = { minWidth: rowWidth };
     return (
-      <div className={styles.tableRow} style={{ minWidth: rowWidth }} onMouseOver={() => onMouseOverRow(obj.id)}>
+      <div className={styles.tableRow} style={rowStyle} onMouseOver={() => onMouseOverRow(obj.id)}>
         <span
           className={styles.checkCell}
           onMouseUp={onMouseUpRowCheckBox}
           onMouseOver={() => onMouseOverRowCheckBox(obj.id)}
+          style={
+            freezeIndex >= 0
+              ? { position: 'sticky', left: 0, zIndex: 1, background: rowBackground }
+              : {}
+          }
         >
           <input
             type="checkbox"
@@ -133,6 +142,8 @@ export default class BrowserRow extends Component {
               type={type}
               readonly={isUnique || readOnlyFields.indexOf(name) > -1}
               width={width}
+              stickyLeft={freezeIndex >= j ? stickyLefts[j] : undefined}
+              rowBackground={rowBackground}
               current={currentCol === j}
               onSelect={setCurrent}
               onEditChange={setEditing}

src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js

@@ -13,6 +13,16 @@
 import { DndProvider } from 'react-dnd';
 
 export default class DataBrowserHeaderBar extends React.Component {
+  handleContextMenu = (index, event) => {
+    event.preventDefault();
+    const { freezeIndex, freezeColumns, unfreezeColumns, setContextMenu } = this.props;
+    const items =
+      freezeIndex >= 0 && index <= freezeIndex
+        ? [{ text: 'Unfreeze column', callback: () => unfreezeColumns() }]
+        : [{ text: 'Freeze column', callback: () => freezeColumns(index) }];
+    setContextMenu(event.pageX, event.pageY, items);
+  };
+
   render() {
     const {
       headers,
@@ -26,9 +36,19 @@
       isDataLoaded,
       setSelectedObjectId,
       setCurrent,
+      stickyLefts,
+      handleLefts,
+      freezeIndex,
+      freezeColumns,
+      unfreezeColumns,
+      setContextMenu,
     } = this.props;
     const elements = [
-      <div key="check" className={[styles.wrap, styles.check].join(' ')}>
+      <div
+        key="check"
+        className={[styles.wrap, styles.check].join(' ')}
+        style={freezeIndex >= 0 ? { position: 'sticky', left: 0, zIndex: 11 } : {}}
+      >
         {readonly ? null : (
           <input type="checkbox" checked={selected} onChange={e => selectAll(e.target.checked)} />
         )}
@@ -40,6 +60,11 @@
         return;
       }
       const wrapStyle = { width };
+      if (freezeIndex >= 0 && typeof stickyLefts[i] !== 'undefined' && i <= freezeIndex) {
+        wrapStyle.position = 'sticky';
+        wrapStyle.left = stickyLefts[i];
+        wrapStyle.zIndex = 11;
+      }
       if (i % 2) {
         wrapStyle.background = '#726F85';
       } else {
@@ -63,7 +88,13 @@
       }
 
       elements.push(
-        <div onClick={onClick} key={'header' + i} className={className} style={wrapStyle}>
+        <div
+          onClick={onClick}
+          onContextMenu={e => this.handleContextMenu(i, e)}
+          key={'header' + i}
+          className={className}
+          style={wrapStyle}
+        >
           <DataBrowserHeader
             name={name}
             type={type}
@@ -74,8 +105,20 @@
           />
         </div>
       );
+      const handleStyle = {};
+      if (freezeIndex >= 0 && typeof handleLefts[i] !== 'undefined' && i <= freezeIndex) {
+        handleStyle.position = 'sticky';
+        handleStyle.left = handleLefts[i];
+        handleStyle.zIndex = 11;
+        handleStyle.background = wrapStyle.background;
+      }
       elements.push(
-        <DragHandle key={'handle' + i} className={styles.handle} onDrag={onResize.bind(null, i)} />
+        <DragHandle
+          key={'handle' + i}
+          className={styles.handle}
+          onDrag={onResize.bind(null, i)}
+          style={handleStyle}
+        />
       );
     });
 

src/dashboard/Data/Browser/BrowserTable.react.js

@@ -118,6 +118,19 @@
       preventSort,
       required,
     }));
+
+    let stickyLefts = [];
+    let handleLefts = [];
+    if (typeof this.props.freezeIndex === 'number' && this.props.freezeIndex >= 0) {
+      let left = 30;
+      headers.forEach((h, i) => {
+        stickyLefts[i] = left;
+        handleLefts[i] = left + h.width;
+        if (h.visible) {
+          left += h.width + 8;
+        }
+      });
+    }
     let editor = null;
     let table = <div ref={this.tableRef} />;
     if (this.props.data) {
@@ -170,6 +183,8 @@
                     callCloudFunction={this.props.callCloudFunction}
                     isPanelVisible={this.props.isPanelVisible}
                     setContextMenu={this.props.setContextMenu}
+                    stickyLefts={stickyLefts}
+                    freezeIndex={this.props.freezeIndex}
                     onEditSelectedRow={this.props.onEditSelectedRow}
                     markRequiredFieldRow={this.props.markRequiredFieldRow}
                     showNote={this.props.showNote}
@@ -251,6 +266,8 @@
               callCloudFunction={this.props.callCloudFunction}
               isPanelVisible={this.props.isPanelVisible}
               setContextMenu={this.props.setContextMenu}
+              stickyLefts={stickyLefts}
+              freezeIndex={this.props.freezeIndex}
               onEditSelectedRow={this.props.onEditSelectedRow}
               markRequiredFieldRow={this.props.markRequiredFieldRow}
               showNote={this.props.showNote}
@@ -342,6 +359,8 @@
             setSelectedObjectId={this.props.setSelectedObjectId}
             isPanelVisible={this.props.isPanelVisible}
             setContextMenu={this.props.setContextMenu}
+            stickyLefts={stickyLefts}
+            freezeIndex={this.props.freezeIndex}
             onEditSelectedRow={this.props.onEditSelectedRow}
             showNote={this.props.showNote}
             onRefresh={this.props.onRefresh}
@@ -543,27 +562,33 @@
           'overflow-x': this.props.isResizing ? 'hidden' : 'auto',
         }}
       >
-        <DataBrowserHeaderBar
-          selected={
-            !!this.props.selection &&
-            !!this.props.data &&
-            Object.values(this.props.selection).filter(checked => checked).length ===
-              this.props.data.length
-          }
-          selectAll={checked =>
-            this.props.data.forEach(({ id }) => this.props.selectRow(id, checked))
-          }
-          headers={headers}
-          updateOrdering={this.props.updateOrdering}
-          readonly={!!this.props.relation || !!this.props.isUnique}
-          handleDragDrop={this.props.handleHeaderDragDrop}
-          onResize={this.props.handleResize}
-          onAddColumn={this.props.onAddColumn}
-          preventSchemaEdits={this.context.preventSchemaEdits}
-          isDataLoaded={!!this.props.data}
-          setSelectedObjectId={this.props.setSelectedObjectId}
-          setCurrent={this.props.setCurrent}
-        />
+      <DataBrowserHeaderBar
+        selected={
+          !!this.props.selection &&
+          !!this.props.data &&
+          Object.values(this.props.selection).filter(checked => checked).length ===
+            this.props.data.length
+        }
+        selectAll={checked =>
+          this.props.data.forEach(({ id }) => this.props.selectRow(id, checked))
+        }
+        headers={headers}
+        stickyLefts={stickyLefts}
+        handleLefts={handleLefts}
+        freezeIndex={this.props.freezeIndex}
+        freezeColumns={this.props.freezeColumns}
+        unfreezeColumns={this.props.unfreezeColumns}
+        updateOrdering={this.props.updateOrdering}
+        readonly={!!this.props.relation || !!this.props.isUnique}
+        handleDragDrop={this.props.handleHeaderDragDrop}
+        onResize={this.props.handleResize}
+        onAddColumn={this.props.onAddColumn}
+        preventSchemaEdits={this.context.preventSchemaEdits}
+        isDataLoaded={!!this.props.data}
+        setSelectedObjectId={this.props.setSelectedObjectId}
+        setCurrent={this.props.setCurrent}
+        setContextMenu={this.props.setContextMenu}
+      />
         {table}
       </div>
     );

src/dashboard/Data/Browser/DataBrowser.react.js

@@ -49,6 +49,7 @@ export default class DataBrowser extends React.Component {
       isResizing: false,
       maxWidth: window.innerWidth - 300,
       showAggregatedData: true,
+      frozenColumnIndex: -1,
     };
 
     this.handleResizeDiv = this.handleResizeDiv.bind(this);
@@ -66,6 +67,8 @@ export default class DataBrowser extends React.Component {
     this.setCopyableValue = this.setCopyableValue.bind(this);
     this.setSelectedObjectId = this.setSelectedObjectId.bind(this);
     this.setContextMenu = this.setContextMenu.bind(this);
+    this.freezeColumns = this.freezeColumns.bind(this);
+    this.unfreezeColumns = this.unfreezeColumns.bind(this);
     this.handleCellClick = this.handleCellClick.bind(this);
     this.saveOrderTimeout = null;
   }
@@ -88,6 +91,7 @@ export default class DataBrowser extends React.Component {
         selectedCells: { list: new Set(), rowStart: -1, rowEnd: -1, colStart: -1, colEnd: -1 },
         firstSelectedCell: null,
         selectedData: [],
+        frozenColumnIndex: -1,
       });
     } else if (
       Object.keys(props.columns).length !== Object.keys(this.props.columns).length ||
@@ -100,7 +104,7 @@ export default class DataBrowser extends React.Component {
         props.className,
         columnPreferences[props.className]
       );
-      this.setState({ order });
+      this.setState({ order, frozenColumnIndex: -1 });
     }
     if (props && props.className) {
       if (
@@ -539,6 +543,14 @@ export default class DataBrowser extends React.Component {
     this.setState({ contextMenuX, contextMenuY, contextMenuItems });
   }
 
+  freezeColumns(index) {
+    this.setState({ frozenColumnIndex: index });
+  }
+
+  unfreezeColumns() {
+    this.setState({ frozenColumnIndex: -1 });
+  }
+
   handleColumnsOrder(order, shouldReload) {
     this.setState({ order: [...order] }, () => {
       this.updatePreferences(order, shouldReload);
@@ -643,6 +655,9 @@ export default class DataBrowser extends React.Component {
             setSelectedObjectId={this.setSelectedObjectId}
             callCloudFunction={this.props.callCloudFunction}
             setContextMenu={this.setContextMenu}
+            freezeIndex={this.state.frozenColumnIndex}
+            freezeColumns={this.freezeColumns}
+            unfreezeColumns={this.unfreezeColumns}
             onFilterChange={this.props.onFilterChange}
             onFilterSave={this.props.onFilterSave}
             selectedCells={this.state.selectedCells}